Webleb - UI Elements - Mete'nin kodu

HTML

<!DOCTYPE html>

<head>

<title>VoltDrive | Geleceğin Elektrikli Otomobilleri</title>

<style>

:root {

--black: #0d0d0d;

--carbon: #2C2C2C;

--electric-blue: #00FFFF;

--electric-blue-dark: #009999;

--light-gray: #e6e6e6;

--transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

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

background-color: var(--black);

color: var(--light-gray);

line-height: 1.6;

overflow-x: hidden;

}

a {

text-decoration: none;

color: inherit;

transition: var(--transition);

}

.container {

max-width: 1200px;

margin: 0 auto;

padding: 0 20px;

}

.btn {

display: inline-block;

padding: 14px 32px;

background: transparent;

color: var(--electric-blue);

border: 2px solid var(--electric-blue);

border-radius: 4px;

font-weight: 600;

text-transform: uppercase;

letter-spacing: 1px;

cursor: pointer;

transition: var(--transition);

position: relative;

overflow: hidden;

z-index: 1;

}

.btn:before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 0;

height: 100%;

background: var(--electric-blue);

transition: width 0.5s ease;

z-index: -1;

}

.btn:hover:before {

width: 100%;

}

.btn:hover {

color: var(--black);

transform: translateY(-3px);

box-shadow: 0 5px 15px rgba(0, 255, 255, 0.4);

}

.section-title {

text-align: center;

margin-bottom: 60px;

position: relative;

}

.section-title h2 {

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

font-size: 2.8rem;

text-transform: uppercase;

color: var(--light-gray);

margin-bottom: 15px;

}

.section-title h2 span {

color: var(--electric-blue);

}

.section-title .divider {

width: 100px;

height: 4px;

background: var(--electric-blue);

margin: 0 auto;

position: relative;

}

.section-title .divider:after {

content: '';

position: absolute;

top: -2px;

left: 50%;

transform: translateX(-50%);

width: 20px;

height: 8px;

background: var(--electric-blue);

border-radius: 4px;

}

/* Header Styles */

header {

background-color: rgba(13, 13, 13, 0.95);

position: fixed;

width: 100%;

z-index: 1000;

padding: 15px 0;

border-bottom: 1px solid rgba(0, 255, 255, 0.1);

backdrop-filter: blur(10px);

transition: var(--transition);

}

header.scrolled {

padding: 10px 0;

box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);

}

.header-container {

display: flex;

justify-content: space-between;

align-items: center;

}

.logo {

display: flex;

align-items: center;

}

.logo h1 {

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

font-size: 1.8rem;

font-weight: 700;

text-transform: uppercase;

color: var(--light-gray);

}

.logo h1 span {

color: var(--electric-blue);

}

nav ul {

display: flex;

gap: 30px;

}

nav ul li a {

font-weight: 500;

position: relative;

padding: 5px 0;

}

nav ul li a:after {

content: '';

position: absolute;

bottom: 0;

left: 0;

width: 0;

height: 2px;

background: var(--electric-blue);

transition: var(--transition);

}

nav ul li a:hover:after,

nav ul li a.active:after {

width: 100%;

}

.mobile-toggle {

display: none;

font-size: 1.5rem;

cursor: pointer;

color: var(--light-gray);

}

/* Hero Section */

.hero {

height: 100vh;

position: relative;

display: flex;

align-items: center;

overflow: hidden;

}

.hero-bg {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9)), url('https://images.unsplash.com/photo-1541899481282-d53bffe3c35d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') no-repeat center center/cover;

z-index: -2;

}

.hero-overlay {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: radial-gradient(circle at center, transparent 40%, var(--black) 100%);

z-index: -1;

}

.hero-content {

max-width: 650px;

padding: 20px;

position: relative;

z-index: 2;

}

.hero-content h2 {

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

font-size: 3.8rem;

line-height: 1.2;

margin-bottom: 20px;

text-transform: uppercase;

}

.hero-content h2 span {

color: var(--electric-blue);

display: block;

}

.hero-content p {

font-size: 1.2rem;

margin-bottom: 30px;

opacity: 0.9;

max-width: 600px;

}

.hero-stats {

display: flex;

gap: 30px;

margin-top: 40px;

flex-wrap: wrap;

}

.stat-item {

text-align: center;

padding: 15px 25px;

background: rgba(44, 44, 44, 0.5);

border-radius: 10px;

border: 1px solid rgba(0, 255, 255, 0.2);

backdrop-filter: blur(5px);

}

.stat-item .number {

font-size: 2.5rem;

font-weight: 700;

color: var(--electric-blue);

margin-bottom: 5px;

}

.stat-item .label {

font-size: 0.9rem;

text-transform: uppercase;

letter-spacing: 1px;

}

/* Features Section */

.features {

padding: 100px 0;

background: linear-gradient(to bottom, var(--black), var(--carbon));

position: relative;

overflow: hidden;

}

.features:before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: radial-gradient(circle at 20% 30%, rgba(0, 255, 255, 0.05) 0%, transparent 40%);

pointer-events: none;

}

.features-grid {

display: grid;

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

gap: 30px;

}

.feature-card {

background: rgba(44, 44, 44, 0.7);

border-radius: 15px;

padding: 40px 30px;

text-align: center;

transition: var(--transition);

position: relative;

overflow: hidden;

backdrop-filter: blur(5px);

border: 1px solid rgba(0, 255, 255, 0.1);

}

.feature-card:hover {

transform: translateY(-10px);

box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);

border-color: var(--electric-blue);

}

.feature-icon {

width: 80px;

height: 80px;

background: rgba(0, 255, 255, 0.1);

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

margin: 0 auto 25px;

color: var(--electric-blue);

font-size: 2rem;

transition: var(--transition);

}

.feature-card:hover .feature-icon {

background: var(--electric-blue);

color: var(--black);

transform: scale(1.1);

}

.feature-card h3 {

font-size: 1.5rem;

margin-bottom: 15px;

color: var(--light-gray);

}

.feature-card p {

font-size: 1rem;

opacity: 0.8;

}

/* Models Section */

.models {

padding: 100px 0;

background-color: var(--black);

position: relative;

overflow: hidden;

}

.models:before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: radial-gradient(circle at 80% 70%, rgba(0, 255, 255, 0.05) 0%, transparent 40%);

pointer-events: none;

}

.models-grid {

display: grid;

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

gap: 30px;

}

.model-card {

background: var(--carbon);

border-radius: 15px;

overflow: hidden;

transition: var(--transition);

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

position: relative;

}

.model-card:hover {

transform: translateY(-10px);

box-shadow: 0 15px 35px rgba(0, 255, 255, 0.2);

}

.model-img {

height: 250px;

overflow: hidden;

position: relative;

}

.model-img img {

width: 100%;

height: 100%;

object-fit: cover;

transition: var(--transition);

}

.model-card:hover .model-img img {

transform: scale(1.05);

}

.model-content {

padding: 25px;

}

.model-content h3 {

font-size: 1.6rem;

margin-bottom: 10px;

color: var(--light-gray);

}

.model-price {

font-size: 1.8rem;

font-weight: 700;

color: var(--electric-blue);

margin-bottom: 15px;

}

.model-features {

display: flex;

justify-content: space-between;

margin-bottom: 20px;

flex-wrap: wrap;

gap: 10px;

}

.model-feature {

display: flex;

align-items: center;

gap: 8px;

font-size: 0.9rem;

opacity: 0.9;

}

.model-feature i {

color: var(--electric-blue);

}

/* Technology Section */

.technology {

padding: 100px 0;

background: linear-gradient(to bottom, var(--carbon), var(--black));

position: relative;

overflow: hidden;

}

.tech-content {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 50px;

align-items: center;

}

.tech-image {

position: relative;

border-radius: 10px;

overflow: hidden;

box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);

}

.tech-image img {

width: 100%;

display: block;

}

.tech-text h3 {

font-size: 2.2rem;

margin-bottom: 20px;

color: var(--light-gray);

}

.tech-text h3 span {

color: var(--electric-blue);

}

.tech-text p {

margin-bottom: 20px;

opacity: 0.9;

}

.tech-features {

margin: 30px 0;

}

.tech-item {

display: flex;

align-items: center;

margin-bottom: 15px;

gap: 15px;

}

.tech-item i {

color: var(--electric-blue);

font-size: 1.5rem;

min-width: 30px;

}

/* Dealership Section */

.dealership {

padding: 100px 0;

background-color: var(--black);

position: relative;

}

.dealer-map {

height: 500px;

background: var(--carbon);

border-radius: 15px;

overflow: hidden;

position: relative;

box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);

border: 1px solid rgba(0, 255, 255, 0.1);

}

.map-overlay {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(44,44,44,0.8) 100%);

display: flex;

flex-direction: column;

justify-content: center;

padding: 50px;

}

.map-overlay h3 {

font-size: 2.2rem;

margin-bottom: 20px;

color: var(--light-gray);

}

.map-overlay h3 span {

color: var(--electric-blue);

}

.dealer-list {

display: grid;

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

gap: 20px;

margin-top: 30px;

}

.dealer-item {

background: rgba(0, 0, 0, 0.5);

padding: 20px;

border-radius: 10px;

border: 1px solid rgba(0, 255, 255, 0.1);

}

.dealer-item h4 {

font-size: 1.2rem;

margin-bottom: 10px;

color: var(--electric-blue);

}

.dealer-item p {

font-size: 0.9rem;

opacity: 0.8;

margin-bottom: 5px;

}

/* Contact Section */

.contact {

padding: 100px 0;

background: linear-gradient(to bottom, var(--black), var(--carbon));

position: relative;

overflow: hidden;

}

.contact:before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: radial-gradient(circle at 50% 50%, rgba(0, 255, 255, 0.05) 0%, transparent 40%);

pointer-events: none;

}

.contact-container {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 50px;

align-items: center;

}

.contact-info h3 {

font-size: 2rem;

margin-bottom: 20px;

color: var(--light-gray);

}

.contact-info h3 span {

color: var(--electric-blue);

}

.contact-info p {

margin-bottom: 20px;

opacity: 0.9;

}

.contact-details {

margin: 30px 0;

}

.contact-item {

display: flex;

align-items: center;

margin-bottom: 20px;

gap: 15px;

}

.contact-item i {

width: 50px;

height: 50px;

background: var(--electric-blue);

color: var(--black);

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

font-size: 1.2rem;

}

.contact-text h4 {

font-size: 1.1rem;

margin-bottom: 5px;

}

.social-links {

display: flex;

gap: 15px;

margin-top: 20px;

}

.social-links a {

display: flex;

align-items: center;

justify-content: center;

width: 40px;

height: 40px;

border-radius: 50%;

background: var(--carbon);

transition: var(--transition);

border: 1px solid rgba(0, 255, 255, 0.1);

}

.social-links a:hover {

background: var(--electric-blue);

color: var(--black);

transform: translateY(-5px);

}

.contact-form .form-group {

margin-bottom: 20px;

}

.contact-form input,

.contact-form textarea,

.contact-form select {

width: 100%;

padding: 15px;

background: var(--carbon);

border: 1px solid rgba(255, 255, 255, 0.1);

border-radius: 5px;

color: var(--light-gray);

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

transition: var(--transition);

}

.contact-form input:focus,

.contact-form textarea:focus,

.contact-form select:focus {

outline: none;

border-color: var(--electric-blue);

box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);

}

.contact-form textarea {

height: 150px;

resize: vertical;

}

/* Footer */

footer {

background: var(--black);

padding: 80px 0 20px;

border-top: 1px solid rgba(0, 255, 255, 0.1);

}

.footer-grid {

display: grid;

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

gap: 30px;

margin-bottom: 50px;

}

.footer-col h4 {

font-size: 1.3rem;

margin-bottom: 25px;

position: relative;

padding-bottom: 10px;

color: var(--light-gray);

}

.footer-col h4:after {

content: '';

position: absolute;

bottom: 0;

left: 0;

width: 50px;

height: 2px;

background: var(--electric-blue);

}

.footer-col p {

margin-bottom: 20px;

opacity: 0.8;

}

.footer-links li {

margin-bottom: 12px;

}

.footer-links li a {

position: relative;

padding-left: 15px;

}

.footer-links li a:before {

content: '→';

position: absolute;

left: 0;

color: var(--electric-blue);

transition: var(--transition);

opacity: 0;

}

.footer-links li a:hover {

color: var(--electric-blue);

padding-left: 20px;

}

.footer-links li a:hover:before {

opacity: 1;

}

.copyright {

text-align: center;

padding-top: 30px;

border-top: 1px solid rgba(255, 255, 255, 0.1);

font-size: 0.9rem;

opacity: 0.7;

}

/* Animations */

@keyframes float {

0% { transform: translateY(0px); }

50% { transform: translateY(-10px); }

100% { transform: translateY(0px); }

}

.floating {

animation: float 4s ease-in-out infinite;

}

@keyframes pulse {

0% { box-shadow: 0 0 0 0 rgba(0, 255, 255, 0.4); }

70% { box-shadow: 0 0 0 15px rgba(0, 255, 255, 0); }

100% { box-shadow: 0 0 0 0 rgba(0, 255, 255, 0); }

}

.pulse {

animation: pulse 2s infinite;

}

/* Responsive */

@media (max-width: 992px) {

.tech-content, .contact-container {

grid-template-columns: 1fr;

}

.tech-image {

max-width: 600px;

margin: 0 auto 30px;

}

@media (max-width: 768px) {

.mobile-toggle {

display: block;

}

nav ul {

position: fixed;

top: 70px;

left: -100%;

width: 100%;

height: calc(100vh - 70px);

background: var(--black);

flex-direction: column;

align-items: center;

justify-content: center;

transition: var(--transition);

gap: 30px;

z-index: 1000;

}

nav ul.active {

left: 0;

}

.hero-content h2 {

font-size: 2.8rem;

}

.hero-stats {

flex-wrap: wrap;

justify-content: center;

}

.section-title h2 {

font-size: 2.2rem;

}

@media (max-width: 576px) {

.hero-content h2 {

font-size: 2.2rem;

}

.section-title h2 {

font-size: 1.8rem;

}

.hero-stats {

flex-direction: column;

}

.model-features {

flex-direction: column;

}

</style>

</head>

<body>

<h1>VOLT<span>DRIVE</span></h1>

</div>

<nav>

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

<li><a href="#features">Teknoloji</a></li>

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

<li><a href="#technology">Özellikler</a></li>

<li><a href="#dealership">Bayilik</a></li>

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

</ul>

</div>

</nav>

</div>

</header>

<h2>Geleceğin <span>Yolculuğu Başlıyor</span></h2>

<p>Sıfır emisyon, yüksek performans ve akıllı teknolojilerle donatılmış elektrikli araçlarımızla tanışın. Sürdürülebilir geleceğe birlikte ilerleyelim.</p>

<a href="#models" class="btn pulse">Modelleri Keşfet</a>

<div class="label">Menzil</div>

</div>

</div>

<div class="label">Otonom Sürüş</div>

</div>

</section>

<h2>Üstün <span>Teknolojiler</span></h2>

</div>

</div>

<h3>Gelişmiş Batarya</h3>

<p>800V ultra hızlı şarj teknolojisi ile 15 dakikada 400 km menzil</p>

</div>

</div>

<h3>Yüksek Performans</h3>

<p>0-100 km/h 2.4 saniye ile sınıfının en hızlı elektrikli SUV'u</p>

</div>

</div>

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

<p>Seviye 4 otonom sürüş ile konforlu ve güvenli yolculuk</p>

</div>

</div>

<h3>Sürdürülebilirlik</h3>

<p>%100 karbon nötr üretim ve geri dönüştürülmüş malzemeler</p>

</div>

</section>

<h2>VoltDrive <span>Modelleri</span></h2>

</div>

</div>

<h3>VoltDrive S Serisi</h3>

<span>650km Menzil</span>

</div>

</div>

</div>

<a href="#" class="btn">Detaylı İncele</a>

</div>

</div>

<h3>VoltDrive E Serisi</h3>

<span>520km Menzil</span>

</div>

</div>

</div>

<a href="#" class="btn">Detaylı İncele</a>

</div>

</div>

<h3>VoltDrive X Serisi</h3>

<span>720km Menzil</span>

</div>

</div>

</div>

<a href="#" class="btn">Detaylı İncele</a>

</div>

</section>

<h2>Akıllı <span>Teknoloji</span></h2>

</div>

</div>

<h3>Geleceğin <span>Sürüş Deneyimi</span></h3>

<p>VoltDrive araçlarında kullanılan ileri teknolojiler, sürüş deneyiminizi tamamen yeniden tanımlıyor. Otonom sürüş, yapay zeka destekli asistan ve gelişmiş güvenlik sistemleri ile yolculuklarınız daha konforlu ve güvenli hale geliyor.</p>

<div>

<h4>Yapay Zeka Destekli Asistan</h4>

<p>Sesli komutlarla araç kontrolü ve kişiselleştirilmiş deneyim</p>

</div>

<div>

<h4>Gelişmiş Güvenlik Sistemleri</h4>

<p>360° çevre izleme, otonom frenleme ve acik durum algılama</p>

</div>

<div>

<h4>Kablosuz Yazılım Güncellemeleri</h4>

<p>Aracınız sürekli olarak en yeni özelliklerle güncellenir</p>

</div>

<a href="#" class="btn">Teknolojiyi Keşfet</a>

</div>

</section>

<h2>Bayilik <span>& Sipariş</span></h2>

</div>

<h3>En Yakın <span>Bayimizi Bulun</span></h3>

<p>Türkiye'nin dört bir yanına yayılmış bayilik ağımız ve hizmet noktalarımızla yanınızdayız.</p>

<h4>İstanbul Bayi</h4>

<p><i class="fas fa-map-marker-alt"></i> Maslak, İstanbul</p>

</div>

<h4>Ankara Bayi</h4>

<p><i class="fas fa-map-marker-alt"></i> Çankaya, Ankara</p>

</div>

<h4>İzmir Bayi</h4>

<p><i class="fas fa-map-marker-alt"></i> Alsancak, İzmir</p>

</div>

<h4>Bursa Bayi</h4>

<p><i class="fas fa-map-marker-alt"></i> Nilüfer, Bursa</p>

</div>

</section>

<h2>İletişim</h2>

</div>

<h3>Bize <span>Ulaşın</span></h3>

<p>Her türlü soru, görüş ve önerileriniz için aşağıdaki iletişim kanallarını kullanabilir veya iletişim formunu doldurabilirsiniz.</p>

<h4>Adres</h4>

<p>Teknopark İstanbul, Sanayi Mah. Teknopark Blv. No:1/1A, 34906 Pendik/İstanbul</p>

</div>

<h4>Telefon</h4>

</div>

<h4>E-posta</h4>

<p>info@voltdrive.com</p>

</div>

</div>

<h3>Bize Mesaj Gönderin</h3>

<form>

</div>

</div>

</div>

<option value="" disabled selected>Konu Seçiniz</option>

<option value="test">Test Sürüşü Randevusu</option>

<option value="info">Genel Bilgi</option>

<option value="sales">Satış Bilgileri</option>

<option value="service">Servis & Bakım</option>

<option value="other">Diğer</option>

</select>

</div>

</div>

<button type="submit" class="btn">Mesaj Gönder</button>

</form>

</div>

</section>

<h4>VoltDrive</h4>

<p>Geleceğin elektrikli otomobil teknolojisini bugünden deneyimleyin. Sürdürülebilir, yüksek performanslı ve akıllı araçlarla yolculuğunuzu yeniden tanımlayın.</p>

</div>

<h4>Hızlı Linkler</h4>

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

<li><a href="#features">Teknoloji</a></li>

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

<li><a href="#technology">Özellikler</a></li>

<li><a href="#dealership">Bayilik</a></li>

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

</ul>

</div>

<h4>Hizmetler</h4>

<li><a href="#">Test Sürüşü Randevusu</a></li>

<li><a href="#">Servis Randevusu</a></li>

<li><a href="#">Şarj İstasyonları Haritası</a></li>

<li><a href="#">Garanti Koşulları</a></li>

<li><a href="#">Finansman Seçenekleri</a></li>

<li><a href="#">İkinci El Programı</a></li>

</ul>

</div>

<h4>Bülten Aboneliği</h4>

<p>Yeniliklerden ve özel kampanyalardan haberdar olmak için e-bültenimize abone olun.</p>

</div>

<button class="btn" style="width: 100%; margin-top: 10px;">Abone Ol</button>

</div>

</div>

</footer>

// Mobile Menu Toggle

const mobileToggle = document.getElementById('mobile-toggle');

const navMenu = document.getElementById('nav-menu');

mobileToggle.addEventListener('click', () => {

navMenu.classList.toggle('active');

});

// Close menu when clicking outside

document.addEventListener('click', (e) => {

if (!mobileToggle.contains(e.target) && !navMenu.contains(e.target)) {

navMenu.classList.remove('active');

}

});

// Sticky header effect

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

const header = document.getElementById('header');

if (window.scrollY > 50) {

header.classList.add('scrolled');

} else {

header.classList.remove('scrolled');

}

});

// Smooth scrolling for anchor links

document.querySelectorAll('a[href^="#"]').forEach(anchor => {

anchor.addEventListener('click', function(e) {

e.preventDefault();

const target = document.querySelector(this.getAttribute('href'));

if (target) {

window.scrollTo({

top: target.offsetTop - 70,

behavior: 'smooth'

});

// Close mobile menu if open

navMenu.classList.remove('active');

}

});

// Active link highlighting

const sections = document.querySelectorAll('section');

const navLinks = document.querySelectorAll('nav ul li a');

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

let current = '';

sections.forEach(section => {

const sectionTop = section.offsetTop;

const sectionHeight = section.clientHeight;

if (pageYOffset >= (sectionTop - sectionHeight / 3)) {

current = section.getAttribute('id');

}

});

navLinks.forEach(link => {

link.classList.remove('active');

if (link.getAttribute('href').substring(1) === current) {

link.classList.add('active');

}

});

// Floating animation for feature cards

const featureCards = document.querySelectorAll('.feature-card');

featureCards.forEach((card, index) => {

card.style.animationDelay = `${index * 0.1}s`;

});

</script>

</body>

</html>

CSS

JS

Mete'nin kodu

Recommended