Webleb - Extraits de Code

HTML

<!DOCTYPE html>

<head>

<title>SmartCity | Geleceğin Yaşamı</title>

<style>

:root {

--primary: #00f2ff;

--bg-dark: #0a0b10;

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

--text: #ffffff;

}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {

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

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

color: var(--text);

overflow: hidden;

height: 100vh;

}

/* Video Arkaplan */

.video-container {

position: fixed;

top: 0; left: 0;

width: 100%; height: 100%;

z-index: -1;

overflow: hidden;

}

.video-container video {

width: 100%; height: 100%;

object-fit: cover;

filter: brightness(0.4) contrast(1.1);

}

/* Overlay Arayüz */

header {

position: fixed;

top: 0; width: 100%;

padding: 25px;

display: flex;

justify-content: space-between;

align-items: center;

z-index: 100;

backdrop-filter: blur(10px);

background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);

}

.logo { font-weight: 700; letter-spacing: 2px; font-size: 1.2rem; color: var(--primary); }

/* Ana Slider Alanı */

.slider-wrapper {

height: 100vh;

display: flex;

transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);

}

.slide {

min-width: 100%;

height: 100%;

display: flex;

flex-direction: column;

justify-content: center;

padding: 40px;

scroll-snap-align: start;

}

.slide-content {

max-width: 600px;

opacity: 0;

transform: translateY(30px);

transition: all 0.8s ease 0.2s;

}

.slide.active .slide-content {

opacity: 1;

transform: translateY(0);

}

h1 { font-size: 3.5rem; line-height: 1; margin-bottom: 20px; font-weight: 700; }

p { font-size: 1.1rem; line-height: 1.6; color: rgba(255,255,255,0.8); margin-bottom: 30px; }

.btn {

display: inline-block;

padding: 15px 35px;

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

color: var(--primary);

text-decoration: none;

border-radius: 50px;

font-weight: 600;

transition: 0.3s;

background: rgba(0, 242, 255, 0.05);

}

/* Dokunmatik Gösterge */

.nav-dots {

position: fixed;

right: 20px;

top: 50%;

transform: translateY(-50%);

display: flex;

flex-direction: column;

gap: 15px;

}

.dot {

width: 8px; height: 8px;

border-radius: 50%;

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

cursor: pointer;

transition: 0.3s;

}

.dot.active {

background: var(--primary);

box-shadow: 0 0 10px var(--primary);

transform: scale(1.5);

}

/* Mobile Adjustments */

@media (max-width: 768px) {

h1 { font-size: 2.5rem; }

.slide { padding: 30px; }

}

</style>

</head>

<body>

</video>

</div>

<div class="logo">SMARTCITY.IO</div>

</header>

<h1>Sürdürülebilir Enerji</h1>

<p>Yapay zeka kontrollü şebekelerle enerji tüketimini %40 optimize ediyoruz. Gelecek nesillere temiz bir nefes bırakın.</p>

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

</div>

</section>

<h1>Otonom Trafik</h1>

<p>Sıfır kaza, sıfır gecikme. Akıllı ulaşım ağımızla şehrin bir ucundan diğerine kesintisiz erişim sağlayın.</p>

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

</div>

</section>

<h1>Veri Odaklı Yaşam</h1>

<p>Şehir her an sizi dinliyor. İhtiyaçlarınıza anında cevap veren proaktif kamu hizmetleriyle tanışın.</p>

<a href="#" class="btn">Bize Katılın</a>

</div>

</section>

</div>

</div>

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

const slides = document.querySelectorAll('.slide');

const dots = document.querySelectorAll('.dot');

let currentIndex = 0;

let startY = 0;

// Touch handling for iOS/Android

window.addEventListener('touchstart', e => {

startY = e.touches[0].clientY;

}, { passive: true });

window.addEventListener('touchend', e => {

let endY = e.changedTouches[0].clientY;

let diff = startY - endY;

if (Math.abs(diff) > 50) {

if (diff > 0 && currentIndex < slides.length - 1) {

goToSlide(currentIndex + 1);

} else if (diff < 0 && currentIndex > 0) {

goToSlide(currentIndex - 1);

}

}, { passive: true });

// Desktop Wheel Handling

window.addEventListener('wheel', e => {

if (e.deltaY > 0 && currentIndex < slides.length - 1) {

goToSlide(currentIndex + 1);

} else if (e.deltaY < 0 && currentIndex > 0) {

goToSlide(currentIndex - 1);

}

});

function goToSlide(index) {

currentIndex = index;

slider.style.transform = `translateX(-${index * 100}%)`;

// UI Update

slides.forEach(s => s.classList.remove('active'));

slides[index].classList.add('active');

dots.forEach(d => d.classList.remove('active'));

dots[index].classList.add('active');

}

// Dot click

dots.forEach((dot, i) => {

dot.addEventListener('click', () => goToSlide(i));

});

</script>

</body>

</html>

Metehan

Recommandé

Un code de Metehan

Un code de Metehan

Un code de Metehan

HTML

CSS

JS

Recommandé

Un code de Metehan

Un code de Metehan

Un code de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS