Plantilla HTML para escaparate de coches nuevos

516 iroger7

Abrir en el editor Publica tu código

Plantilla HTML para escaparate de coches nuevos

Recomendado

10 February 2026

El hombre de la ventana (horror)

17 April 2026

Plantilla HTML para sitio web de películas

15 January 2026

Conceptos básicos de Baldi remasterizados: Cargador de juegos WebGL

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>New Cars Showcase</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <header>
    <nav>
      <div class="logo">New Cars Showcase</div>
      <ul>
        <li><a href="#home" class="nav-link active">Home</a></li>
        <li><a href="#cars" class="nav-link">Cars</a></li>
        <li><a href="#contact" class="nav-link">Contact</a></li>
      </ul>
    </nav>
  </header>

<section id="home" class="section active">
    <h1>Welcome to New Cars Showcase!</h1>
    <p>Discover the latest and greatest cars. Explore, compare, and find your next dream car today!</p>
  </section>

<section id="cars" class="section">
    <h2>Latest Cars</h2>
    <div class="cars-list" id="carsList"></div>
  </section>

<section id="contact" class="section">
    <h2>Contact Us</h2>
    <form id="contactForm">
      <input type="text" id="name" placeholder="Your Name" required />
      <input type="email" id="email" placeholder="Your Email" required />
      <input id="message" placeholder="How can we help you?" required/>
      <button type="submit">Send</button>
      <div id="formMsg"></div>
    </form>
  </section>

<footer>
    <p>© 2024 New Cars Showcase</p>
  </footer>

CSS

body {
  font-family: Arial, sans-serif;
  background: #f4f7fa;
  margin: 0;
  padding: 0;
}
header nav {
  background: #223f5c;
  color: #fff;
  padding: 1em 2em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
nav .logo { font-size: 1.5em; font-weight: bold; }
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.3em;
}
nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: 5px;
}
nav a.active, nav a:hover { background: #446fa8; }
.section {
  display: none;
  padding: 2em 1em;
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  border-radius: 8px;
  margin-top: 2em;
  box-shadow: 0 2px 16px rgba(34,63,92,0.07);
}
.section.active { display: block; }
.cars-list {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  gap: 1.5em;
  margin-top: 1.5em;
}
.car-card {
  background: #e8eef3;
  border-radius: 7px;
  padding: 1em;
  text-align: center;
  box-shadow: 0 1px 8px rgba(34,63,92,0.06);
  position: relative;
}
.car-card img {
  width: 90%;
  max-width: 200px;
  border-radius: 6px;
}
.car-card h3 { margin: 0.7em 0 0.2em 0; }
.car-card button {
  margin-top: 0.7em;
  padding: 0.45em 1.1em;
  background: #223f5c;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.car-card button:hover { background: #4171b6; }
form {
  display: flex;
  flex-direction: column;
  gap: 1em;
  max-width: 400px;
  margin: 1em auto;
}
form input, form textarea {
  padding: 0.65em;
  border: 1px solid #aac2d5;
  border-radius: 5px;
  font-size: 1em;
}
form button {
  background: #223f5c;
  color: #fff;
  border: none;
  padding: 0.7em 1.5em;
  border-radius: 6px;
  font-size: 1.1em;
  cursor: pointer;
}
form button:hover { background: #4171b6; }
#formMsg { margin-top: 0.5em; }
footer {
  background: #223f5c;
  color: #fff;
  text-align: center;
  padding: 1em 0;
  margin-top: 2em;
}
/* Modal styling */
.modal {
  display: none;
  position: fixed;
  z-index: 99;
  left: 0; top: 0;
  width: 100vw; height: 100vh;
  background: rgba(40,60,90,0.28);
  align-items: center;
  justify-content: center;
}
.modal-content {
  background: #fff;
  padding: 2em 1.5em 1em 1.5em;
  border-radius: 10px;
  max-width: 400px;
  text-align: left;
  box-shadow: 0 8px 32px 0 rgba(34,63,92,0.14);
  position: relative;
  animation: modal-in 0.2s;
}
@keyframes modal-in {
  from {transform: translateY(35px) scale(0.95); opacity: 0;}
  to   {transform: translateY(0)    scale(1);    opacity: 1;}
}
.close { 
  position: absolute; 
  top: 0.7em; right: 1em; 
  font-size: 1.7em; 
  cursor: pointer; 
  color: #223f5c;
}
@media (max-width:600px) {
  .section { padding: 1em 0.2em; }
  nav ul { flex-direction: column; gap: 0.7em; }
  .cars-list { grid-template-columns: 1fr; }
}

// ----- Navigation -----
const navLinks = document.querySelectorAll('.nav-link');
const sections = document.querySelectorAll('.section');
navLinks.forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    navLinks.forEach(l => l.classList.remove('active'));
    this.classList.add('active');
    const id = this.getAttribute('href').substring(1);
    sections.forEach(sec => sec.classList.remove('active'));
    document.getElementById(id).classList.add('active');
  });
});

// ----- Car Data -----
const cars = [
  {
    name: "2024 Tesla Model 3",
    img: "https://tesla-cdn.thron.com/delivery/public/image/tesla/8c454468-f485-4187-84c7-6d88f54a3f2f/bvlatuR/std/400x240/ms-main-hero-desktop",
    price: "$39,990",
    desc: "All-electric sedan with advanced autopilot and 320mi range.",
    details: ["AWD", "0-60mph in 4.2s", "320mi range", "Electric"],
  },
  {
    name: "2024 Toyota Camry XSE",
    img: "https://www.toyota.com/imgix/responsive/images/mlp/colorizer/2024/camry/1j9/1.png",
    price: "$31,820",
    desc: "A reliable, efficient, and stylish family sedan.",
    details: ["Gasoline", "203hp", "29/40 MPG", "FWD"],
  },
  {
    name: "2024 Ford Mustang GT",
    img: "https://www.ford.com/is/image/content/dam/brand_ford/en_us/brand/cars/mustang/24_FRD_MST_wdmp_200401_02033.tif?croppathe=1_3x2&wid=900",
    price: "$44,170",
    desc: "Iconic muscle car with modern tech and thrilling V8 power.",
    details: ["5.0L V8", "450hp", "6-speed manual", "RWD"],
  },
  {
    name: "2024 BMW i4 eDrive40",
    img: "https://cdn.bmwusa.com/cosy.arox?pov=front&brand=WBBM&vehicle=24DB&client=byo&paint=P0C4U&fabric=FKHSW&sa=S01CB,S01RD,S01S1,S0223,S0248,S02TE,S02VB,S02VC,S0302,S0319,S0322,S03MB,S0420,S0423,S0430,S0431,S0459,S0481,S0493,S0494,S04GQ,S04T8,S04UR,S0534,S0548,S05AC,S05AS,S05DN,S0676,S06AC,S06AK,S06C4,S06NX,S06U3,S06WC,S0710,S0715,S07RS,S07WQ,S07XM,S08KL,S08TF,S08V1,S08W5,S09T8&background=transparent&resp=png&angle=60",
    price: "$52,000",
    desc: "Luxury all-electric Gran Coupe with 301mi electric range.",
    details: ["Electric", "301mi range", "340hp", "0-60mph in 5.5s"],
  }
];

// ----- Render Cars -----
const carsList = document.getElementById('carsList');
cars.forEach((car, i) => {
  const div = document.createElement('div');
  div.className = 'car-card';
  div.innerHTML = `
    <img src="${car.img}" alt="${car.name}" />
    <h3>${car.name}</h3>
    <div><strong>Price:</strong> ${car.price}</div>
    <p>${car.desc}</p>
    <button data-i="${i}">View Details</button>
  `;
  carsList.appendChild(div);
});

// ----- Modal -----
const modal = document.getElementById('carModal');
const modalBody = document.getElementById('modalBody');
const closeModal = document.getElementById('closeModal');
carsList.addEventListener('click', function(e) {
  if(e.target.tagName.toLowerCase()==='button'){
    const car = cars[e.target.getAttribute('data-i')];
    modalBody.innerHTML = `
      <h2>${car.name}</h2>
      <img src="${car.img}" alt="${car.name}" style="width:90%;max-width:240px;border-radius:7px;"/>
      <p><strong>Price:</strong> ${car.price}</p>
      <p>${car.desc}</p>
      <ul>${car.details.map(d=>`<li>${d}</li>`).join('')}</ul>
    `;
    modal.style.display = "flex";
  }
});
closeModal.onclick = () => modal.style.display = "none";
window.onclick = e => { if(e.target==modal) modal.style.display="none"; };

// ----- Contact Form -----
document.getElementById('contactForm').onsubmit = function(e) {
  e.preventDefault();
  document.getElementById('formMsg').textContent = "Thank you for contacting us!";
  this.reset();
};