<section>
	<article>
		<h1>The Cascade Cafe</h1>
		<address>
			<svg viewBox="0 0 384 512" width="15" title="map-marker-alt">
				<path d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z" />
			</svg>
			<p>123 Main Street &middot; Smalltown, PA</p>
			<svg viewBox="0 0 512 512" width="15" title="phone-alt">
				<path d="M497.39 361.8l-112-48a24 24 0 0 0-28 6.9l-49.6 60.6A370.66 370.66 0 0 1 130.6 204.11l60.6-49.6a23.94 23.94 0 0 0 6.9-28l-48-112A24.16 24.16 0 0 0 122.6.61l-104 24A24 24 0 0 0 0 48c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.29 24.29 0 0 0-14.01-27.6z" />
			</svg>
			<a href="4125550100">412-555-0100</a>
		</address>
		<table class="hours">
			<thead>
				<tr>
					<th colspan="2">Hours</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Mon. - Thurs.</td>
					<td>6 a.m. - 9 p.m.</td>
				</tr>
				<tr>
					<td>Fri. - Sat.</td>
					<td>6 a.m. - 11 p.m.</td>
				</tr>
				<tr>
					<td>Sunday</td>
					<td>8 a.m. - 2 p.m.</td>
				</tr>
			</tbody>
		</table>
	</article>
</section>

<section>
	<article>
		<p class="prices"><span>Small: $2</span> <span>Large: $4</span></p>
		<dl>
			<dt>House Blend</dt>
			<dd class="description">
				<p>Smoky, strong, and assertive, just like us.</p>
			</dd>
			<dt>Organic French Roast</dt>
			<dd class="description">
				<p>Smooth and mellow with hints of molasses.</p>
			</dd>
			<dt>Organic Decaf</dt>
			<dd class="description">
				<p>Full bodied and rich, we promise you won't miss the caffiene.</p>
			</dd>
		</dl>
		<h2>Coffee</h2>
	</article>
</section>

<section>
	<article>
		<p class="prices"><span>Small: $3</span> <span>Large: $5</span></p>
		<dl>
			<dt>Machiatto </dt>
			<dd class="description">
				<p>Espressso and steamed milk, served in a demitasse cup. <span class="note">(Size Small Only)</span></p>
			</dd>
			<dt>Latte</dt>
			<dd class="description">
				<p>Espresso with steamed milk, and sometimes a little art on top. </p>
			</dd>
			<dt>Mocha</dt>
			<dd class="description">
				<p>Espresso with steamed chocolate milk and whipped cream. Also available with white chocolate milk.</p>
			</dd>
			<dt>Americano</dt>
			<dd class="description">
				<p>1 shot espresso, two shots hot water.</p>
			</dd>
		</dl>
		<h2>Espresso Drinks</ßh2>
	</article>
</section>

<section>
	<article>
		<p class="tea-label">Served to brave people in our notorious antique tea cups.</p>
		<p class="prices"><span>Per Cup: $2</span> <span class="note">$200 if you break the cup</span></p>
		<dl>
			<dt>Earl Grey </dt>
			<dd class="description">
				<p>Black tea fragranced with bergamot.</p>
			</dd>
			<dt>Ginger Hibiscus</dt>
			<dd class="description">
				<p>Floral, tart, and spicy. Caffeine free.</p>
			</dd>
			<dt>Cascade Green</dt>
			<dd class="description">
				<p>A blend of green teas hand selected by our master teamaker.</p>
			</dd>
			<dt>Chamomile</dt>
			<dd class="description">
				<p>Soothing and slightly sweet. Try it with honey! Caffeine free.</p>
			</dd>
		</dl>
		<h2>Tea</h2>
	</article>
</section>

<section>
	<article>
		<p class="prices"><span>Cookies: $2</span> <span>Muffins &amp; Pastries: $3</span></p>
		<dl>
			<dt>Mallory's Famous Snickerdoodles </dt>
			<dd class="description">
				<p>Creamy cinnamony goodness made from scratch with our founder Mallory's prizewinning recipe.</p>
			</dd>
			<dt>Oatmeal Cookie</dt>
			<dd class="description">
				<p>Packed with rolled oats, raisins, and cranberries, these monster cookies are (almost) good for ya!</p>
			</dd>
			<dt>Mixed Berry Muffins</dt>
			<dd class="description">
				<p>Filled with the best berries of the season and topped with a crumb crust. </p>
			</dd>
			<dt>Croissant</dt>
			<dd class="description">
				<p>Our oversized croissants are buttery, flaky, and usually all sold out by 7 a.m.</p>
			</dd>
		</dl>
		<h2>From the Bakery</h2>
	</article>
</section>
@import url("https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Righteous&family=Sigmar+One&family=Viaoda+Libre&display=swap");

* {
	padding: 0;
	margin: 0;
}

body {
	background-image: linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0.1),
			rgba(255, 255, 255, 0.2)
		),
		url("https://assets.codepen.io/t-1/nathan-dumlao-6VhPY27jdps-unsplash.jpg");
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
}

section {
	width: 100vw;
	height: 100vh;
	padding: 3rem;
	box-sizing: border-box;
	display: grid;
	place-items: center;
}

article {
	background-color: rgba(255, 255, 255, 0.4);
	width: 100%;
	max-width: 480px;
	height: 100%;
	padding: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: relative;
	box-sizing: border-box;
	box-shadow: 0 1rem 2rem rgba(255, 255, 255, 0.8) inset,
		0 -1rem 3rem rgba(0, 0, 0, 0.6) inset, 0 1rem 3rem rgba(0, 0, 0, 0.5);
	border-radius: 1.5rem;
	backdrop-filter: blur(20px);
}

h1,
h2,
address,
table,
dl,
.prices {
	box-shadow: 0 1rem 2rem rgba(255, 255, 255, 0.2) inset,
		0 -1rem 2rem rgba(0, 0, 0, 0.5) inset, 0 1rem 3rem rgba(0, 0, 0, 0.5);
}

h1 {
	color: #ffbd17;
	font-family: "Sigmar One", cursive;
	font-size: 2.7rem;
	text-align: center;
	background-color: #db3535;
	padding: 2rem;
	margin-bottom: 2rem;
	border-radius: 1.5rem;
	transform: skewY(-2deg);
}

address {
	color: #9c4900;
	font-family: "Righteous", cursive;
	background-color: #ffc04a;
	padding: 1.5rem 2rem;
	margin-bottom: 2rem;
	border-radius: 1.5rem;
	transform: skewY(1deg);
}

address svg {
	fill: #9c4900;
}

address p {
	padding: 0.75rem 0;
}

address a {
	text-decoration: none;
	color: #006aff;
	display: inline-block;
	transition: all 128ms ease-out;
}

address a:hover {
	text-shadow: 0 0 2vmin #c4ddff;
	transform: scale(1.2);
}

table {
	color: #efefef;
	background-color: #242424;
	font-family: "Righteous", cursive;
	padding: 0.5rem 1rem;
	border-radius: 1.5rem;
	transform: rotate(-1deg) skew(-1deg);
}

table td {
	padding: 0.5rem;
	text-shadow: 0 -1px #000000;
}

h2 {
	color: #ffbd17;
	font-family: "Alfa Slab One", cursive;
	font-size: 2.2rem;
	text-align: center;
	background-color: #db3535;
	width: 50%;
	padding: 1.5rem 3rem;
	position: absolute;
	top: 0;
	left: 50%;
	border-radius: 1.5rem;
	transform: translateX(-50%) translateY(-50%) skewX(-2deg) rotate(-2deg);
}

dl {
	color: #9c4900;
	font-family: "Righteous", cursive;
	background-color: #ffc04a;
	padding: 2rem 1.5rem;
	border-radius: 1.5rem;
	transform: rotate(-1deg) skewY(-1deg);
}

dl dt {
	font-size: 1.2rem;
	margin-bottom: 0.5rem;
}

dl dd {
	font-size: 0.9rem;
	margin-bottom: 1rem;
}

dl dd:last-child {
	margin-bottom: 0;
}

.prices {
	color: #ffffff;
	font-family: "Righteous", cursive;
	background-color: #1288ff;
	width: 50%;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	border-radius: 1.5rem;
	transform: rotate(2deg);
}

.prices span {
	margin-bottom: 1.5rem;
}

.prices span:last-child {
	margin-bottom: 0;
}

.tea-label {
	font-family: "Viaoda Libre", cursive;
	font-size: 1.3rem;
	text-align: center;
	padding: 1rem 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.