<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 ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/paper/bootstrap.min.css" rel="stylesheet">
<div class="container">
<div class="row">
</div>
<!--small cards-->
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-content">
<div class="card-header-blue">
<h1 class="card-heading">Card Header Blue</h1>
</div>
<div class="card-body">
<p class="card-p">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour,
or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there
isn't anything embarrassing hidden in the middle of text.
</p>
</div>
<nav class="nav-tabs">
<ul class="nav nav-pills pull-left">
<li class="card-action"><a href="#">Link</a></li>
<li class="card-action"><a href="#">Link</a></li>
<li class="card-action"><a href="#">Link</a></li>
<li class="card-action"><a href="#">Link</a></li>
</ul>
</nav>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-content">
<div class="card-header-orange">
<h1 class="card-heading">Card Header Orange</h1>
</div>
<div class="card-body">
<p class="card-p">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour,
or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there
isn't anything embarrassing hidden in the middle of text.
</p>
</div>
<nav class="nav-tabs">
<ul class="nav nav-pills pull-left">
<li><a class="card-action-orange" href="#">Link</a></li>
<li><a class="card-action-orange" href="#">Link</a></li>
<li><a class="card-action-orange" href="#">Link</a></li>
<li><a class="card-action-orange" href="#">Link</a></li>
</ul>
</nav>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-content">
<div class="card-header-grey">
<h1 class="card-heading">Card Header Grey</h1>
</div>
<div class="card-body">
<p class="card-p">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour,
or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there
isn't anything embarrassing hidden in the middle of text.
</p>
</div>
<nav class="nav-tabs">
<ul class="nav nav-pills pull-left">
<li ><a class="card-action-grey" href="#">Link</a></li>
<li><a class="card-action-grey" href="#">Link</a></li>
<li><a class="card-action-grey" href="#">Link</a></li>
<li><a class="card-action-grey" href="#">Link</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<!--row two-->
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-content">
<div class="card-header-pink">
<h1 class="card-heading">Card Header Pink</h1>
</div>
<div class="card-body">
<p class="card-p">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour,
or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there
isn't anything embarrassing hidden in the middle of text.
</p>
</div>
<nav class="nav-tabs">
<ul class="nav nav-pills pull-left">
<li><a class="card-action-pink" href="#">Link</a></li>
<li><a class="card-action-pink" href="#">Link</a></li>
<li><a class="card-action-pink" href="#">Link</a></li>
<li><a class="card-action-pink" href="#">Link</a></li>
</ul>
</nav>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-content">
<div class="card-header-red">
<h1 class="card-heading">Card Header Red</h1>
</div>
<div class="card-body">
<p class="card-p">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour,
or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there
isn't anything embarrassing hidden in the middle of text.
</p>
</div>
<nav class="nav-tabs">
<ul class="nav nav-pills pull-left">
<li><a class="card-action-red" href="#">Link</a></li>
<li><a class="card-action-red" href="#">Link</a></li>
<li><a class="card-action-red" href="#">Link</a></li>
<li><a class="card-action-red" href="#">Link</a></li>
</ul>
</nav>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-content">
<div class="card-header">
<h1 class="card-heading">Card Header Blank</h1>
</div>
<div class="card-body">
<p class="card-p">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour,
or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there
isn't anything embarrassing hidden in the middle of text.
</p>
</div>
<nav class="nav-tabs">
<ul class="nav nav-pills pull-left">
<li class="card-action"><a href="#"><span><i class="fa fa-facebook"></i></span></a></li>
<li class="card-action"><a href="#"><span><i class="fa fa-google-plus"></i></span></a></li>
<li class="card-action"><a href="#"><span><i class="fa fa-share-alt"></i></span></a></li>
<li class="card-action"><a href="#"><span><i class="fa fa-plus"></i></span></a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
/*--------------------------------------*/
/* jpolly168 AeVale/OneSixEight */
/* XblackvelvetX */
/* Main Elements,,,,,,, */
/* #wah comes int waves....wahhhhhh.*/
/*--------------------------------------*/
@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,900);
body {
background-color: #f44336;
transition: background-color 300ms;
font-family: 'Roboto', sans-serif;
background:url('http://40.media.tumblr.com/6e138b33e7e2fadf3ff47d02fd28d74a/tumblr_nscw8gfVlY1uc3lv1o1_1280.jpg');
background-repeat:none;
background-size:cover;
}
.avatar {
width: 200px;
height: 200px;
margin-left: 2em;
margin-top:2em;
border-radius: 200px;
float:center;
}
.jumbotron{
background-color:#ffffff;
border:1px solid #AAA;
border-bottom:3px solid #BBB;
padding:0px;
margin-top:4em;
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);
}
.header{
background: #607D8B;
}
.blue h1, h2, h3 {
color: #2196F3;
}
.headline {
color: #FFFFFF;
margin: 1em;
}
.card {
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;
margin-top:5em;
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-body{
margin:1em;
}
.pull-left {
float: left;
}
.pull-none {
float: none !important;
}
.pull-right {
float: right;
}
.card-header{
width:100%;
color:#2196F3;
border-bottom:3px solid #BBB;
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;
padding:0px;
margin-top:0px;
overflow:hidden;
-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-header-blue{
background-color:#2196F3;
color:#FFFFFF;
border-bottom:3px solid #BBB;
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;
padding:0px;
margin-top:0px;
overflow:hidden;
-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-header-red{
background-color:#F44336;
color:#FFFFFF;
border-bottom:3px solid #BBB;
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;
padding:0px;
margin-top:0px;
overflow:hidden;
-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-header-grey{
background-color:#424242;
color:#FFFFFF;
border-bottom:3px solid #BBB;
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;
padding:0px;
margin-top:0px;
overflow:hidden;
-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-header-orange{
background-color:#E65100;
color:#FFFFFF;
border-bottom:3px solid #BBB;
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;
padding:0px;
margin-top:0px;
overflow:hidden;
-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-header-pink{
background-color:#E91E63;
color:#FFFFFF;
border-bottom:3px solid #BBB;
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;
padding:0px;
margin-top:0px;
overflow:hidden;
-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-heading {
display: block;
font-size: 24px;
line-height: 28px;
margin-bottom: 24px;
margin-left:1em;
border-bottom: 1px #2196F3;
color:#fff;
}
.card-footer{
border-top:1px solid #000;
}
.btn:hover:not(.btn-link):not(.btn-flat) {
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
}
.btn:active:not(.btn-link):not(.btn-flat) {
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
}
.btn:not(.btn-link):not(.btn-flat),
.btn-default:not(.btn-link):not(.btn-flat) {
background-color: transparent;
}
.btn-grey-mat{
background-color:#607D8B;
color:#ffffff;
solid 1px;
margin:10px;
}
.card-action-pink{
color:#E91E63;
}
.card-action-red{
color:#F44336;
}
.card-action-grey{
color:#424242;
}
.card-action-pink{
color:#E91E63;
}
.card-action-orange{
color:#E65100;
}
.img-fill {
max-height: 100%;
max-width: 100% display :inline-block;
margin: 1em;
}
.card-image {
overflow: hidden;
position: relative;
margin-bottom: 1em;
}
.card-image:first-child {
border-radius: 2px 2px 0 0;
}
.card-image:last-child {
border-radius: 0 0 2px 2px;
}
.card-image img {
display: block;
height: auto;
width: 100%;
}
.card-image-text {
background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.5));
background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.5));
color: #ffffff;
font-size: 20px;
line-height: 28px;
margin: 0;
padding: 12px 16px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
/**OVERFLOW MENU**/
/**MENU SETTINGS POPUP**/
.menu {
display: none;
background:#607D8B;
width: 100%;
padding: 30px 10px 50px;
margin: 0 auto;
text-align: center;
background-color: #fff;
}
.menu ul {
margin-bottom: 0;
}
.menu a {
color: #000;
text-transform: uppercase;
opacity: 0.8;
}
.menu a:hover {
text-decoration: none;
opacity: 1;
}
