Webleb - Snippets de Código

HTML

<!DOCTYPE html>

<head>

<title>Living Elegance - Interior Design</title>

tailwind.config = {

theme: {

extend: {

colors: {

'luxury-dark': '#0f0c0a',

'luxury-card': '#1a1614',

'gold-accent': '#c69c6d',

'gold-hover': '#e0b889',

},

fontFamily: {

serif: ['"Playfair Display"', 'serif'],

sans: ['"Plus Jakarta Sans"', 'sans-serif'],

},

transitionTimingFunction: {

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

}

</script>

<style>

body { background-color: #0f0c0a; 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); }

}

/* Slider Scroll Gizleme */

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

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

</style>

</head>

<span class="text-gold-accent font-bold font-sans text-sm tracking-widest uppercase">Interior</span>

<span class="text-white font-bold font-sans text-lg">Design</span>

</div>

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

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

</nav>

</header>

Living <br>

<span class="text-gold-accent italic pr-2">Elegance</span>

</h1>

Modern mimariyi klasik dokunuşlarla birleştiriyoruz. Eviniz, ruhunuzun yansımasıdır.

</p>

Koleksiyonu Keşfet

</button>

</div>

</div>

<span class="text-xs text-gray-500 uppercase tracking-widest">Collection</span>

</div>

</section>

<h3 class="text-gold-accent font-serif text-lg">Royal Dining</h3>

<p class="text-gray-300 text-xs">Modern Dark Series</p>

</div>

<h3 class="text-gold-accent font-serif text-lg">Velvet Lounge</h3>

<p class="text-gray-300 text-xs">Comfort Edition</p>

</div>

<h3 class="text-gold-accent font-serif text-lg">Master Suite</h3>

<p class="text-gray-300 text-xs">Serenity Collection</p>

</div>

<h3 class="text-gold-accent font-serif text-lg">Minimalist Hall</h3>

<p class="text-gray-300 text-xs">Architecture Focus</p>

</div>

</button>

</button>

</div>

</div>

</section>

</main>

// Slider Logic

let currentIndex = 0;

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

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

const progressBar = document.getElementById('progress-bar');

// Toplam slayt sayısını bul (resim div'lerini sayar)

const slides = wrapper.children;

const totalSlides = slides.length;

function updateSlider() {

// Kaydırma işlemi (TranslateX kullanarak)

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

// Sayaç güncelleme (01, 02...)

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

// Progress Bar güncelleme

progressBar.style.width = `${((currentIndex + 1) / totalSlides) * 100}%`;

}

function nextSlide() {

if (currentIndex < totalSlides - 1) {

currentIndex++;

} else {

currentIndex = 0; // Başa dön

}

updateSlider();

}

function prevSlide() {

if (currentIndex > 0) {

currentIndex--;

} else {

currentIndex = totalSlides - 1; // Sona git

}

updateSlider();

}

// Klavye ok tuşları ile kontrol

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

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

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

});

// Otomatik geçiş (İsteğe bağlı - şu an kapalı, açmak için yorumu kaldırın)

// setInterval(nextSlide, 5000);

</script>

</body>

</html>

Metehan

Recomendado

um código de metehan

Um Código de Metehan

Um Código de Metehan

HTML

CSS

JS

Recomendado

um código de metehan

Um Código de Metehan

Um Código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS