Webleb - Code-Snippets

HTML

<!DOCTYPE html>

<head>

<title>Living Elegance - Kitap Portföy</title>

tailwind.config = {

theme: {

extend: {

colors: {

'paper': '#fdfbf7', /* Kitap sayfası rengi (krem) */

'gold': '#d4a358',

'dark-leather': '#1a1816',

},

fontFamily: {

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

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

'display': ['"Cinzel"', 'serif'],

},

boxShadow: {

'book': '0 20px 50px -10px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0,0,0,0.1)',

'spine': 'inset 20px 0 50px rgba(0,0,0,0.1)',

}

</script>

<style>

body {

background-color: #121212;

background-image: url('https://www.transparenttextures.com/patterns/wood-pattern.png'); /* Ahşap zemin hissi */

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

margin: 0;

overflow: hidden; /* Sadece kitap görünsün */

}

/* Kitap Ana Yapısı */

.book-container {

width: 900px;

height: 600px;

background-color: #fdfbf7;

border-radius: 5px;

display: flex;

position: relative;

transform-style: preserve-3d;

/* Hafif perspektif */

perspective: 1500px;

}

/* Sol Sayfa */

.page-left {

flex: 1;

padding: 40px;

position: relative;

z-index: 10;

background: linear-gradient(to right, #e3e0d9 0%, #fdfbf7 20%);

border-top-left-radius: 5px;

border-bottom-left-radius: 5px;

}

/* Sağ Sayfa */

.page-right {

flex: 1;

position: relative;

overflow: hidden;

background: #fdfbf7;

border-top-right-radius: 5px;

border-bottom-right-radius: 5px;

/* Cilt Payı (Spine Shadow) */

box-shadow: inset 15px 0 20px -10px rgba(0,0,0,0.15);

}

/* Sayfa Altındaki "Kağıt Katmanları" efekti */

.book-container::before {

content: '';

position: absolute;

left: 5px;

right: 5px;

bottom: -5px;

height: 100%;

background-color: #e8e5de;

z-index: -1;

border-radius: 5px;

}

.book-container::after {

content: '';

position: absolute;

left: 10px;

right: 10px;

bottom: -10px;

height: 100%;

background-color: #dcd9d2;

z-index: -2;

border-radius: 5px;

box-shadow: 0 30px 40px rgba(0,0,0,0.5);

}

/* İçerik Geçiş Efektleri */

.content-section {

display: none;

height: 100%;

flex-direction: column;

justify-content: center;

animation: fadeInPage 0.8s ease;

}

.content-section.active {

display: flex;

}

.image-section {

display: none;

width: 100%;

height: 100%;

object-fit: cover;

animation: fadeInImage 1s ease;

}

.image-section.active {

display: block;

}

@keyframes fadeInPage {

from { opacity: 0; transform: translateY(5px); }

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

}

@keyframes fadeInImage {

from { opacity: 0; filter: sepia(100%); }

to { opacity: 1; filter: sepia(0%); }

}

/* Özel Form Stili */

.ink-input {

border: none;

border-bottom: 2px solid #d4a358;

background: transparent;

padding: 10px 0;

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

font-size: 1rem;

color: #333;

width: 100%;

outline: none;

transition: border-color 0.3s;

}

.ink-input:focus {

border-bottom-color: #000;

}

.ink-input::placeholder {

color: #999;

font-style: italic;

}

/* Kitap Ayracı (Bookmark) */

.bookmark {

position: absolute;

top: -10px;

right: 40px;

width: 30px;

height: 80px;

background-color: #d4a358;

box-shadow: 2px 2px 5px rgba(0,0,0,0.3);

z-index: 20;

transition: height 0.3s;

cursor: pointer;

}

.bookmark::after {

content: '';

position: absolute;

bottom: -15px;

left: 0;

border-left: 15px solid transparent;

border-right: 15px solid transparent;

border-top: 15px solid #d4a358;

}

.bookmark:hover {

height: 90px;

}

/* Mobil Uyumluluk */

@media (max-width: 950px) {

.book-container {

width: 95%;

height: auto;

flex-direction: column;

margin: 20px 0;

}

.page-left {

border-radius: 5px 5px 0 0;

min-height: 400px;

}

.page-right {

height: 300px;

border-radius: 0 0 5px 5px;

box-shadow: inset 0 15px 20px -10px rgba(0,0,0,0.15); /* Gölgelendirme yukarıdan */

}

.bookmark {

right: 20px;

}

</style>

</head>

<body>

</div>

<div class="absolute bottom-4 left-6 text-gray-400 font-serif italic text-xs">Sayfa 1</div>

<h3 class="text-gold uppercase tracking-widest text-xs font-bold mb-2">Portfolio Vol. 1</h3>

<h1 class="text-5xl font-serif text-gray-800 mb-6 leading-tight">Living<br><span class="italic text-gold">Elegance</span></h1>

"Mimari, sessizliğin müziğidir."<br>

Bu portföyde, modern yaşamın lüks dokunuşlarla buluştuğu en seçkin iç mekan tasarımlarımızı bulacaksınız.

</p>

<span class="text-2xl font-serif text-gray-800 group-hover:text-gold transition">I. Galeri</span>

</button>

<span class="text-2xl font-serif text-gray-800 group-hover:text-gold transition">II. Giriş Yap</span>

</button>

<span class="text-2xl font-serif text-gray-800 group-hover:text-gold transition">III. Kayıt Ol</span>

</button>

</div>

<i class="fa-solid fa-arrow-left"></i> İçindekiler

</button>

<h2 class="text-3xl font-serif text-gray-800">Üye Girişi</h2>

<p class="text-gray-500 text-sm mt-2 italic">Özel koleksiyonları görüntülemek için.</p>

</div>

<label class="block text-xs font-bold uppercase tracking-wide text-gray-400">E-Posta</label>

</div>

<label class="block text-xs font-bold uppercase tracking-wide text-gray-400">Şifre</label>

</div>

Giriş Yap

</button>

</form>

<span class="text-gray-500">Henüz üye değil misiniz?</span>

<button onclick="turnPage('signup')" class="text-gold font-bold underline ml-1">Kayıt Ol</button>

</div>

<i class="fa-solid fa-arrow-left"></i> İçindekiler

</button>

<h2 class="text-3xl font-serif text-gray-800">Yeni Üyelik</h2>

<p class="text-gray-500 text-sm mt-2 italic">Tasarım dünyasına adım atın.</p>

</div>

<label class="block text-xs font-bold uppercase tracking-wide text-gray-400">İsim Soyisim</label>

</div>

<label class="block text-xs font-bold uppercase tracking-wide text-gray-400">E-Posta</label>

</div>

<label class="block text-xs font-bold uppercase tracking-wide text-gray-400">Şifre Belirle</label>

</div>

Kaydı Tamamla

</button>

</form>

</div>

<i class="fa-solid fa-arrow-left"></i> Geri Dön

</button>

<h2 class="text-4xl font-serif text-gray-800 mb-4">Modern Minimalizm</h2>

Bu projede, koyu tonların hakim olduğu, ancak doğal ışık ve altın detaylarla zenginleştirilmiş bir yaşam alanı kurguladık.

Mobilyalardaki yumuşak hatlar, keskin mimari çizgilerle kontrast oluşturarak dengeli bir estetik sunuyor. Sağ taraftaki görselde, oturma odasının akşam ışığındaki ambiyansını görebilirsiniz.

</p>

<span class="text-xs text-gray-400 uppercase tracking-widest">Proje: İstanbul, 2026</span>

</div>

<div class="absolute bottom-4 right-6 text-white/80 font-serif italic text-xs z-20">Sayfa 2</div>

</div>

function turnPage(sectionId) {

// 1. Sol Sayfa İçeriğini Değiştir

const contents = document.querySelectorAll('.content-section');

contents.forEach(el => {

el.classList.remove('active');

});

const targetContent = document.getElementById('content-' + sectionId);

if(targetContent) {

// Kısa bir gecikme ile içeriği göster (sayfa çevirme hissi için)

setTimeout(() => {

targetContent.classList.add('active');

}, 100);

}

// 2. Sağ Sayfa Görselini Değiştir

const images = document.querySelectorAll('.image-section');

images.forEach(img => {

img.classList.remove('active');

});

const targetImage = document.getElementById('img-' + sectionId);

if(targetImage) {

targetImage.classList.add('active');

}

</script>

</body>

</html>

Metehan

Ein Code von Metehan

Ein Code von Metehan

HTML

CSS

JS

Ein Code von Metehan

Ein Code von Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS