Webleb - UI Elements

HTML

<!DOCTYPE html>

<head>

<title>AURA | Global Automotive Excellence</title>

<style>

:root {

--primary: #0a0a0a;

--accent: #c5a059;

--text: #ffffff;

--glass: rgba(255, 255, 255, 0.05);

--border: rgba(255, 255, 255, 0.1);

--transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

scroll-behavior: smooth;

}

body {

font-family: 'Montserrat', sans-serif;

background-color: var(--primary);

color: var(--text);

overflow-x: hidden;

}

/* --- Global Elements --- */

.container { width: 90%; max-width: 1400px; margin: 0 auto; }

.section-padding { padding: 120px 0; }

.title-main { font-family: 'Oswald', sans-serif; font-size: 3.5rem; text-transform: uppercase; margin-bottom: 2rem; }

.subtitle { color: var(--accent); letter-spacing: 4px; font-weight: 700; margin-bottom: 10px; display: block; }

/* --- Reveal --- */

.reveal { opacity: 0; transform: translateY(30px); transition: var(--transition); }

.reveal.active { opacity: 1; transform: translateY(0); }

/* --- Navbar --- */

nav {

position: fixed;

top: 0; width: 100%;

padding: 25px 5%;

display: flex;

justify-content: space-between;

align-items: center;

z-index: 1000;

transition: var(--transition);

}

nav.scrolled {

background: rgba(10, 10, 10, 0.95);

padding: 15px 5%;

backdrop-filter: blur(15px);

border-bottom: 1px solid var(--border);

}

.logo { font-size: 2rem; font-weight: 900; letter-spacing: 5px; color: var(--accent); }

.nav-links { display: flex; gap: 30px; list-style: none; }

.nav-links a { color: #fff; text-decoration: none; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; transition: 0.3s; }

.nav-links a:hover { color: var(--accent); }

/* --- Hero --- */

.hero {

height: 100vh;

display: flex;

align-items: center;

background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&q=80&w=1920');

background-size: cover;

background-position: center;

background-attachment: fixed;

}

/* --- Showroom / Brands --- */

.brand-grid {

display: grid;

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

gap: 25px;

}

.car-card {

background: var(--glass);

border: 1px solid var(--border);

border-radius: 15px;

overflow: hidden;

transition: var(--transition);

position: relative;

}

.car-card:hover { transform: scale(1.03); border-color: var(--accent); }

.car-img { width: 100%; height: 200px; object-fit: cover; }

.car-info { padding: 25px; }

.car-price { font-size: 1.2rem; color: var(--accent); font-weight: 700; margin-top: 10px; display: block; }

/* --- Voting System --- */

.voting-box {

background: var(--secondary-bg);

padding: 50px;

border-radius: 30px;

text-align: center;

border: 2px solid var(--accent);

}

.vote-options {

display: grid;

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

gap: 20px;

margin-top: 30px;

}

.vote-btn {

background: transparent;

border: 1px solid var(--border);

padding: 20px;

border-radius: 10px;

color: #fff;

cursor: pointer;

transition: 0.3s;

}

.vote-btn:hover { background: var(--accent); color: #000; border-color: var(--accent); }

.vote-count { display: block; font-size: 0.7rem; margin-top: 10px; opacity: 0.6; }

/* --- Blog --- */

.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 40px; }

.blog-post { cursor: pointer; }

.blog-thumb { width: 100%; height: 250px; object-fit: cover; border-radius: 10px; margin-bottom: 20px; transition: 0.5s; }

.blog-post:hover .blog-thumb { filter: brightness(1.2); }

/* --- Services --- */

.service-list { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }

.service-item { flex: 1; min-width: 250px; background: #111; padding: 40px; border-radius: 15px; text-align: center; }

.service-item i { font-size: 3rem; color: var(--accent); margin-bottom: 20px; }

/* --- Contact --- */

.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; }

.contact-form input, .contact-form textarea {

width: 100%; background: #1a1a1a; border: 1px solid var(--border);

padding: 15px; color: #fff; margin-bottom: 20px; border-radius: 5px;

}

footer { background: #050505; padding: 100px 5% 50px; border-top: 1px solid var(--border); }

/* Responsive */

@media (max-width: 968px) {

.contact-layout { grid-template-columns: 1fr; gap: 50px; }

.title-main { font-size: 2.5rem; }

}

</style>

</head>

<body>

<li><a href="#hero">Ana Sayfa</a></li>

<li><a href="#about">Hakkımızda</a></li>

<li><a href="#models">Modeller</a></li>

<li><a href="#services">Hizmetler</a></li>

<li><a href="#contact">İletişim</a></li>

</ul>

</nav>

<span class="subtitle reveal">Sınırsız Performans</span>

<h1 class="title-main reveal" style="font-size: 5rem;">Mükemmelliğin Yeni Adı.</h1>

<p class="reveal" style="max-width: 600px; margin-bottom: 30px;">Dünyanın en seçkin otomobilleri, gelişmiş mühendislik ve kusursuz tasarım Aura Global Showroom'unda buluşuyor.</p>

<a href="#models" class="vote-btn" style="text-decoration: none; display: inline-block;">Koleksiyonu İncele</a>

</div>

</section>

<span class="subtitle">Hikayemiz</span>

<h2 class="title-main">Hızın ve Zarafetin Mirası</h2>

<p>Aura, otomotiv dünyasının devlerini tek bir çatı altında toplayan global bir vizyonun ürünüdür. Amacımız, sadece bir araç satmak değil, bir yaşam tarzı sunmaktır.</p>

<br>

<p>Her bir modelimiz, aerodinamik testlerden geçmiş ve en yüksek güvenlik standartlarıyla donatılmıştır.</p>

</div>

</div>

</section>

<span class="subtitle">Global Showroom</span>

<h2 class="title-main">Popüler Modeller</h2>

</div>

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

<p>Lüksün ve konforun zirvesi.</p>

<span class="car-price">₺8.400.000'den başlayan</span>

</div>

<p>Saf performans ve dinamizm.</p>

<span class="car-price">₺7.950.000'den başlayan</span>

</div>

<h3>Tesla Model S Plaid</h3>

<p>Sıfır emisyon, maksimum hız.</p>

<span class="car-price">₺4.200.000'den başlayan</span>

</div>

<h3>Porsche 911 Turbo S</h3>

<p>Bir efsanenin modern yüzü.</p>

<span class="car-price">₺12.100.000'den başlayan</span>

</div>

</section>

<span class="subtitle">Halkın Seçimi</span>

<h2 class="title-main">Sizce Hangi Marka Daha İyi?</h2>

<i class="fab fa-vimeo-v"></i><br>Mercedes

</button>

<i class="fas fa-bold"></i><br>BMW

</button>

<i class="fas fa-circle-notch"></i><br>Audi

</button>

<i class="fas fa-bolt"></i><br>Tesla

</button>

</div>

</section>

<span class="subtitle">Profesyonel Destek</span>

<h2 class="title-main">Hizmetlerimiz</h2>

</div>

<h3>Test Sürüşü</h3>

<p>En son modellerimizi profesyonel eğitmenler eşliğinde deneyimleyin.</p>

</div>

<h3>Vip Servis</h3>

<p>Aracınız evinizden alınır ve bakım sonrası size teslim edilir.</p>

</div>

<h3>Finansal Çözümler</h3>

<p>Size özel düşük faizli kredi ve kiralama seçenekleri.</p>

</div>

</section>

<span class="subtitle">Otomobil Dünyası</span>

</div>

<h3>Elektrikli Araçların Geleceği</h3>

<p>Batarya teknolojisindeki son gelişmeler menzilleri nasıl etkiliyor?</p>

</div>

<h3>Klasiklerin Dönüşü</h3>

<p>Restore edilen 60'lar otomobilleri neden paha biçilemez?</p>

</div>

</section>

<span class="subtitle">Bize Ulaşın</span>

<h2 class="title-main">Sorularınız İçin Buradayız</h2>

<p><i class="fas fa-envelope"></i> contact@auramotors.com</p>

<p><i class="fas fa-map-marker-alt"></i> Maslak Otomotiv Plaza, No:12 Istanbul</p>

</div>

<button type="submit" class="vote-btn" style="width: 100%;">Mesaj Gönder</button>

</form>

</div>

</section>

<div>

<p style="opacity: 0.5; margin-top: 15px;">Dünya markalarının buluşma noktası.</p>

</div>

<a href="#">Gizlilik Politikası</a>

<a href="#">Bayilik Başvurusu</a>

</div>

</div>

</div>

</footer>

// Scroll Effect for Navbar

window.addEventListener('scroll', () => {

const nav = document.getElementById('navbar');

if(window.scrollY > 50) nav.classList.add('scrolled');

else nav.classList.remove('scrolled');

});

// Reveal Animation

const observer = new IntersectionObserver((entries) => {

entries.forEach(entry => {

if(entry.isIntersecting) entry.target.classList.add('active');

});

}, { threshold: 0.1 });

document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

// Voting System Logic

let votes = {

'Mercedes': Math.floor(Math.random() * 500) + 200,

'BMW': Math.floor(Math.random() * 500) + 180,

'Audi': Math.floor(Math.random() * 500) + 150,

'Tesla': Math.floor(Math.random() * 500) + 250

};

// Initialize display

Object.keys(votes).forEach(key => {

const el = document.getElementById(key.toLowerCase() + '-votes');

if(el) el.innerText = votes[key] + ' Oy';

});

function vote(brand) {

votes[brand]++;

const el = document.getElementById(brand.toLowerCase() + '-votes');

el.innerText = votes[brand] + ' Oy';

el.parentElement.style.transform = 'scale(1.1)';

setTimeout(() => el.parentElement.style.transform = 'scale(1)', 200);

// Custom Message Box instead of alert

const msg = document.createElement('div');

msg.style = "position:fixed; bottom:20px; right:20px; background:var(--accent); color:#000; padding:15px 30px; border-radius:5px; z-index:1001; font-weight:bold;";

msg.innerText = brand + " için oyunuz kaydedildi!";

document.body.appendChild(msg);

setTimeout(() => msg.remove(), 3000);

}

</script>

</body>

</html>

Metehan

Recommended

A Code by Metehan

HTML

CSS

JS

Recommended

A Code by Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS