Webleb - HTML UI Elements - Um código de 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>

Um código de Mete

Recomendado

Entradas de um dígito com um elemento

Cartões de links de mídia social HTML

HTML

CSS

JS

Recomendado

Entradas de um dígito com um elemento

Cartões de links de mídia social HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS