Webleb - HTML UI Elements - Un codice di Mete

HTML

<!DOCTYPE html>

<head>

<title>Webstacks - Modern Blog</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

:root {

--bg-dark: #1A1A1A;

--bg-light: #F8F8F8;

--text-white: #FFFFFF;

--text-dark: #2C2C2C;

--text-gray: #888888;

--accent-blue: #4A90E2;

--accent-orange: #FF6B35;

--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

--gradient-card: linear-gradient(145deg, #f0f0f0 0%, #cacaca 100%);

--shadow-soft: 0 20px 60px rgba(0, 0, 0, 0.1);

--shadow-hover: 0 30px 80px rgba(0, 0, 0, 0.15);

}

body {

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

background: var(--bg-light);

color: var(--text-dark);

line-height: 1.6;

overflow-x: hidden;

}

/* Header */

.header {

position: fixed;

top: 0;

left: 0;

right: 0;

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

backdrop-filter: blur(20px);

z-index: 1000;

padding: 1.5rem 0;

transition: all 0.3s ease;

}

.nav-container {

max-width: 1400px;

margin: 0 auto;

padding: 0 2rem;

display: flex;

justify-content: space-between;

align-items: center;

}

.logo {

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

font-size: 1.8rem;

font-weight: 700;

color: var(--text-dark);

text-decoration: none;

display: flex;

align-items: center;

gap: 0.5rem;

}

.logo-icon {

width: 32px;

height: 32px;

background: var(--accent-blue);

border-radius: 6px;

display: flex;

align-items: center;

justify-content: center;

color: white;

font-weight: 700;

}

.nav-links {

display: flex;

list-style: none;

gap: 3rem;

align-items: center;

}

.nav-links a {

text-decoration: none;

color: var(--text-dark);

font-weight: 500;

position: relative;

transition: all 0.3s ease;

padding: 0.5rem 0;

}

.nav-links a:hover {

color: var(--accent-blue);

}

.hamburger {

display: none;

flex-direction: column;

cursor: pointer;

gap: 4px;

}

.hamburger span {

width: 25px;

height: 2px;

background: var(--text-dark);

transition: all 0.3s ease;

}

/* Hero Section */

.hero {

min-height: 100vh;

display: flex;

align-items: center;

padding: 8rem 2rem 4rem;

background: var(--bg-dark);

color: var(--text-white);

position: relative;

overflow: hidden;

}

.hero::before {

content: '';

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: var(--gradient-primary);

opacity: 0.8;

z-index: 1;

}

.hero-container {

max-width: 1400px;

margin: 0 auto;

display: grid;

grid-template-columns: 1fr 1fr;

gap: 6rem;

align-items: center;

position: relative;

z-index: 2;

}

.hero-content h1 {

font-family: 'Playfair Display', serif;

font-size: 4rem;

font-weight: 700;

line-height: 1.1;

margin-bottom: 2rem;

}

.hero-content .subtitle {

font-size: 1.3rem;

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

margin-bottom: 3rem;

font-weight: 300;

}

.hero-stats {

display: flex;

gap: 3rem;

margin-top: 3rem;

}

.stat-item {

text-align: left;

}

.stat-number {

font-size: 2.5rem;

font-weight: 700;

color: var(--text-white);

display: block;

}

.stat-label {

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

font-size: 0.9rem;

text-transform: uppercase;

letter-spacing: 1px;

}

.hero-visual {

position: relative;

display: flex;

justify-content: center;

align-items: center;

}

.featured-card {

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

backdrop-filter: blur(20px);

border-radius: 20px;

padding: 2.5rem;

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

max-width: 400px;

transition: all 0.3s ease;

}

.featured-card:hover {

transform: translateY(-10px);

box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);

}

.card-category {

color: var(--accent-orange);

font-size: 0.9rem;

font-weight: 600;

text-transform: uppercase;

letter-spacing: 1px;

margin-bottom: 1rem;

}

.card-title {

font-family: 'Playfair Display', serif;

font-size: 1.8rem;

font-weight: 600;

margin-bottom: 1rem;

line-height: 1.3;

}

.card-description {

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

font-size: 1rem;

line-height: 1.6;

}

/* Blog Section */

.blog-section {

padding: 8rem 2rem;

background: var(--bg-light);

}

.section-container {

max-width: 1400px;

margin: 0 auto;

}

.section-header {

text-align: center;

margin-bottom: 6rem;

}

.section-title {

font-family: 'Playfair Display', serif;

font-size: 3rem;

font-weight: 600;

color: var(--text-dark);

margin-bottom: 1rem;

}

.section-subtitle {

font-size: 1.2rem;

color: var(--text-gray);

max-width: 600px;

margin: 0 auto;

}

.blog-grid {

display: grid;

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

gap: 3rem;

}

.blog-card {

background: white;

border-radius: 24px;

overflow: hidden;

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

transition: all 0.4s ease;

cursor: pointer;

}

.blog-card:hover {

transform: translateY(-15px);

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

}

.blog-image {

height: 250px;

background: var(--gradient-primary);

position: relative;

display: flex;

align-items: center;

justify-content: center;

overflow: hidden;

}

.blog-image::before {

content: '';

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: linear-gradient(45deg, var(--accent-blue), var(--accent-orange));

opacity: 0.8;

}

.blog-number {

font-size: 4rem;

font-weight: 700;

color: white;

position: relative;

z-index: 2;

}

.blog-content {

padding: 2.5rem;

}

.blog-meta {

display: flex;

align-items: center;

gap: 1rem;

margin-bottom: 1.5rem;

}

.blog-category {

background: var(--accent-blue);

color: white;

padding: 0.4rem 1rem;

border-radius: 20px;

font-size: 0.8rem;

font-weight: 600;

text-transform: uppercase;

letter-spacing: 0.5px;

}

.blog-date {

color: var(--text-gray);

font-size: 0.9rem;

}

.blog-title {

font-family: 'Playfair Display', serif;

font-size: 1.5rem;

font-weight: 600;

color: var(--text-dark);

margin-bottom: 1rem;

line-height: 1.4;

}

.blog-excerpt {

color: var(--text-gray);

line-height: 1.6;

margin-bottom: 1.5rem;

}

.read-more {

color: var(--accent-blue);

text-decoration: none;

font-weight: 600;

display: inline-flex;

align-items: center;

gap: 0.5rem;

transition: all 0.3s ease;

}

.read-more:hover {

gap: 1rem;

}

/* Footer */

.footer {

background: var(--bg-dark);

color: var(--text-white);

padding: 4rem 2rem 2rem;

}

.footer-container {

max-width: 1400px;

margin: 0 auto;

text-align: center;

}

.footer-social {

display: flex;

justify-content: center;

gap: 2rem;

margin-bottom: 2rem;

}

.social-link {

width: 50px;

height: 50px;

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

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

color: var(--text-white);

text-decoration: none;

transition: all 0.3s ease;

}

.social-link:hover {

background: var(--accent-blue);

transform: translateY(-5px);

}

/* Responsive Design */

@media (max-width: 768px) {

.nav-links {

position: fixed;

top: 0;

right: -100%;

width: 100%;

height: 100vh;

background: rgba(248, 248, 248, 0.98);

backdrop-filter: blur(20px);

flex-direction: column;

justify-content: center;

gap: 2rem;

transition: right 0.3s ease;

}

.nav-links.active {

right: 0;

}

.hamburger {

display: flex;

}

.hero-container {

grid-template-columns: 1fr;

gap: 3rem;

text-align: center;

}

.hero-content h1 {

font-size: 2.5rem;

}

.hero-stats {

justify-content: center;

gap: 2rem;

}

.section-title {

font-size: 2rem;

}

.blog-grid {

grid-template-columns: 1fr;

gap: 2rem;

}

/* Animations */

@keyframes fadeInUp {

from {

opacity: 0;

transform: translateY(30px);

}

to {

opacity: 1;

transform: translateY(0);

}

.fade-in {

animation: fadeInUp 0.6s ease-out forwards;

}

</style>

</head>

<body>

webstacks

</a>

<nav>

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

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

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

</ul>

</nav>

</div>

</header>

<h1>2025 Yılı İçin En İyi Web Tasarım Trendleri</h1>

<p class="subtitle">Modern web tasarımının geleceğini şekillendiren yenilikçi yaklaşımlar ve teknolojiler hakkında derinlemesine analizler.</p>

<span class="stat-label">Makale</span>

</div>

<span class="stat-label">Okuyucu</span>

</div>

<span class="stat-label">Memnuniyet</span>

</div>

<div class="card-category">Tasarım</div>

<h3 class="card-title">Minimalizmin Gücü</h3>

<p class="card-description">Modern web tasarımında sadelik ve işlevselliğin mükemmel dengesini keşfedin.</p>

</div>

</section>

<h2 class="section-title">Son Yazılar</h2>

<p class="section-subtitle">Web tasarımı, teknoloji ve dijital deneyim üzerine en güncel içeriklerimizi keşfedin</p>

</div>

</div>

<span class="blog-category">Tasarım</span>

<span class="blog-date">24 Haziran 2025</span>

</div>

<h3 class="blog-title">Modern Web Arayüzlerinde Tipografi Sanatı</h3>

<p class="blog-excerpt">Kullanıcı deneyimini güçlendiren tipografi seçimleri ve modern web tasarımında yazı tiplerinin stratejik kullanımı.</p>

<a href="#" class="read-more">Okumaya Devam Et →</a>

</div>

</article>

</div>

<span class="blog-category">Teknoloji</span>

<span class="blog-date">22 Haziran 2025</span>

</div>

<h3 class="blog-title">CSS Grid vs Flexbox: 2025 Kılavuzu</h3>

<p class="blog-excerpt">Modern layout sistemlerinin derinlemesine karşılaştırması ve hangi durumda hangisinin kullanılması gerektiği.</p>

<a href="#" class="read-more">Okumaya Devam Et →</a>

</div>

</article>

</div>

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

</div>

<h3 class="blog-title">Erişilebilir Web Tasarımı Prensipleri</h3>

<p class="blog-excerpt">Tüm kullanıcılar için kapsayıcı dijital deneyimler yaratmanın temel kuralları ve uygulama teknikleri.</p>

<a href="#" class="read-more">Okumaya Devam Et →</a>

</div>

</article>

</div>

<span class="blog-category">Performans</span>

<span class="blog-date">18 Haziran 2025</span>

</div>

<h3 class="blog-title">Web Performansı Optimizasyonu</h3>

<p class="blog-excerpt">Sitenizin yükleme hızını artıran ve kullanıcı deneyimini iyileştiren pratik optimizasyon teknikleri.</p>

<a href="#" class="read-more">Okumaya Devam Et →</a>

</div>

</article>

</div>

<span class="blog-category">Trend</span>

<span class="blog-date">16 Haziran 2025</span>

</div>

<h3 class="blog-title">2025'te Web Tasarım Trendleri</h3>

<p class="blog-excerpt">Bu yıl web tasarımını şekillendirecek en önemli trendler ve gelecek öngörüleri.</p>

<a href="#" class="read-more">Okumaya Devam Et →</a>

</div>

</article>

</div>

<span class="blog-category">JavaScript</span>

<span class="blog-date">14 Haziran 2025</span>

</div>

<h3 class="blog-title">Modern JavaScript Framework Karşılaştırması</h3>

<p class="blog-excerpt">React, Vue ve Svelte arasındaki farklar, avantajlar ve hangi projelerde kullanılması gerektiği.</p>

<a href="#" class="read-more">Okumaya Devam Et →</a>

</div>

</article>

</div>

</section>

</svg>

</a>

</svg>

</a>

</svg>

</a>

</div>

</footer>

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

// Mobile menu toggle

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

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

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

navLinks.classList.toggle('active');

hamburger.classList.toggle('active');

});

// Smooth scrolling

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

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

e.preventDefault();

const target = document.querySelector(this.getAttribute('href'));

if (target) {

target.scrollIntoView({

behavior: 'smooth',

block: 'start'

});

}

});

// Header background on scroll

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

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

if (window.scrollY > 100) {

header.style.background = 'rgba(248, 248, 248, 0.98)';

header.style.boxShadow = '0 4px 30px rgba(0, 0, 0, 0.1)';

} else {

header.style.background = 'rgba(248, 248, 248, 0.95)';

header.style.boxShadow = 'none';

}

});

// Intersection Observer for animations

const observerOptions = {

threshold: 0.1,

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

};

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

entries.forEach(entry => {

if (entry.isIntersecting) {

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

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

}

});

}, observerOptions);

// Observe blog cards

document.querySelectorAll('.blog-card').forEach((card, index) => {

card.style.opacity = '0';

card.style.transform = 'translateY(30px)';

card.style.transition = `opacity 0.6s ease ${index * 0.1}s, transform 0.6s ease ${index * 0.1}s`;

observer.observe(card);

});

</script>

</body>

</html>

Un codice di Mete

Consigliato

HTML CSS Barra di navigazione moderna

HTML

CSS

JS

Consigliato

HTML CSS Barra di navigazione moderna

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS