<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/supah/pen/mPbLqp?depth=everything&order=popularity&page=20&q=translate&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css'>
<style class="cp-pen-styles">/*--------------------
Mixins
---------------------*/
/*--------------------
Body
---------------------*/
*,
*::before,
*::after {
box-sizing: border-box;
}
body,
html {
height: 100%;
font-family: 'Open Sans Condensed', sans-serif;
}
body {
background: -webkit-linear-gradient(75deg, #d33f34 50%, #a61322 50.1%);
background: linear-gradient(15deg, #d33f34 50%, #a61322 50.1%);
}
/*--------------------
Shop Card
---------------------*/
.shop-card {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 350px;
background: #f5f5f5;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
overflow: hidden;
border-radius: 5px;
padding: 25px;
text-align: center;
z-index: 2;
}
.shop-card figure {
margin: 0;
padding: 0;
overflow: hidden;
outline: none !important;
}
.shop-card figure img {
margin: -95px 0 -60px;
width: 100%;
}
.shop-card .title {
font-weight: 900;
text-transform: uppercase;
font-size: 30px;
color: #23211f;
margin-bottom: 5px;
}
.shop-card .desc {
font-size: 17px;
opacity: .8;
margin-bottom: 3px;
}
.shop-card .cta {
padding: 20px 20px 5px;
}
.shop-card .cta::after {
content: '';
display: table;
clear: both;
}
.shop-card .price {
float: left;
color: #FF3100;
font-size: 22px;
font-weight: 900;
padding-top: 2px;
-webkit-transition: color .3s ease-in-out;
transition: color .3s ease-in-out;
margin-top: 4px;
}
.shop-card .btn {
position: relative;
z-index: 1;
float: right;
display: inline-block;
font-size: 13px;
font-weight: 900;
text-transform: uppercase;
color: #FF3100;
padding: 12px 18px;
cursor: pointer;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
line-height: .95;
border: none;
background: none;
outline: none;
border: 1px solid #FF3100;
border-radius: 20px;
overflow: hidden;
}
.shop-card .btn .bg {
width: 101%;
height: 101%;
display: block !important;
z-index: -1;
opacity: 0;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
background: -webkit-linear-gradient(315deg, #a61322, #d33f34);
background: linear-gradient(135deg, #a61322, #d33f34);
}
.shop-card .btn:hover {
color: #fff !important;
border: 1px solid transparent !important;
}
.shop-card .btn:hover .bg {
opacity: 1;
}
/*--------------------
Slick Dots
---------------------*/
.slick-dots {
bottom: -30px;
}
.slick-dots a {
position: relative;
display: block;
width: 16px;
height: 16px;
}
.slick-dots span {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
border-radius: 50%;
}
.slick-dots circle {
fill: none;
stroke-width: 1;
stroke-linecap: round;
stroke-dasharray: 39 39;
stroke-dashoffset: 39;
-webkit-transition: all .9s ease-in-out;
transition: all .9s ease-in-out;
-webkit-transition: stroke-dashoffset 0.5s;
transition: stroke-dashoffset 0.5s;
}
.slick-dots .slick-active circle {
stroke-dashoffset: 0;
}
/*--------------------
Background
--------------------*/
.bg {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background: -webkit-linear-gradient(75deg, #d33f34 50%, #a61322 50.1%);
background: linear-gradient(15deg, #d33f34 50%, #a61322 50.1%);
z-index: 1;
display: none;
}
</style></head><body>
<!--
Follow me on
Dribbble: https://dribbble.com/supahfunk
Twitter: https://twitter.com/supahfunk
Codepen: https://codepen.io/supah/
-->
<div class="shop-card">
<div class="title">
Nike Metcon 2
</div>
<div class="desc">
Men's training shoe
</div>
<div class="slider">
<figure data-color="#E24938, #A30F22">
<img src="http://www.supah.it/dribbble/012/1.jpg" />
</figure>
<figure data-color="#6CD96A, #00986F">
<img src="http://www.supah.it/dribbble/012/2.jpg" />
</figure>
<figure data-color="#4795D1, #006EB8">
<img src="http://www.supah.it/dribbble/012/3.jpg" />
</figure>
<figure data-color="#292a2f, #131519">
<img src="http://www.supah.it/dribbble/012/4.jpg" />
</figure>
</div>
<div class="cta">
<div class="price">$130</div>
<button class="btn">Add to cart<span class="bg"></span></button>
</div>
</div>
<div class="bg"></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://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js '></script>
<script >function background(c1, c2) {
return {
background: '-moz-linear-gradient(15deg, ' + c1 + ' 50%, ' + c2 + ' 50.1%)',
background: '-o-linear-gradient(15deg, ' + c1 + ', ' + c2 + ' 50.1%)',
background: '-webkit-linear-gradient(15deg, ' + c1 + ' 50%, ' + c2 + ')',
background: '-ms-linear-gradient(15deg, ' + c1 + ' 50%, ' + c2 + ' 50.1%)',
background: 'linear-gradient(15deg, ' + c1 + ' 50%,' + c2 + ' 50.1%)'
}
}
function changeBg(c1, c2) {
$('div.bg').css(background(c1, c2)).fadeIn(700, function() {
$('body').css(background(c1, c2));
$('.bg').hide();
})
$('span.bg').css({
background: '-moz-linear-gradient(135deg, ' + c1 + ', ' + c2 + ')',
background: '-o-linear-gradient(135deg, ' + c1 + ', ' + c2 + ')',
background: '-webkit-linear-gradient(135deg, ' + c1 + ', ' + c2 + ')',
background: '-ms-linear-gradient(135deg, ' + c1 + ', ' + c2 + ')',
background: 'linear-gradient(135deg, ' + c1 + ',' + c2 + ')'
});
}
$slider = $('.slider');
$slider.slick({
arrows: false,
dots: true,
infinite: true,
speed: 600,
fade: true,
focusOnSelect: true,
customPaging: function(slider, i) {
var color = $(slider.$slides[i]).data('color').split(',')[1];
return '<a><svg width="100%" height="100%" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6.215" stroke="' + color + '"></circle></svg><span style="background:' + color + '"></span></a>';
}
}).on('beforeChange', function(event, slick, currentSlide, nextSlide) {
colors = $('figure', $slider).eq(nextSlide).data('color').split(',');
color1 = colors[0];
color2 = colors[1];
$('.price, .btn').css({
color: color1
});
changeBg(color1, color2);
$('.btn').css({
borderColor: color2
});
});
//# sourceURL=pen.js
</script>
</body></html>
