Modello HTML per la presentazione di nuove auto

93 iroger7

Apri nell'Editor Video Pubblica il Tuo Codice

Modello HTML per la presentazione di nuove auto

Consigliato

10 December 2025

Codice sorgente JavaScript del gioco HTML Canvas Snake

5 June 2025

Un codice di Yotva

24 June 2025

Modello HTML per agenzia digitale | Tailwind CSS

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

Consigliato

Codice sorgente JavaScript del gioco HTML Canvas Snake

Un codice di Yotva

Modello HTML per agenzia digitale | Tailwind CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS