Webleb - Snippets de Código

HTML

<!DOCTYPE html>

<head>

<title>Öne Çıkan Araçlar</title>

<style>

body {

margin: 0;

font-family: sans-serif;

background-color: #111;

color: #fff;

}

h2 {

color: gold;

text-align: center;

margin-top: 40px;

}

.filters {

text-align: center;

margin: 20px 0;

}

.filters button {

background: none;

border: 2px solid gold;

color: gold;

padding: 10px 20px;

margin: 5px;

border-radius: 5px;

cursor: pointer;

transition: all 0.3s;

}

.filters button:hover {

background-color: gold;

color: #000;

}

.grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

gap: 20px;

padding: 20px;

max-width: 1200px;

margin: auto;

}

.car-card {

background-color: #222;

border-radius: 8px;

overflow: hidden;

box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);

}

.car-card img {

width: 100%;

height: 200px;

object-fit: cover;

}

.car-card .info {

padding: 15px;

}

.car-card .info h3 {

color: gold;

margin-bottom: 5px;

}

.car-card .info p {

margin: 4px 0;

}

.hidden {

display: none;

}

</style>

</head>

<body>

<h2>Öne Çıkan Araçlar</h2>

<button onclick="filterCars('mercedes')">Mercedes</button>

<button onclick="filterCars('porsche')">Porsche</button>

</div>

<h3>Mercedes-Benz S-Class</h3>

<p>2023 • Benzin • Otomatik • 5.000 km</p>

</div>

<h3>Porsche Cayenne</h3>

<p>2022 • Dizel • Otomatik • 8.000 km</p>

</div>

<h3>Mercedes GLE</h3>

<p>2021 • Hibrit • Otomatik • 15.000 km</p>

</div>

<h3>Porsche Taycan</h3>

<p>2023 • Elektrik • Otomatik • 2.000 km</p>

</div>

function filterCars(brand) {

const cards = document.querySelectorAll('.car-card');

cards.forEach(card => {

const cardBrand = card.getAttribute('data-brand');

if (brand === 'all' || cardBrand === brand) {

card.classList.remove('hidden');

} else {

card.classList.add('hidden');

}

});

}

</script>

</body>

</html>

Site

Recomendado

Modelo HTML de formulário de login Cyberpunk

Um código de Mete

HTML

CSS

JS

Recomendado

Modelo HTML de formulário de login Cyberpunk

Um código de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS