Plantilla HTML para blog de diseño moderno

1,394 Metehan

Abrir en el editor Publica tu código

Plantilla HTML para blog de diseño moderno

Recomendado

15 January 2026

Lienzo de juego HTML5 con tiempo de ejecución de Construct 2

27 June 2025

Ejemplo de página web de portafolio

11 September 2025

Ejemplo de bloque de código de animación CSS

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DesignStories | Modern Blog</title>

<link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

/* 2. Sıfırlama ve Temel Stiller */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

html {
            scroll-behavior: smooth;
        }

body {
            font-family: var(--font-primary);
            background-color: var(--bg-color);
            color: var(--text-secondary-color);
            line-height: 1.7;
            overflow-x: hidden;
        }

.container {
            width: 90%;
            max-width: 1100px;
            margin: 0 auto;
        }

section {
            padding: 80px 0;
            overflow: hidden;
        }

h1, h2, h3 {
            font-family: var(--font-headings);
            font-weight: 700;
            color: var(--text-color);
            line-height: 1.3;
        }

h2.section-title {
            font-size: 2.8rem;
            text-align: center;
            margin-bottom: 4rem;
        }

/* 4. Header ve Navigasyon */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 100;
            padding: 20px 0;
            transition: all 0.4s ease;
            background-color: var(--primary-color);
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

.navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.logo {
            font-size: 1.8rem;
            font-weight: 700;
            font-family: var(--font-primary);
            color: var(--accent-color);
            text-decoration: none;
        }

.nav-menu {
            display: flex;
            list-style: none;
            gap: 40px;
        }

.nav-link {
            text-decoration: none;
            color: var(--text-secondary-color);
            font-weight: 500;
            transition: color 0.3s;
            position: relative;
            padding-bottom: 5px;
            text-transform: uppercase;
            font-size: 0.9rem;
        }

.nav-link::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--accent-color);
            transition: width 0.3s;
        }

.nav-link:hover, .nav-link.active {
            color: var(--text-color);
        }
        .nav-link:hover::after, .nav-link.active::after {
            width: 100%;
        }

.menu-toggle {
            display: none;
            font-size: 1.5rem;
            background: none;
            border: none;
            color: var(--accent-color);
            cursor: pointer;
        }

/* 5. Ana Sayfa (Hero) Bölümü */
        #home {
            padding-top: 150px;
            padding-bottom: 80px;
            background-color: var(--secondary-bg-color);
            min-height: auto;
        }

.hero-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 4rem;
        }

.hero-text {
            flex: 1.2;
        }

.hero-text h1 {
            font-size: 3.5rem;
            margin-bottom: 1.5rem;
        }
        .hero-text h1 .highlight {
            color: var(--accent-color);
        }

.hero-text .subtitle {
            font-size: 1.1rem;
            margin-bottom: 2rem;
        }

.btn {
            display: inline-block;
            padding: 12px 28px;
            background-color: var(--accent-color);
            color: #fff;
            text-decoration: none;
            font-weight: 500;
            border-radius: 50px;
            transition: all 0.3s;
            box-shadow: 0 4px 10px rgba(59, 130, 246, 0.2);
        }

.btn:hover {
            background-color: var(--accent-hover-color);
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(59, 130, 246, 0.3);
        }

.hero-image {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .hero-image img {
            max-width: 300px;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            object-fit: cover;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

/* 8. Blog Bölümü */
        .post-card {
            background-color: var(--secondary-bg-color);
            border-radius: 12px;
            overflow: hidden;
            transition: transform 0.3s, box-shadow 0.3s;
            text-decoration: none;
        }
        .post-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--card-shadow);
        }

.card-image {
            width: 100%;
            height: 220px;
            object-fit: cover;
        }
        
        .card-content {
            padding: 1.5rem;
        }
        .card-content .category {
            font-size: 0.8rem;
            color: var(--text-secondary-color);
            margin-bottom: 0.5rem;
        }
        .card-content h3 {
            font-size: 1.3rem;
            margin-bottom: 1rem;
            color: var(--text-color);
        }
        .card-content .read-more {
            color: var(--accent-color);
            text-decoration: none;
            font-weight: 700;
            font-size: 0.9rem;
        }
        
        /* 9. Newsletter Bölümü */
        #newsletter {
            background-color: var(--secondary-bg-color);
        }
        .newsletter-form {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            max-width: 500px;
            margin: 0 auto;
        }
        @media (min-width: 640px) {
            .newsletter-form {
                flex-direction: row;
            }
        }
        .newsletter-form input {
            flex-grow: 1;
            padding: 12px 20px;
            border-radius: 50px;
            border: 1px solid var(--border-color);
            font-family: var(--font-primary);
        }
        .newsletter-form input:focus {
            outline: none;
            box-shadow: 0 0 0 2px var(--accent-color);
        }

/* 10. Footer */
        .footer {
            background-color: var(--text-color);
            color: #fff;
            padding: 40px 0;
        }
        .footer-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }
        @media (min-width: 768px) {
            .footer-content {
                flex-direction: row;
            }
        }
        .footer .copyright {
            color: #a0aec0;
        }
        .social-links a {
            color: #fff;
            font-size: 1.2rem;
            margin: 0 10px;
            transition: color 0.3s;
        }
        .social-links a:hover {
            color: #60a5fa; /* Açık mavi */
        }

/* 11. Responsive Tasarım */
        @media (max-width: 992px) {
            .grid-cols-3 {
                grid-template-columns: repeat(2, 1fr);
            }
            .hero-content {
                text-align: center;
            }
        }

@media (max-width: 768px) {
            h2.section-title { font-size: 2.2rem; }
            .menu-toggle {
                display: block;
                z-index: 1001;
            }
            .nav-menu {
                display: none;
            }
            #mobile-menu {
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                background-color: var(--primary-color);
                box-shadow: 0 4px 10px rgba(0,0,0,0.05);
            }
            #mobile-menu a {
                display: block;
                padding: 1rem 1.5rem;
                text-decoration: none;
                color: var(--text-secondary-color);
            }
             .hero-content {
                flex-direction: column-reverse;
            }
            .hero-image {
                margin-bottom: 3rem;
            }
            .hero-text h1 {
                font-size: 2.8rem;
            }
            .grid-cols-3, .grid-cols-2 {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>

<header class="header" id="header">
        <div class="container navbar">
            <a href="#" class="logo">DesignStories</a>
            <nav class="hidden md:flex">
                <ul class="nav-menu" id="nav-menu">
                    <li class="nav-item"><a href="#home" class="nav-link active">Home</a></li>
                    <li class="nav-item"><a href="#blog" class="nav-link">Blog</a></li>
                    <li class="nav-item"><a href="#newsletter" class="nav-link">Newsletter</a></li>
                </ul>
            </nav>
            <button class="menu-toggle" id="menu-toggle"><i class="fas fa-bars"></i></button>
        </div>
        <div id="mobile-menu" style="display: none;">
            <a href="#home">Home</a>
            <a href="#blog">Blog</a>
            <a href="#newsletter">Newsletter</a>
        </div>
    </header>

<main>
        
        <section id="home">
            <div class="container hero-content">
                <div class="hero-text">
                    <h1>Welcome to <span class="highlight">Design Stories</span></h1>
                    <p class="subtitle">Discover inspiring stories, tips, and resources for designers and creatives. Stay updated with the latest trends in design and creativity.</p>
                    <a href="#blog" class="btn">Read Latest Posts</a>
                </div>
                <div class="hero-image">
                    <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=600&q=80" alt="İlham verici manzara">
                </div>
            </div>
        </section>

<section id="blog">
            <div class="container">
                <h2 class="section-title">Recent Blog Posts</h2>
                <div class="grid grid-cols-3">
                    <article class="post-card">
                        <img src="https://images.unsplash.com/photo-1465101046530-73398c7f28ca?auto=format&fit=crop&w=600&q=80" alt="Tasarım stili" class="card-image">
                        <div class="card-content">
                            <p class="category">July 1, 2023 • 7 min read</p>
                            <h3>How to Find Your Design Style</h3>
                            <a href="#" class="read-more">Read More →</a>
                        </div>
                    </article>
                    <article class="post-card">
                        <img src="https://images.unsplash.com/photo-1519125323398-675f0ddb6308?auto=format&fit=crop&w=600&q=80" alt="Beyaz alan" class="card-image">
                        <div class="card-content">
                            <p class="category">June 20, 2023 • 5 min read</p>
                            <h3>The Power of White Space</h3>
                            <a href="#" class="read-more">Read More →</a>
                        </div>
                    </article>
                    <article class="post-card">
                        <img src="https://images.unsplash.com/photo-1464983953574-0892a716854b?auto=format&fit=crop&w=600&q=80" alt="Renk teorisi" class="card-image">
                        <div class="card-content">
                            <p class="category">June 5, 2023 • 6 min read</p>
                            <h3>Color Theory for Beginners</h3>
                            <a href="#" class="read-more">Read More →</a>
                        </div>
                    </article>
                </div>
            </div>
        </section>

<section id="newsletter">
            <div class="container" style="text-align: center;">
                <h2 class="section-title">Join Our Newsletter</h2>
                <p style="max-width: 500px; margin-left: auto; margin-right: auto; margin-bottom: 2rem;">Get the latest design news, tips, and resources delivered straight to your inbox.</p>
                <form class="newsletter-form">
                    <input type="email" placeholder="Your email address">
                    <button type="submit" class="btn">Subscribe</button>
                </form>
            </div>
        </section>
    </main>

<footer class="footer">
        <div class="container footer-content">
            <p class="copyright"><span style="font-weight: 700;">DesignStories</span> © 2025</p>
            <div class="social-links">
                <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
                <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
                <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
            </div>
        </div>
    </footer>

// Aktif Navigasyon Linki Vurgulama
            const sections = document.querySelectorAll('section[id]');
            const navLinks = document.querySelectorAll('.nav-link');
            
            const activateLink = (id) => {
                navLinks.forEach(link => {
                    link.classList.remove('active');
                    if (link.getAttribute('href') === `#${id}`) {
                        link.classList.add('active');
                    }
                });
            };

sections.forEach(section => {
                if(section.id) navHighlighter.observe(section);
            });
        });
    </script>

</body>
</html>

CSS