Webleb - UI Elements - Mete'nin bir kodu

HTML

<!DOCTYPE html>

<head>

<title>Web Leb | Elegance - Canlı Demolar & Dijital Deneyimler</title>

<style>

/* Global CSS ve Değişkenler - Web Leb & Elegance'tan uyarlanmıştır */

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

:root {

--primary-dark: #1a1a2e; /* Hotel Elegance ana koyu */

--secondary-dark: #16213e; /* Hotel Elegance ikincil koyu */

--orange-accent: #E67E50; /* Web Leb ana vurgu */

--orange-light: rgba(230, 126, 80, 0.1);

--gold-color: #ffd700; /* Hotel Elegance altın */

--text-dark: #2C2C2C; /* Web Leb metin koyu */

--text-gray: #666; /* Web Leb metin gri */

--bg-beige: #F5F1E8; /* Web Leb arka plan bej */

--white: #ffffff;

--gradient-elegant: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Hotel Elegance gradyan */

--shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.08);

--shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.12);

--transition-main: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

--border-radius-lg: 30px;

--border-radius-md: 20px;

--border-radius-sm: 15px;

/* Yeni eklenen veya güncellenen renkler/fontlar */

--pink-base: #ffb6c1; /* Canlı demo normalize css'inden */

--pink-light: #fff0f5; /* Canlı demo normalize css'inden */

--pink-accent: #ff69b4; /* Canlı demo normalize css'inden */

--pink-dark: #ff85c0; /* Canlı demo normalize css'inden */

--font-source-sans: 'Source Sans Pro', sans-serif; /* Yeni font */

}

body {

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

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

color: var(--text-dark);

line-height: 1.6;

overflow-x: hidden;

}

h1, h2, h3, h4, h5, h6 {

font-family: 'Playfair Display', serif;

font-weight: 700;

}

a {

background-color: transparent;

outline: 0;

text-decoration: none;

cursor: pointer;

-webkit-transition: all 0.3s ease;

transition: all 0.3s ease;

color: var(--orange-accent); /* Genel link rengi */

}

a:hover {

color: var(--pink-accent); /* Yeni hover rengi */

text-decoration: none;

}

.container {

max-width: 1200px;

margin: 0 auto;

padding: 0 2rem;

}

/* Header (Mevcut Web Leb & Elegance Header) */

.header {

position: fixed;

top: 0;

left: 0;

right: 0;

background: rgba(245, 241, 232, 0.9);

backdrop-filter: blur(10px);

-webkit-backdrop-filter: blur(10px);

z-index: 1000;

padding: 1rem 0;

transition: var(--transition-main);

box-shadow: none;

}

.header.scrolled {

background-color: rgba(255, 255, 255, 0.98);

box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);

padding: 0.8rem 0;

}

.nav-container {

display: flex;

justify-content: space-between;

align-items: center;

}

.logo {

font-family: 'Crimson Text', serif;

font-size: 2rem;

font-weight: 600;

background: var(--gradient-elegant);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

text-decoration: none;

transition: var(--transition-main);

}

.nav-links {

display: flex;

list-style: none;

gap: 2.5rem;

align-items: center;

}

.nav-links a {

text-decoration: none;

color: var(--text-dark);

font-weight: 500;

position: relative;

transition: var(--transition-main);

padding: 0.5rem 0;

font-size: 1.05rem;

}

.nav-links a:hover {

color: var(--pink-accent); /* Yeni vurgu rengi */

}

.nav-links a::after {

content: '';

position: absolute;

bottom: -5px;

left: 50%;

width: 0;

height: 2px;

background: var(--pink-accent); /* Yeni vurgu rengi */

transition: var(--transition-main);

transform: translateX(-50%);

border-radius: 2px;

}

.nav-links a:hover::after {

width: 100%;

}

.hamburger-menu {

display: none;

cursor: pointer;

z-index: 1001;

padding: 5px;

}

.hamburger-menu div {

width: 28px;

height: 3px;

background-color: var(--text-dark);

margin: 6px 0;

transition: var(--transition-main);

border-radius: 2px;

}

/* Hero Section (Mevcut Web Leb & Elegance Hero) */

.hero {

min-height: 100vh;

display: flex;

align-items: center;

padding: 8rem 2rem 4rem;

position: relative;

overflow: hidden;

background-image: linear-gradient(rgba(26, 26, 46, 0.7), rgba(15, 52, 96, 0.7)), url('https://images.pexels.com/photos/1036857/pexels-photo-1036857.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');

background-size: cover;

background-position: center;

background-attachment: fixed;

color: var(--white);

text-align: center;

}

.hero::before {

content: '';

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: var(--gradient-elegant);

opacity: 0.3;

z-index: 1;

}

.hero-container {

max-width: 1000px;

margin: 0 auto;

position: relative;

z-index: 2;

opacity: 0;

transform: translateY(50px);

animation: heroAnimation 1.5s ease 0.5s forwards;

}

.hero-content h1 {

font-family: 'Crimson Text', serif;

font-size: 4.5rem;

font-weight: 700;

line-height: 1.2;

margin-bottom: 1.5rem;

text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.4);

background: linear-gradient(45deg, #fff, var(--gold-color));

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

}

.hero-content .highlight {

color: var(--gold-color);

}

.hero-content p {

font-size: 1.35rem;

color: rgba(255, 255, 255, 0.9);

margin-bottom: 2.5rem;

font-weight: 300;

max-width: 700px;

margin-left: auto;

margin-right: auto;

}

.cta-button {

display: inline-block;

background: var(--orange-accent);

color: var(--white);

padding: 1.1rem 2.5rem;

border-radius: 50px;

text-decoration: none;

font-weight: 600;

font-size: 1.05rem;

transition: var(--transition-main);

box-shadow: var(--shadow-soft);

text-transform: uppercase;

letter-spacing: 1px;

border: none;

cursor: pointer;

}

.cta-button:hover {

transform: translateY(-5px) scale(1.03);

box-shadow: var(--shadow-hover);

background: var(--pink-accent); /* Yeni hover rengi */

}

.social-links {

display: flex;

justify-content: center;

gap: 1.5rem;

margin-top: 3rem;

}

.social-links a {

width: 55px; height: 55px; background: rgba(255, 255, 255, 0.2); border-radius: 50%; display: flex;

align-items: center; justify-content: center; text-decoration: none;

color: var(--white); box-shadow: var(--shadow-soft); transition: var(--transition-main);

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

}

.social-links a:hover {

transform: translateY(-5px) scale(1.05); box-shadow: var(--shadow-hover);

background: var(--pink-accent); /* Yeni hover rengi */

color: var(--primary-dark);

border-color: var(--pink-accent);

}

.social-links svg { width: 26px; height: 26px; }

/* Sections General */

.section {

padding: 8rem 0;

}

.section-title {

font-family: 'Crimson Text', serif;

font-size: 3.2rem;

text-align: center;

margin-bottom: 2rem;

background: var(--gradient-elegant);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

position: relative;

}

.section-title::after {

content: '';

display: block;

width: 120px;

height: 3px;

background: var(--pink-accent); /* Yeni vurgu rengi */

margin: 1.5rem auto 0;

border-radius: 2px;

}

.section-subtitle {

text-align: center;

font-size: 1.2rem;

color: var(--text-gray);

margin-bottom: 5rem;

max-width: 700px;

margin-left: auto;

margin-right: auto;

line-height: 1.7;

}

/* Demo Viewer Section - Yeni ve Birleşik Alan */

#demo-viewer {

background: var(--white);

padding: 6rem 0;

}

.demo-controls {

background: var(--primary-dark); /* Koyu arka plan */

border-radius: var(--border-radius-lg);

padding: 2.5rem 3rem;

margin-bottom: 3rem;

display: flex;

flex-wrap: wrap;

gap: 1.5rem;

justify-content: center;

align-items: center;

box-shadow: var(--shadow-soft);

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

position: relative;

z-index: 10; /* İframe'in üstünde olması için */

}

.demo-controls label {

color: var(--white);

font-weight: 500;

font-size: 1.1rem;

margin-right: 0.5rem;

white-space: nowrap;

}

#template-selector {

flex-grow: 1;

padding: 0.8rem 1.2rem;

border-radius: var(--border-radius-sm);

border: 2px solid rgba(255, 255, 255, 0.3);

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

color: var(--white);

font-size: 1rem;

outline: none;

appearance: none; /* Varsayılan select stilini kaldır */

-webkit-appearance: none;

-moz-appearance: none;

cursor: pointer;

transition: var(--transition-main);

max-width: 350px;

min-width: 200px;

}

#template-selector:focus {

border-color: var(--gold-color);

box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.3);

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

}

#template-selector option {

background-color: var(--primary-dark); /* Açılır liste arka planı */

color: var(--white);

}

.device-selector {

display: flex;

gap: 0.8rem;

flex-wrap: wrap;

justify-content: center;

}

.device-selector .btn-device {

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

color: var(--white);

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

padding: 0.8rem 1.2rem;

border-radius: var(--border-radius-sm);

font-size: 0.9rem;

font-weight: 500;

text-transform: uppercase;

transition: var(--transition-main);

cursor: pointer;

white-space: nowrap;

}

.device-selector .btn-device:hover,

.device-selector .btn-device.active {

background: var(--orange-accent); /* Web Leb vurgu rengi */

color: var(--white);

border-color: var(--orange-accent);

transform: translateY(-2px);

box-shadow: 0 4px 15px rgba(230, 126, 80, 0.3);

}

#iframe-wrapper {

background: var(--bg-beige);

border-radius: var(--border-radius-lg);

overflow: hidden;

box-shadow: var(--shadow-hover);

position: relative;

height: 80vh; /* Sabit yükseklik, içerik kaydırılabilir */

max-width: 100%;

margin: 0 auto;

transition: max-width 0.5s ease, height 0.5s ease;

border: 1px solid rgba(0,0,0,0.05);

display: flex; /* İçerik ortalamak için */

justify-content: center; /* İçerik ortalamak için */

align-items: center; /* İçerik ortalamak için */

}

#iframe-view {

width: 100%;

height: 100%;

border: none;

display: block; /* İframe'in alttaki boşluğunu kapatır */

background: var(--white);

transition: width 0.5s ease, height 0.5s ease;

}

/* Diğer Bölümler (Blog, Podcast, İletişim) - Mevcut Web Leb & Elegance Bölümleri */

#blog { background: var(--white); }

.blog-grid {

display: grid;

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

gap: 3rem;

}

.blog-card {

background: var(--white);

border-radius: var(--border-radius-md);

overflow: hidden;

box-shadow: var(--shadow-soft);

transition: var(--transition-main);

cursor: pointer;

opacity: 0;

transform: translateY(40px);

}

.blog-card:hover {

transform: translateY(-12px) scale(1.01);

box-shadow: var(--shadow-hover);

}

.blog-image {

width: 100%;

height: 220px;

background: linear-gradient(135deg, var(--orange-light), var(--orange-accent));

display: flex;

align-items: center;

justify-content: center;

font-size: 3rem;

color: var(--white);

transition: var(--transition-main);

}

.blog-card:hover .blog-image {

background: linear-gradient(135deg, var(--pink-accent), var(--pink-dark));

}

.blog-image svg { width: 65px; height: 65px; opacity: 0.9; }

.blog-content { padding: 2rem; }

.blog-date { color: var(--text-gray); font-size: 0.95rem; margin-bottom: 0.8rem; font-weight: 500;}

.blog-title {

font-family: 'Playfair Display', serif;

font-size: 1.6rem;

margin-bottom: 1.2rem;

color: var(--primary-dark);

}

.blog-excerpt { color: var(--text-gray); font-size: 1rem; line-height: 1.7; }

#podcast { background: var(--bg-beige); }

.podcast-container {

background: var(--white);

border-radius: var(--border-radius-lg);

padding: 4rem;

box-shadow: var(--shadow-soft);

text-align: center;

opacity: 0;

transform: translateY(40px);

border: 1px solid rgba(0,0,0,0.05);

}

.podcast-container .section-title {

background: var(--gradient-elegant);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

font-size: 2.8rem;

}

.podcast-container .section-title::after { display: none; }

.podcast-container p {

font-size: 1.15rem;

color: var(--text-gray);

margin-bottom: 2.5rem;

max-width: 600px;

margin: 0 auto 2.5rem;

line-height: 1.7;

}

.audio-player {

background: var(--bg-beige);

border-radius: var(--border-radius-md);

padding: 1.8rem 2.5rem;

margin: 2.5rem auto;

display: flex;

align-items: center;

gap: 1.8rem;

justify-content: center;

max-width: 550px;

box-shadow: inset 0 2px 8px rgba(0,0,0,0.05);

border: 1px solid rgba(0,0,0,0.03);

}

.play-button {

width: 65px; height: 65px; background: var(--orange-accent);

border: none; border-radius: 50%; color: var(--white);

font-size: 1.6rem; cursor: pointer; transition: var(--transition-main);

display: flex; align-items: center; justify-content: center;

box-shadow: var(--shadow-soft);

}

.play-button:hover { transform: scale(1.1); background: var(--pink-accent); box-shadow: var(--shadow-hover); }

.play-button svg { width: 28px; height: 28px; margin-left: 2px; }

.play-button .pause-icon { display: none; }

.track-info { flex: 1; text-align: left; }

.track-title { font-weight: 600; margin-bottom: 0.6rem; font-size: 1.2rem; color: var(--primary-dark); }

.track-duration { color: var(--text-gray); font-size: 1rem; }

.podcast-cta {

display: inline-block;

background: var(--gradient-elegant);

color: var(--white);

padding: 1rem 2.5rem;

border-radius: 50px;

text-decoration: none;

font-weight: 600;

font-size: 1rem;

transition: var(--transition-main);

box-shadow: var(--shadow-soft);

text-transform: uppercase;

letter-spacing: 1px;

margin-top: 1.5rem;

border: none;

}

.podcast-cta:hover {

transform: translateY(-5px);

box-shadow: var(--shadow-hover);

}

#contact {

background: linear-gradient(135deg, var(--primary-dark), var(--secondary-dark));

color: var(--white);

}

.contact-container {

max-width: 900px;

margin: 0 auto;

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

padding: 4rem;

border-radius: var(--border-radius-lg);

box-shadow: var(--shadow-hover);

text-align: center;

backdrop-filter: blur(8px);

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

opacity: 0;

transform: translateY(40px);

}

.contact-container .section-title {

color: var(--white);

background: linear-gradient(45deg, #fff, var(--gold-color));

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

margin-bottom: 1.5rem;

}

.contact-container .section-title::after {

background: var(--gold-color);

}

.contact-container p {

font-size: 1.2rem;

color: rgba(255, 255, 255, 0.9);

margin-bottom: 3rem;

line-height: 1.7;

}

.contact-form {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 1.5rem 2rem;

max-width: 700px;

margin: 0 auto;

}

.form-group { position: relative; }

.form-group.full-width { grid-column: 1 / -1; }

.form-group label {

display: block; margin-bottom: 0.6rem; color: rgba(255, 255, 255, 0.9);

font-weight: 500; font-size: 0.95rem; text-align: left;

}

.form-group input, .form-group textarea, .form-group select {

width: 100%; padding: 1.2rem 1.5rem; border: 2px solid rgba(255, 255, 255, 0.3);

border-radius: var(--border-radius-sm); font-size: 1rem; background: rgba(255, 255, 255, 0.1);

color: var(--white); outline: none; transition: var(--transition-main); backdrop-filter: blur(5px);

}

.form-group input::placeholder, .form-group textarea::placeholder { color: rgba(255, 255, 255, 0.7); }

.form-group input:focus, .form-group textarea:focus, .form-group select:focus {

border-color: var(--gold-color); box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.3); background: rgba(255, 255, 255, 0.15);

}

.form-group textarea { resize: vertical; min-height: 120px; }

.submit-btn {

grid-column: 1 / -1; display: inline-block; background: var(--gold-color);

color: var(--primary-dark); padding: 1.2rem 3rem; border-radius: 50px;

text-decoration: none; font-weight: 700; font-size: 1.15rem;

transition: var(--transition-main); box-shadow: var(--shadow-soft);

text-transform: uppercase; letter-spacing: 2px; cursor: pointer; border: none; margin-top: 1.5rem;

}

.submit-btn:hover { transform: translateY(-5px) scale(1.02); box-shadow: var(--shadow-hover); background: #e6c200; }

.error-message { color: #ffcccc; font-size: 0.9rem; margin-top: 0.5rem; text-align: left; font-weight: 500; }

/* Footer (Mevcut Web Leb & Elegance Footer) */

.footer {

background: var(--primary-dark);

color: var(--white);

padding: 5rem 2rem 2.5rem;

text-align: center;

}

.footer-social {

display: flex;

justify-content: center;

gap: 1.5rem;

margin-bottom: 2rem;

}

.footer-social a {

width: 50px; height: 50px; background: rgba(255, 255, 255, 0.15);

border-radius: 50%; display: flex; align-items: center; justify-content: center;

text-decoration: none; color: var(--white); transition: var(--transition-main);

}

.footer-social a:hover {

background: var(--pink-accent); /* Yeni vurgu rengi */

transform: translateY(-3px) scale(1.05);

box-shadow: 0 5px 15px rgba(255, 105, 180, 0.3);

}

.footer-social svg { width: 24px; height: 24px; }

.footer p {

color: rgba(255, 255, 255, 0.8);

font-size: 0.95rem;

line-height: 1.6;

margin-top: 1.5rem;

}

/* Animations */

@keyframes heroAnimation {

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

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

}

/* Responsive Design */

@media (max-width: 968px) {

.nav-links {

position: fixed; top: 0; right: -100%;

width: 70%; height: 100vh;

background: rgba(245, 241, 232, 0.98);

backdrop-filter: blur(8px);

flex-direction: column;

justify-content: center;

gap: 3.5rem;

transition: right 0.5s ease-in-out;

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

}

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

.nav-links a { font-size: 1.6rem; color: var(--primary-dark); }

.nav-links a:hover { color: var(--pink-accent); }

.hamburger-menu { display: block; }

.hamburger-menu.toggle .line1 { transform: rotate(-45deg) translate(-5px, 6px); }

.hamburger-menu.toggle .line2 { opacity: 0; }

.hamburger-menu.toggle .line3 { transform: rotate(45deg) translate(-5px, -6px); }

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

.hero-content p { font-size: 1.2rem; }

.section-title { font-size: 2.8rem; }

.section-subtitle { margin-bottom: 3rem; }

.demo-controls { flex-direction: column; padding: 2rem 1.5rem; }

.demo-controls label { margin-bottom: 0.5rem; }

#template-selector { max-width: 100%; }

.device-selector { margin-top: 1rem; }

#iframe-wrapper { height: 70vh; }

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

.podcast-container { padding: 3rem 2rem; }

.audio-player { flex-direction: column; text-align: center; gap: 1.2rem; padding: 1.5rem; }

.track-info { text-align: center; }

.contact-form { grid-template-columns: 1fr; }

.contact-container { padding: 3rem 2rem; }

}

@media (max-width: 480px) {

.container { padding: 0 1.2rem; }

.hero { padding: 7rem 1.2rem 3rem; }

.hero-content h1 { font-size: 2.8rem; }

.hero-content p { font-size: 1.05rem; }

.cta-button { padding: 1rem 2rem; font-size: 0.95rem; }

.social-links a { width: 45px; height: 45px; }

.section { padding: 6rem 0; }

.section-title { font-size: 2.2rem; }

.section-subtitle { font-size: 1.05rem; margin-bottom: 2rem; }

.demo-controls { padding: 1.5rem 1rem; }

.device-selector .btn-device { padding: 0.6rem 1rem; font-size: 0.85rem; }

#iframe-wrapper { height: 60vh; }

.blog-content { padding: 1.5rem; }

.blog-title { font-size: 1.4rem; }

.blog-excerpt { font-size: 0.9rem; }

.podcast-container .section-title { font-size: 2.2rem; }

.podcast-container p { font-size: 1rem; margin-bottom: 2rem; }

.play-button { width: 55px; height: 55px; font-size: 1.4rem; }

.track-title { font-size: 1.1rem; }

.track-duration { font-size: 0.9rem; }

.podcast-cta { padding: 0.9rem 2rem; font-size: 0.9rem; }

.contact-container { padding: 2.5rem 1.5rem; }

.contact-container .section-title { font-size: 2.2rem; }

.contact-container p { font-size: 1.05rem; margin-bottom: 2rem; }

.form-group input, .form-group textarea, .form-group select { padding: 1rem 1.2rem; font-size: 0.95rem; }

.submit-btn { padding: 1rem 2.5rem; font-size: 1rem; }

}

</style>

</head>

<body>

<a href="#home" class="logo">Web Leb <span style="color: var(--orange-accent); font-family: 'Montserrat', sans-serif; font-size: 1.2rem;">& Elegance</span></a>

<nav>

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

<li><a href="#demo-viewer">Demolar</a></li>

<li><a href="#podcast">Podcast</a></li>

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

</ul>

</nav>

</div>

</header>

<h1>Web Leb <span class="highlight">& Elegance</span>: Dijital Çözümler ve Konforlu Deneyimler</h1>

<p>İlham veren dijital projelerle lüksün ve estetiğin buluştuğu noktadayız. Hayalinizdeki her şeye değer katıyoruz.</p>

<a href="#contact" class="cta-button">Bizimle İletişime Geçin</a>

</a>

</a>

</a>

</div>

</section>

<h2 class="section-title">Canlı Demolarımızı Keşfedin</h2>

<p class="section-subtitle">En yeni web tasarımlarımızı ve dijital çözümlerimizi farklı cihazlarda test edin.</p>

<option value="https://demo.templatesjungle.com/fashionise/" data-product="fashionise">Fashionise - Moda Şablonu</option>

<option value="https://demo.templatesjungle.com/flexi/" data-product="flexi">Flexi - Çok Amaçlı Şablon</option>

<option value="https://demo.templatesjungle.com/luxify/" data-product="luxify">Luxify - Lüks Seyahat Şablonu</option>

<option value="https://demo.templatesjungle.com/zigma/" data-product="zigma">Zigma - SaaS ve Teknoloji</option>

</select>

<button class="btn-device active" data-device="#desktop">Masaüstü</button>

<button class="btn-device" data-device="#laptop">Dizüstü</button>

<button class="btn-device" data-device="#tab">Tablet</button>

<button class="btn-device" data-device="#phone">Telefon</button>

</div>

</div>

</section>

<h2 class="section-title">En Son Dijital İpuçları ve Projeler</h2>

<p class="section-subtitle">Web dünyasındaki gelişmeleri yakından takip edin, ilham verici projelerimizi keşfedin.</p>

</div>

<div class="blog-date">Haziran 20, 2025</div>

<h3 class="blog-title">Geleceğin Web Arayüzleri</h3>

<p class="blog-excerpt">Yapay zeka entegrasyonundan kişiselleştirilmiş deneyimlere: Web siteleri nasıl evriliyor?</p>

</div>

</article>

</div>

<div class="blog-date">Haziran 15, 2025</div>

<h3 class="blog-title">Sürdürülebilir Dijital Çözümler</h3>

<p class="blog-excerpt">Çevre dostu web siteleri ve uygulamalar geliştirmenin önemi ve yöntemleri.</p>

</div>

</article>

</div>

<div class="blog-date">Haziran 10, 2025</div>

<h3 class="blog-title">Mobil Uygulama Trendleri 2025</h3>

<p class="blog-excerpt">Yapay zeka destekli asistanlar ve artırılmış gerçeklik ile mobil uygulamaların geleceği.</p>

</div>

</article>

</div>

</section>

<h2 class="section-title">Teknoloji Sohbetleri & Dijital Lüks</h2>

<p>Yaratıcılık, dijital trendler ve başarılı projelerin ardındaki hikayeler üzerine haftalık ilham verici sohbetler. Konfor alanınızdan bizi dinleyin.</p>

</button>

<div class="track-title">Bölüm 15: Geleceğin Web Arayüzleri</div>

<div class="track-duration">Örnek Ses: 01:34</div>

</div>

<a href="#" class="podcast-cta">Tüm Bölümler</a>

</div>

</section>

<h2 class="section-title">Fikirlerinizi Paylaşın</h2>

<p>Dijital projeleriniz, işbirliği teklifleriniz veya aklınızdaki her şey için bize ulaşın. Sizinle tanışmak için sabırsızlanıyoruz.</p>

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

</div>

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

</div>

<label for="phone">Telefon Numaranız (Opsiyonel)</label>

</div>

</div>

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

</div>

<button type="submit" class="submit-btn">Mesaj Gönder</button>

</form>

</div>

</section>

</a>

</a>

</a>

</div>

</footer>

document.addEventListener('DOMContentLoaded', () => {

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

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

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

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

// Hamburger menü toggle

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

navLinks.classList.toggle('active');

hamburger.classList.toggle('toggle');

});

// Mobil menüdeki bir linke tıklayınca menüyü kapat

links.forEach(link => {

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

if (navLinks.classList.contains('active')) {

navLinks.classList.remove('active');

hamburger.classList.remove('toggle');

}

});

// Pürüzsüz kaydırma

document.querySelectorAll('a[href^="#"]').forEach(anchor => {

anchor.addEventListener('click', function (e) {

e.preventDefault();

const targetId = this.getAttribute('href');

const targetElement = document.querySelector(targetId);

if (targetElement) {

targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });

}

});

// Header'a scroll efekti

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

if (window.scrollY > 50) {

header.classList.add('scrolled');

} else {

header.classList.remove('scrolled');

}

});

// Podcast Oynatıcı

const playButton = document.querySelector('.play-button');

const audio = document.getElementById('podcast-audio');

const playIcon = playButton.querySelector('.play-icon');

const pauseIcon = playButton.querySelector('.pause-icon');

if (playButton && audio) {

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

if (audio.paused) {

audio.play();

playIcon.style.display = 'none';

pauseIcon.style.display = 'block';

} else {

audio.pause();

playIcon.style.display = 'block';

pauseIcon.style.display = 'none';

}

});

audio.addEventListener('ended', () => {

playIcon.style.display = 'block';

pauseIcon.style.display = 'none';

});

}

// İletişim Formu Validasyonu (Basit Örnek)

const contactForm = document.getElementById('contact-form');

if (contactForm) {

contactForm.addEventListener('submit', (e) => {

e.preventDefault();

let isValid = true;

const nameInput = document.getElementById('name');

const emailInput = document.getElementById('email');

const subjectInput = document.getElementById('subject');

const messageInput = document.getElementById('message');

const nameError = document.getElementById('name-error');

const emailError = document.getElementById('email-error');

const subjectError = document.getElementById('subject-error');

const messageError = document.getElementById('message-error');

nameError.textContent = '';

emailError.textContent = '';

subjectError.textContent = '';

messageError.textContent = '';

if (nameInput.value.trim() === '') {

nameError.textContent = 'Adınız ve soyadınız gerekli.';

isValid = false;

}

if (emailInput.value.trim() === '' || !emailInput.value.includes('@') || !emailInput.value.includes('.')) {

emailError.textContent = 'Geçerli bir e-posta adresi giriniz.';

isValid = false;

}

if (subjectInput.value.trim() === '') {

subjectError.textContent = 'Konu alanı boş bırakılamaz.';

isValid = false;

}

if (messageInput.value.trim() === '') {

messageError.textContent = 'Mesaj alanı boş bırakılamaz.';

isValid = false;

}

if (isValid) {

const submitBtn = contactForm.querySelector('.submit-btn');

submitBtn.textContent = 'Gönderiliyor...';

submitBtn.disabled = true;

setTimeout(() => {

submitBtn.textContent = 'Mesajınız Gönderildi!';

submitBtn.style.background = '#4CAF50';

submitBtn.style.color = 'white';

contactForm.reset();

setTimeout(() => {

submitBtn.textContent = 'Mesaj Gönder';

submitBtn.style.background = '';

submitBtn.style.color = '';

submitBtn.disabled = false;

}, 3000);

}, 2000);

}

});

}

// Scroll ile animasyonları tetikleme (Ortak)

const observerOptions = {

threshold: 0.1,

rootMargin: '0px 0px -50px 0px'

};

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

entries.forEach(entry => {

if (entry.isIntersecting) {

entry.target.style.opacity = '1';

entry.target.style.transform = 'translateY(0)';

observer.unobserve(entry.target);

}

});

}, observerOptions);

document.querySelectorAll('.blog-card, .podcast-container, .contact-container, #demo-viewer .section-subtitle, #demo-viewer .demo-controls, #iframe-wrapper').forEach(el => {

el.style.opacity = '0';

el.style.transform = 'translateY(40px)';

el.style.transition = 'opacity 0.8s ease-out, transform 0.8s ease-out';

observer.observe(el);

});

// Hero içeriği animasyonu

const heroContent = document.querySelector('.hero-content');

if (heroContent) {

heroContent.style.opacity = '0';

heroContent.style.transform = 'translateY(50px)';

heroContent.style.animation = 'heroAnimation 1.5s ease 0.5s forwards';

}

// Demo Viewer JavaScript entegrasyonu (jQuery ile gelen fonksiyonellik)

// jQuery CDN'den yüklendiği için artık "$()" kullanabiliriz.

$(document).ready(function(){

var $iframeView = $("#iframe-view");

var $iframeWrapper = $("#iframe-wrapper");

var $deviceButtons = $(".btn-device");

// Şablon seçici değiştiğinde iframe'i güncelle

$('#template-selector').on('change', function() {

var demo_url = this.value;

$iframeView.attr("src", demo_url);

});

// Cihaz boyutlandırma butonları

$deviceButtons.click(function(){

$deviceButtons.removeClass('active');

$(this).addClass('active');

var screen_size = $(this).data('device');

var wrapper_width = "100%";

var wrapper_height = "80vh"; // Ana wrapper'ın yüksekliği sabit kalsın

// Iframe boyutlarını doğrudan ayarla

var iframe_width = "100%";

var iframe_height = "100%";

switch(screen_size) {

case '#desktop':

iframe_width = "100%";

iframe_height = "100%";

$iframeWrapper.css({ 'max-width': '100%', 'height': '80vh' }); // Wrapper'ı da ayarla

break;

case '#laptop':

iframe_width = "1280px";

iframe_height = "800px"; // Laptop için daha uygun bir oran

$iframeWrapper.css({ 'max-width': '1280px', 'height': '80vh' });

break;

case '#tab':

iframe_width = "768px"; // Tablet için uygun genişlik

iframe_height = "1024px"; // Yükseklik biraz daha uzun

$iframeWrapper.css({ 'max-width': '800px', 'height': '80vh' });

break;

case '#phone':

iframe_width = "375px";

iframe_height = "667px"; // Telefon için daha uygun bir oran (iPhone X'e yakın)

$iframeWrapper.css({ 'max-width': '400px', 'height': '80vh' });

break;

}

// Wrapper'ı ortalamak için margin auto kullanılıyor, ek JS'ye gerek yok.

// Iframe boyutlarını ayarlarken, iframe'in wrapper'dan taşmaması için max-width gibi değerler veriyoruz

// veya wrapper'ın overflow: hidden özelliğinden faydalanıyoruz.

$iframeView.css({

'width': iframe_width,

'height': iframe_height,

'margin': 'auto' // Iframe'i wrapper içinde ortala

});

// Eğer iframe boyutu wrapper'ın max-width'ini aşarsa scrollbar çıkacak.

// Veya daha kontrollü bir responsive davranış için, @media query'ler içinde

// wrapper'ın max-width'ini daha dinamik hale getirebiliriz.

});

// Başlangıçta masaüstü boyutunu ayarla

$deviceButtons.filter('[data-device="#desktop"]').click();

});

</script>

</body>

</html>

Mete'nin bir kodu

A Code by Metehan

dom button

HTML

CSS

JS

A Code by Metehan

dom button

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS