Webleb - Snippets de Código

HTML

<!DOCTYPE html>

<head>

<title>AURA | Geleceği Tasarla</title>

<style>

/* -----------------------------------------------------------

1. CORE VARIABLES & RESET (Modern Renk Paleti)

----------------------------------------------------------- */

:root {

/* Renkler: Koyu Zemin + Gradient Vurgular */

--bg-color: #0f1115;

--surface-color: #181b21;

--surface-glass: rgba(24, 27, 33, 0.7);

--primary-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);

--secondary-gradient: linear-gradient(135deg, #3b82f6 0%, #2dd4bf 100%);

--text-glow: 0 0 20px rgba(168, 85, 247, 0.5);

--text-main: #ffffff;

--text-muted: #94a3b8;

--border-glass: 1px solid rgba(255, 255, 255, 0.1);

--shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

--transition-smooth: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

--transition-bounce: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

scroll-behavior: smooth;

}

body {

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

background-color: var(--bg-color);

color: var(--text-main);

overflow-x: hidden;

line-height: 1.6;

}

/* Scrollbar Özelleştirme */

::-webkit-scrollbar {

width: 8px;

}

::-webkit-scrollbar-track {

background: var(--bg-color);

}

::-webkit-scrollbar-thumb {

background: #334155;

border-radius: 4px;

}

::-webkit-scrollbar-thumb:hover {

background: #475569;

}

/* -----------------------------------------------------------

2. UTILITIES & ANIMATIONS (AOS Style without Library)

----------------------------------------------------------- */

.container {

max-width: 1200px;

margin: 0 auto;

padding: 0 2rem;

}

.gradient-text {

background: var(--primary-gradient);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

font-weight: 800;

}

.btn {

display: inline-block;

padding: 12px 32px;

border-radius: 50px;

text-decoration: none;

font-weight: 600;

font-size: 0.95rem;

letter-spacing: 0.5px;

transition: var(--transition-smooth);

position: relative;

overflow: hidden;

z-index: 1;

border: none;

cursor: pointer;

}

.btn-primary {

background: var(--primary-gradient);

color: white;

box-shadow: 0 10px 20px -10px rgba(168, 85, 247, 0.5);

}

.btn-primary:hover {

transform: translateY(-3px);

box-shadow: 0 20px 30px -10px rgba(168, 85, 247, 0.7);

}

.btn-glass {

background: rgba(255, 255, 255, 0.05);

backdrop-filter: blur(10px);

border: var(--border-glass);

color: white;

}

.btn-glass:hover {

background: rgba(255, 255, 255, 0.15);

transform: translateY(-3px);

}

/* Scroll Animation Classes (JS ile tetiklenir) */

.hidden {

opacity: 0;

transform: translateY(50px);

transition: opacity 1s ease, transform 1s ease;

}

.show {

opacity: 1;

transform: translateY(0);

}

.delay-100 { transition-delay: 100ms; }

.delay-200 { transition-delay: 200ms; }

.delay-300 { transition-delay: 300ms; }

.section-title {

font-size: 2.5rem;

text-align: center;

margin-bottom: 1rem;

position: relative;

display: inline-block;

left: 50%;

transform: translateX(-50%);

}

.section-subtitle {

text-align: center;

color: var(--text-muted);

margin-bottom: 4rem;

font-weight: 300;

}

/* -----------------------------------------------------------

3. HEADER & NAVIGATION

----------------------------------------------------------- */

header {

position: fixed;

top: 0;

left: 0;

width: 100%;

z-index: 1000;

transition: var(--transition-smooth);

padding: 1.5rem 0;

}

header.scrolled {

padding: 1rem 0;

background: rgba(15, 17, 21, 0.85);

backdrop-filter: blur(20px);

border-bottom: var(--border-glass);

box-shadow: 0 10px 30px rgba(0,0,0,0.2);

}

.nav-container {

display: flex;

justify-content: space-between;

align-items: center;

}

.logo {

font-size: 1.8rem;

font-weight: 900;

color: white;

text-decoration: none;

letter-spacing: -1px;

display: flex;

align-items: center;

gap: 10px;

}

.logo i {

background: var(--primary-gradient);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

.nav-links {

display: flex;

gap: 2rem;

list-style: none;

}

.nav-links a {

color: var(--text-muted);

text-decoration: none;

font-weight: 500;

transition: 0.3s;

position: relative;

}

.nav-links a:hover, .nav-links a.active {

color: white;

}

.nav-links a::after {

content: '';

position: absolute;

bottom: -5px;

left: 0;

width: 0;

height: 2px;

background: var(--primary-gradient);

transition: 0.3s;

}

.nav-links a:hover::after {

width: 100%;

}

.hamburger {

display: none;

cursor: pointer;

font-size: 1.5rem;

color: white;

}

/* -----------------------------------------------------------

4. HERO SECTION

----------------------------------------------------------- */

.hero {

height: 100vh;

display: flex;

align-items: center;

position: relative;

overflow: hidden;

padding-top: 80px;

}

/* Arkaplan Işık Efektleri */

.glow-blob {

position: absolute;

width: 600px;

height: 600px;

background: var(--primary-gradient);

border-radius: 50%;

filter: blur(120px);

opacity: 0.2;

z-index: -1;

animation: blobFloat 10s infinite alternate;

}

.blob-1 { top: -100px; left: -100px; }

.blob-2 { bottom: -100px; right: -100px; background: var(--secondary-gradient); animation-delay: -5s; }

@keyframes blobFloat {

0% { transform: translate(0, 0) scale(1); }

100% { transform: translate(50px, 50px) scale(1.1); }

}

.hero-content {

max-width: 800px;

z-index: 2;

}

.hero h1 {

font-size: 5rem;

line-height: 1.1;

margin-bottom: 1.5rem;

letter-spacing: -2px;

}

.hero p {

font-size: 1.25rem;

color: var(--text-muted);

margin-bottom: 2.5rem;

max-width: 600px;

}

.hero-stats {

display: flex;

gap: 3rem;

margin-top: 3rem;

border-top: 1px solid rgba(255,255,255,0.1);

padding-top: 2rem;

}

.stat h3 { font-size: 2rem; font-weight: 700; color: white; }

.stat p { font-size: 0.9rem; color: var(--text-muted); }

/* -----------------------------------------------------------

5. ABOUT SECTION (Timeline Style)

----------------------------------------------------------- */

.section {

padding: 8rem 0;

position: relative;

}

.timeline {

position: relative;

max-width: 900px;

margin: 0 auto;

}

.timeline::after {

content: '';

position: absolute;

width: 2px;

background: rgba(255,255,255,0.1);

top: 0;

bottom: 0;

left: 50%;

margin-left: -1px;

}

.timeline-item {

padding: 10px 40px;

position: relative;

background-color: inherit;

width: 50%;

}

.timeline-item::after {

content: '';

position: absolute;

width: 20px;

height: 20px;

right: -10px;

background: var(--bg-color);

border: 4px solid #a855f7;

top: 25px;

border-radius: 50%;

z-index: 1;

transition: var(--transition-bounce);

}

.left { left: 0; text-align: right; }

.right { left: 50%; text-align: left; }

.left::after { right: -10px; }

.right::after { left: -10px; }

.content-card {

padding: 2rem;

background: var(--surface-glass);

border: var(--border-glass);

border-radius: 16px;

position: relative;

transition: var(--transition-smooth);

backdrop-filter: blur(5px);

}

.content-card:hover {

transform: translateY(-5px);

box-shadow: 0 10px 40px rgba(168, 85, 247, 0.15);

border-color: rgba(168, 85, 247, 0.3);

}

.timeline-item:hover::after {

background: #a855f7;

box-shadow: 0 0 15px #a855f7;

transform: scale(1.2);

}

/* -----------------------------------------------------------

6. VIDEO SECTION (Dark & Cinematic)

----------------------------------------------------------- */

.video-section {

background: #000;

position: relative;

}

.video-grid {

display: grid;

grid-template-columns: 2fr 1fr;

gap: 20px;

height: 500px;

}

.video-item {

position: relative;

border-radius: 16px;

overflow: hidden;

cursor: pointer;

}

.video-item.main { grid-row: span 2; }

.video-thumb {

width: 100%;

height: 100%;

object-fit: cover;

transition: transform 0.6s ease;

}

.video-overlay {

position: absolute;

top: 0; left: 0; right: 0; bottom: 0;

background: rgba(0,0,0,0.4);

display: flex;

align-items: center;

justify-content: center;

opacity: 0;

transition: 0.3s;

}

.play-btn {

width: 70px;

height: 70px;

background: rgba(255,255,255,0.2);

backdrop-filter: blur(10px);

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

font-size: 1.5rem;

color: white;

transition: var(--transition-bounce);

}

.video-item:hover .video-thumb { transform: scale(1.05); }

.video-item:hover .video-overlay { opacity: 1; }

.video-item:hover .play-btn { transform: scale(1.1); background: var(--primary-gradient); }

/* Video Modal */

.modal {

position: fixed;

top: 0; left: 0; width: 100%; height: 100%;

background: rgba(0,0,0,0.95);

z-index: 2000;

display: none;

align-items: center;

justify-content: center;

opacity: 0;

transition: opacity 0.3s;

}

.modal.active { display: flex; opacity: 1; }

.modal-content {

width: 80%;

max-width: 900px;

position: relative;

background: #000;

border-radius: 16px;

overflow: hidden;

box-shadow: 0 0 50px rgba(168, 85, 247, 0.3);

}

.close-modal {

position: absolute;

top: -50px;

right: 0;

color: white;

font-size: 2rem;

cursor: pointer;

transition: 0.3s;

}

.close-modal:hover { color: #ec4899; transform: rotate(90deg); }

/* -----------------------------------------------------------

7. BLOG SECTION (Cards)

----------------------------------------------------------- */

.blog-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

gap: 2rem;

}

.blog-card {

background: var(--surface-color);

border-radius: 16px;

overflow: hidden;

border: var(--border-glass);

transition: var(--transition-smooth);

group: 1;

}

.blog-img-wrapper {

height: 220px;

overflow: hidden;

position: relative;

}

.blog-img {

width: 100%;

height: 100%;

object-fit: cover;

transition: transform 0.6s ease;

}

.blog-card:hover { transform: translateY(-10px); }

.blog-card:hover .blog-img { transform: scale(1.1); }

.blog-content { padding: 1.5rem; }

.blog-tag {

font-size: 0.75rem;

color: #a855f7;

text-transform: uppercase;

font-weight: 700;

letter-spacing: 1px;

margin-bottom: 0.5rem;

display: block;

}

.blog-title {

font-size: 1.25rem;

margin-bottom: 1rem;

color: white;

line-height: 1.4;

}

.blog-link {

color: white;

text-decoration: none;

font-weight: 600;

display: inline-flex;

align-items: center;

gap: 5px;

transition: 0.3s;

}

.blog-link:hover { color: #ec4899; gap: 10px; }

/* -----------------------------------------------------------

8. GALLERY (Masonry & Lightbox)

----------------------------------------------------------- */

.gallery-grid {

display: grid;

grid-template-columns: repeat(4, 1fr);

grid-auto-rows: 200px;

gap: 15px;

}

.gallery-item {

position: relative;

overflow: hidden;

border-radius: 12px;

cursor: zoom-in;

}

.gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }

.gallery-item:nth-child(4) { grid-column: span 2; }

.gallery-item:nth-child(5) { grid-row: span 2; }

.gallery-img {

width: 100%;

height: 100%;

object-fit: cover;

transition: filter 0.3s, transform 0.5s;

}

.gallery-item:hover .gallery-img {

transform: scale(1.05);

filter: brightness(1.1);

}

/* Lightbox (Reusing Modal Logic mostly) */

.lightbox-img {

max-height: 80vh;

max-width: 100%;

border-radius: 8px;

}

/* -----------------------------------------------------------

9. CONTACT SECTION

----------------------------------------------------------- */

.contact-wrapper {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 4rem;

background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));

padding: 3rem;

border-radius: 24px;

border: var(--border-glass);

backdrop-filter: blur(10px);

}

.contact-info h3 { font-size: 1.5rem; margin-bottom: 1.5rem; }

.info-item {

display: flex;

align-items: center;

gap: 1rem;

margin-bottom: 1.5rem;

font-size: 1.1rem;

color: var(--text-muted);

}

.info-item i {

width: 40px;

height: 40px;

background: rgba(255,255,255,0.05);

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

color: #a855f7;

font-size: 1.2rem;

}

.form-group { margin-bottom: 1.5rem; position: relative; }

.form-control {

width: 100%;

padding: 1rem;

background: rgba(0,0,0,0.3);

border: 1px solid rgba(255,255,255,0.1);

border-radius: 12px;

color: white;

font-family: inherit;

transition: 0.3s;

}

.form-control:focus {

outline: none;

border-color: #a855f7;

box-shadow: 0 0 15px rgba(168, 85, 247, 0.2);

background: rgba(0,0,0,0.5);

}

.form-label {

position: absolute;

left: 1rem;

top: 1rem;

color: #64748b;

pointer-events: none;

transition: 0.3s;

font-size: 0.9rem;

}

.form-control:focus ~ .form-label,

.form-control:not(:placeholder-shown) ~ .form-label {

top: -0.7rem;

left: 0.8rem;

font-size: 0.75rem;

color: #a855f7;

background: var(--bg-color);

padding: 0 5px;

}

/* -----------------------------------------------------------

10. FOOTER

----------------------------------------------------------- */

footer {

background: #050505;

padding: 5rem 0 2rem;

border-top: 1px solid rgba(255,255,255,0.05);

position: relative;

}

footer::before {

content: '';

position: absolute;

top: 0; left: 0; width: 100%; height: 1px;

background: linear-gradient(90deg, transparent, #a855f7, transparent);

}

.footer-grid {

display: grid;

grid-template-columns: 2fr 1fr 1fr;

gap: 4rem;

margin-bottom: 4rem;

}

.footer-col h4 {

color: white;

margin-bottom: 1.5rem;

font-size: 1.2rem;

}

.footer-col p { color: #64748b; margin-bottom: 1.5rem; }

.social-links { display: flex; gap: 1rem; }

.social-links a {

width: 40px;

height: 40px;

border-radius: 50%;

background: rgba(255,255,255,0.05);

display: flex;

align-items: center;

justify-content: center;

color: white;

text-decoration: none;

transition: 0.3s;

}

.social-links a:hover {

background: var(--primary-gradient);

transform: translateY(-3px);

}

.footer-links ul { list-style: none; }

.footer-links li { margin-bottom: 0.8rem; }

.footer-links a {

color: #94a3b8;

text-decoration: none;

transition: 0.3s;

}

.footer-links a:hover { color: #a855f7; padding-left: 5px; }

.copyright {

text-align: center;

color: #475569;

font-size: 0.9rem;

padding-top: 2rem;

border-top: 1px solid rgba(255,255,255,0.05);

}

/* -----------------------------------------------------------

11. RESPONSIVE DESIGN

----------------------------------------------------------- */

@media (max-width: 992px) {

.hero h1 { font-size: 3.5rem; }

.timeline::after { left: 31px; }

.timeline-item { width: 100%; padding-left: 70px; padding-right: 25px; }

.timeline-item::after { left: 21px; }

.left::after { left: 21px; }

.right { left: 0; }

.left { text-align: left; }

.gallery-grid { grid-template-columns: repeat(2, 1fr); }

.contact-wrapper { grid-template-columns: 1fr; gap: 2rem; }

.footer-grid { grid-template-columns: 1fr; gap: 2rem; }

}

@media (max-width: 768px) {

.hamburger { display: block; z-index: 1001; }

.nav-links {

position: fixed;

top: 0; right: -100%;

width: 100%; height: 100vh;

background: #0f1115;

flex-direction: column;

justify-content: center;

align-items: center;

transition: 0.4s ease-in-out;

z-index: 1000;

}

.nav-links.active { right: 0; }

.hero-stats { flex-direction: column; gap: 1.5rem; }

.video-grid { grid-template-columns: 1fr; height: auto; }

.video-item { height: 250px; }

.gallery-grid { grid-template-columns: 1fr; }

}

</style>

</head>

<body>

<i class="fa-solid fa-bolt"></i> AURA

</a>

<li><a href="#home" class="active">Ana Sayfa</a></li>

<li><a href="#about">Hakkımızda</a></li>

<li><a href="#services">Hizmetler</a></li>

<li><a href="#portfolio">Galeri</a></li>

<li><a href="#contact">İletişim</a></li>

<li><a href="#" class="btn btn-primary" style="padding: 8px 20px;">Giriş Yap</a></li>

</ul>

</div>

</header>

<h1>Sınırları Aşan<br><span class="gradient-text">Dijital Deneyimler.</span></h1>

<p>Aura, markanızı geleceğe taşıyan, premium tasarım anlayışını en son web teknolojileriyle buluşturan kreatif bir stüdyodur.</p>

<a href="#contact" class="btn btn-primary">Projeye Başla</a>

<a href="#video" class="btn btn-glass"><i class="fa-solid fa-play"></i> Tanıtımı İzle</a>

</div>

<p>Tamamlanan Proje</p>

</div>

<p>Müşteri Memnuniyeti</p>

</div>

<p>Global Ödül</p>

</div>

</section>

<h2 class="section-title hidden">Yolculuğumuz</h2>

<p class="section-subtitle hidden delay-100">Dünden bugüne değişmeyen vizyonumuz.</p>

<h4>Başlangıç</h4>

<p style="color: var(--text-muted); margin-top: 10px;">Küçük bir garaj ofisinde, iki kişilik bir ekiple büyük hayaller kurarak yola çıktık.</p>

</div>

<h4>Global Açılım</h4>

<p style="color: var(--text-muted); margin-top: 10px;">Avrupa ve Amerika pazarına açılarak ilk uluslararası ödülümüzü kazandık.</p>

</div>

<h4>Teknoloji Devi</h4>

<p style="color: var(--text-muted); margin-top: 10px;">Yapay zeka entegrasyonlu tasarım sistemlerimizle sektöre yön vermeye başladık.</p>

</div>

<p style="color: var(--text-muted); margin-top: 10px;">Kendi geliştirdiğimiz ekosistem ile tasarım dünyasında yeni bir standart belirledik.</p>

</div>

</section>

<h2 class="section-title hidden" style="color:white;">Sinematik Vizyon</h2>

<p class="section-subtitle hidden">Hikayenizi anlatmanın en güçlü yolu.</p>

</div>

</div>

</div>

</section>

<h2 class="section-title hidden">Seçkin İşler</h2>

<p class="section-subtitle hidden">Sanat ve teknolojinin kesişim noktası.</p>

</div>

</div>

</div>

</div>

</div>

</section>

<h2 class="section-title hidden">Görüşler & Haberler</h2>

<p class="section-subtitle hidden">Sektörden en son trendler ve analizler.</p>

</div>

<span class="blog-tag">Yapay Zeka</span>

<h3 class="blog-title">AI Destekli Tasarımın Geleceği</h3>

<a href="#" class="blog-link">Devamını Oku <i class="fa-solid fa-arrow-right"></i></a>

</div>

</article>

</div>

<span class="blog-tag">Analiz</span>

<h3 class="blog-title">Veri Görselleştirmede Yeni Çağ</h3>

<a href="#" class="blog-link">Devamını Oku <i class="fa-solid fa-arrow-right"></i></a>

</div>

</article>

</div>

<span class="blog-tag">Yazılım</span>

<h3 class="blog-title">Web 3.0 ve Glassmorphism</h3>

<a href="#" class="blog-link">Devamını Oku <i class="fa-solid fa-arrow-right"></i></a>

</div>

</article>

</div>

</section>

<h2 class="section-title hidden">İletişime Geçin</h2>

<p class="section-subtitle hidden">Bir sonraki büyük projenizi birlikte hayata geçirelim.</p>

<h3 class="gradient-text">Aura Studio HQ</h3>

<p style="color:#94a3b8; margin-bottom: 2rem;">San Francisco ve İstanbul ofislerimizle, global ölçekte premium hizmet veriyoruz.</p>

<span>Levent 199, Büyükdere Cd. İstanbul</span>

</div>

<span>hello@aurastudio.com</span>

</div>

</div>

</div>

<label for="name" class="form-label">Adınız Soyadınız</label>

</div>

<label for="email" class="form-label">E-posta Adresiniz</label>

</div>

</div>

<label for="message" class="form-label">Mesajınız</label>

</div>

<button type="submit" class="btn btn-primary" style="width: 100%;">Mesajı Gönder</button>

</form>

</div>

</section>

<i class="fa-solid fa-bolt"></i> AURA

</a>

<p>Teknolojiyi sanatla, tasarımı fonksiyonla birleştiriyoruz. Geleceğin dijital dünyasını bugün inşa ediyoruz.</p>

</div>

<h4>Hızlı Bağlantılar</h4>

<ul>

<li><a href="#about">Hakkımızda</a></li>

<li><a href="#portfolio">Projeler</a></li>

<li><a href="#contact">Kariyer</a></li>

</ul>

</div>

<h4>Yasal</h4>

<ul>

<li><a href="#">Gizlilik Politikası</a></li>

<li><a href="#">Hizmet Şartları</a></li>

<li><a href="#">Çerez Politikası</a></li>

</ul>

</div>

</div>

</footer>

</div>

</div>

// 1. Scroll Animation Logic (Intersection Observer) - AOS alternatifi

const observerOptions = {

threshold: 0.15, // %15'i göründüğünde tetikle

rootMargin: "0px 0px -50px 0px"

};

const observer = new IntersectionObserver((entries) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

entry.target.classList.add('show');

// Bir kere animasyon oynadıktan sonra gözlemlemeyi bırakabiliriz (opsiyonel)

// observer.unobserve(entry.target);

}

});

}, observerOptions);

document.querySelectorAll('.hidden').forEach((el) => observer.observe(el));

// 2. Sticky Header & Active Link Highlighting

const header = document.getElementById('header');

const sections = document.querySelectorAll('section');

const navLinks = document.querySelectorAll('.nav-links a');

window.addEventListener('scroll', () => {

// Sticky Header Effect

if (window.scrollY > 50) {

header.classList.add('scrolled');

} else {

header.classList.remove('scrolled');

}

// Active Link Highlighter

let current = '';

sections.forEach(section => {

const sectionTop = section.offsetTop;

const sectionHeight = section.clientHeight;

if (scrollY >= (sectionTop - 200)) {

current = section.getAttribute('id');

}

});

navLinks.forEach(a => {

a.classList.remove('active');

if (a.getAttribute('href').includes(current)) {

a.classList.add('active');

}

});

// 3. Mobile Menu Toggle

const hamburger = document.querySelector('.hamburger');

const navMenu = document.querySelector('.nav-links');

hamburger.addEventListener('click', () => {

navMenu.classList.toggle('active');

hamburger.querySelector('i').classList.toggle('fa-bars');

hamburger.querySelector('i').classList.toggle('fa-xmark');

});

// Linklere tıklandığında menüyü kapat

document.querySelectorAll('.nav-links a').forEach(link => {

link.addEventListener('click', () => {

navMenu.classList.remove('active');

hamburger.querySelector('i').classList.add('fa-bars');

hamburger.querySelector('i').classList.remove('fa-xmark');

});

// 4. Video Modal Logic

const modal = document.getElementById('videoModal');

const videoFrame = document.getElementById('videoFrame');

function openModal(url) {

videoFrame.src = url;

modal.classList.add('active');

document.body.style.overflow = 'hidden'; // Arka plan scroll'u engelle

}

function closeModal() {

modal.classList.remove('active');

videoFrame.src = ''; // Videoyu durdur

document.body.style.overflow = 'auto';

}

// Modal dışına tıklayınca kapatma

modal.addEventListener('click', (e) => {

if (e.target === modal) closeModal();

});

// 5. Lightbox Logic

const lightbox = document.getElementById('lightboxModal');

const lightboxImg = document.getElementById('lightboxImage');

function openLightbox(src) {

lightboxImg.src = src;

lightbox.classList.add('active');

document.body.style.overflow = 'hidden';

}

function closeLightbox() {

lightbox.classList.remove('active');

document.body.style.overflow = 'auto';

}

// Load Event - Sayfa yüklendiğinde Hero bölümünü yumuşakça getir

window.addEventListener('load', () => {

document.querySelector('.hero-content').classList.add('show');

});

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