.title Mint Julip
        .amount 50ml
        .ingredient Rum
        .amount 2tsp
        .ingredient Sugar
        .amount 4 sprigs
        .ingredient Mint
        .amount dash
        .ingredient Soda water (optional)
      div Add the mint sprigs, caster sugar and a couple of tablespoons of crushed ice. 
      div Begin 'massaging' the mix together with a spoon. The caster sugar helps to bring out the flavour of the mint. Breaking or crushing the mint makes the taste sour, hence the need to gently fold and stir. 
      div Add 25ml of rum, more crushed ice and continue 'massaging'. Fill with ice, pour in the second 25ml shot of rum and add a dash of soda, if desired.
View Compiled
*, *:before, *:after {
  box-sizing: border-box;
  transition: all 0.5s ease;

body {
  background: linear-gradient(to left, #FF5F6D , #FFC371);
  font-family: sans-serif;
  margin: 0;
  width: 100vw;
  height: 100vh;

#container {
  width: 100%;
  max-width: 400px;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

#container.closed header { cursor: pointer; }
header { cursor: pointer; }

.header {
  width: 100%;
  height: 250px;
  background: center / cover;
  background-image: url(https://3.bp.blogspot.com/-v7vHC8w2AKs/TbbD-X8BhTI/AAAAAAAAAJ4/LCcrwIaMgf0/s1600/Mint+Julep+glass+tools.jpg);

.title {
  position: relative;
  z-index: 1;
  font-size: 2rem;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-top: 0px;

#container.closed .title {
  padding: 40px 20px 10px 20px;
  margin-top: -87px;
  color: white;
  border: none;

.title:before {
  z-index: -1;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
  opacity: 0;

#container.closed .title:before {
  opacity: 1;

article {
  padding: 25px 30px;
  overflow: hidden;
  max-height: 400px;

#container.closed article {
  max-height: 0px;
  padding: 0 30px;

.ingredients {
  margin: 0px;
  padding: 0px;
  margin-bottom: 20px;
  padding-left: 4px;
  font-size: 0.9rem;

.ingredients > li {
  list-style-type: none;
  display: flex;
  margin: 4px 0px;

.ingredients > li > .amount {
  width: 80px;
  color: #1976D2;

.preperation > div {
  margin-bottom: 10px;
function byID(id) {
  return document.getElementById(id);

byID("toggle").onclick = function() {
  if (byID("container").classList.contains("closed")) {
  } else {

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.