<section class="product">
<div class="details">
<h1>Yeezy Boost 700 Wave Runner</h1>
<div class="sizeTable">
<h3><span>Select your </span>size<span> (US Men)</span></h3>
<button>6</button>
<button>6½</button>
<button>7</button>
<button>7½</button>
<button>8</button>
<button>8½</button>
<button>9</button>
<button>9½</button>
<button>10</button>
<button>10½</button>
<button>11</button>
<button>11½</button>
<button>12</button>
<button>12½</button>
<button>13</button>
</div>
<div class="callsToAction">
<button>Add to Cart</button>
<button>Check Out</button>
</div>
</div>
<div class="gallery">
<img src="https://assets.codepen.io/48941/700.webp" alt="Side profile of the Yeezy 700 Boost sneaker in the Wave Runner color way" />
<div class="price">$365<span>USD</span></div>
</div>
<div class="description">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#0099ff" fill-opacity="1" d="M0,32L26.7,69.3C53.3,107,107,181,160,192C213.3,203,267,149,320,106.7C373.3,64,427,32,480,69.3C533.3,107,587,213,640,224C693.3,235,747,149,800,133.3C853.3,117,907,171,960,176C1013.3,181,1067,139,1120,117.3C1173.3,96,1227,96,1280,90.7C1333.3,85,1387,75,1413,69.3L1440,64L1440,320L1413.3,320C1386.7,320,1333,320,1280,320C1226.7,320,1173,320,1120,320C1066.7,320,1013,320,960,320C906.7,320,853,320,800,320C746.7,320,693,320,640,320C586.7,320,533,320,480,320C426.7,320,373,320,320,320C266.7,320,213,320,160,320C106.7,320,53,320,27,320L0,320Z"></path></svg>
<p>This first colorway of Yeezy Wave Runner 700 from Kanye West was introduced in November 2017, following an initial public opening in the Yeezy Season 5 fashion show previously that year.</p>
<p>The retro-inspired lines of the sneaker worked together with a chunky silhouette reminiscent of a previous age. A mesh base on the quarter panel is completed in gray and a yellow with a teal forefoot.</p>
</div>
</section>
<div class="citations">
<p>Product image and description from <a href="https://www.flightclub.com/yeezy-boost-700-mgsogr-cwhite-cblack-802501">Flight Club</a></p>
<p>Blob inspired by <a href="https://codepen.io/enbee81/pen/LBMKqV">Nils Binder</a></p>
</div>.product {
width:960px;
display:flex;
flex-wrap:wrap;
background:#fff;
border-radius:@br;
padding:40px;
box-shadow:5px 20px 40px fade(#bfbfa2,50%);
border-bottom:1px solid lighten(@pc2,60%);
.gallery {
width:50%;
position:relative;
z-index:1;
&::before {
content:'';
position:absolute;
top:-140px;
right:-120px;
width:480px;
height:480px;
border-radius:
60% 40% 30% 70% e('/') 60% 30% 70% 40%;
background:
radial-gradient(
at top right,
fade(@pc,33%),
fade(@pc,100%)
);
animation:
12s goop ease-in-out infinite both alternate;
@keyframes goop {
0% {
border-radius:
40% 60% 60% 40% e('/') 60% 30% 70% 40%;
transform:rotate(0deg)
}
100% {
border-radius: 40% 60%;
transform:rotate(1turn)
}
}
}
img {
width:140%;
top:-10%;
left:-20%;
transform:
rotate(-22deg)
scalex(-1);
position:relative;
}
.price {
position:absolute;
background:@pc2;
color:white;
font-size:24px;
font-weight:bold;
width:110px;
height:40px;
line-height:40px;
top:106px;
left:-65px;
transform:rotate(0deg);
text-align:right;
border-radius:4px 0 0 4px;
span {
opacity:0.5
}
&::before {
content:'';
position:absolute;
width:0;
height:0;
border-bottom:20px solid transparent;
border-top:20px solid transparent;
border-left:20px solid @pc2;
right:-20px;
}
}
}
.details {
width:50%;
position:relative;
h1 {
margin:0;
font-size:56px;
letter-spacing:-1px;
line-height:0.8;
font-family:'Work Sans', system-ui, sans-serif;
}
p {
width:40ch
}
.sizeTable {
display:flex;
flex-flow:row wrap;
width:40ch;
margin:50px 0 40px;
position:relative;
z-index:2;
h3 {
flex:1 1 100%;
margin:0 0 25px 0px;
text-transform:uppercase;
letter-spacing:2px;
font-size:80%;
line-height:0;
transition:400ms margin 0ms;
span {
display:inline-block;
max-width:200px;
max-height:200px;
opacity:1;
transition:
400ms max-width 0ms,
400ms max-height 0ms,
400ms opacity 400ms;
&:nth-of-type(2) {
color:lighten(@pc,30%)
}
}
}
button {
display:inline;
width:50px;
height:50px;
margin:0 10px 10px 0;
padding:0;
border-radius:50px;
box-shadow:inset 0 0 3px 1px lighten(@pc2,74%);
border:1px solid lighten(@pc2,70%);
background:lighten(@pc2,76%);
text-align:center;
line-height:50px;
opacity:1;
overflow:hidden;
transition:
400ms box-shadow 0ms,
400ms border 0ms,
400ms color 0ms;
&:hover {
box-shadow:inset 0 0 50px 1px @pc2;
border:1px solid @pc2;
color:white
}
}
}
.callsToAction {
display:flex;
position:relative;
z-index:3;
opacity:0;
max-height:0;
top:-60px;
left:60px;
margin-bottom:0;
transition:
400ms top 0ms,
400ms opacity 0ms;
button {
height:50px;
padding:0 20px;
box-shadow:inset 0 0 3px 1px lighten(@pc2,74%);
border:1px solid lighten(@pc2,70%);
background:lighten(@pc2,76%);
border-radius:50px;
margin-right:10px;
transition:
400ms box-shadow 0ms,
400ms border 0ms,
400ms color 0ms;
&:hover {
box-shadow:inset 0 0 70px 1px @pc2;
border:1px solid @pc2;
color:white
}
}
}
}
.description {
display:flex;
flex-wrap:wrap;
justify-content:space-between;
flex:1 1 100%;
background:linear-gradient(
to bottom,
white 30%,
lighten(@pc2,76%) 30%,
lighten(@pc2,70%)
);
margin:0 -40px -40px;
padding:0 40px 40px;
border-radius:0 0 @br @br;
svg {
flex:1 1 100%;
width:calc(100% + 80px);
margin:-80px -40px -40px;
position:relative;
transform:scaley(0.5);
z-index:0;
path {
fill:lighten(@pc2,76%);
}
}
p {
margin:0;
max-width:430px;
flex:1 1 50%;
position:relative;
z-index:1;
}
}
}
//When a size is selected, do this:
.sizeSelected .product .details .sizeTable {
h3 {
margin:0 0 25px 8px;
transition:400ms margin 200ms;
span {
max-width:0;
max-height:0;
opacity:0;
transition:
400ms max-width 400ms,
400ms max-height 400ms,
400ms opacity 0ms;
}
}
button {
margin:0;
border:none;
box-shadow:none;
transform:scale(0);
opacity:0;
display:none
}
button.selectedSize {
box-shadow:inset 0 0 50px 1px @pc;
border:1px solid @pc;
color:white;
transform:scale(1);
opacity:1;
display:block
}
}
.sizeSelected .product .details .callsToAction {
opacity:1;
max-height:200px;
max-width:300px;
top:-90px;
margin-bottom:80px;
transition:
400ms top 800ms,
400ms opacity 800ms;
}
.citations {
position:absolute;
bottom:10px;
left:0;
width:100%;
text-align:center;
p {
text-transform:uppercase;
font-weight:bold;
font-size:80%;
letter-spacing:1px
}
a {
text-decoration:none;
background:black;
color:#fbfbee;
padding:3px 10px 5px;
border-radius:20px;
}
}
button {
font-family: 'Roboto Mono', monospace;
font-size:15px;
font-weight:bold;
text-transform:uppercase;
letter-spacing:0.5px;
cursor:pointer
}
body {
background:
linear-gradient(to bottom right, #fefeff, #dfdfc7);
font-family: 'Roboto Mono', monospace;
height:98.5vh;
display:flex;
align-items:flex-start;
padding-top:10vh;
justify-content:center
}
@media all and (max-width:1280px) {
.product {
transform:scale(0.7)
}
}
@media all and (max-width:960px) {
.product {
transform:scale(0.5)
}
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
::scrollbar {
display:none
}
@br: 20px;
@pc: #d16234;
@pc2: #1d3b43;
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&family=Work+Sans:wght@800&display=swap');sizeOptions = document.querySelectorAll(".sizeTable > button");
sizeOptions.forEach(item => {
item.addEventListener('click', (event) => {
const wasSelected = item.classList.contains('selectedSize');
sizeOptions.forEach(item => {
item.classList.remove('selectedSize');
document.body.classList.remove('sizeSelected');
});
if (!wasSelected) {
item.classList.add('selectedSize');
document.body.classList.add('sizeSelected');
// console.log('Size ' + item.textContent + ' was selected');
}
});
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.