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

Recommended

Futuristic Contact Page

loign bien chido

The code whisperer

HTML

CSS

JS

Recommended

Futuristic Contact Page

loign bien chido

The code whisperer

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS