Plantilla HTML para blog de diseño moderno

791 Metehan

Abrir en el editor Video Publica tu código

Plantilla HTML para blog de diseño moderno

Recomendado

23 June 2025

Ejemplo de formulario de inicio de sesión HTML

26 January 2025

Un código de Metr

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>

Plantilla HTML para blog de diseño moderno

Recomendado

Ejemplo de formulario de inicio de sesión HTML

Un código de Redllowge

Un código de Metr

HTML

CSS

JS

Recomendado

Ejemplo de formulario de inicio de sesión HTML

Un código de Redllowge

Un código de Metr

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS