Plantilla HTML para escaparate de coches nuevos

98 iroger7

Abrir en el editor Video Publica tu código

Plantilla HTML para escaparate de coches nuevos

Recomendado

28 August 2025

Plantilla web de carpintería | Tailwind CSS, Artisan Design

5 February 2026

Juegos desbloqueados: juega gratis en línea en la escuela o en casa

26 December 2024

Un código de logicalarray833

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; }
}

JS

// ----- 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();
};

Recomendado

Plantilla web de carpintería | Tailwind CSS, Artisan Design

Juegos desbloqueados: juega gratis en línea en la escuela o en casa

Un código de logicalarray833

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS