Webleb - fragmentos 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

Un código de Metehan

HTML

CSS

JS

Un código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS