<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/derekshirk/pen/dNLeZj?depth=everything&order=popularity&page=93&q=shop&show_forks=false" />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@derek_shirk">
<meta name="twitter:creator" content="@derek_shirk">
<meta name="twitter:title" content="Footwear Commerce Card UI Experiment - Derek Shirk CodePen">
<meta name="twitter:description" content="An experiment with a footwear focused e-commerce card layout and UI.">
<meta name="twitter:image" content="https://raw.githubusercontent.com/derekshirk/codepen-template-assets/master/img/shoes/twitter-large-card.png">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.1/css/font-awesome.css'><link rel='stylesheet prefetch' href='https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css'>
<style class="cp-pen-styles">@import url("//fonts.googleapis.com/css?family=Roboto:300,400,500,700,900");
html {
box-sizing: border-box;
}
*, *::after, *::before {
box-sizing: inherit;
}
.color1, .colors > li:nth-child(1), .group-two {
background-color: #d33f4b;
}
.color2, .colors > li:nth-child(2) {
background-color: #545151;
}
.color3, .colors > li:nth-child(3) {
background-color: #5695c3;
}
.color4, .colors > li:nth-child(4) {
background-color: #0F8A5F;
}
.color5, .colors > li:nth-child(5) {
background-color: #235E6F;
}
.shoe--name {
font-family: "Roboto", sans-serif;
font-weight: 600;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.shoe--price {
color: #949494;
}
.group {
min-height: 760px;
height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-image: url(https://bit.ly/2lpu3Uh);
background-blend-mode: multiply;
}
.group .group--container {
max-width: 1200px;
margin: 0 auto;
padding: 0 0 60px 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.group .group--title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
text-transform: uppercase;
margin-bottom: 100px;
}
.group .group--title h1, .group .group--title h2, .group .group--title h3, .group .group--title h4 {
font-family: "Roboto";
font-weight: 700;
font-family: Futura, Futura-Medium, "Futura Medium", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;
font-size: 32px;
margin: 0 0 10px 0;
}
.group .group--title h1:before, .group .group--title h2:before, .group .group--title h3:before, .group .group--title h4:before {
content: '';
display: block;
border-top: 4px solid #232323;
padding-top: 18px;
width: 43%;
margin: 0 auto;
}
.group .group--subtitle {
font-weight: 400;
font-family: "Roboto", sans-serif;
color: #777;
letter-spacing: 0.6px;
}
.card {
width: 315px;
height: 400px;
background: #fff;
margin: 0 15px;
padding: 60px 33px 12px 33px;
box-sizing: border-box;
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.04);
border-radius: 2px;
position: relative;
display: block;
}
.card .shoe img {
max-width: 100%;
width: 250px;
margin-bottom: 120px;
position: relative;
}
.card .shoe--info {
position: absolute;
bottom: -70px;
text-align: center;
width: 100%;
left: 0;
}
.card .shoe--info .shoe--name {
margin-bottom: 8px;
}
.card .shoe--info .shoe--price {
font-weight: 400;
color: #757575;
font-size: 14px;
}
.card .shoe--colors {
padding: 23px 0 0 0;
border-top: 1px solid #f4f4f5;
bottom: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin: 0;
}
.colors {
margin: 0;
padding: 0;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.colors > li {
list-style: none;
width: 20px;
height: 20px;
border-radius: 50%;
display: inline-block;
margin: 0 4px;
box-sizing: border-box;
cursor: pointer;
-webkit-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition: all ease 1s;
transition: all ease 1s;
}
.colors > li:hover {
-webkit-transform: scale(1.09);
transform: scale(1.09);
-webkit-transition: all ease 1s;
transition: all ease 1s;
}
.buy-btn {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 14px;
outline: 0;
background-color: transparent;
box-shadow: none;
border: 2px solid #afafaf;
text-transform: uppercase;
padding: 8px 19px;
display: flex;
align-items: center;
border-radius: 3px;
font-weight: 400;
font-family: "Roboto", sans-serif;
color: #afafaf;
}
.card--style2 {
width: 330px;
height: 360px;
padding: 0;
position: relative;
padding-bottom: 80px;
box-sizing: border-box;
}
.card--style2 .shoe {
padding-bottom: 50px;
position: absolute;
bottom: 0;
will-change: transform;
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.card--style2 .shoe:before {
content: "";
display: block;
background: #fff;
height: 310px;
width: 200px;
position: absolute;
bottom: 50px;
left: 90px;
}
.card--style2 .shoe img {
width: 100%;
position: relative;
}
.card--style2 .shoe--info {
position: relative;
left: 24px;
top: 60px;
z-index: 20;
will-change: transform;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-transform-origin: center center;
transform-origin: center center;
}
.card--style2 .shoe--name:before {
content: "";
padding-top: 13px;
width: 190px;
}
.card--style2 .shoe--colors {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.card--style2 .shoe--colors .colors {
width: auto;
margin: 0 auto;
position: relative;
left: 10px;
will-change: transform;
opacity: 0;
-webkit-transform: translateY(8px);
transform: translateY(8px);
-webkit-transition: all 0.33s ease-in;
transition: all 0.33s ease-in;
-webkit-transition-delay: 0.153s;
transition-delay: 0.153s;
}
.card--style2:hover .shoe--colors .colors {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition: all 0.33s ease-out;
transition: all 0.33s ease-out;
-webkit-transition-delay: 0.253s;
transition-delay: 0.253s;
}
.card--style2:hover .shoe {
-webkit-transform: scale(1.06);
transform: scale(1.06);
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.card--style2:hover .shoe--info {
-webkit-transform: scale(0.95);
transform: scale(0.95);
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.card--style2.card--one .shoe--name:before {
border-top: 5px solid red;
}
.card--style2.card--two .shoe--name:before {
border-top: 5px solid black;
}
.card--style2.card--three .shoe--name:before {
border-top: 5px solid #5695c3;
}
.group-one {
background-color: #eaeaea;
background-image: none;
}
.group-one .group--title h1:before, .group-one .group--title h2:before, .group-one .group--title h3:before, .group-one .group--title h4:before {
border-color: #d33f4b;
}
.group-two .group--title {
color: rgba(250, 250, 250, 0.85);
}
.group-two .group--title h1:before, .group-two .group--title h2:before, .group-two .group--title h3:before, .group-two .group--title h4:before {
border-color: rgba(250, 250, 250, 0.9);
}
.group-two .group--subtitle {
color: rgba(250, 250, 250, 0.85);
}
.group-two .is--active {
-webkit-transform: scale(1.2);
transform: scale(1.2);
-webkit-transform-origin: center center;
transform-origin: center center;
}
.group-two .shoe--info .shoe--name {
color: #fff;
}
.group-two .shoe--info .shoe--price {
color: #fff;
}
.group-three {
background-image: none;
background-color: #f4f4f4;
}
.group-three .shop-all {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: 120px 0 0 0;
}
.group-three .shop-all .button {
border: 3px solid #444;
outline: 0;
background-color: transparent;
border-radius: 2px;
padding: 9px 18px;
font-size: 13px;
font-family: "Roboto", sans-serif;
font-weight: 700;
text-transform: uppercase;
-webkit-transition: all 0.23s ease;
transition: all 0.23s ease;
-webkit-transform: scale(1);
transform: scale(1);
}
.group-three .shop-all .button:hover {
background-color: #232323;
color: #fff;
-webkit-transform: scale(1.05);
transform: scale(1.05);
-webkit-transition: all 0.23s ease;
transition: all 0.23s ease;
}
</style></head><body>
<div class="group group-three">
<div class="group--container">
<div class="group--title" data-aos="zoom-out-up" data-aos-offset="500">
<h2>Air Max Premium</h2>
<div class="group--subtitle">
If the Shoe Fits Hover It.
<!-- If the Shoe Fits Card UI Experiment -->
</div>
</div>
<div class="card--style2 card--one" data-aos="fade-up">
<div class="shoe--info">
<span class="shoe--name">
NIKE AIR MAX PREMIUM
</span>
<span class="shoe--price">
$150
</span>
</div>
<div class="shoe">
<img src="https://bit.ly/2lTBReR" alt="nike air max premium red" />
</div>
<div class="shoe--colors">
<ul class="colors">
<li data-color="#F5624D"></li>
<li data-color="#CC231E" class="active-color" ></li>
<li data-color="#34A65F"></li>
</ul>
</div>
</div>
<div class="card--style2 card--two" data-aos="fade-up">
<div class="shoe--info">
<span class="shoe--name">
NIKE AIR MAX ESSENTIAL
</span>
<span class="shoe--price">
$150
</span>
</div>
<div class="shoe">
<img src="https://bit.ly/2kRrQxP" alt="nike air max essential black" />
</div>
<div class="shoe--colors">
<ul class="colors">
<li data-color="#F5624D"></li>
<li data-color="#CC231E" class="active-color" ></li>
<li data-color="#34A65F"></li>
</ul>
</div>
</div>
<div class="card--style2 card--three" data-aos="fade-up">
<div class="shoe--info">
<span class="shoe--name">
NIKE AIR MAX 90
</span>
<span class="shoe--price">
$150
</span>
</div>
<div class="shoe">
<img src="https://bit.ly/2kRsdIN" alt="nike air max 90" />
</div>
<div class="shoe--colors">
<ul class="colors">
<li data-color="#F5624D"></li>
<li data-color="#CC231E" class="active-color" ></li>
<li data-color="#34A65F"></li>
</ul>
</div>
</div>
<div class="shop-all">
<button class="button">shop collection</button>
</div>
</div>
</div>
<!-- Current 2nd Group -->
<div class="group group-one">
<div class="group--container">
<div class="group--title" data-aos="fade-up">
<h2>Air Max Premium</h2>
<div class="group--subtitle">
A sample card UI layout.
</div>
</div>
<div class="card card--one">
<div class="shoe">
<img src="https://bit.ly/2lTBReR" alt="nike air max premium red" />
</div>
<div class="shoe--colors">
<ul class="colors">
<li data-color="#F5624D"></li>
<li data-color="#CC231E" class="active-color" ></li>
<li data-color="#34A65F"></li>
</ul>
<button class="buy-btn">Add to Cart</button>
</div>
<div class="shoe--info">
<span class="shoe--name">NIKE AIR MAX PREMIUM</span>
<span class="shoe--price"> $150 </span>
</div>
</div>
<div class="card card--two" >
<div class="shoe" >
<img src="https://bit.ly/2kRrQxP" alt="nike air max essential black" />
</div>
<div class="shoe--colors">
<ul class="colors">
<li data-color="#F5624D"></li>
<li data-color="#CC231E" class="active-color" ></li>
<li data-color="#34A65F"></li>
</ul>
<button class="buy-btn">Add to Cart</button>
</div>
<div class="shoe--info">
<span class="shoe--name">NIKE AIR MAX PREMIUM</span>
<span class="shoe--price"> $150 </span>
</div>
</div>
<div class="card" >
<div class="shoe" >
<img src="https://bit.ly/2kRsdIN" alt="nike air max 90 blue and black" />
</div>
<div class="shoe--colors">
<ul class="colors">
<li data-color="#F5624D"></li>
<li data-color="#CC231E" class="active-color" ></li>
<li data-color="#34A65F"></li>
</ul>
<button class="buy-btn">Add to Cart</button>
</div>
<div class="shoe--info">
<span class="shoe--name">NIKE AIR MAX PREMIUM</span>
<span class="shoe--price"> $150 </span>
</div>
</div>
</div>
</div>
<div class="group group-two">
<div class="group--container">
<div class="group--title">
<h2>Air Max Premium</h2>
<div class="group--subtitle">
A sample card UI layout.
</div>
</div>
<div class="card card--one" data-aos="fade-right">
<div class="shoe">
<img src="https://bit.ly/2lTBReR" alt="nike air max premium red" />
</div>
<div class="shoe--colors">
<ul class="colors">
<li data-color="#F5624D"></li>
<li data-color="#CC231E" class="active-color" ></li>
<li data-color="#34A65F"></li>
</ul>
<button class="buy-btn">Add to Cart</button>
</div>
<div class="shoe--info">
<span class="shoe--name">NIKE AIR MAX PREMIUM</span>
<span class="shoe--price"> $150 </span>
</div>
</div>
<div class="card card--two" data-aos="zoom-out">
<div class="shoe" >
<img src="https://bit.ly/2kRrQxP" alt="nike air max premium red" />
</div>
<div class="shoe--colors">
<ul class="colors">
<li data-color="#F5624D"></li>
<li data-color="#CC231E" class="active-color" ></li>
<li data-color="#34A65F"></li>
</ul>
<button class="buy-btn">Add to Cart</button>
</div>
<div class="shoe--info">
<span class="shoe--name">NIKE AIR MAX PREMIUM</span>
<span class="shoe--price"> $150 </span>
</div>
</div>
<div class="card" data-aos="fade-left">
<div class="shoe">
<img src="https://bit.ly/2kRsdIN" alt="nike air max 90" />
<div class="shoe--colors">
<ul class="colors">
<li data-color="#F5624D"></li>
<li data-color="#CC231E" class="active-color" ></li>
<li data-color="#34A65F"></li>
</ul>
<button class="buy-btn">Add to Cart</button>
</div>
<div class="shoe--info">
<span class="shoe--name">NIKE AIR MAX PREMIUM</span>
<span class="shoe--price"> $150 </span>
</div>
</div>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script><script src='https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js'></script>
<script >// Variables
var colorButton = $(".colors li");
colorButton.on("click", function(){
// console.log('clicked');
// Remove class from currently active button
$(".colors > li").removeClass("active-color");
// Add class active to clicked button
$(this).addClass("active-color");
// Get background color of clicked
var newColor = $(this).attr("data-color");
// alert(newColor);
// Change background of everything with class .bg-color
$(".merry-christmas").css("background-color", newColor);
// Change color of everything with class .text-color
// $(".text-color").css("color", newColor);
});
"use strict";!function(t){t.fn.tilt=function(s){var i=function(){this.ticking||(requestAnimationFrame(g.bind(this)),this.ticking=!0)},e=function(){t(this).on("mousemove",r),t(this).on("mouseenter",n),this.settings.reset&&t(this).on("mouseleave",l)},a=function(){var s=this;void 0!==this.timeout&&clearTimeout(this.timeout),t(this).css({transition:this.settings.speed+"ms "+this.settings.easing}),this.settings.glare&&this.glareElement.css({transition:"opacity "+this.settings.speed+"ms "+this.settings.easing}),this.timeout=setTimeout(function(){t(s).css({transition:""}),s.settings.glare&&s.glareElement.css({transition:""})},this.settings.speed)},n=function(s){this.ticking=!1,t(this).css({"will-change":"transform"}),a.call(this),t(this).trigger("tilt.mouseEnter")},h=function(s){return"undefined"==typeof s&&(s={pageX:t(this).offset().left+t(this).outerWidth()/2,pageY:t(this).offset().top+t(this).outerHeight()/2}),{x:s.pageX,y:s.pageY}},r=function(t){this.mousePositions=h(t),i.call(this)},l=function(){a.call(this),this.reset=!0,i.call(this),t(this).trigger("tilt.mouseLeave")},o=function(){var s=t(this).width(),i=t(this).height(),e=t(this).offset().left,a=t(this).offset().top,n=(this.mousePositions.x-e)/s,h=(this.mousePositions.y-a)/i,r=(this.settings.maxTilt/2-n*this.settings.maxTilt).toFixed(2),l=(h*this.settings.maxTilt-this.settings.maxTilt/2).toFixed(2),o=Math.atan2(this.mousePositions.x-(e+s/2),-(this.mousePositions.y-(a+i/2)))*(180/Math.PI);return{tiltX:r,tiltY:l,percentageX:100*n,percentageY:100*h,angle:o}},g=function(){return this.transforms=o.call(this),this.reset?(this.reset=!1,t(this).css("transform","perspective("+this.settings.perspective+"px) rotateX(0deg) rotateY(0deg)"),void(this.settings.glare&&(this.glareElement.css("transform","rotate(180deg) scale(1.75)"),this.glareElement.css("opacity",""+this.settings.maxGlare/4)))):(t(this).css("transform","perspective("+this.settings.perspective+"px) rotateX("+("x"===this.settings.axis?0:this.transforms.tiltY)+"deg) rotateY("+("y"===this.settings.axis?0:this.transforms.tiltX)+"deg) scale3d("+this.settings.scale+","+this.settings.scale+","+this.settings.scale+")"),this.settings.glare&&(this.glareElement.css("transform","rotate("+this.transforms.angle+"deg) scale(1.75)"),this.glareElement.css("opacity",""+this.transforms.percentageY*this.settings.maxGlare/100)),t(this).trigger("change",[this.transforms]),void(this.ticking=!1))},c=function(){if(!this.settings.glarePrerender){t(this).append('<div class="js-tilt-glare"><div class="js-tilt-glare-inner"></div></div>'),this.glareElementWrapper=t(this).find(".js-tilt-glare"),this.glareElement=t(this).find(".js-tilt-glare-inner");var s={position:"absolute",top:"0",left:"0",width:"100%",height:"100%"};this.glareElementWrapper.css(s).css({overflow:"hidden"}),this.glareElement.css(s).css({"background-image":"linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)",opacity:""+this.settings.maxGlare/2,transform:"rotate(180deg) scale(1.75)"})}};return t.fn.tilt.destroy=function(){t(this).each(function(){t(this).find(".js-tilt-glare").remove(),t(this).css({"will-change":"",transform:""}),t(this).off("mousemove mouseenter mouseleave")})},t.fn.tilt.getValues=function(){var s=[];return t(this).each(function(){this.mousePositions=h.call(this),s.push(o.call(this))}),s},t.fn.tilt.reset=function(){t(this).each(function(){var s=this;this.mousePositions=h.call(this),this.settings=t(this).data("settings"),l.call(this),setTimeout(function(){s.reset=!1},this.settings.transition)})},this.each(function(){var i=this;this.settings=t.extend({maxTilt:t(this).is("[data-tilt-max]")?t(this).data("tilt-max"):20,perspective:t(this).is("[data-tilt-perspective]")?t(this).data("tilt-perspective"):300,easing:t(this).is("[data-tilt-easing]")?t(this).data("tilt-easing"):"cubic-bezier(.03,.98,.52,.99)",scale:t(this).is("[data-tilt-scale]")?t(this).data("tilt-scale"):"1",speed:t(this).is("[data-tilt-speed]")?t(this).data("tilt-speed"):"400",transition:!t(this).is("[data-tilt-transition]")||t(this).data("tilt-transition"),axis:t(this).is("[data-tilt-axis]")?t(this).data("tilt-axis"):null,reset:!t(this).is("[data-tilt-reset]")||t(this).data("tilt-reset"),glare:!!t(this).is("[data-tilt-glare]")&&t(this).data("tilt-glare"),maxGlare:t(this).is("[data-tilt-maxglare]")?t(this).data("tilt-maxglare"):1},s),this.init=function(){t(i).data("settings",i.settings),i.settings.glare&&c.call(i),e.call(i)},this.init()})},t("[data-tilt]").tilt()}(jQuery);
// $('.card').tilt({
// // axis: X
// });
// }(jQuery);
AOS.init({
duration: 1200,
})
//# sourceURL=pen.js
</script>
</body></html>
