Haz el codigo HTML de una página web de comidas, solo con su página principal ofreciendo multiples servicios. El nombre de la empresa es "Las Carboneras"
Aquí te dejo un ejemplo de código HTML y PHP para la página principal de "Las Carboneras": **index.php** ```php <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Las Carboneras</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <nav> <ul> <li><a href="#">Inicio</a></li> <li><a href="#">Menú</a></li> <li><a href="#">Contacto</a></li> </ul> </nav> </header> <main> <section class="hero"> <h1>Bienvenidos a Las Carboneras</h1> <p>Disfruta de nuestras deliciosas comidas caseras</p> <button>Ver Menú</button> </section> <section class="services"> <h2>Nuestros Servicios</h2> <ul> <li> <i class="fas fa-utensils"></i> <h3>Comidas Caseras</h3> <p>Disfruta de nuestras comidas caseras preparadas con amor</p> </li> <li> <i class="fas fa-cocktail"></i> <h3>Bar</h3> <p>Disfruta de nuestras bebidas y cócteles</p> </li> <li> <i class="fas fa-people-carry"></i> <h3>Eventos</h3> <p>Organiza tus eventos con nosotros</p> </li> </ul> </section> <section class="call-to-action"> <h2>¿Quieres saber más?</h2> <p>Contáctanos para obtener más información</p> <button>Contáctanos</button> </section> </main> <footer> <p>© 2023 Las Carboneras</p> </footer> <script src="script.js"></script> </body> </html> ``` **styles.css** ```css body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 1em; text-align: center; } header nav ul { list-style: none; margin: 0; padding: 0; } header nav ul li { display: inline-block; margin-right: 20px; } header nav a { color: #fff; text-decoration: none; } .hero { background-image: linear-gradient(to bottom, #f7f7f7, #fff); background-size: 100% 300px; background-position: 0% 100%; height: 300px; display: flex; justify-content: center; align-items: center; color: #333; } .hero h1 { font-size: 36px; margin-bottom: 10px; } .hero p { font-size: 18px; margin-bottom: 20px; } .hero button { background-color: #333; color: #fff; border: none; padding: 10px 20px; font-size: 18px; cursor: pointer; } .services { background-color: #f7f7f7; padding: 20px; } .services h2 { font-size: 24px; margin-bottom: 10px; } .services ul { list-style: none; margin: 0; padding: 0; } .services li { background-color: #fff; padding: 20px; margin-bottom: 20px; border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .services li i { font-size: 24px; margin-right: 10px; } .call-to-action { background-color: #333; color: #fff; padding: 20px; text-align: center; } .call-to-action h2 { font-size: 24px; margin-bottom: 10px; } .call-to-action p { font-size: 18px; margin-bottom: 20px; } .call-to-action button { background-color: #fff; color: #333; border: none; padding: 10px 20px; font-size: 18px; cursor: pointer; } footer { background-color: #333; color: #fff; padding: 10px; text-align: center; } ``` **script.js** ```javascript // Agregar evento de click al botón "Ver Menú" document.querySelector('.hero button').addEventListener('click', function() { alert('Ver Menú'); }); // Agregar evento de click al botón "Contáctanos" document.querySelector('.call-to-action button').addEventListener('click', function() { alert('Contáctanos'); }); ``` Este código crea una página web básica con un encabezado, un menú, un hero, un sección de servicios y una sección de llamada a la acción. El estilo se aplica mediante CSS y se utiliza JavaScript para agregar eventos de click a los botones.