<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/mmcshinsky/pen/KhxFm?q=amazone&order=popularity&depth=everything&show_forks=false" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,300,600,700' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<style class="cp-pen-styles">/* Global Styles */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body, html {
height: 100%;
margin: 0;
padding: 0;
font-size: 100%;
background: #F5F5F5;
font-family: 'Titillium Web', sans-serif;
}
.navigation {
float: left;
width: 100%;
}
.navigation a {
float: right;
color: #fff;
text-decoration: none;
padding: 4px 15px;
margin: 10px;
border-radius: 3px;
background: #7db9e8;
background: -moz-linear-gradient(top, #7db9e8 0%, #1e5799 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7db9e8), color-stop(100%,#1e5799));
background: -webkit-linear-gradient(top, #7db9e8 0%,#1e5799 100%);
background: -o-linear-gradient(top, #7db9e8 0%,#1e5799 100%);
background: -ms-linear-gradient(top, #7db9e8 0%,#1e5799 100%);
background: linear-gradient(to bottom, #7db9e8 0%,#1e5799 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#1e5799',GradientType=0 );
}
.navigation a:hover {
background: #1e5799;
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%);
background: -o-linear-gradient(top, #1e5799 0%,#7db9e8 100%);
background: -ms-linear-gradient(top, #1e5799 0%,#7db9e8 100%);
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
}
img {
max-width: 100%;
height: auto;
}
ul.product_list {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}
.product_grid a {
text-decoration: none;
}
.product_item {
display: inline-block;
background: #fff;
border: 1px solid #ccc;
padding: 10px;
position: relative;
overflow: hidden;
}
.product_sale {
position: absolute;
z-index: 99;
right: -28px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
.product_image {
position: relative;
overflow: hidden;
}
.product_image img {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.product_image img:hover {
-o-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-webkit-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}
.product_title {
float: left;
width: 100%;
text-transform: uppercase;
}
.product_title h5 {
margin: auto;
font-size: 1.1em;
font-weight: 500;
line-height: 1;
padding-bottom: 5px;
}
.product_price a {
color: #000;
}
.price_old {
color: #ea2e49;
text-decoration: line-through;
}
.product_price span {
font-size: 1.1em;
line-height: 1;
}
.product_desc p {
margin: 0;
line-height: 1.3;
padding: 10px 0;
}
.product_rating {
float: right;
width: 100px;
height: 20px;
overflow: hidden;
background: url(https://bit.ly/1B4PjyM) top left no-repeat;
background-position: 0 76%;
}
.product_buttons {
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.product_buttons .product_heart:hover {
color: #DF0404;
background: rgba(255, 255, 255, 0.5);
}
.product_buttons .product_compare:hover {
color: rgb(18, 150, 18);
background: rgba(255, 255, 255, 0.5);
}
.product_buttons .add_to_cart:hover {
color: #4DC8D3;;
background: rgba(255, 255, 255, 0.5);
}
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
.product_sale p {
margin: 0;
color: #fff;
background: #ff0000;
padding: 3px 25px;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);
}
.product_values {
float: left;
width: calc(100% - 100px);
padding: 0 10px;
}
.product_rating {
margin-right: 10px;
}
.product_image {
height: 150px;
float: left;
width: 100px;
}
.product_image .product_buttons {
display: none;
}
.product_desc {
overflow: hidden;
float: left;
line-height: 1;
}
.product_values .product_buttons {
position: relative;
text-align: left;
float: left;
margin-top: 7px;
}
.product_values .product_buttons button {
color: #252525;
background: rgba(255, 255, 255, 1);
font-size: 1em;
border-radius: 50%;
width: 40px;
height: 40px;
border: 1px solid #000;
}
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
.product_image {
height: 250px;
width: 175px;
}
.product_values {
width: calc(100% - 175px);
}
}
@media only screen and (min-width: 678px) {
.product_item {
width: 49.5%;
}
.product_image {
height: 150px;
width: 100px;
}
.product_values {
width: calc(100% - 100px);
}
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
.product_image {
height: 250px;
width: 175px;
}
.product_values {
width: calc(100% - 175px);
}
.product_desc {
max-height: 200px;
}
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
.product_item {
width: 33%;
}
.product_desc {
max-height: 131px;
}
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
.product_desc {
max-height: 67px;
}
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
.product_title h5 {
font-weight: bold;
}
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
.product_sale {
display: none;
}
.product_image img {
position: relative;
}
.product_price span {
float: left;
width: 100%;
}
.product_desc {
display: none;
}
.product_buttons {
display: none;
}
}</style></head><body>
<div class="navigation">
<a href="https://codepen.io/mmcshinsky/pen/ogHxi">Link to Part 2</a>
</div>
<div class="product_grid">
<ul class="product_list list">
<li class="product_item">
<div class="product_sale">
<p>On Sale</p>
</div>
<div class="product_image">
<a href="#"><img src="https://bit.ly/1myplK1" alt=""></a>
<div class="product_buttons">
<button class="product_heart"><i class="fa fa-heart"></i></button>
<button class="product_compare"><i class="fa fa-random"></i></button>
<button class="add_to_cart"><i class="fa fa-shopping-cart"></i></button>
<div class="quick_view">
<a href="#"><h6>Quick View</h6></a>
</div>
</div>
</div>
<div class="product_values">
<div class="product_title">
<h5>White Fancy Dress</h5>
</div>
<div class="product_price">
<a href="#"><span class="price_old">$79.99</span> <span class="price_new">$69.99</span></a>
<span class="product_rating"></span>
</div>
<div class="product_desc">
<p class="truncate">Sed sodales odio non metus tincidunt consectetur. Integer non lobortis orci. In hac habitasse platea dictumst. Suspendisse sit amet condimentum arcu. Curabitur venenatis interdum lectus, vitae egestas sem facilisis sit amet. Praesent tortor purus, vulputate at ultricies quis, aliquet sed ante.</p>
</div>
<div class="product_buttons">
<button class="product_heart"><i class="fa fa-heart"></i></button>
<button class="product_compare"><i class="fa fa-random"></i></button>
<button class="add_to_cart"><i class="fa fa-shopping-cart"></i></button>
</div>
</div>
</li>
<li class="product_item">
<div class="product_image">
<a href="#"><img src="https://bit.ly/1onMfJL" alt=""></a>
<div class="product_buttons">
<button class="product_heart"><i class="fa fa-heart"></i></button>
<button class="product_compare"><i class="fa fa-random"></i></button>
<button class="add_to_cart"><i class="fa fa-shopping-cart"></i></button>
<div class="quick_view">
<a href="#"><h6>Quick View</h6></a>
</div>
</div>
</div>
<div class="product_values">
<div class="product_title">
<h5>White Fancy Dress</h5>
</div>
<div class="product_price">
<a href="#"><span class="price_old">$79.99</span> <span class="price_new">$69.99</span></a>
<span class="product_rating"></span>
</div>
<div class="product_desc">
<p class="truncate">Sed sodales odio non metus tincidunt consectetur. Integer non lobortis orci. In hac habitasse platea dictumst. Suspendisse sit amet condimentum arcu. Curabitur venenatis interdum lectus, vitae egestas sem facilisis sit amet. Praesent tortor purus, vulputate at ultricies quis, aliquet sed ante.</p>
</div>
<div class="product_buttons">
<button class="product_heart"><i class="fa fa-heart"></i></button>
<button class="product_compare"><i class="fa fa-random"></i></button>
<button class="add_to_cart"><i class="fa fa-shopping-cart"></i></button>
</div>
</div>
</li>
<li class="product_item">
<div class="product_sale">
<p>On Sale</p>
</div>
<div class="product_image">
<a href="#"><img src="https://bit.ly/VdOzGl" alt=""></a>
<div class="product_buttons">
<button class="product_heart"><i class="fa fa-heart"></i></button>
<button class="product_compare"><i class="fa fa-random"></i></button>
<button class="add_to_cart"><i class="fa fa-shopping-cart"></i></button>
<div class="quick_view">
<a href="#"><h6>Quick View</h6></a>
</div>
</div>
</div>
<div class="product_values">
<div class="product_title">
<h5>White Fancy Dress</h5>
</div>
<div class="product_price">
<a href="#"><span class="price_old">$79.99</span> <span class="price_new">$69.99</span></a>
<span class="product_rating"></span>
</div>
<div class="product_desc">
<p class="truncate">Sed sodales odio non metus tincidunt consectetur. Integer non lobortis orci. In hac habitasse platea dictumst. Suspendisse sit amet condimentum arcu. Curabitur venenatis interdum lectus, vitae egestas sem facilisis sit amet. Praesent tortor purus, vulputate at ultricies quis, aliquet sed ante.</p>
</div>
<div class="product_buttons">
<button class="product_heart"><i class="fa fa-heart"></i></button>
<button class="product_compare"><i class="fa fa-random"></i></button>
<button class="add_to_cart"><i class="fa fa-shopping-cart"></i></button>
</div>
</div>
</li>
<li class="product_item">
<div class="product_image">
<a href="#"><img src="https://bit.ly/1q4760r" alt=""></a>
<div class="product_buttons">
<button class="product_heart"><i class="fa fa-heart"></i></button>
<button class="product_compare"><i class="fa fa-random"></i></button>
<button class="add_to_cart"><i class="fa fa-shopping-cart"></i></button>
<div class="quick_view">
<a href="#"><h6>Quick View</h6></a>
</div>
</div>
</div>
<div class="product_values">
<div class="product_title">
<h5>White Fancy Dress</h5>
</div>
<div class="product_price">
<a href="#"><span class="price_old">$79.99</span> <span class="price_new">$69.99</span></a>
<span class="product_rating"></span>
</div>
<div class="product_desc">
<p class="truncate">Sed sodales odio non metus tincidunt consectetur. Integer non lobortis orci. In hac habitasse platea dictumst. Suspendisse sit amet condimentum arcu. Curabitur venenatis interdum lectus, vitae egestas sem facilisis sit amet. Praesent tortor purus, vulputate at ultricies quis, aliquet sed ante.</p>
</div>
<div class="product_buttons">
<button class="product_heart"><i class="fa fa-heart"></i></button>
<button class="product_compare"><i class="fa fa-random"></i></button>
<button class="add_to_cart"><i class="fa fa-shopping-cart"></i></button>
</div>
</div>
</li>
</ul>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/87118/jQuery.succinct.min.js'></script>
<script >function checkWindowSize() {
if ( jQuery(window).width() >= 1200 ) {
$('.truncate').succinct({
size: 400
});
}
else if ( jQuery(window).width() >= 992 ) {
$('.truncate').succinct({
size: 200
});
}
else if ( jQuery(window).width() >= 768 ) {
$('.truncate').succinct({
size: 80
});
}
else if ( jQuery(window).width() >= 480 ) {
$('.truncate').succinct({
size: 120
});
}
else if ( jQuery(window).width() >= 320 ) {
$('.truncate').succinct({
size: 80
});
}
else {
$('.truncate').succinct({
size: 55
});
}
}
jQuery(document).ready(function(){
jQuery(window).resize(checkWindowSize);
checkWindowSize();
});
//# sourceURL=pen.js
</script>
</body></html>
