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>

Website

Recommended

Digital deja vu

Portfolio Webpage Example

CSS Animated Progress Bar HTML Structure

HTML

CSS

JS

Recommended

Digital deja vu

Portfolio Webpage Example

CSS Animated Progress Bar HTML Structure

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS