<section class="product">
  <div class="details">
    <h1>Yeezy Boost 700 Wave Runner</h1>
    <div class="sizeTable">
      <h3><span>Select&nbsp;your&nbsp;</span>size<span>&nbsp;(US Men)</span></h3>
      <button>6</button>
      <button></button>
      <button>7</button>
      <button></button>
      <button>8</button>
      <button></button>
      <button>9</button>
      <button></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;
}

::-webkit-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');
View Compiled
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.