CodePen Embed - CSS Coffee Infographic

<div class="container">
  <div class="grid">
    <div class="item">
      <div class="cup cup-tall espresso">
        <div class="handle"></div>
      </div>
      <div class="info">
        <h1>espresso</h1>
      </div>
    </div>
    <div class="item">
      <div class="cup cup-tall doppio">
        <div class="handle"></div>
      </div>
      <div class="info">
        <h1>doppio</h1>
      </div>
    </div>
    <div class="item">
      <div class="cup cup-tall lungo">
        <div class="handle"></div>
      </div>
      <div class="info">
        <h1>lungo</h1>
      </div>
    </div>
    <div class="item">
      <div class="cup cup-tall ristretto">
        <div class="handle"></div>
      </div>
      <div class="info">
        <h1>ristretto</h1>
      </div>
    </div>
    <div class="item">
      <div class="cup cup-tall macchiato">
        <div class="handle"></div>
      </div>
      <div class="info">
        <h1>macchiato</h1>
      </div>
    </div>
    <div class="item">
      <div class="cup cup-tall corretto">
        <div class="handle"></div>
      </div>
      <div class="info">
        <h1>corretto</h1>
      </div>
    </div>
    <div class="item">
      <div class="cup cup-tall conpanna">
        <div class="handle"></div>
      </div>
      <div class="info">
        <h1>con panna</h1>
      </div>
    </div>
    <div class="item">
      <div class="cup cup-tall romano">
        <div class="handle"></div>
      </div>
      <div class="info">
        <h1>romano</h1>
      </div>
    </div>
    <div class="item">
      <div class="cup cup-grande cappuccino">
        <div class="handle"></div>
      </div>
      <div class="info">
        <h1>cappuccino</h1>
      </div>
    </div>
    <div class="item">
      <div class="cup cup-grande americano">
        <div class="handle"></div>
      </div>
      <div class="info">
        <h1>americano</h1>
      </div>
    </div>
    <div class="item">
      <div class="cup cup-grande cafelatte">
        <div class="handle"></div>
      </div>
      <div class="info">
        <h1>café latte</h1>
      </div>
    </div>
    <div class="item">
      <div class="cup cup-grande flatwhite">
        <div class="handle"></div>
      </div>
      <div class="info">
        <h1>flat white</h1>
      </div>
    </div>
    <div class="item">
      <div class="cup cup-grande marocchino">
        <div class="handle"></div>
      </div>
      <div class="info">
        <h1>marocchino</h1>
      </div>
    </div>
    <div class="item">
      <div class="cup cup-grande mocha">
        <div class="handle"></div>
      </div>
      <div class="info">
        <h1>mocha</h1>
      </div>
    </div>
    <div class="item">
      <div class="cup cup-grande bicerin">
        <div class="handle"></div>
      </div>
      <div class="info">
        <h1>bicerin</h1>
      </div>
    </div>
    <div class="item">
      <div class="cup cup-grande breve">
        <div class="handle"></div>
      </div>
      <div class="info">
        <h1>breve</h1>
      </div>
    </div>
    <div class="item">
      <div class="cup cup-grande rafcoffee">
        <div class="handle"></div>
      </div>
      <div class="info">
        <h1>raf coffee</h1>
      </div>
    </div>
    <div class="item">
      <div class="cup cup-grande meadraf">
        <div class="handle"></div>
      </div>
      <div class="info">
        <h1>mead raf</h1>
      </div>
    </div>
    <div class="item">
      <div class="cup cup-grande viennacoffee">
        <div class="handle"></div>
      </div>
      <div class="info">
        <h1>vienna coffee</h1>
      </div>
    </div>
    <div class="item">
      <div class="cup cup-grande chocolatemilk">
        <div class="handle"></div>
      </div>
      <div class="info">
        <h1>chocolate milk</h1>
      </div>
    </div>
  </div>
</div>

<footer>
  <p>made by <a href="https://codepen.io/crystalrhee">crystal</a></p>
</footer>

$dark: #231f20;
$chocolate: #3a1d07;
$whiteChocolate: #cdb694;
$espresso: #643718;
$liquor: #fd862b;
$honey: #ffb700;
$vanillaSugar: #ffb982;
$steamedMilk: #ffd6b0;
$milkfoam: #ffeeca;
$whippedCream: #ffeeca;
$white: #ffffff;
$water: #b0dfe1;

$sans: "Montserrat", sans-serif;

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

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

.container {
  width: 80%;
  margin: 0 auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 100px;
}

.item {
  position: relative;
}

.cup {
  background: $dark;
  border: 2px solid $white;
  position: absolute;
}

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

.cup-tall {
  width: 55px;
  height: 40px;
  border-radius: 0 0 5rem 5rem;
  margin: 30px;
}

.cup-grande {
  width: 70px;
  height: 50px;
  border-radius: 0 0 5rem 5rem;
  margin: 23px;
}

.espresso {
  background: linear-gradient(to bottom, $dark 60%, $espresso 60%);
}
.doppio {
  background: linear-gradient(to bottom, $dark 35%, $espresso 35%);
}
.lungo {
  background: linear-gradient(
    to bottom,
    $dark 20%,
    $water 20%,
    $water 60%,
    $espresso 60%
  );
}
.ristretto {
  background: linear-gradient(to bottom, $dark 70%, $espresso 70%);
}
.macchiato {
  background: linear-gradient(
    to bottom,
    $dark 20%,
    $milkfoam 20%,
    $milkfoam 60%,
    $espresso 60%
  );
}
.corretto {
  background: linear-gradient(
    to bottom,
    $dark 30%,
    $liquor 30%,
    $liquor 60%,
    $espresso 60%
  );
}
.conpanna {
  background: linear-gradient(
    to bottom,
    $dark 5%,
    $whippedCream 5%,
    $whippedCream 60%,
    $espresso 60%
  );
}
.romano {
  background: linear-gradient(to bottom, $dark 50%, $espresso 50%);
}

.cappuccino {
  background: linear-gradient(
    to bottom,
    $milkfoam 25%,
    $steamedMilk 25%,
    $steamedMilk 50%,
    $espresso 50%
  );
}
.americano {
  background: linear-gradient(
    to bottom,
    $dark 10%,
    $water 10%,
    $water 65%,
    $espresso 65%
  );
}
.cafelatte {
  background: linear-gradient(
    to bottom,
    $milkfoam 25%,
    $steamedMilk 25%,
    $steamedMilk 65%,
    $espresso 65%
  );
}
.flatwhite {
  background: linear-gradient(to bottom, $steamedMilk 65%, $espresso 65%);
}
.marocchino {
  background: linear-gradient(
    to bottom,
    $milkfoam 25%,
    $chocolate 25%,
    $chocolate 65%,
    $espresso 65%
  );
}
.mocha {
  background: linear-gradient(
    to bottom,
    $whippedCream 20%,
    $steamedMilk 20%,
    $steamedMilk 40%,
    $chocolate 40%,
    $chocolate 65%,
    $espresso 65%
  );
}
.bicerin {
  background: linear-gradient(
    to bottom,
    $whippedCream 20%,
    $whiteChocolate 20%,
    $whiteChocolate 40%,
    $chocolate 40%,
    $chocolate 65%,
    $espresso 65%
  );
}
.breve {
  background: linear-gradient(
    to bottom,
    $dark 5%,
    $milkfoam 5%,
    $milkfoam 35%,
    $steamedMilk 35%,
    $steamedMilk 65%,
    $espresso 65%
  );
}
.rafcoffee {
  background: linear-gradient(
    to bottom,
    $dark 5%,
    $milkfoam 5%,
    $milkfoam 35%,
    $vanillaSugar 35%,
    $vanillaSugar 65%,
    $espresso 65%
  );
}
.meadraf {
  background: linear-gradient(
    to bottom,
    $dark 5%,
    $milkfoam 5%,
    $milkfoam 35%,
    $honey 35%,
    $honey 65%,
    $espresso 65%
  );
}
.viennacoffee {
  background: linear-gradient(to bottom, $whippedCream 45%, $espresso 45%);
}
.chocolatemilk {
  background: linear-gradient(to bottom, $steamedMilk 45%, $espresso 45%);
}

.info {
  margin-left: 150px;
  margin-top: 35px;
}

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

footer {
  position: absolute;
  bottom: -10%;
  right: 0;
  text-align: center;
  font-size: 0.75em;
  text-transform: uppercase;
  padding: 10px;
  p {
    text-transform: uppercase;
    color: $steamedMilk;
    font-family: $sans;
    letter-spacing: 3px;
  }
  a {
    font-family: $sans;
    color: $white;
    text-decoration: none;
    &:hover {
      color: $water;
    }
  }
}

View Compiled

/*

Suggestions & comments are welcome!
@crystalrhee

React project: https://github.com/crystalrhee/coffee

Reference: https://www.agferrari.com/wp-content/uploads/2018/02/Coffee-Types-e1550372348187.jpg

*/

This Pen is owned by crystal on CodePen.

See more by @crystalrhee on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.