<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
/*--------------------------------------*/
/* jpolly168 AeVale/OneSixEight */
/* XblackvelvetX */
/* Main Elements,,,,,,, */
/* #wah comes in waves.... like wahhhhhh.*/
/*--------------------------------------*/
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
<div class="card-list">
<div class="card-header">
<div class="card-heading">
<h1>Card List</h1>
</div>
</div>
<div class="item">
<p><a href="http://color">What is material Design??</a></p>
</div>
<div class="item">
<p><a href="http://color">Animation and Elevation</a></p>
</div>
<div class="item">
<p><a href="http://color">Style and Color</a></p>
</div>
<div class="item">
<p><a href="https://www.google.com/design/spec/style/writing.html">Layout</a></p>
</div>
<div class="item">
<p><a href="http://color">Components</a></p>
</div>
<div class="item">
<p><a href="http://color">Patterns</a></p>
</div>
<div class="item">
<p><a href="http://color">Resources</a></p>
</div>
</div>
</div>
</div>
/*--------------------------------------*/
/* jpolly168 AeVale/OneSixEight */
/* XblackvelvetX */
/* Main Elements,,,,,,, */
/* #wah comes in waves.... like wahhhhhh.*/
/*--------------------------------------*/
@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,900);
.card-header {
width: 100%;
color: #2196F3;
padding: 0px;
margin-left: 0;
margin-bottom:.5em;
overflow: hidden;
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font-family:'Roboto,' sans-serif;
font-weight: 800;
background:#2196F3;
}
.card-heading {
display: block;
line-height: 28px;
margin-bottom: 8px;
margin-left: 1em;
border-bottom: 1px #2196F3;
font-family:'Roboto,' sans-serif;
font-weight: 800;
font-size: 24px;
color:#ffffff;
}
.card-list {
margin-left:2%
margin-right:2%;
background: #FFF;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: block;
border: 1px solid #AAA;
padding: 0px;
overflow: hidden;
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
} .item{
background: #FFF;
display: block;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
border: 1px solid #AAA;
border-bottom: 3px solid #BBB;
padding: 0px;
overflow: hidden;
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
font-family: 'Roboto', sans-serif;
-webkit-transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-list .card-item p, a {
margin-left:2em;
font-family:'Roboto,' sans-serif;
font-weight: 200;
padding-top:.2em;
color:#2196F3;
}
