Webleb - Snippets de Código

HTML CSS JS

<!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>

Preview

Open Advanced Editor

HTML CSS JS

<!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>

Preview

Validating your code, please wait...