<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 ---------->
<section>
<div class="container-fluid">
<div class="row">
<div class="list-group">
<a href="" class="list-group-item active blue-bg">
<div class="row">
<div class="col-sm-4"><span class="glyphicon glyphicon-cloud pull-right" aria-hidden="true"></span></div>
<div class="col-sm-4">
<h4>
PRODUCT NUMBER ONE
</h4>
<p>Product Description</p>
</div>
</div>
</a>
<div class="white-bg">
<button class="btn button-default custom-button" href="">BUY NOW</button>
</div>
</div>
<div class="list-group ">
<a href="" class="list-group-item active purple-bg">
<div class="row purple-bg">
<div class="col-sm-4"><span class="glyphicon glyphicon-music pull-right" aria-hidden="true"></span></div>
<div class="col-sm-4">
<h4>
PRODUCT NUMBER ONE
</h4>
<p>Product Description</p>
</div>
</div>
</a>
<div class="white-bg">
<button class="btn button-default custom-button" href="">BUY NOW</button>
</div>
</div>
<div class="list-group">
<a href="" class="list-group-item active pink-bg">
<div class="row">
<div class="col-sm-4"><span class="glyphicon glyphicon-gift pull-right" aria-hidden="true"></span></div>
<div class="col-sm-4">
<h4>
PRODUCT NUMBER ONE
</h4>
<p>Product Description</p>
</div>
</div>
</a>
<div class="white-bg">
<button class="btn button-default custom-button" href="">BUY NOW</button>
</div>
</div>
</div>
</div>
</section>
@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Inconsolata|Nunito+Sans|Nunito:800|Pacifico');
html {
font-family: 'Nunito Sans', sans-serif;
font-family: 'Pacifico', cursive;
font-family: 'Inconsolata', monospace;
font-family: 'Nunito', sans-serif;
}
h4 {
font-family: 'Nunito Sans', sans-serif;
}
a {
border-color: transparent;
background-color: transparent;
}
p {
font-family: 'Pacifico', cursive;
}
.list-group {
display: inline-block;
margin: 1em;
width: 95%;
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
}
.list-group-item {
margin: auto;
display: block;
width: 100%;
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
z-index: 2;
color: #fff;
background-color: transparent;
border-color: transparent;
}
.purple-bg {
background: #6a3093;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #a044ff, #6a3093);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #a044ff, #6a3093);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.blue-bg {
background: #00d2ff;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #00d2ff, #928dab);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #00d2ff, #928dab);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.pink-bg {
background: #ff00cc;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #ff00cc, #333399);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #ff00cc, #333399);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.white-bg {
background-color: rgb(255, 255, 255);
padding: 2em 0;
width: 100%;
margin: auto;
}
.glyphicon-cloud {
font-size: 30px;
margin-top: 2px;
margin-left: 70%;
z-index: 10;
padding: 15px;
position: absolute;
color: #e1f5fe;
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
}
.glyphicon-music {
font-size: 30px;
margin-top: 2px;
margin-left: 70%;
z-index: 10;
padding: 15px;
position: absolute;
color: #ea80fc;
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
}
.glyphicon-gift {
font-size: 30px;
margin-top: 2px;
margin-left: 70%;
z-index: 10;
padding: 15px;
position: absolute;
color: #651fff;
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
}
.custom-button {
font-family: 'Nunito', sans-serif;
font-size: 1.3em;
font-weight: 800;
background: #f7971e;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #f7971e, #ffd200);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #f7971e, #ffd200);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
margin-left: 50%;
margin-top: -32px;
width: 35%;
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
}
.custom-button:hover {
position: relative;
cursor: pointer;
display: inline-block;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
vertical-align: middle;
transform: scale(1.1);
transition: .3s ease-out;
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 480px) {
.row {
padding-bottom: 0px !important;
}
.glyphicon-cloud {
font-size: 30px;
margin-top: 2px;
margin-left: 70%;
z-index: 10;
padding: 15px;
position: absolute;
color: #e1f5fe;
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
}
.glyphicon-music {
font-size: 30px;
margin-top: 2px;
margin-left: 70%;
z-index: 10;
padding: 15px;
position: absolute;
color: #ea80fc;
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
}
.glyphicon-gift {
font-size: 30px;
margin-top: 2px;
margin-left: 70%;
z-index: 10;
padding: 15px;
position: absolute;
color: #651fff;
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
}
.custom-button {
font-family: 'Nunito', sans-serif;
font-size: 1.3em;
font-weight: 800;
background: #f7971e;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #f7971e, #ffd200);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #f7971e, #ffd200);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
margin-left: 60%;
margin-top: -30px;
width: 30%;
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
}
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.row {
padding-bottom: 0px !important;
}
.list-group {
display: inline-block;
margin: 0 auto;
width: 33%;
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
}
.list-group-item {
display: block;
width: 100%;
padding: 10px 15px;
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
z-index: 2;
color: #fff;
background-color: transparent;
border-color: transparent;
}
.purple-bg {
background-color: #673ab7;
}
.blue-bg {
background-color: #039be5;
}
.pink-bg {
background-color: #f06292;
}
.white-bg {
background-color: rgb(255, 255, 255);
padding: 2em 0;
width: 100%;
}
.glyphicon-cloud {
font-size: 30px;
margin-top: 10px;
margin-left: 10px;
z-index: 10;
padding: 15px;
position: absolute;
color: #e1f5fe;
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
}
.glyphicon-music {
font-size: 30px;
margin-top: 10px;
margin-left: 10px;
z-index: 10;
padding: 15px;
position: absolute;
color: #ea80fc;
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
}
.glyphicon-gift {
font-size: 30px;
margin-top: 10px;
margin-left: 10px;
z-index: 10;
padding: 15px;
position: absolute;
color: #651fff;
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
}
.custom-button {
font-family: 'Nunito', sans-serif;
font-size: 1em;
font-weight: 800;
background: #f7971e;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #f7971e, #ffd200);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #f7971e, #ffd200);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
margin-left: 125px;
margin-top: -30px;
width: 100px;
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
}
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
div.row {
padding-bottom: 0px!important;
}
.list-group {
display: inline-block;
margin: 0 auto;
width: 33%;
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
}
.list-group-item {
display: inline-block;
width: 100%;
padding: 0 15px;
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
z-index: 2;
color: #fff;
background-color: transparent;
border-color: transparent;
}
.purple-bg {
background-color: #673ab7;
}
.blue-bg {
background-color: #039be5;
}
.pink-bg {
background-color: #f06292;
}
.white-bg {
background-color: rgb(255, 255, 255);
width: 100%;
}
.glyphicon-cloud {
font-size: 60px;
margin-top: 10px;
margin-left: 10px;
z-index: 10;
padding: 15px;
position: absolute;
color: #e1f5fe;
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
}
.glyphicon-music {
font-size: 60px!important;
margin-top: 10px;
margin-left: 10px;
z-index: 10;
padding: 15px;
position: absolute;
color: #ea80fc;
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
}
.glyphicon-gift {
font-size: 60px!important;
margin-top: 10px;
margin-left: 10px;
z-index: 10;
padding: 15px;
position: absolute;
color: #651fff;
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
}
.custom-button {
font-family: 'Nunito', sans-serif;
font-size: 1.25em;
font-weight: 800;
background: #f7971e;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #f7971e, #ffd200);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #f7971e, #ffd200);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
margin-left: 200px;
margin-top: -30px;
width: 120px;
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
}
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
div.row {
padding-bottom: 0px!important;
}
.list-group {
display: inline-block;
margin: 0 auto;
width: 33%;
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
}
.list-group-item {
display: inline-block;
width: 100%;
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
z-index: 2;
color: #fff;
background-color: transparent;
border-color: transparent;
}
.purple-bg {
background-color: #673ab7 !important;
}
.blue-bg {
background-color: #039be5 !important;
}
.pink-bg {
background-color: #f06292 !important;
}
.white-bg {
background-color: rgb(255, 255, 255);
width: 100%;
}
.glyphicon-cloud {
font-size: 60px!important;
margin-top: 7px;
margin-left: 10px;
z-index: 10;
padding: 15px;
position: absolute;
color: #e1f5fe;
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
}
.glyphicon-music {
font-size: 60px!important;
margin-top: 7px;
margin-left: 10px;
z-index: 10;
padding: 15px;
position: absolute;
color: #ea80fc;
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
}
.glyphicon-gift {
font-size: 60px!important;
margin-top: 7px;
margin-left: 10px;
z-index: 10;
padding: 15px;
position: absolute;
color: #651fff;
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
}
.custom-button {
font-family: 'Nunito', sans-serif;
font-size: 1.5em;
font-weight: 800;
background: #f7971e;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #f7971e, #ffd200);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #f7971e, #ffd200);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
margin-left: 200px;
margin-top: -30px;
width: 130px;
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
}
}
