Webleb - UI Elements

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>

CSS

JS

Website

Recommended