नई कारों के प्रदर्शन के लिए HTML टेम्पलेट

97 iroger7

संपादक में खोलें Video अपना कोड प्रकाशित करें

नई कारों के प्रदर्शन के लिए HTML टेम्पलेट

अनुशंसित

16 January 2026

रफ़ल फ़्लैश गेम प्लेयर HTML टेम्पलेट

12 December 2025

होलोग्राफिक पोर्टफोलियो वेबसाइट टेम्पलेट | HTML CSS JS

21 July 2025

UNO कार्ड HTML 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();
};

अनुशंसित

रफ़ल फ़्लैश गेम प्लेयर HTML टेम्पलेट

होलोग्राफिक पोर्टफोलियो वेबसाइट टेम्पलेट | HTML CSS JS

UNO कार्ड HTML CSS उदाहरण

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS