<div class="frame">
	<h1>
		What's in my coffee?
	</h1>

	<div class="grid">

		<div class="wrapper americano">
			<div class="mug">
				<p class="mug__esp">Espresso</p>
				<p class="mug__water">Water</p>
			</div>
			<div class="handle"></div>
			<div class="title">
				<p class="txt-lg">Americano</p>
				<p class="txt-sm">[un-mer-i-kahn-o]</p>
			</div>
		</div>

		<div class="wrapper cappuccino">
			<div class="mug">
				<p class="mug__esp">Espresso</p>
				<p class="mug__milk capp">Steamed Milk</p>
				<p class="mug__foam capp">Milk Foam</p>
			</div>
			<div class="handle"></div>
			<div class="title">
				<p class="txt-lg">Cappuccino</p>
				<p class="txt-sm">[kapp-oo-chee-noh]</p>
			</div>
		</div>

		<div class="wrapper latte">
			<div class="mug">
				<p class="mug__esp">Espresso</p>
				<p class="mug__milk latt">Steamed Milk</p>
				<p class="mug__foam latt">Milk Foam</p>
			</div>
			<div class="handle"></div>
			<div class="title">
				<p class="txt-lg">Caffe Latte</p>
				<p class="txt-sm">[caf-ay lah-tey]</p>
			</div>
		</div>

		<div class="wrapper mocha">
			<div class="mug">
				<p class="mug__esp">Espresso</p>
				<p class="mug__syrup moch">Chocolate Syrup</p>
				<p class="mug__milk moch">Steamed Milk</p>
				<p class="mug__cream moch">Whipped Cream</p>
			</div>
			<div class="handle"></div>
			<div class="title">
				<p class="txt-lg">Caffe Mocha</p>
				<p class="txt-sm">[caf-ay moh-kuh]</p>
			</div>
		</div>

	</div>
</div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:800,600,300);
$color-esp: #4e342e;
$color-mug: #d50000;
$color-bg: #e3f2fd;
$color-foam: #ede0c7;
$color-milk: #fdfff5;

// use only the available space inside the 400x400 frame
.frame {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 400px;
	height: 400px;
	margin-top: -200px;
	margin-left: -200px;
	border-radius: 2px;
	box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
	overflow: hidden;
	background: $color-bg;
	color: #333;
	font-family: "Open Sans", Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1 {
	margin: auto;
	padding: 10px 0 0;
	font-size: 1.7rem;
	height: 40px;
	width: 100%;
	text-align: center;
	color: $color-esp;
}
.grid {
	display: grid;
	grid-template-columns: repeat(2, 200px);
	grid-template-rows: repeat(2, 180px);
	align-items: center;
	padding: 5px;
	padding-left: 20px;
}

.wrapper {
	display: flex;
	flex-flow: column wrap;

	.mug {
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		z-index: 5;
		border: 4px solid $color-mug;
		border-radius: 3px 0 30px 30px;
		height: 100px;
		width: 150px;
		background-color: #fafafa;
		box-shadow: 0 5px 1px 1px rgba(0, 0, 0, 0.15);

		&__esp,
		&__water,
		&__milk,
		&__foam,
		&__cream,
		&__syrup {
			position: absolute;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0;
			left: 0;
			right: 0;
			text-align: center;
			color: #fff;
			font-weight: 600;
		}

		&__esp {
			height: 30%;
			bottom: 0;
			background: $color-esp;
		}

		&__water {
			background: #2196f3;
			height: 70%;
		}

		&__milk {
			background: $color-milk;
			color: $color-esp;
			bottom: 30%;
		}

		&__foam {
			background: $color-foam;
			color: $color-esp;
			top: 0;
		}

		&__milk.capp,
		&__foam.capp {
			height: 35%;
		}

		&__milk.latt {
			height: 50%;
		}

		&__foam.latt {
			height: 20%;
		}

		&__syrup.moch {
			bottom: 30%;
			height: 20%;
			background-color: #795548;
		}

		&__milk.moch {
			height: 30%;
			bottom: 50%;
		}

		&__cream.moch {
			top: 0;
			height: 20%;
			background-color: #f3e2b9;
			color: $color-esp;
		}
	}

	.handle {
		position: relative;
		height: 25px;
		width: 25px;
		border-radius: 50%;
		border: 8px solid $color-mug;
		left: 130px;
		top: -100px;
	}

	.title {
		position: relative;
		bottom: 25px;
		text-align: center;
		width: 150px;

		p {
			padding: 0;
			margin: 0;
		}

		.txt-lg {
			font-weight: 800;
			font-size: 1.2rem;
		}

		.txt-sm {
			font-size: 0.8rem;
		}
	}
}

.americano {
	grid-column: 1;
	grid-row: 1;
}

.cappuccino {
	grid-column: 2;
	grid-row: 1;
}

.latte {
	grid-column: 1;
	grid-row: 2;
}

.mocha {
	grid-column: 2;
	grid-column: 2;
}
View Compiled
// jQuery v3.3.1 is supported

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://100dayscss.com/codepen/js/jquery.min.js