Modèle HTML de blog de conception moderne

930 Metehan

Ouvrir dans l'éditeur Video Publiez votre code

Modèle HTML de blog de conception moderne

Recommandé

18 May 2024

Formulaire de connexion multicolore

25 November 2024

Bouton de téléchargement

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>

Modèle HTML de blog de conception moderne

Recommandé

Formulaire de connexion multicolore

cadeau d'anniversaire

Bouton de téléchargement

HTML

CSS

JS

Recommandé

Formulaire de connexion multicolore

cadeau d'anniversaire

Bouton de téléchargement

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS