Webleb - fragmentos de código

HTML

<!DOCTYPE html>

<head>

<title>Midnight Luxury - Interior Design</title>

tailwind.config = {

theme: {

extend: {

colors: {

// YENİ RENK PALETİ: Gece Mavisi ve Şampanya

'luxury-dark': '#0B1120',    // Derin Gece Mavisi (Arka Plan)

'luxury-card': '#151F32',    // Lacivert (Kartlar)

'gold-accent': '#D4B996',    // Şampanya / Kum Beji (Vurgu)

'gold-hover': '#E3CDB0',     // Açık Şampanya (Hover)

'text-muted': '#94A3B8',     // Soğuk Gri Metin

},

fontFamily: {

// Fontları da biraz daha keskinleştirdim

serif: ['"Cormorant Garamond"', 'serif'],

sans: ['"Montserrat"', 'sans-serif'],

},

transitionTimingFunction: {

'luxury-ease': 'cubic-bezier(0.22, 1, 0.36, 1)',

}

</script>

<style>

body { background-color: #0B1120; color: white; }

.fade-in-up {

animation: fadeInUp 1s ease-out forwards;

opacity: 0;

transform: translateY(30px);

}

.delay-200 { animation-delay: 0.2s; }

.delay-300 { animation-delay: 0.4s; }

@keyframes fadeInUp {

to { opacity: 1; transform: translateY(0); }

}

.scrollbar-hide::-webkit-scrollbar { display: none; }

.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

</style>

</head>

<span class="text-white font-bold font-sans text-xl tracking-wide">AZURE<span class="font-light text-gold-accent">LIVING</span></span>

</div>

<a href="#" class="text-white border-b border-gold-accent pb-1">Koleksiyon</a>

<a href="#" class="hover:text-gold-accent transition-colors">Projeler</a>

<a href="#" class="hover:text-gold-accent transition-colors">Stüdyo</a>

</nav>

</header>

Sakinliğin <br>

<span class="text-gold-accent italic pr-2 font-light">Mavisi</span>

</h1>

Modern minimalizm ile sofistike tonların buluşma noktası. Soğuk tonların getirdiği huzuru ve asaleti yaşam alanlarınıza taşıyın.

</p>

İNCELE

</button>

</button>

</div>

<p class="text-gold-accent text-xs tracking-[0.2em] uppercase mb-1">Yeni Sezon</p>

<p class="text-white text-lg font-serif italic">"Midnight Collection"</p>

</div>

</div>

</section>

<h3 class="text-white font-serif text-3xl">Lounge Azure</h3>

<p class="text-gold-accent text-sm tracking-wider uppercase mt-1">Modern Living</p>

</div>

<h3 class="text-white font-serif text-3xl">Night Suite</h3>

<p class="text-gold-accent text-sm tracking-wider uppercase mt-1">Master Bedroom</p>

</div>

<h3 class="text-white font-serif text-3xl">Ocean Kitchen</h3>

<p class="text-gold-accent text-sm tracking-wider uppercase mt-1">Culinary Art</p>

</div>

</button>

</button>

</div>

</div>

</section>

</main>

let currentIndex = 0;

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

const counter = document.getElementById('slide-counter');

const slides = wrapper.children;

const totalSlides = slides.length;

function updateSlider() {

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

counter.innerText = `0${currentIndex + 1}`;

// Üstteki çizgi indikatörlerini güncelle

for(let i=0; i<totalSlides; i++) {

const dot = document.getElementById(`dot-${i}`);

if(i === currentIndex) {

dot.classList.remove('w-2', 'bg-white/30');

dot.classList.add('w-12', 'bg-white');

} else {

dot.classList.add('w-2', 'bg-white/30');

dot.classList.remove('w-12', 'bg-white');

}

function nextSlide() {

if (currentIndex < totalSlides - 1) {

currentIndex++;

} else {

currentIndex = 0;

}

updateSlider();

}

function prevSlide() {

if (currentIndex > 0) {

currentIndex--;

} else {

currentIndex = totalSlides - 1;

}

updateSlider();

}

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

if (e.key === 'ArrowRight') nextSlide();

if (e.key === 'ArrowLeft') prevSlide();

});

</script>

</body>

</html>

Metehan

Recomendado

Un código de Metehan

Un código de Metehan

Un código de Metehan

HTML

CSS

JS

Recomendado

Un código de Metehan

Un código de Metehan

Un código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS