Website

1147 kevekıbhack

Open In Editor Publish Your Code

Website

Recommended

13 June 2025

Effet de survol des cartes

15 December 2023

JavaScript Stack Game

12 September 2025

Image Slider HTML CSS JavaScript

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