index.html 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. <!doctype html>
  2. <html lang="es">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Menú de Cafetería</title>
  7. <link rel="stylesheet" href="styles.css">
  8. </head>
  9. <body>
  10. <div class="menu">
  11. <!-- Información de los precios y postres -->
  12. <main>
  13. <h1>CAMPER CAFÉ</h1>
  14. <p>Est. 2020</p> <!-- Establecido desde el 2020 -->
  15. <!-- Información de cafés -->
  16. <section>
  17. <h2>Café</h2>
  18. <article class="item">
  19. <!-- Se elimina el salto de línea porque afecta al ancho de los elementos -->
  20. <p class="flavor">French Vanilla</p><p class="price">$ 3.00</p>
  21. </article>
  22. <article class="item">
  23. <p class="flavor">Caramel Macchiato</p><p class="price">$ 3.75</p>
  24. </article>
  25. <article class="item">
  26. <p class="flavor">Pumpkin Spice</p><p class="price">$ 3.50</p>
  27. </article>
  28. <article class="item">
  29. <p class="flavor">Hazelnut</p><p class="price">$ 4.00</p>
  30. </article>
  31. <article class="item">
  32. <p class="flavor">Mocha</p><p class="price">$ 4.50</p>
  33. </article>
  34. </section>
  35. <!-- Fin de la información de los cafés -->
  36. <!-- Información de postres -->
  37. <section>
  38. <h2>Postre</h2>
  39. <article class="item">
  40. <p class="dessert">Donut</p><p class="price">$ 1.50</p>
  41. </article>
  42. <article class="item">
  43. <p class="dessert">Cherry Pie</p><p class="price">$ 2.75</p>
  44. </article>
  45. <article class="item">
  46. <p class="dessert">Cheesecake</p><p class="price">$ 3.00</p>
  47. </article>
  48. <article class="item">
  49. <p class="dessert">Cinnamon Roll</p><p class="price">$ 2.50</p>
  50. </article>
  51. </section>
  52. <!-- Fin de la información de los postres -->
  53. </main>
  54. <!-- Fin de la información de los precios y postres -->
  55. </div>
  56. </body>
  57. </html>