Modèle HTML de présentation de voitures neuves

96 iroger7

Ouvrir dans l'éditeur Video Publiez votre code

Modèle HTML de présentation de voitures neuves

Recommandé

29 September 2023

Animation de bouton de commande

19 October 2024

Portfolio de développeur HTML V2

19 October 2024

Site Web de portfolio de développeur HTML

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

Recommandé

Animation de bouton de commande

Portfolio de développeur HTML V2

Site Web de portfolio de développeur HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS