<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Camper Cafe Menu</title> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="menu"> <header> <h1>CAMPER CAFE</h1> <p class="established">Est. 2020</p> </header> <hr> <main> <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 class="price">3.00</p> </article> <article class="item"> <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> </article> <article class="item"> <p class="flavor">Hazelnut</p><p class="price">4.00</p> </article> <article class="item"> <p class="flavor">Mocha</p><p class="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 class="price">1.50</p> </article> <article class="item"> <p class="dessert">Cherry Pie</p><p class="price">2.75</p> </article> <article class="item"> <p class="dessert">Cheesecake</p><p class="price">3.00</p> </article> <article class="item"> <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p> </article> </section> </main> <hr class="bottom-line"> <footer> <p> <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a> </p> <p class="address">123 Free Code Camp Drive</p> </footer> </div> </body> <html>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter