unir tres páginas en una sola y que se cargue todo el contenido junto con la barra de menu lateral <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Historia de Acura</title> <style> body { background-image: url('x.png'); background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #1a1a1a; color: white; font-family: Arial, sans-serif; margin: 0; padding: 0; } .header { text-align: center; padding: 20px 0; } /* Unified text size - all text uses the same size but left-aligned */ .texto-uniforme { font-size: 24px; text-align: left; max-width: 800px; margin-left: auto; margin-right: auto; } /* Special class for centered ACURA heading */ .acura-title { font-size: 24px; text-align: center; max-width: 800px; margin-left: auto; margin-right: auto; } .contenedor-flex { display: flex; align-items: center; margin: 30px auto; max-width: 800px; } .contenedor-flex img { width: 300px; margin-right: 20px; } .seccion { margin: 40px auto; padding: 0 20px; max-width: 800px; } .imagen-centrada { display: block; margin: 20px auto; max-width: 100%; } .lista-izquierda { text-align: left; margin-left: auto; margin-right: auto; max-width: 800px; padding-left: 20px; } .especificaciones { text-align: left; margin-left: auto; margin-right: auto; max-width: 800px; } .caracteristicas { margin-top: 20px; text-align: left; max-width: 800px; margin-left: auto; margin-right: auto; } .container { max-width: 800px; margin: auto; padding: 0 15px; } .section { margin-bottom: 40px; text-align: left; } .section img { width: 100%; max-height: 300px; object-fit: cover; border-radius: 10px; display: block; margin: 0 auto; } /* Replaced title and subtitle with unified text size */ .section-heading { font-size: 24px; font-weight: bold; margin-top: 10px; text-align: left; } /* Left align list items but keep them centered in the page */ ul { list-style-position: outside; padding-left: 20px; text-align: left; max-width: 760px; /* Slightly less than container to account for padding */ margin-left: auto; margin-right: auto; } li { text-align: left; } h1, h2 { text-align: left; max-width: 800px; margin-left: auto; margin-right: auto; } </style> </head> <body>  <header class="header"> <h1 class="acura-title">ACURA</h1> <img src="acura-logo.avif" alt="Logo Acura" width="1300" class="imagen-centrada"> </header>  <section class="seccion"> <img src="acura-nsx.jpg" alt="Acura NSX" width="900" class="imagen-centrada"> <h2 class="texto-uniforme">🏁 Acura NSX (1990–2005, 2016–2022): El Ferrari Japonés</h2> <p class="texto-uniforme">El Acura NSX (Honda NSX fuera de EE.UU.) fue diseñado para competir con los superdeportivos europeos, ofreciendo rendimiento de alto nivel con la confiabilidad japonesa.</p> <h2 class="texto-uniforme">📌 Historia y legado:</h2> <div class="especificaciones"> <h2 class="texto-uniforme">✅ Desarrollado con la ayuda de Ayrton Senna, quien contribuyó a perfeccionar su chasis.</h2> <h2 class="texto-uniforme">✅ Primer automóvil de producción con chasis de aluminio, lo que lo hacía ligero y ágil.</h2> <h2 class="texto-uniforme">✅ Se convirtió en un ícono de los 90, ofreciendo un equilibrio perfecto entre deportividad y usabilidad diaria.</h2> <h2 class="texto-uniforme">✅ En 2016, Acura lanzó la segunda generación con un V6 biturbo híbrido y tracción total SH-AWD.</h2> </div> <div class="especificaciones"> <h2 class="texto-uniforme">🔹 Primera generación:</h2> <h2 class="texto-uniforme">🔹 Motor: 3.0L V6 (1990-1996) / 3.2L V6 (1997-2005)</h2> <h2 class="texto-uniforme">🔹 Potencia: 270-290 CV</h2> <h2 class="texto-uniforme">🔹 Velocidad máxima: 270 km/h</h2> <h2 class="texto-uniforme">🔹 Transmisión: Manual de 5 o 6 velocidades, Automática de 4</h2> </div> <div class="especificaciones"> <h2 class="texto-uniforme">🔹 Segunda generación:</h2> <h2 class="texto-uniforme">🔹 Motor: 3.5L V6 biturbo híbrido</h2> <h2 class="texto-uniforme">🔹 Potencia: 573 CV</h2> <h2 class="texto-uniforme">🔹 Velocidad máxima: 307 km/h</h2> <h2 class="texto-uniforme">🔹 Transmisión: Automática de 9 velocidades</h2> </div> </section>  <section class="seccion"> <img src="acura-integra-type-r.jpg" alt="Acura Integra Type R" width="900" class="imagen-centrada"> <h2 class="texto-uniforme">🚘 Acura Integra Type R (1995–2001, 2023-presente): La Leyenda del JDM</h2> <p class="texto-uniforme">El Integra Type R es uno de los mejores autos de tracción delantera jamás creados, con un enfoque en la ligereza, la potencia y el manejo preciso.</p> <h2 class="texto-uniforme">📌 Historia y legado:</h2> <div class="especificaciones"> <h2 class="texto-uniforme">✅ Introducido en 1995 en Japón y en 1997 en EE.UU., con mejoras en motor y chasis.</h2> <h2 class="texto-uniforme">✅ Motor VTEC con 8,400 rpm, haciendo que se sintiera como un auto de carreras.</h2> <h2 class="texto-uniforme">✅ Regresó en 2023 con un motor turbo de 320 CV, manteniendo su esencia deportiva.</h2> </div> <div class="especificaciones"> <h2 class="texto-uniforme">🔹 Primera generación:</h2> <h2 class="texto-uniforme">🔹 Motor: 1.8L VTEC B18C</h2> <h2 class="texto-uniforme">🔹 Potencia: 190-200 CV</h2> <h2 class="texto-uniforme">🔹 Velocidad máxima: 235 km/h</h2> <h2 class="texto-uniforme">🔹 Transmisión: Manual de 5 velocidades</h2> </div> <div class="especificaciones"> <h2 class="texto-uniforme">🔹 Nueva generación (2023):</h2> <h2 class="texto-uniforme">🔹 Motor: 2.0L VTEC Turbo</h2> <h2 class="texto-uniforme">🔹 Potencia: 320 CV</h2> <h2 class="texto-uniforme">🔹 Transmisión: Manual de 6 velocidades</h2> </div> </section>  <section class="seccion"> <img src="acura-legend.jpg" alt="Acura Legend" width="900" class="imagen-centrada"> <h2 class="texto-uniforme">🔥 Acura Legend (1986–1995): El Primer Acura</h2> <p class="texto-uniforme">El Legend fue el primer modelo de Acura cuando la marca se lanzó en EE.UU. en 1986, ayudando a establecerla como una marca de lujo confiable y deportiva.</p> <h2 class="texto-uniforme">📌 Historia y legado:</h2> <div class="especificaciones"> <h2 class="texto-uniforme">✅ Primer sedán japonés con un motor V6 y tracción delantera.</h2> <h2 class="texto-uniforme">✅ Ofrecía lujo y tecnología avanzada para su época.</h2> <h2 class="texto-uniforme">✅ Se considera el precursor de los sedanes premium japoneses.</h2> </div> <div class="especificaciones"> <h2 class="texto-uniforme">🔹 Motor: 2.5L - 3.5L V6</h2> <h2 class="texto-uniforme">🔹 Potencia: 151-230 CV</h2> <h2 class="texto-uniforme">🔹 Velocidad máxima: 225 km/h</h2> <h2 class="texto-uniforme">🔹 Transmisión: Manual de 5/6 velocidades o Automática de 4</h2> </div> </section>  <section class="seccion"> <img src="acura-tl-type-s.jpg" alt="Acura TL Type-S" width="900" class="imagen-centrada"> <h2 class="texto-uniforme">🏎️ Acura TL Type-S (1996–2014): El Sedán Deportivo Japonés</h2> <p class="texto-uniforme">El Acura TL fue un sedán de lujo con un enfoque en el rendimiento, especialmente en su versión Type-S.</p> <h2 class="texto-uniforme">📌 Historia y legado:</h2> <div class="especificaciones"> <h2 class="texto-uniforme">✅ En su versión 2002-2003, ofreció uno de los motores V6 más potentes de su época en un sedán de tracción delantera.</h2> <h2 class="texto-uniforme">✅ En 2007, el TL Type-S introdujo un V6 de 3.5L con 286 CV, haciendo que fuera uno de los sedanes más rápidos de su categoría.</h2> <h2 class="texto-uniforme">✅ Desapareció en 2014, pero su legado sigue en el Acura TLX Type-S.</h2> </div> <div class="especificaciones"> <h2 class="texto-uniforme">🔹 Motor: 3.2L – 3.5L V6</h2> <h2 class="texto-uniforme">🔹 Potencia: 260-286 CV</h2> <h2 class="texto-uniforme">🔹 Velocidad máxima: 250 km/h</h2> <h2 class="texto-uniforme">🔹 Transmisión: Manual de 6 velocidades o Automática de 5</h2> </div> </section>  <section class="seccion"> <img src="acura-rsx-type-s.jpg" alt="Acura RSX Type-S" width="900" class="imagen-centrada"> <h2 class="texto-uniforme">🏁 Acura RSX Type-S (2002–2006): El Sucesor Espiritual del Integra</h2> <p class="texto-uniforme">El RSX Type-S fue la evolución del Integra, ofreciendo un diseño más moderno con el mismo ADN deportivo.</p> <h2 class="texto-uniforme">📌 Historia y legado:</h2> <div class="especificaciones"> <h2 class="texto-uniforme">✅ Motor K20 con VTEC, considerado uno de los mejores motores de 4 cilindros de la historia.</h2> <h2 class="texto-uniforme">✅ Alta demanda en la cultura JDM, siendo muy popular en modificaciones y tuning.</h2> </div> <div class="especificaciones"> <h2 class="texto-uniforme">🔹 Motor: 2.0L VTEC K20</h2> <h2 class="texto-uniforme">🔹 Potencia: 200-210 CV</h2> <h2 class="texto-uniforme">🔹 Velocidad máxima: 235 km/h</h2> <h2 class="texto-uniforme">🔹 Transmisión: Manual de 6 velocidades</h2> </div> </section>  <section class="seccion"> <img src="acura-tlx-type-s.jpg" alt="Acura TLX Type-S" width="900" class="imagen-centrada"> <h2 class="texto-uniforme">🚀 Acura TLX Type-S (2021-presente): El Regreso del Sedán Deportivo</h2> <p class="texto-uniforme">El TLX Type-S marca el regreso de Acura a los sedanes deportivos de alto rendimiento, con un motor V6 turbo y tracción integral.</p> <h2 class="texto-uniforme">📌 Historia y legado:</h2> <div class="especificaciones"> <h2 class="texto-uniforme">✅ Primer sedán Type-S desde 2008.</h2> <h2 class="texto-uniforme">✅ Nuevo motor V6 turbo, diseñado exclusivamente para Acura.</h2> <h2 class="texto-uniforme">✅ Tecnología de tracción integral SH-AWD para mejor agarre y manejo.</h2> </div> <div class="especificaciones"> <h2 class="texto-uniforme">🔹 Motor: 3.0L V6 Turbo</h2> <h2 class="texto-uniforme">🔹 Potencia: 355 CV</h2> <h2 class="texto-uniforme">🔹 Velocidad máxima: 250 km/h</h2> <h2 class="texto-uniforme">🔹 Transmisión: Automática de 10 velocidades</h2> </div> </section>  <section class="seccion"> <img src="acura-mdx-type-s.jpg" alt="Acura MDX Type-S" width="900" class="imagen-centrada"> <h2 class="texto-uniforme">🔥 Acura MDX Type-S (2022-presente): El SUV con ADN de Carrera</h2> <p class="texto-uniforme">El MDX Type-S es el primer SUV en llevar el nombre "Type-S", combinando lujo y deportividad en un solo paquete.</p> <h2 class="texto-uniforme">📌 Historia y legado:</h2> <div class="especificaciones"> <h2 class="texto-uniforme">✅ Motor V6 Turbo de 355 CV, compartido con el TLX Type-S.</h2> <h2 class="texto-uniforme">✅ Suspensión adaptativa y frenos Brembo, algo raro en un SUV de lujo.</h2> </div> <div class="especificaciones"> <h2 class="texto-uniforme">🔹 Motor: 3.0L V6 Turbo</h2> <h2 class="texto-uniforme">🔹 Potencia: 355 CV</h2> <h2 class="texto-uniforme">🔹 Velocidad máxima: 225 km/h</h2> <h2 class="texto-uniforme">🔹 Transmisión: Automática de 10 velocidades</h2> </div> </section> </body> </html> <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Historia de Ferrari</title> <style> body { background-color: #20B2AA; /* Turquoise (green-blue) background */ color: white; font-family: 'Segoe UI', Arial, sans-serif; margin: 0; padding: 0; line-height: 1.6; } .container { max-width: 1200px; margin: 0 auto; padding: 20px; } .header { text-align: center; padding: 40px 0; background-color: rgba(0, 0, 0, 0.7); border-radius: 10px; margin-bottom: 30px; } .header h1 { font-size: 48px; margin: 0; color: #FF2800; /* Ferrari red */ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); letter-spacing: 3px; } .header img { max-width: 300px; margin-top: 20px; } .section { background-color: rgba(0, 0, 0, 0.7); border-radius: 10px; padding: 30px; margin-bottom: 30px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } .section h2 { color: #FF2800; /* Ferrari red */ font-size: 28px; margin-top: 0; border-bottom: 2px solid #FF2800; padding-bottom: 10px; } .section p { font-size: 18px; margin-bottom: 20px; } .founder-container { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; } .founder-container img { width: 250px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } .founder-text { flex: 1; min-width: 300px; } .car-image { width: 100%; max-height: 400px; object-fit: cover; border-radius: 60px; margin: 20px 0; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } .specs { background-color: rgba(255, 40, 0, 0.1); padding: 20px; border-radius: 10px; margin: 20px 0; border-left: 4px solid #FF2800; } .specs h3 { color: #FFD700; /* Gold */ margin-top: 0; } .specs p { margin: 10px 0; font-size: 18px; } .history-points { background-color: rgba(255, 255, 255, 0.1); padding: 20px; border-radius: 10px; margin: 20px 0; } .grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 30px; } .grid-item { background-color: rgba(0, 0, 0, 0.5); border-radius: 10px; overflow: hidden; transition: transform 0.3s; } .grid-item:hover { transform: translateY(-10px); } .grid-item img { width: 100%; height: 200px; object-fit: cover; } .grid-item-content { padding: 20px; } .grid-item h3 { color: #FFD700; /* Gold */ margin-top: 0; } ul { list-style-type: none; padding-left: 0; } ul li { position: relative; padding-left: 30px; margin-bottom: 10px; font-size: 18px; } ul li:before { content: "✓"; color: #FFD700; /* Gold */ position: absolute; left: 0; font-weight: bold; } .footer { text-align: center; padding: 20px 0; background-color: rgba(0, 0, 0, 0.7); border-radius: 10px; margin-top: 30px; } @media (max-width: 768px) { .founder-container { flex-direction: column; align-items: center; text-align: center; } .container { padding: 10px; } .section { padding: 20px; } } </style> </head> <body> <div class="container">  <header class="header"> <h1>FERRARI</h1> <img src="logoFerrari.png" alt="Logo Ferrari"> </header>  <section class="section"> <div class="founder-container"> <img src="Enzoferrari.jpg" alt="Enzo Ferrari"> <div class="founder-text"> <h2>Fundación y Primeros Años</h2> <p>Ferrari fue fundada en 1939 por Enzo Ferrari, quien comenzó su carrera en el mundo del automovilismo como piloto de Alfa Romeo. El nombre oficial de la compañía era Auto Avio Costruzioni, pero no fue hasta 1947 cuando el primer automóvil con la marca Ferrari salió de la fábrica en Maranello, Italia.</p> <p>Enzo Ferrari se enfocó inicialmente en la competición, creando vehículos de carreras que rápidamente establecieron la reputación de la marca en el mundo del automovilismo. Los automóviles de calle se desarrollaron principalmente para financiar las actividades de competición.</p> <p>Con el paso de los años, Ferrari se convirtió en sinónimo de rendimiento, lujo y exclusividad. Su emblema, el "Cavallino Rampante" (Caballo Encabritado), se ha convertido en uno de los símbolos más reconocibles del mundo del automovilismo.</p> </div> </div> </section>  <section class="section"> <h2>🏆 Ferrari 250 GTO (1962–1964): El Santo Grial de los Clásicos</h2> <img src="Ferrari250GTO.png" alt="Ferrari 250 GTO" class="car-image"> <p>El Ferrari 250 GTO es considerado el Ferrari más valioso y legendario de todos los tiempos. Diseñado para competir en la categoría GT, combinó rendimiento, aerodinámica y belleza como pocos autos en la historia.</p> <div class="history-points"> <h3>📌 Historia y legado:</h3> <ul> <li>Desarrollado bajo la supervisión de Enzo Ferrari y Giotto Bizzarrini.</li> <li>Solo 36 unidades fueron fabricadas, lo que lo hace extremadamente raro.</li> <li>En 2018, se vendió uno por 48 millones de dólares, convirtiéndolo en el coche más caro jamás subastado.</li> <li>Dominó competiciones como Le Mans y la Targa Florio en los años 60.</li> </ul> </div> <div class="specs"> <h3>Especificaciones:</h3> <p>🔹 Motor: 3.0L V12</p> <p>🔹 Potencia: 300 CV</p> <p>🔹 Velocidad máxima: 280 km/h</p> <p>🔹 Aceleración 0-100 km/h: 5.4 segundos</p> <p>🔹 Transmisión: Manual de 5 velocidades</p> <p>🔹 Peso: 880 kg</p> <p>🔹 Innovaciones: Diseño aerodinámico avanzado para su época</p> </div> </section>  <section class="section"> <h2>🚗 Ferrari 275 GTB (1964–1968): La Elegancia en Movimiento</h2> <img src="ferrari 275.png" alt="Ferrari 275 GTB" class="car-image"> <p>El Ferrari 275 GTB fue un gran turismo que representó una evolución del 250 GTO, con mejoras en chasis, suspensión y aerodinámica.</p> <div class="history-points"> <h3>📌 Historia y legado:</h3> <ul> <li>Fue el primer Ferrari con suspensión independiente en las cuatro ruedas.</li> <li>Se fabricó en versiones coupé (GTB) y descapotable (GTS).</li> <li>Su diseño, firmado por Pininfarina, lo convirtió en uno de los Ferrari más bellos jamás creados.</li> </ul> </div> <div class="specs"> <h3>Especificaciones:</h3> <p>🔹 Motor: 3.3L V12</p> <p>🔹 Potencia: 280–330 CV</p> <p>🔹 Velocidad máxima: 260 km/h</p> <p>🔹 Transmisión: Manual de 5 velocidades</p> <p>🔹 Innovaciones: Primera transmisión transaxle en un Ferrari</p> </div> </section>  <section class="section"> <h2>🔥 Ferrari 512 TR (1991–1994): El Testarossa Mejorado</h2> <img src="Ferrari 512 TR.png" alt="Ferrari 512 TR" class="car-image"> <p>El 512 TR es una evolución del icónico Ferrari Testarossa, con más potencia, mejor aerodinámica y una conducción más refinada.</p> <div class="history-points"> <h3>📌 Historia y legado:</h3> <ul> <li>Ferrari mejoró el diseño del Testarossa para hacerlo más ágil y rápido.</li> <li>Se redujo el peso y se mejoró la suspensión para una conducción más deportiva.</li> <li>Solo 2,280 unidades fueron fabricadas, lo que lo hace muy deseado hoy en día.</li> </ul> </div> <div class="specs"> <h3>Especificaciones:</h3> <p>🔹 Motor: 4.9L V12</p> <p>🔹 Potencia: 428 CV</p> <p>🔹 Velocidad máxima: 314 km/h</p> <p>🔹 Aceleración 0-100 km/h: 4.8 segundos</p> <p>🔹 Transmisión: Manual de 5 velocidades</p> </div> </section>  <section class="section"> <h2>🏎️ Ferrari Dino 246 GT (1969–1974): El Ferrari que no era Ferrari</h2> <img src="Ferrari Dino 246 GT.png" alt="Ferrari Dino 246 GT" class="car-image"> <p>El Dino 246 GT fue el primer Ferrari en usar un motor V6, creado en honor a Alfredo "Dino" Ferrari, hijo de Enzo Ferrari.</p> <div class="history-points"> <h3>📌 Historia y legado:</h3> <ul> <li>No llevaba el emblema de Ferrari, sino el de Dino, para diferenciarlo de los modelos V12.</li> <li>Diseñado por Pininfarina, se convirtió en uno de los coches más bellos de la historia.</li> <li>Fue el primer Ferrari con motor central, lo que influenció los modelos modernos.</li> </ul> </div> <div class="specs"> <h3>Especificaciones:</h3> <p>🔹 Motor: 2.4L V6</p> <p>🔹 Potencia: 195 CV</p> <p>🔹 Velocidad máxima: 235 km/h</p> <p>🔹 Aceleración 0-100 km/h: 6.5 segundos</p> <p>🔹 Transmisión: Manual de 5 velocidades</p> </div> </section>  <section class="section"> <h2>🔥 Ferrari Testarossa (1984–1991): El Ícono de los 80</h2> <img src="Ferrari Testarossa.png" alt="Ferrari Testarossa" class="car-image"> <p>El Testarossa es uno de los Ferrari más famosos de la historia, gracias a su diseño extravagante y su papel en la cultura pop.</p> <div class="history-points"> <h3>📌 Historia y legado:</h3> <ul> <li>Su nombre significa "Cabeza Roja", en referencia a las tapas de los cilindros pintadas en rojo.</li> <li>Famoso por aparecer en Miami Vice y numerosos videoclips de los 80.</li> <li>Sus aletas laterales le daban un diseño futurista y mejoraban la refrigeración del motor.</li> </ul> </div> <div class="specs"> <h3>Especificaciones:</h3> <p>🔹 Motor: 4.9L V12</p> <p>🔹 Potencia: 390 CV</p> <p>🔹 Velocidad máxima: 290 km/h</p> <p>🔹 Aceleración 0-100 km/h: 5.2 segundos</p> <p>🔹 Transmisión: Manual de 5 velocidades</p> </div> </section>  <section class="section"> <h2>Más Ferraris Legendarios</h2> <div class="grid-container"> <div class="grid-item"> <img src="Ferrari 330 P4.png" alt="Ferrari 330 P4"> <div class="grid-item-content"> <h3>🏁 Ferrari 330 P4 (1967)</h3> <p>El Ferrari 330 P4 fue un prototipo de carreras diseñado para derrotar a Ford en las 24 Horas de Le Mans.</p> <div class="specs"> <p>🔹 Motor: 4.0L V12</p> <p>🔹 Potencia: 450 CV</p> <p>🔹 Velocidad máxima: 330 km/h</p> </div> </div> </div> <div class="grid-item"> <img src="Ferrari 365 GTB4.png" alt="Ferrari 365 GTB/4 Daytona"> <div class="grid-item-content"> <h3>🏎️ Ferrari 365 GTB/4 "Daytona" (1968–1973)</h3> <p>El 365 GTB/4, apodado "Daytona", fue creado para conmemorar la victoria de Ferrari en las 24 Horas de Daytona.</p> <div class="specs"> <p>🔹 Motor: 4.4L V12</p> <p>🔹 Potencia: 352 CV</p> <p>🔹 Velocidad máxima: 280 km/h</p> </div> </div> </div> <div class="grid-item"> <img src="Ferrari 308 GTB.png" alt="Ferrari 308 GTB"> <div class="grid-item-content"> <h3>🔥 Ferrari 308 GTB (1975–1985)</h3> <p>El 308 GTB/GTS fue un éxito de ventas y se hizo famoso por aparecer en la serie de TV Magnum P.I.</p> <div class="specs"> <p>🔹 Motor: 3.0L V8</p> <p>🔹 Potencia: 255 CV</p> <p>🔹 Velocidad máxima: 252 km/h</p> </div> </div> </div> <div class="grid-item"> <img src="" alt="Ferrari 288 GTO"> <div class="grid-item-content"> <h3>🔥 Ferrari 288 GTO (1984–1985)</h3> <p>El 288 GTO fue desarrollado para competir en el Grupo B, pero la categoría fue cancelada.</p> <div class="specs"> <p>🔹 Motor: 2.8L V8 biturbo</p> <p>🔹 Potencia: 400 CV</p> <p>🔹 Velocidad máxima: 305 km/h</p> </div> </div> </div> <div class="grid-item"> <img src="" alt="Ferrari F40"> <div class="grid-item-content"> <h3>🚀 Ferrari F40 (1987–1992)</h3> <p>El F40 fue creado para celebrar los 40 años de Ferrari y fue el último modelo aprobado por Enzo Ferrari.</p> <div class="specs"> <p>🔹 Motor: 2.9L V8 biturbo</p> <p>🔹 Potencia: 478 CV</p> <p>🔹 Velocidad máxima: 324 km/h</p> </div> </div> </div> </div> </section>  <footer class="footer"> <p>Historia de Ferrari © 2025 | Pasión por la excelencia italiana</p> </footer> </div> </body> </html> <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Historia de Porsche</title> <style> :root { --main-bg-color: #0d7e83; /* Verde azulejo */ --text-color: #ffffff; --accent-color: #f7d770; --section-bg: rgba(0, 0, 0, 0.5); --header-color: #f0f0f0; --sidebar-bg: rgba(0, 0, 0, 0.7); --sidebar-hover: rgba(255, 255, 255, 0.1); } body { background-color: var(--main-bg-color); color: var(--text-color); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0; line-height: 1.6; display: flex; flex-direction: column; min-height: 100vh; } /* Sidebar Styles */ .sidebar { width: 250px; background-color: var(--sidebar-bg); position: fixed; height: 100%; left: 0; top: 0; overflow-y: auto; transition: left 0.3s ease; z-index: 999; box-shadow: 3px 0 15px rgba(0, 0, 0, 0.3); } .sidebar-header { padding: 20px; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .sidebar-header h2 { margin: 0; color: var(--accent-color); font-size: 1.5rem; } .sidebar-menu { list-style: none; padding: 0; margin: 0; } .sidebar-menu li { padding: 0; } .sidebar-menu a { display: block; padding: 15px 20px; color: var(--text-color); text-decoration: none; transition: all 0.3s ease; border-left: 4px solid transparent; } .sidebar-menu a:hover, .sidebar-menu a.active { background-color: var(--sidebar-hover); border-left-color: var(--accent-color); } .sidebar-menu a.active { font-weight: bold; } .sidebar-menu img { width: 30px; height: 30px; margin-right: 10px; vertical-align: middle; } .toggle-menu { position: fixed; top: 10px; left: 10px; z-index: 1000; background-color: var(--sidebar-bg); color: var(--text-color); border: none; border-radius: 5px; padding: 8px 12px; cursor: pointer; display: none; } .main-content { margin-left: 250px; flex: 1; transition: margin-left 0.3s ease; } /* Rest of your original styles */ .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } header { background-color: rgba(0, 0, 0, 0.7); padding: 20px 0; text-align: center; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } .header-content { display: flex; flex-direction: column; align-items: center; justify-content: center; } h1, h2, h3 { font-weight: 600; margin-top: 0; } h1 { font-size: 3rem; letter-spacing: 3px; color: var(--header-color); margin-bottom: 10px; } .logo { max-width: 300px; margin: 15px 0; } .section { background-color: var(--section-bg); margin: 40px 0; padding: 30px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .section-header { border-bottom: 2px solid var(--accent-color); padding-bottom: 10px; margin-bottom: 20px; color: var(--accent-color); } .flex-container { display: flex; flex-wrap: wrap; gap: 30px; align-items: center; } .flex-image { flex: 1; min-width: 300px; } .flex-content { flex: 2; min-width: 300px; } .car-image { width: 100%; border-radius: 8px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease; } .car-image:hover { transform: scale(1.02); } .specs-box { background-color: rgba(0, 0, 0, 0.3); padding: 15px 20px; border-radius: 8px; margin: 20px 0; border-left: 4px solid var(--accent-color); } .specs-title { color: var(--accent-color); font-size: 1.3rem; margin-bottom: 15px; } .spec-item { margin-bottom: 10px; display: flex; align-items: center; } .spec-item:before { content: "🔹"; margin-right: 10px; color: var(--accent-color); } .curiosity { margin-bottom: 10px; display: flex; align-items: center; } .curiosity:before { content: "✅"; margin-right: 10px; color: var(--accent-color); } .legendary-cars { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 30px; margin-top: 30px; } .legendary-card { background-color: rgba(0, 0, 0, 0.3); border-radius: 8px; overflow: hidden; transition: transform 0.3s ease; } .legendary-card:hover { transform: translateY(-5px); } .legendary-card img { width: 100%; height: 200px; object-fit: cover; } .legendary-content { padding: 20px; } .legendary-title { color: var(--accent-color); margin-top: 0; } .legendary-specs { list-style-type: none; padding-left: 0; } .legendary-specs li { margin-bottom: 8px; } /* Responsive styles */ @media (max-width: 992px) { .sidebar { left: -250px; } .sidebar.active { left: 0; } .main-content { margin-left: 0; } .toggle-menu { display: block; } .main-content.sidebar-active { margin-left: 250px; } } @media (max-width: 768px) { .flex-container { flex-direction: column; } .legendary-cars { grid-template-columns: 1fr; } .main-content.sidebar-active { margin-left: 0; } } </style> </head> <body>  <button class="toggle-menu" id="toggleMenu">☰ Menú</button>  <div class="sidebar" id="sidebar"> <div class="sidebar-header"> <h2>Marcas de Autos</h2> </div> <ul class="sidebar-menu"> <li><a href="#" class="active">Porsche</a></li> <li><a href="#">Ford</a></li> <li><a href="#">Ferrari</a></li> <li><a href="#">Rolls Royce</a></li> <li><a href="#">Acura</a></li> <li><a href="#">Dodge</a></li> </ul> </div>  <div class="main-content" id="mainContent"> <header> <div class="container header-content"> <h1>PORSCHE</h1> <img src="logo.png" alt="Logo Porsche" class="logo"> </div> </header> <div class="container">  <section class="section"> <h2 class="section-header">Fundación y Primeros Años (1931-1945)</h2> <div class="flex-container"> <div class="flex-image"> <img src="jp.png" alt="Ferdinand Porsche" class="car-image"> </div> <div class="flex-content"> <p>Porsche fue fundada el 25 de abril de 1931 por Ferdinand Porsche en Stuttgart, Alemania, bajo el nombre de Dr. Ing. h.c. F. Porsche GmbH. Originalmente, la empresa se dedicaba a la consultoría y desarrollo de automóviles para otras compañías.</p> <p>Uno de sus primeros proyectos fue el diseño del Volkswagen Tipo 1, más conocido como el Volkswagen Beetle, un auto económico encargado por el gobierno alemán en los años 30. Sin embargo, con la Segunda Guerra Mundial, Porsche comenzó a trabajar en vehículos militares, incluyendo el Kübelwagen y el Schwimmwagen.</p> <p>Después de la Segunda Guerra Mundial, Porsche comenzó a fabricar sus propios vehículos. En 1948, Ferry Porsche, hijo de Ferdinand, presentó el Porsche 356, el primer automóvil de la marca. Este modelo estableció la reputación de la empresa por su ingeniería de precisión y diseño deportivo.</p> <p>En 1964, Porsche lanzó el 911, su modelo más famoso. Diseñado por Ferdinand "Butzi" Porsche, el 911 presentaba un motor trasero y una configuración única que se convirtió en la base de la identidad de la marca.</p> </div> </div> </section>  <section class="section" style="text-align: center;"> <h2 class="section-header">Evolución de Modelos Porsche</h2> <img src="porschemodelo.png" alt="Modelos Porsche" class="car-image" style="max-width: 100%;"> </section>  <section class="section"> <h2 class="section-header">PORSCHE 356 (1948-1965)</h2> <div class="flex-container"> <div class="flex-content"> <p>El modelo tuvo varias versiones a lo largo de su producción, con mejoras en potencia y diseño:</p> <div class="specs-box"> <h3 class="specs-title">Versiones del 356</h3> <div class="spec-item">356 "Pre-A" (1948-1955): Motor de 1.1 a 1.5 litros, carrocería hecha a mano en aluminio en los primeros modelos</div> <div class="spec-item">356 A (1955-1959): Introducción de una carrocería más refinada, versiones más potentes incluido el Carrera 356A</div> <div class="spec-item">356 B (1959-1963): Cambios en la altura de los faros y parachoques más elevados</div> <div class="spec-item">356 C (1963-1965): Última versión del modelo, incorporó frenos de disco y motores más potentes</div> </div> <p>El 356 se convirtió en un ícono por su diseño atemporal y su rendimiento deportivo. Su éxito estableció la base para el futuro de Porsche, incluyendo el lanzamiento del 911 en 1964. Hoy en día, el 356 es un coche de colección muy valorado por los entusiastas.</p> </div> <div class="flex-image"> <img src="Porsche356.png" alt="Porsche 356" class="car-image"> </div> </div> </section>  <section class="section"> <h2 class="section-header">PORSCHE 911 (1964)</h2> <div class="flex-container"> <div class="flex-image"> <img src="911.png" alt="Porsche 911" class="car-image"> </div> <div class="flex-content"> <p>El Porsche 911 de 1964 fue el primer modelo de esta icónica línea de deportivos. Inicialmente conocido como Porsche 901, tuvo que cambiar su nombre a 911 por un conflicto con Peugeot, que tenía derechos sobre nombres de tres cifras con un "0" en el medio.</p> <div class="specs-box"> <h3 class="specs-title">Características del Porsche 911 (1964)</h3> <div class="spec-item">Motor: 2.0L Bóxer de 6 cilindros, refrigerado por aire</div> <div class="spec-item">Potencia: 130 CV (128 HP)</div> <div class="spec-item">Torque: 174 Nm</div> <div class="spec-item">Aceleración 0-100 km/h: Aproximadamente 9.1 segundos</div> <div class="spec-item">Velocidad máxima: 210 km/h</div> <div class="spec-item">Transmisión: Manual de 5 velocidades</div> <div class="spec-item">Tracción: Trasera (RWD)</div> <div class="spec-item">Peso: Aprox. 1,080 kg</div> </div> <p>Este modelo sentó las bases del diseño y la mecánica de los futuros 911, manteniendo la arquitectura de motor trasero y tracción trasera que sigue vigente en la actualidad. Un verdadero clásico de la ingeniería automotriz.</p> </div> </div> </section>  <section class="section"> <h2 class="section-header">PORSCHE 914 (1969-1976)</h2> <div class="flex-container"> <div class="flex-content"> <p>El Porsche 914 fue un deportivo de motor central desarrollado en colaboración entre Porsche y Volkswagen. Su diseño y configuración lo convirtieron en un automóvil único en la historia de Porsche.</p> <div class="specs-box"> <h3 class="specs-title">Características Técnicas</h3> <div class="spec-item">Diseño: Coupé biplaza con techo tipo "Targa" desmontable</div> <div class="spec-item">Motor: 914/4 (4 cilindros Volkswagen) y 914/6 (6 cilindros Porsche)</div> <div class="spec-item">Tracción: Trasera</div> <div class="spec-item">Caja de cambios: Manual de 5 velocidades</div> <div class="spec-item">Peso: Aprox. 950 kg</div> <div class="spec-item">Velocidad Máxima: Entre 170 y 210 km/h, según la versión</div> </div> <div class="specs-box"> <h3 class="specs-title">Historia y Curiosidades</h3> <div class="curiosity">Fue diseñado como un modelo accesible para atraer a más clientes</div> <div class="curiosity">Su motor central le dio un equilibrio excepcional en la conducción</div> <div class="curiosity">La versión 914/6 es más rara y buscada por coleccionistas</div> <div class="curiosity">Con el tiempo se convirtió en un clásico muy valorado</div> </div> </div> <div class="flex-image"> <img src="porsche.png" alt="Porsche 914" class="car-image"> </div> </div> </section>  <section class="section"> <h2 class="section-header">PORSCHE 930 TURBO (1975-1989)</h2> <div class="flex-container"> <div class="flex-image"> <img src="porche 930.png" alt="Porsche 930 Turbo" class="car-image"> </div> <div class="flex-content"> <p>El Porsche 930 Turbo fue el primer 911 Turbo de la historia y un ícono de alto rendimiento en la era dorada de los deportivos. Con su enorme alerón "cola de ballena", motor turboalimentado y manejo desafiante, se convirtió en un auto de culto.</p> <div class="specs-box"> <h3 class="specs-title">Características Principales</h3> <div class="spec-item">Motor: Flat-6 (bóxer de 6 cilindros), refrigerado por aire</div> <div class="spec-item">Cilindrada: 3.0L (1975-1977) → 3.3L (1978-1989)</div> <div class="spec-item">Turbo: Un solo turbo KKK con empuje brutal</div> <div class="spec-item">Potencia: 3.0L - 260 HP | 3.3L - 300 HP (con intercooler)</div> <div class="spec-item">Transmisión: Manual de 4 velocidades (hasta 1988), 5 velocidades (1989)</div> <div class="spec-item">Velocidad Máxima: Aproximadamente 250 km/h</div> <div class="spec-item">Aceleración 0-100 km/h: Entre 5.2 y 4.9 segundos</div> <div class="spec-item">Peso: 1,300 - 1,500 kg aprox.</div> </div> </div> </div> </section>  <section class="section"> <h2 class="section-header">PORSCHE 944 (1982-1991)</h2> <div class="flex-container"> <div class="flex-content"> <p>El Porsche 944 fue un deportivo de motor delantero y tracción trasera que se convirtió en uno de los modelos más exitosos de Porsche en los años 80. Diseñado como una evolución del 924, el 944 ofrecía mayor potencia, mejor manejo y un diseño más agresivo.</p> <div class="specs-box"> <h3 class="specs-title">Características Técnicas</h3> <div class="spec-item">Motor: 4 cilindros en línea, basado en la mitad del motor V8 del Porsche 928</div> <div class="spec-item">Cilindrada: 2.5L (base), 2.7L (1989), 3.0L (S2), Turbo</div> <div class="spec-item">Potencia: 163-250 HP según versión</div> <div class="spec-item">Transmisión: Manual 5 velocidades o automática opcional</div> <div class="spec-item">Velocidad Máxima: 210-260 km/h según versión</div> <div class="spec-item">Peso: 1,200-1,400 kg</div> <div class="spec-item">Distribución peso: 50:50 (sistema transaxle)</div> </div> <div class="specs-box"> <h3 class="specs-title">Historia y Curiosidades</h3> <div class="curiosity">Fue el Porsche más vendido de su época, con más de 163,000 unidades</div> <div class="curiosity">Su versión Turbo S fue en su momento el auto de 4 cilindros más rápido del mundo</div> <div class="curiosity">La versión S2 Cabriolet (1989-1991) fue el primer 944 descapotable</div> </div> </div> <div class="flex-image"> <img src="944.png" alt="Porsche 944" class="car-image"> </div> </div> </section>  <section class="section"> <h2 class="section-header">MODELOS LEGENDARIOS DE PORSCHE</h2> <div class="legendary-cars">  <div class="legendary-card"> <img src="Porsche917.png" alt="Porsche 917"> <div class="legendary-content"> <h3 class="legendary-title">🏁 Porsche 917 (1969–1973)</h3> <p>El Porsche 917 fue un coche de carreras revolucionario que ayudó a Porsche a obtener su primera victoria absoluta en las 24 Horas de Le Mans en 1970.</p> <ul class="legendary-specs"> <li><strong>Motor:</strong> 4.5-5.0L Bóxer 12 cilindros</li> <li><strong>Potencia:</strong> 580–630 CV</li> <li><strong>Velocidad máxima:</strong> 390 km/h</li> </ul> </div> </div>  <div class="legendary-card"> <img src="porsche928.png" alt="Porsche 928"> <div class="legendary-content"> <h3 class="legendary-title">🚗 Porsche 928 (1977–1995)</h3> <p>El Porsche 928 nació con la intención de reemplazar al 911 como el modelo insignia de la marca, pero se convirtió en un exitoso Gran Turismo.</p> <ul class="legendary-specs"> <li><strong>Motor:</strong> 4.5L – 5.4L V8</li> <li><strong>Potencia:</strong> 219–350 CV</li> <li><strong>Velocidad máxima:</strong> 250–275 km/h</li> </ul> </div> </div>  <div class="legendary-card"> <img src="Porsche550.png" alt="Porsche 550 Spyder"> <div class="legendary-content"> <h3 class="legendary-title">🏎️ Porsche 550 Spyder (1953–1956)</h3> <p>El 550 Spyder fue el primer coche de carreras desarrollado específicamente por Porsche. Ligero, ágil y rápido.</p> <ul class="legendary-specs"> <li><strong>Motor:</strong> 1.5L Bóxer 4 cilindros</li> <li><strong>Potencia:</strong> 110 CV</li> <li><strong>Velocidad máxima:</strong> 220 km/h</li> </ul> </div> </div>  <div class="legendary-card"> <img src="porsche964.png" alt="Porsche 964"> <div class="legendary-content"> <h3 class="legendary-title">🚘 Porsche 964 (1989–1994)</h3> <p>El Porsche 964 marcó una gran evolución en el 911, combinando diseño clásico con tecnología avanzada.</p> <ul class="legendary-specs"> <li><strong>Motor:</strong> 3.6L Bóxer 6 cilindros</li> <li><strong>Potencia:</strong> 250–385 CV</li> <li><strong>Velocidad máxima:</strong> 260–280 km/h</li> </ul> </div> </div>  <div class="legendary-card"> <img src="Porsche968.png" alt="Porsche 968"> <div class="legendary-content"> <h3 class="legendary-title">🔥 Porsche 968 (1992–1995)</h3> <p>El 968 fue la evolución final del Porsche 944, con un diseño refinado y mejor desempeño.</p> <ul class="legendary-specs"> <li><strong>Motor:</strong> 3.0L 4 cilindros en línea</li> <li><strong>Potencia:</strong> 240 CV</li> <li><strong>Velocidad máxima:</strong> 252 km/h</li> </ul> </div> </div>  <div class="legendary-card"> <img src="porsche993.png" alt="Porsche 993"> <div class="legendary-content"> <h3 class="legendary-title">🏆 Porsche 993 (1995–1998)</h3> <p>El 993 es considerado por muchos el mejor 911 de la historia, combinando la esencia clásica con una mecánica mejorada.</p> <ul class="legendary-specs"> <li><strong>Motor:</strong> 3.6L Bóxer 6 cilindros</li> <li><strong>Potencia:</strong> 272–450 CV</li> <li><strong>Velocidad máxima:</strong> 270–290 km/h</li> </ul> </div> </div> </div> </section> </div> </div>  <script> document.addEventListener('DOMContentLoaded', function() { const toggleBtn = document.getElementById('toggleMenu'); const sidebar = document.getElementById('sidebar'); const mainContent = document.getElementById('mainContent'); toggleBtn.addEventListener('click', function() { sidebar.classList.toggle('active'); mainContent.classList.toggle('sidebar-active'); }); // Close sidebar on window resize if screen becomes larger window.addEventListener('resize', function() { if (window.innerWidth > 992) { sidebar.classList.remove('active'); mainContent.classList.remove('sidebar-active'); } }); }); </script> </body> </html> null generate-html-from-description