REALIZA EL CODIGO HTML Y CSS para que salga tal y como esta la página web de cespt
Para crear una página web similar a la de CESPT, necesitaré hacer algunas suposiciones sobre la estructura y el diseño de la página. Aquí te presento un ejemplo básico de cómo podrías estructurar el código HTML, CSS y JavaScript para crear una página web similar. **Nota:** La página web de CESPT es una aplicación web compleja que utiliza tecnologías como React, Redux y GraphQL. Este ejemplo es una simplificación básica para fines educativos. **HTML (index.html)** ```html <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CESPT</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <nav> <ul> <li><a href="#">Inicio</a></li> <li><a href="#">Servicios</a></li> <li><a href="#">Contacto</a></li> </ul> </nav> </header> <main> <section class="hero"> <h1>Bienvenido a CESPT</h1> <p>La mejor opción para tus necesidades de seguridad y protección</p> <button>Conoce más</button> </section> <section class="servicios"> <h2>Nuestros servicios</h2> <ul> <li> <h3>Seguridad personal</h3> <p>Protección y seguridad para ti y tu familia</p> </li> <li> <h3>Seguridad empresarial</h3> <p>Protección y seguridad para tu negocio</p> </li> </ul> </section> <section class="contacto"> <h2>Contáctanos</h2> <p>¿Necesitas ayuda o tienes alguna pregunta?</p> <form> <input type="text" placeholder="Nombre"> <input type="email" placeholder="Correo electrónico"> <textarea placeholder="Mensaje"></textarea> <button>Enviar</button> </form> </section> </main> <footer> <p>© 2023 CESPT</p> </footer> <script src="script.js"></script> </body> </html> ``` **CSS (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, #333, #555); background-size: 100% 300px; background-position: 0% 100%; height: 300px; display: flex; justify-content: center; align-items: center; color: #fff; } .hero h1 { font-size: 36px; } .hero p { font-size: 18px; } .hero button { background-color: #333; color: #fff; border: none; padding: 10px 20px; font-size: 18px; cursor: pointer; } .servicios { background-color: #f7f7f7; padding: 2em; } .servicios h2 { font-size: 24px; margin-bottom: 20px; } .servicios ul { list-style: none; margin: 0; padding: 0; } .servicios li { margin-bottom: 20px; } .servicios h3 { font-size: 18px; margin-bottom: 10px; } .servicios p { font-size: 14px; } .contacto { background-color: #333; color: #fff; padding: 2em; } .contacto h2 { font-size: 24px; margin-bottom: 20px; } .contacto p { font-size: 18px; margin-bottom: 20px; } .contacto form { margin-bottom: 20px; } .contacto input, .contacto textarea { width: 100%; padding: 10px; margin-bottom: 20px; border: none; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .contacto button { background-color: #333; color: #fff; border: none; padding: 10px 20px; font-size: 18px; cursor: pointer; } footer { background-color: #333; color: #fff; padding: 1em; text-align: center; clear: both; } ``` **JavaScript (script.js)** ```javascript // Obtener elementos del DOM const hero = document.querySelector('.hero'); const servicios = document.querySelector('.servicios'); const contacto = document.querySelector('.contacto'); const form = document.querySelector('form'); // Agregar evento de click al botón de la hero hero.querySelector('button').addEventListener('click', () => { console.log('Click en el botón de la hero'); }); // Agregar evento de submit al formulario de contacto form.addEventListener('submit', (e) => { e.preventDefault(); console.log('Formulario de contacto enviado'); }); ``` Recuerda que este es solo un ejemplo básico y que la página web de CESPT es una aplicación web compleja que utiliza tecnologías como React, Redux y GraphQL. Este ejemplo es solo una simplificación básica para fines educativos.