Scribd
Upload
31 views

Learn Basic CSS by Building A Cafe Menu

Dummy

Uploaded by

zainal prasetyo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
31 views

Learn Basic CSS by Building A Cafe Menu

Dummy

Uploaded by

zainal prasetyo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>Cafe Menu</title>
<link href="styles.css" rel="stylesheet"/>
</head>
<body>
<div class="menu">
<main>
<h1>CAMPER CAFE</h1>
<p class="established">Est. 2020</p>
<hr>
<section>
<h2>Coffee</h2>
<img src="https://cdn.freecodecamp.org/
curriculum/css-cafe/coffee.jpg" alt="coffee icon"/>
<article class="item">
<p class="flavor">French Vanilla</p><p clas
s="price">3.00</p>
</article>
<article class="item">
<p class="flavor">Caramel Macchiato</p><p c
lass="price">3.75</p>
</article>
<article class="item">
<p class="flavor">Pumpkin Spice</p><p clas
s="price">3.50</p>
</article>
<article class="item">
<p class="flavor">Hazelnut</p><p clas
s="price">4.00</p>
</article>
<article class="item">
<p class="flavor">Mocha</p><p clas
s="price">4.50</p>
</article>
</section>
<section>
<h2>Desserts</h2>
<img src="https://cdn.freecodecamp.org/
curriculum/css-cafe/pie.jpg" alt="pie icon"/>
<article class="item">
<p class="dessert">Donut</p><p clas
s="price">1.50</p>
</article>
<article class="item">
<p class="dessert">Cherry Pie</p><p clas
s="price">2.75</p>
</article>
<article class="item">
<p class="dessert">Cheesecake</p><p clas
s="price">3.00</p>
</article>
<article class="item">
<p class="dessert">Cinnamon Roll</p><p clas
s="price">2.50</p>
</article>
</section>
</main>
<hr class="bottom-line">
<footer>
<p>
<a href="https://www.freecodecamp.org" targe
t="_blank">Visit our website</a>
</p>
<p class="address">123 Free Code Camp Drive</p>
</footer>
</div>
</body>
</html>

You might also like