Webleb - UI Elements

HTML

<!DOCTYPE html>

<head>

<title>AURA | Müziğin Saf Hali</title>

<style>

:root {

--brand-purple: #7c3aed;

--brand-grey: #94a3b8;

--bg-dark: #0a0a0a;

}

body {

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

background-color: var(--bg-dark);

color: #f8fafc;

scroll-behavior: smooth;

}

h1, h2, h3 {

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

}

.gradient-text {

background: linear-gradient(135deg, #e2e8f0 0%, #7c3aed 100%);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

.hero-bg {

background: radial-gradient(circle at center, #1e1b4b 0%, #0a0a0a 70%);

}

.glass-card {

background: rgba(255, 255, 255, 0.03);

backdrop-filter: blur(10px);

border: 1px border rgba(255, 255, 255, 0.05);

transition: all 0.3s ease;

}

.glass-card:hover {

background: rgba(255, 255, 255, 0.06);

transform: translateY(-5px);

}

.product-image {

transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}

.product-image:hover {

transform: scale(1.05);

}

/* Responsive Table */

@media (max-width: 768px) {

.specs-table thead { display: none; }

.specs-table tr { display: block; margin-bottom: 1rem; border: 1px solid rgba(124, 58, 237, 0.2); border-radius: 0.5rem; padding: 1rem; }

.specs-table td { display: flex; justify-content: space-between; padding: 0.5rem 0; border: none; }

.specs-table td::before { content: attr(data-label); font-weight: 600; color: #94a3b8; }

}

/* Custom Scrollbar */

::-webkit-scrollbar { width: 8px; }

::-webkit-scrollbar-track { background: #0a0a0a; }

::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }

::-webkit-scrollbar-thumb:hover { background: #7c3aed; }

/* Lightbox Styles */

#lightbox {

display: none;

position: fixed;

inset: 0;

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

z-index: 999;

align-items: center;

justify-content: center;

padding: 2rem;

}

</style>

</head>

<a href="#hero" class="hover:text-purple-400 transition">Ana Sayfa</a>

<a href="#features" class="hover:text-purple-400 transition">Özellikler</a>

<a href="#gallery" class="hover:text-purple-400 transition">Galeri</a>

<a href="#specs" class="hover:text-purple-400 transition">Teknik Detaylar</a>

</div>

<a href="#contact" class="px-5 py-2 bg-white text-black text-xs font-bold rounded-full hover:bg-purple-600 hover:text-white transition-all">İLETİŞİM</a>

</div>

</nav>

<span class="text-purple-500 font-semibold tracking-widest text-sm mb-4 block uppercase">Geleceğin Sesi</span>

<h1 class="text-5xl md:text-7xl font-bold mb-6 leading-tight">Müziği Sadece Dinleme, <span class="gradient-text">Hisset.</span></h1>

Siyahın asaleti, metalik grinin gücü ve morun gizemiyle harmanlanan AURA, ses teknolojisinde yeni bir standart belirliyor.

</p>

<button class="px-8 py-4 bg-purple-600 rounded-full font-semibold hover:bg-purple-700 transition-all shadow-lg shadow-purple-500/20">Hemen Keşfet</button>

<button class="px-8 py-4 border border-white/20 rounded-full font-semibold hover:bg-white/10 transition-all">İncele</button>

</div>

</div>

</div>

</section>

<h2 class="text-4xl font-bold mb-4">Üstün Teknoloji</h2>

</div>

<h3 class="text-xl font-bold mb-3">Hibrit ANC</h3>

<p class="text-gray-400 text-sm">45dB'e kadar dış gürültüyü tamamen izole edin, dünyayı susturun.</p>

</div>

<h3 class="text-xl font-bold mb-3">Bluetooth 5.3</h3>

<p class="text-gray-400 text-sm">Sıfır gecikme ve kesintisiz bağlantı ile özgürce hareket edin.</p>

</div>

<h3 class="text-xl font-bold mb-3">70 Saat Çalma</h3>

<p class="text-gray-400 text-sm">Tek şarjla haftalarca müzik keyfi. Hızlı şarjla 10 dk'da 5 saat.</p>

</div>

<h3 class="text-xl font-bold mb-3">Akıllı Dokunuş</h3>

<p class="text-gray-400 text-sm">Hassas yüzeyler ile müziği ve çağrıları kolayca kontrol edin.</p>

</div>

</section>

</div>

<div>

<h2 class="text-4xl font-bold mb-8">Her Anınıza Uyum Sağlar</h2>

</div>

<div>

<h4 class="font-bold mb-1">Profesyonel Yaşam</h4>

<p class="text-gray-400 text-sm">Gürültülü ofislerde odaklanmanız için mükemmel bir yardımcı.</p>

</div>

</div>

<div>

<h4 class="font-bold mb-1">Seyahat Konforu</h4>

<p class="text-gray-400 text-sm">Uzun uçuşlarda hafif tasarımı ve bataryasıyla sizi asla yalnız bırakmaz.</p>

</div>

</div>

<div>

<h4 class="font-bold mb-1">Spor ve Enerji</h4>

<p class="text-gray-400 text-sm">IPX5 su direnci ile ter ve yağmur müziğinize engel olamaz.</p>

</div>

</section>

<h2 class="text-4xl font-bold mb-4">Tasarım Detayları</h2>

<p class="text-gray-500">Mükemmel işçilik ve metalik dokunuşlar</p>

</div>

</div>

</div>

</div>

</div>

</div>

</section>

<h2 class="text-3xl font-bold mb-12 text-center">Teknik Özellikler</h2>

<tr>

<th class="px-8 py-4">Özellik</th>

<th class="px-8 py-4">Detay</th>

</tr>

</thead>

<tr>

<td class="px-8 py-4 text-gray-400 font-medium" data-label="Özellik">Sürücü Boyutu</td>

<td class="px-8 py-4" data-label="Detay">40mm Titanyum Dinamik Sürücüler</td>

</tr>

<tr>

<td class="px-8 py-4 text-gray-400 font-medium" data-label="Özellik">Frekans Aralığı</td>

<td class="px-8 py-4" data-label="Detay">10Hz - 40kHz (Hi-Res Audio)</td>

</tr>

<tr>

<td class="px-8 py-4 text-gray-400 font-medium" data-label="Özellik">Bağlantı</td>

<td class="px-8 py-4" data-label="Detay">Bluetooth 5.3 / USB-C / 3.5mm Jack</td>

</tr>

<tr>

<td class="px-8 py-4 text-gray-400 font-medium" data-label="Özellik">Mikrofon</td>

<td class="px-8 py-4" data-label="Detay">6 x Beamforming Mikrofon (ENC Destekli)</td>

</tr>

<tr>

<td class="px-8 py-4 text-gray-400 font-medium" data-label="Özellik">Ağırlık</td>

</tr>

<tr>

<td class="px-8 py-4 text-gray-400 font-medium" data-label="Özellik">Malzeme</td>

<td class="px-8 py-4" data-label="Detay">Uçak Sınıfı Alüminyum & Vegan Deri</td>

</tr>

</tbody>

</table>

</div>

</section>

<div>

<h2 class="text-4xl font-bold mb-6">Bize Ulaşın</h2>

AURA deneyimi hakkında bir sorunuz mu var? Satış öncesi destek veya teknik yardım için ekibimiz hazır.

</p>

<i data-lucide="mail" class="text-purple-500"></i> support@aura.audio

</div>

<i data-lucide="phone" class="text-purple-500"></i> +90 (212) 555 00 00

</div>

<i data-lucide="map-pin" class="text-purple-500"></i> Levent, İstanbul / Türkiye

</div>

<div>

<label class="block text-sm font-semibold mb-2 text-gray-300">İsim Soyisim</label>

</div>

<div>

<label class="block text-sm font-semibold mb-2 text-gray-300">E-posta Adresi</label>

</div>

<div>

<label class="block text-sm font-semibold mb-2 text-gray-300">Mesajınız</label>

</div>

<button type="submit" class="w-full py-4 bg-purple-600 rounded-lg font-bold hover:bg-purple-700 transition">GÖNDER</button>

</form>

Mesajınız başarıyla alındı. Sizinle en kısa sürede iletişime geçeceğiz.

</div>

</section>

</a>

</a>

</a>

</a>

</div>

</p>

</div>

</footer>

</button>

</div>

// Initialize Lucide Icons

lucide.createIcons();

// Contact Form Handling

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

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

contactForm.addEventListener('submit', function(e) {

e.preventDefault();

// Basic validation check

const name = document.getElementById('name').value;

const email = document.getElementById('email').value;

const message = document.getElementById('message').value;

if(name && email && message) {

// Simulate sending

const submitBtn = contactForm.querySelector('button');

submitBtn.disabled = true;

submitBtn.innerText = 'GÖNDERİLİYOR...';

setTimeout(() => {

contactForm.classList.add('hidden');

formStatus.classList.remove('hidden');

formStatus.classList.add('animate__animated', 'animate__fadeIn');

}, 1500);

}

});

// Lightbox Logic

const galleryImgs = document.querySelectorAll('.gallery-img');

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

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

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

galleryImgs.forEach(img => {

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

lightboxImg.src = img.src;

lightbox.style.display = 'flex';

document.body.style.overflow = 'hidden';

});

const closeFunc = () => {

lightbox.style.display = 'none';

document.body.style.overflow = 'auto';

};

closeLightbox.addEventListener('click', closeFunc);

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

if(e.target === lightbox) closeFunc();

});

// Smooth Navbar Shrink on Scroll

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

const nav = document.querySelector('nav');

if (window.scrollY > 50) {

nav.classList.add('py-2');

nav.classList.remove('py-4');

} else {

nav.classList.add('py-4');

nav.classList.remove('py-2');

}

});

</script>

</body>

</html>

Metehan

Metehan'nın bir kodu

Metehan'ın bir kodu

HTML

CSS

JS

Metehan'nın bir kodu

Metehan'ın bir kodu

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS