Types of Coffee

Pure CSS

by akogch

HTML

<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>

SCSS

@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 {
 ...