आधुनिक डिज़ाइन ब्लॉग HTML टेम्पलेट

792 Metehan

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

18 October 2025

एक्वापार्क IO अनब्लॉक्ड गेम का HTML कोड

22 November 2025

HTML स्नेक गेम कोड

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>

आधुनिक डिज़ाइन ब्लॉग HTML टेम्पलेट

अनुशंसित

SVG तीर के साथ HTML अगला बटन

एक्वापार्क IO अनब्लॉक्ड गेम का HTML कोड

HTML स्नेक गेम कोड

HTML

CSS

JS

अनुशंसित

SVG तीर के साथ HTML अगला बटन

एक्वापार्क IO अनब्लॉक्ड गेम का HTML कोड

HTML स्नेक गेम कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS