<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 ---------->
<!--
Nike Card Slider
inspired by my brother https://dribbble.com/shots/2434589-Day-58-Shopping-Cart
made by: Philip Stapelfeldt
website: http://www.capshake.com
copyright: images and logos are copyrighted by nike
-->
<header class="header">
<div class="container">
<div class="header__brand">
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" viewBox="135.5 361.375 200 72" overflow="visible" xml:space="preserve">
<path fill="#ffffff" d="M159.23,431.966c-5.84-0.232-10.618-1.83-14.354-4.798c-0.713-0.567-2.412-2.267-2.982-2.984
c-1.515-1.905-2.545-3.759-3.232-5.816c-2.114-6.332-1.026-14.641,3.112-23.76c3.543-7.807,9.01-15.55,18.548-26.274
c1.405-1.578,5.589-6.193,5.616-6.193c0.01,0-0.218,0.395-0.505,0.876c-2.48,4.154-4.602,9.047-5.758,13.283
c-1.857,6.797-1.633,12.63,0.656,17.153c1.579,3.116,4.286,5.815,7.33,7.307c5.329,2.611,13.131,2.827,22.659,0.632
c0.656-0.152,33.162-8.781,72.236-19.176c39.074-10.396,71.049-18.895,71.054-18.888c0.011,0.009-90.78,38.859-137.911,59.014 c-7.464,3.191-9.46,3.997-12.969,5.229C173.76,430.721,165.725,432.224,159.23,431.966z"></path>
</svg>
</div>
<div class="header__cart">
<div class="header__cartFlag">3</div>
<img src="http://capshake.com/codepen/nike/cart.svg">
</div>
<ul class="header__mainNavigation">
<li><a href="#">Men</a></li>
<li><a href="#">Women</a></li>
<li><a href="#">Boys</a></li>
<li><a href="#">Girls</a></li>
<li><a href="#">Customize</a></li>
</ul>
</div>
</header>
<div class="content">
<div class="content__outer">
<div class="content__inner">
<div class="content__sliderWrapper">
<div class="content__slider">
<div class="content__sliderItemOuter">
<div class="content__sliderItem">
<div class="content__sliderTitle">
<div class="content__sliderPrev">
<img src="http://capshake.com/codepen/nike/arrow_left.svg">
</div>
<div class="content__sliderNext">
<img src="http://capshake.com/codepen/nike/arrow_right.svg">
</div>
Nike Air Max 2015
</div>
<div class="content__sliderContent">
<div class="content__sliderContentImg">
<img src="http://capshake.com/codepen/nike/shoe.png">
</div>
<div class="content__sliderContentCart">
<img src="http://capshake.com/codepen/nike/to_cart.svg">
</div>
<div class="content__sliderContentSize">
<select name="select-size" id="select-size">
<option value="10">10 US</option>
<option value="11">11 US</option>
<option value="12">12 US</option>
</select>
</div>
<div class="content__sliderContentPrice">
<div class="content__sliderContentPriceOld">$ 179.00</div>
<div class="content__sliderContentPriceNew"><span>$</span> 79<span>.00</span></div>
</div>
</div>
</div>
</div>
<div class="content__sliderItemOuter">
<div class="content__sliderItem">
<div class="content__sliderTitle">
<div class="content__sliderPrev">
<img src="http://capshake.com/codepen/nike/arrow_left.svg">
</div>
<div class="content__sliderNext">
<img src="http://capshake.com/codepen/nike/arrow_right.svg">
</div>
Nike Air Max 2015
</div>
<div class="content__sliderContent">
<div class="content__sliderContentImg">
<img src="http://capshake.com/codepen/nike/shoe.png">
</div>
<div class="content__sliderContentCart">
<img src="http://capshake.com/codepen/nike/to_cart.svg">
</div>
<div class="content__sliderContentSize">
<select name="select-size" id="select-size">
<option value="10">10 US</option>
<option value="11">11 US</option>
<option value="12">12 US</option>
</select>
</div>
<div class="content__sliderContentPrice">
<div class="content__sliderContentPriceOld">$ 179.00</div>
<div class="content__sliderContentPriceNew"><span>$</span> 79<span>.00</span></div>
</div>
</div>
</div>
</div>
<div class="content__sliderItemOuter">
<div class="content__sliderItem">
<div class="content__sliderTitle">
<div class="content__sliderPrev">
<img src="http://capshake.com/codepen/nike/arrow_left.svg">
</div>
<div class="content__sliderNext">
<img src="http://capshake.com/codepen/nike/arrow_right.svg">
</div>
Nike Air Max 2015
</div>
<div class="content__sliderContent">
<div class="content__sliderContentImg">
<img src="http://capshake.com/codepen/nike/shoe.png">
</div>
<div class="content__sliderContentCart">
<img src="http://capshake.com/codepen/nike/to_cart.svg">
</div>
<div class="content__sliderContentSize">
<select name="select-size" id="select-size">
<option value="10">10 US</option>
<option value="11">11 US</option>
<option value="12">12 US</option>
</select>
</div>
<div class="content__sliderContentPrice">
<div class="content__sliderContentPriceOld">$ 179.00</div>
<div class="content__sliderContentPriceNew"><span>$</span> 79<span>.00</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
/*
Nike Card Slider
inspired by my brother https://dribbble.com/shots/2434589-Day-58-Shopping-Cart
made by: Philip Stapelfeldt
website: http://www.capshake.com
copyright: images and logos are copyrighted by nike
*/
$(function () {
var slider = '.content__slider';
var sliderOuter = '.content__sliderWrapper';
var sliderItem = '.content__sliderItem';
var sliderItemOuter = '.content__sliderItemOuter';
var sliderNext = '.content__sliderNext';
var sliderPrev = '.content__sliderPrev';
// set width and height
$(window).on('load resize', function () {
$(sliderItemOuter).width($(window).width());
$(sliderOuter).width($(window).width()).height($(sliderItem).height());
$(slider).width($(window).width() * $(sliderItemOuter).length);
});
// next button
$(sliderNext).on('click', function (e) {
// index of slide
var slideIndex = $(e.currentTarget).parents(sliderItemOuter).index() + 1;
// check end
if ((slideIndex) < $(sliderItemOuter).length) {
$(slider).css({
'transform': 'translateX(-' + $(window).width() * (slideIndex) + 'px)',
'-webkit-transform': 'translateX(-' + $(window).width() * (slideIndex) + 'px)'
});
}
});
// previous button
$(sliderPrev).on('click', function (e) {
// index of slide
var slideIndex = $(e.currentTarget).parents(sliderItemOuter).index() - 1;
// check start
if (slideIndex > -1) {
$(slider).css({
'transform': 'translateX(-' + $(window).width() * (slideIndex) + 'px)',
'-webkit-transform': 'translateX(-' + $(window).width() * (slideIndex) + 'px)'
});
}
});
});
</script>
/*
Nike Card Slider
inspired by my brother https://dribbble.com/shots/2434589-Day-58-Shopping-Cart
made by: Philip Stapelfeldt
website: http://www.capshake.com
copyright: images and logos are copyrighted by nike
*/
body,
html {
box-sizing: border-box;
font-size: 62.5%;
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 100px 0;
background-color: #FE4C00;
height: 100%;
background-image: url(http://capshake.com/codepen/nike/bg.png);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.container {
width: 700px;
margin: 0 auto;
}
.header {
background-color: #F54900;
height: 68px;
text-align: center;
position: fixed;
top: 0;
z-index: 2;
width: 100%;
}
.header:after {
content: '';
display: table;
clear: both;
}
.header__brand {
background-color: #E24300;
float: left;
padding: 30px;
height: 74px;
text-align: center;
width: 70px;
box-sizing: border-box;
}
.header__brand svg {
margin: 0 0 0 -12px;
width: 40px;
}
.header__brand svg path {
fill: #fff;
}
.header__cart {
float: right;
color: #fff;
font-size: 2.2rem;
position: relative;
right: 31px;
top: 21px;
box-sizing: border-box;
}
.header__cart img {
width: 22px;
}
.header__cartFlag {
position: absolute;
border-radius: 100%;
width: 21px;
height: 21px;
padding: 2px;
text-align: center;
font-size: 1.4rem;
background-color: #fff;
font-weight: bold;
position: absolute;
right: -22px;
top: 0px;
color: #F54900;
box-sizing: border-box;
}
.header__mainNavigation {
list-style: none;
margin: 0 30px 0 0;
padding: 0;
display: inline-block;
}
.header__mainNavigation li {
display: inline-block;
margin: 0;
padding: 0;
}
.header__mainNavigation li a {
font-size: 1.4rem;
display: block;
color: #ff9365;
text-decoration: none;
text-transform: uppercase;
padding: 25px 20px;
font-weight: bold;
}
.header__mainNavigation li a:hover {
color: #fff;
}
.content {
height: 100%;
top: -75px;
position: relative;
}
.content__outer {
display: table;
height: 100%;
width: 100%;
}
.content__inner {
vertical-align: middle;
height: 100%;
width: 100%;
display: table-cell;
}
.content__slider {
width: 100%;
overflow: hidden;
-webkit-transition: all .3s;
transition: all .3s;
box-sizing: border-box;
}
.content__sliderWrapper {
overflow: hidden;
margin-bottom: 100px;
}
.content__sliderWrapper:after {
content: '';
display: table;
clear: both;
}
.content__sliderTitle {
font-size: 4.8rem;
color: #fff;
text-align: center;
position: relative;
z-index: 1;
width: 87%;
margin: 0 auto 210px;
box-sizing: border-box;
}
.content__sliderTitle:after {
content: '';
border-bottom: 7px solid #fff;
width: 25%;
position: absolute;
left: 50%;
margin-left: -38.5%;
bottom: -8px;
}
.content__sliderPrev, .content__sliderNext {
position: absolute;
width: 20px;
top: -8px;
cursor: pointer;
}
.content__sliderPrev img, .content__sliderNext img {
width: 100%;
}
.content__sliderPrev {
left: 0;
}
.content__sliderNext {
right: 0;
}
.content__sliderItem {
width: 626px;
margin: 0 auto;
}
.content__sliderItemOuter {
float: left;
}
.content__sliderContent {
box-sizing: border-box;
background-color: #fff;
margin: 0 auto;
padding: 130px 40px 30px;
position: relative;
background-image: -webkit-radial-gradient(-13% 40%, #ffc8b0 0%, #ffffff 51%);
background-image: radial-gradient(-13% 40%, #ffc8b0 0%, #ffffff 51%);
box-shadow: 0px 11px 54px 0px rgba(0, 0, 0, 0.33);
}
.content__sliderContent:after {
content: '';
display: table;
clear: both;
}
.content__sliderContentImg {
position: absolute;
z-index: 0;
top: -173px;
left: 0;
right: 10px;
}
.content__sliderContentImg img {
width: 100%;
}
.content__sliderContentSize {
position: relative;
bottom: -18px;
z-index: 1;
float: left;
}
.content__sliderContentSize:before {
content: '\f0d7';
font-family: FontAwesome;
color: #fff;
display: inline-block;
position: absolute;
right: 16px;
top: 12px;
pointer-events: none;
font-size: 1.7rem;
color: #ff6f32;
}
.content__sliderContentSize select {
outline: none;
border-radius: 30px;
font-size: 1.5rem;
font-weight: bold;
border: 1px solid #999;
color: #000;
font-weight: 100;
padding: 11px 40px 9px 20px;
-webkit-appearance: none;
width: 140px;
background-color: transparent;
}
.content__sliderContentPrice {
font-family: 'Open Sans', sans-serif;
float: right;
text-align: right;
margin-right: 20px;
font-weight: 100;
position: relative;
z-index: 1;
}
.content__sliderContentPriceOld {
font-size: 2rem;
text-decoration: line-through;
color: #ff814c;
line-height: 10px;
}
.content__sliderContentPriceNew {
font-size: 4rem;
}
.content__sliderContentPriceNew span:first-child {
font-size: 2.2rem;
}
.content__sliderContentPriceNew span:last-child {
font-size: 2.2rem;
}
.content__sliderContentCart {
box-sizing: border-box;
position: absolute;
right: -27px;
bottom: 38px;
padding: 11px 12px 18px 14px;
width: 54px;
height: 54px;
color: #fff;
text-align: center;
background-color: #343434;
}
.content__sliderContentCart img {
width: 100%;
}
