<div class="container">
  <div class="bar">
    <div class="bold"><h3>Bold</h3></div>
    <div class="circle top"></div>
    <div class="circle middle"></div>
    <div class="circle bottom"></div>
    <div class="creamy"><h3>Creamy</h3></div>
  </div>
  <div class="coffee-cups">
    <div class="cup-small doppio">
      <div class="handle"></div>
    </div>
    <div class="cup americano">
      <div class="handle"></div>
    </div>
    <div class="cup-small macchiato">
      <div class="handle"></div>
    </div>
    <div class="cup-small flatwhite">
      <div class="handle"></div>
    </div>
    <div class="cup cappuccino">
      <div class="handle"></div>
    </div>
    <div class="cup-long latte">
      <div class="handle"></div>
      <div class="bottom-handle"></div>
    </div>
  </div>
  <div class="info">
    <div class="first">
      <h1>doppio</h1>
      <p>Double shot of espresso. Straight.</p>
    </div>
    <div class="second">
      <h1>americano</h1>
      <p>Shots of espresso diluted with water</p>
    </div>
    <div class="third">
      <h1>Macchiato</h1>
      <p>Espresso with a dash of frothy foamed milk.</p>
    </div>
    <div class="fourth">
      <h1>Flat White</h1>
      <p>Double shot of espresso with steamed milk.</p>
    </div>
    <div class="fifth">
      <h1>Cappuccino</h1>
      <p>Double shot of espresso topped with an airy thick layer of foamed milk.</p>
    </div>
    <div class="sixth">
      <h1>Caffe Latte</h1>
      <p>A shot of espresso in steamed milk lightly topped with foam.</p>
    </div>
    
  </div>
</div>

<div class="key">
  <div class="circle espresso"><p class="small">espresso</p></div>
  <div class="circle milk"><p class="small">steamed milk</p></div>
  <div class="circle foam"><p class="small">milk foam</p></div>
  <div class="circle water"><p class="small">water</p></div>
</div>

<footer>
  <p>made by <a href="https://codepen.io/juliepark"> julie</a> ♡
</footer>
@import url('https://fonts.googleapis.com/css?family=Lato|Lora');

$dark: #252C32;
$brown: #5B4644;
$coffee: #87624F;
$tan: #DAB7A3;
$white: #F4E8DA;
$water: #859FB5;

$sans: 'Lato', sans-serif;
$serif: 'Lora', serif;

html {
  display: grid;
  min-height: 100%;
}

body {
  background: $dark;
  display: grid;
  font-family: $sans;
  text-transform: uppercase;
}

h3 {
  font-size: 0.8em;
  letter-spacing: 1px;
  font-weight: 100;
}

.container {
  position: relative;
  margin: auto;
  overflow: hidden;
  width: 500px;
  height: 700px;
}

.bar {
  position: absolute;
  height: 85%;
  width: 2px;
  left: 7%;
  top: 7.5%;
  background: $white;
}

.circle {
  width: 10px;
  height: 10px;
  position: absolute;
  border-radius: 50%;
  left: -5px;
  border: 1px solid $white;
  box-shadow: 0px 0px 7px rgba($white, 100%);
}

.top {
  background: $brown;
  top: -1%;
}
.middle {
  background: $coffee;
  top: 38%;
}
.bottom {
  background: $tan;
  bottom: -1%;
}

.bold {
  color: $coffee;
  position: absolute;
  top: -7%;
  left: -17px;
}

.creamy {
  color: $tan;
  position: absolute;
  bottom: -7%;
  left: -27px;
}

.info {
  width: 55%;
  height: 100%;
  position: absolute;
  left: 43%;
}

//coffee cup drawings

.coffee-cups {
  width: 40%;
  height: 100%;
  position: absolute;
  left: 10%;
  top: 3%;
}

.handle {
  position: absolute;
  height: 20px;
  width: 15px;
  background: transparent;
  border-radius: 50% 30%;
  left: 95%;
  top: 10%;
  z-index: -1;
  border: 2px solid $white;
}

.cup {
  position: absolute;
  width: 70px;
  height: 55px;
  background: $dark;
  border: 2px solid $white;
  border-radius: 0 0 5rem 5rem;
  left: 20%;
}

.cup-small {
  position: absolute;
  width: 55px;
  height: 40px;
  background: $dark;
  border: 2px solid $white;
  border-radius: 0 0 5rem 5rem;
  left: 23%;
}

.cup-long {
  position: absolute;
  width: 60px;
  height: 70px;
  background: $dark;
  border: 2px solid $white;
  border-radius: 10% 10% 50% 50%;
  left: 22%;
}

.doppio {
  top: 5%;
  background: linear-gradient(to bottom, $dark 40%, $brown 40%, $coffee 70%);
}

.americano {
  top: 18.5%;
  background: linear-gradient(to bottom, $dark 13%, $water 13%, $water 50%, $coffee 50%);
}

.macchiato {
  top: 35%;
   background: linear-gradient(to bottom, $dark 20%, $white 20%, $white 40%, $coffee 40%);
}

.flatwhite {
  top: 50%;
  background: linear-gradient(to bottom, $dark 10%, $white 10%, $tan 60%, $coffee 65%, $brown 90%);
}

.cappuccino {
  top: 64%;
  background: linear-gradient(to bottom, $white 50%, $tan 50%, $tan 55%, $coffee 60%);
}

.latte {
  top: 81%;
  background: linear-gradient(to bottom, $dark 5%, $white 5%, $white 30%, $tan 30%, $tan 70%, $coffee 70%);
}

//description
h1 {
  color: $white;
  font-size: 1em;
  letter-spacing: 3px;
}

p {
  color: $white;
  font-family: $serif;
  text-transform: none;
  font-size: 0.7em;
  letter-spacing: 0.5px;
  margin-top: -5px;
}

.first, .second, .third, .fourth, .fifth, .sixth {
  position: absolute;
}

.first {
  top: 7%;
}

.second {
  top: 21%;
}

.third {
  top: 36%;
}

.fourth {
  top: 52%;
}

.fifth {
  top: 65%;
}

.sixth {
  top: 83%;
}


// key for the colors
.small {
  margin-left: 20px;
  margin-top: -1px;
  font-family: $sans;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.key {
  position: relative;
  margin: auto;
  width: 500px;
  height: 200px;
}

.espresso {
  background: $brown;
  position: absolute;
  left: 17%;
}

.milk {
  background: $tan;
  position: absolute;
  left: 40%;
}

.foam {
  background: $white;
  position: absolute;
  left: 63%;
}

.water {
  background: $water;
  position: absolute;
  left: 83%;
}

footer {
  position: absolute;
  bottom: 0;
  right: 0;
  text-align: center;
  font-size: 1em;
  text-transform: uppercase;
  padding: 10px;
  color: #EA7996;
  p {
    text-transform: uppercase;
    color: $tan;
    font-family: $sans;
    letter-spacing: 3px;
  }
  a {
    font-family: $sans;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    &:hover {
      color: $water;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.