Website

1,818 kevekıbhack

Open In Editor Publish Your Code

Website

Recommended

24 August 2025

Car Specs Accordion Slider HTML

10 December 2025

Flappy Bird Game Demo - HTML Canvas JavaScript

17 February 2026

HTML

<!DOCTYPE html>

<html lang="tr">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<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>

<div class="filters">

<button onclick="filterCars('all')">Tümü</button>

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

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

</div>

<div class="grid" id="carGrid">

<div class="car-card" data-brand="mercedes">

<img src="https://images.unsplash.com/photo-1555215695-3004980ad54e" alt="Mercedes-Benz S-Class">

<div class="info">

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

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

<p>₺3.250.000</p>

</div>

</div>

<div class="car-card" data-brand="porsche">

<img src="https://images.unsplash.com/photo-1541899481282-d53b3e36e9d9" alt="Porsche Cayenne">

<div class="info">

<h3>Porsche Cayenne</h3>

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

<p>₺4.750.000</p>

</div>

</div>

<div class="car-card" data-brand="mercedes">

<img src="https://images.unsplash.com/photo-1606902965551-dce093cda6ec" alt="Mercedes GLE">

<div class="info">

<h3>Mercedes GLE</h3>

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

<p>₺3.800.000</p>

</div>

</div>

<div class="car-card" data-brand="porsche">

<img src="https://images.unsplash.com/photo-1616788079964-ced68c2d1052" alt="Porsche Taycan">

<div class="info">

<h3>Porsche Taycan</h3>

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

<p>₺6.200.000</p>

</div>

</div>

</div>

<script>

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