क्रिएटिव ब्लॉग: डिज़ाइन, पॉडकास्ट और पोर्टफोलियो HTML

82 Metehan

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

क्रिएटिव ब्लॉग: डिज़ाइन, पॉडकास्ट और पोर्टफोलियो HTML

अनुशंसित

6 April 2025

प्रेमी खोजें और डेटिंग वेबसाइट

28 July 2024

आवश्यक पोर्टफोलियो

6 November 2024

डेवलपर पोर्टफोलियो वेबसाइट टेम्पलेट

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Personal Blog | Creative Mind</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&family=Playfair+Display:wght@400;600;700&display=swap');
        
        body {
            font-family: 'Montserrat', sans-serif;
            background-color: #F5F1E8;
            color: #2C2C2C;
        }
        
        .hero-title {
            font-family: 'Playfair Display', serif;
        }
        
        .nav-link {
            position: relative;
        }
        
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -4px;
            left: 0;
            background-color: #E67E50;
            transition: width 0.3s ease;
        }
        
        .nav-link:hover::after {
            width: 100%;
        }
        
        .active::after {
            width: 100%;
        }
        
        .profile-img {
            transition: transform 0.3s ease;
        }
        
        .profile-img:hover {
            transform: scale(1.02);
        }
        
        .social-icon {
            transition: all 0.3s ease;
        }
        
        .social-icon:hover {
            transform: translateY(-3px);
            color: #E67E50;
        }
        
        .blog-card {
            transition: all 0.3s ease;
        }
        
        .blog-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        
        .hamburger {
            transition: all 0.3s ease;
        }
        
        .hamburger.active .line:nth-child(1) {
            transform: translateY(8px) rotate(45deg);
        }
        
        .hamburger.active .line:nth-child(2) {
            opacity: 0;
        }
        
        .hamburger.active .line:nth-child(3) {
            transform: translateY(-8px) rotate(-45deg);
        }
    </style>
</head>
<body class="min-h-screen">
    
    <header class="fixed w-full bg-white bg-opacity-90 shadow-sm z-50">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <a href="#" class="text-2xl font-bold text-[#E67E50]">CreativeMind</a>
            
            
            <nav class="hidden md:flex space-x-8">
                <a href="#" class="nav-link active uppercase text-sm font-medium tracking-wider">Home</a>
                <a href="#" class="nav-link uppercase text-sm font-medium tracking-wider">Portfolio</a>
                <a href="#" class="nav-link uppercase text-sm font-medium tracking-wider">Podcast</a>
                <a href="#" class="nav-link uppercase text-sm font-medium tracking-wider">Blog</a>
                <a href="#" class="nav-link uppercase text-sm font-medium tracking-wider">Contact</a>
            </nav>
            
            
            <button id="menu-toggle" class="md:hidden focus:outline-none">
                <div class="hamburger">
                    <div class="line w-6 h-0.5 bg-[#2C2C2C] mb-1.5 transition-all"></div>
                    <div class="line w-6 h-0.5 bg-[#2C2C2C] mb-1.5 transition-all"></div>
                    <div class="line w-6 h-0.5 bg-[#2C2C2C] transition-all"></div>
                </div>
            </button>
        </div>
        
        
        <div id="mobile-menu" class="hidden md:hidden bg-white py-4 px-4 shadow-lg">
            <div class="flex flex-col space-y-4">
                <a href="#" class="nav-link active uppercase text-sm font-medium tracking-wider py-2">Home</a>
                <a href="#" class="nav-link uppercase text-sm font-medium tracking-wider py-2">Portfolio</a>
                <a href="#" class="nav-link uppercase text-sm font-medium tracking-wider py-2">Podcast</a>
                <a href="#" class="nav-link uppercase text-sm font-medium tracking-wider py-2">Blog</a>
                <a href="#" class="nav-link uppercase text-sm font-medium tracking-wider py-2">Contact</a>
            </div>
        </div>
    </header>

<section class="pt-32 pb-20 px-4">
        <div class="container mx-auto">
            <div class="flex flex-col md:flex-row items-center">
                
                <div class="md:w-1/2 mb-12 md:mb-0 md:pr-8">
                    <h1 class="hero-title text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
                        Hi, I'm <span class="text-[#E67E50]">Alex</span> <br>Creative Designer
                    </h1>
                    <p class="text-lg text-gray-600 mb-8">
                        I help brands tell their stories through beautiful design and thoughtful content. 
                        Welcome to my creative space where ideas come to life.
                    </p>
                    
                    <div class="flex space-x-6 mb-8">
                        <a href="#" class="social-icon text-xl text-gray-700 hover:text-[#E67E50]">
                            <i class="fab fa-instagram"></i>
                        </a>
                        <a href="#" class="social-icon text-xl text-gray-700 hover:text-[#E67E50]">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#" class="social-icon text-xl text-gray-700 hover:text-[#E67E50]">
                            <i class="fab fa-linkedin-in"></i>
                        </a>
                        <a href="#" class="social-icon text-xl text-gray-700 hover:text-[#E67E50]">
                            <i class="fab fa-dribbble"></i>
                        </a>
                    </div>
                    
                    <button class="bg-[#E67E50] hover:bg-[#d46b3d] text-white px-6 py-3 rounded-full font-medium transition-all transform hover:-translate-y-1 shadow-md">
                        Explore My Work
                    </button>
                </div>
                
                
                <div class="md:w-1/2 flex justify-center">
                    <div class="relative w-64 h-64 md:w-80 md:h-80 lg:w-96 lg:h-96">
                        <div class="absolute inset-0 bg-[#E67E50] bg-opacity-20 rounded-full transform rotate-6"></div>
                        <div class="absolute inset-0 bg-[#E67E50] bg-opacity-10 rounded-full transform -rotate-6"></div>
                        <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" 
                             alt="Profile Image" 
                             class="profile-img relative w-full h-full object-cover rounded-full border-4 border-white shadow-xl">
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="py-16 px-4 bg-white">
        <div class="container mx-auto">
            <div class="text-center mb-16">
                <h2 class="hero-title text-3xl md:text-4xl font-bold mb-4">Latest Blog Posts</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">
                    Thoughts on design, creativity, and the creative process. 
                    Explore my latest articles below.
                </p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                
                <article class="blog-card bg-[#F5F1E8] rounded-lg overflow-hidden shadow-md">
                    <div class="h-48 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
                             alt="Blog Post Image" 
                             class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <div class="p-6">
                        <div class="flex items-center text-sm text-gray-500 mb-2">
                            <span>June 15, 2023</span>
                            <span class="mx-2">•</span>
                            <span>5 min read</span>
                        </div>
                        <h3 class="text-xl font-bold mb-3">The Psychology of Color in Branding</h3>
                        <p class="text-gray-600 mb-4">
                            How color influences consumer perception and why it's crucial for brand identity.
                        </p>
                        <a href="#" class="text-[#E67E50] font-medium inline-flex items-center">
                            Read More 
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                            </svg>
                        </a>
                    </div>
                </article>
                
                
                <article class="blog-card bg-[#F5F1E8] rounded-lg overflow-hidden shadow-md">
                    <div class="h-48 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1541462608143-67571c6738dd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
                             alt="Blog Post Image" 
                             class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <div class="p-6">
                        <div class="flex items-center text-sm text-gray-500 mb-2">
                            <span>May 28, 2023</span>
                            <span class="mx-2">•</span>
                            <span>8 min read</span>
                        </div>
                        <h3 class="text-xl font-bold mb-3">Minimalism in Web Design</h3>
                        <p class="text-gray-600 mb-4">
                            Exploring the power of simplicity and how to implement minimal design principles effectively.
                        </p>
                        <a href="#" class="text-[#E67E50] font-medium inline-flex items-center">
                            Read More 
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                            </svg>
                        </a>
                    </div>
                </article>
                
                
                <article class="blog-card bg-[#F5F1E8] rounded-lg overflow-hidden shadow-md">
                    <div class="h-48 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
                             alt="Blog Post Image" 
                             class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <div class="p-6">
                        <div class="flex items-center text-sm text-gray-500 mb-2">
                            <span>April 12, 2023</span>
                            <span class="mx-2">•</span>
                            <span>6 min read</span>
                        </div>
                        <h3 class="text-xl font-bold mb-3">Creative Block: How to Overcome It</h3>
                        <p class="text-gray-600 mb-4">
                            Practical strategies to break through creative blocks and reignite your inspiration.
                        </p>
                        <a href="#" class="text-[#E67E50] font-medium inline-flex items-center">
                            Read More 
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                            </svg>
                        </a>
                    </div>
                </article>
            </div>
            
            <div class="text-center mt-12">
                <a href="#" class="inline-block border border-[#E67E50] text-[#E67E50] hover:bg-[#E67E50] hover:text-white px-6 py-3 rounded-full font-medium transition-all">
                    View All Articles
                </a>
            </div>
        </div>
    </section>

<section class="py-16 px-4 bg-[#F5F1E8]">
        <div class="container mx-auto">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
                    <img src="https://images.unsplash.com/photo-1593697909683-bccb1b9e68a4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
                         alt="Podcast Cover" 
                         class="w-full rounded-lg shadow-xl">
                </div>
                <div class="md:w-1/2">
                    <h2 class="hero-title text-3xl md:text-4xl font-bold mb-6">Creative Conversations Podcast</h2>
                    <p class="text-lg text-gray-600 mb-6">
                        Join me as I chat with inspiring creatives from various fields about their journeys, 
                        creative processes, and lessons learned along the way.
                    </p>
                    <div class="mb-8">
                        <h3 class="text-xl font-bold mb-4">Latest Episode</h3>
                        <div class="bg-white p-6 rounded-lg shadow-md">
                            <h4 class="font-bold mb-2">Episode 24: Sustainable Design with Lisa Chen</h4>
                            <p class="text-gray-600 text-sm mb-4">June 10, 2023 • 45 min</p>
                            <audio controls class="w-full">
                                <source src="#" type="audio/mpeg">
                                Your browser does not support the audio element.
                            </audio>
                        </div>
                    </div>
                    <div class="flex space-x-4">
                        <a href="#" class="bg-black text-white px-4 py-2 rounded-full text-sm font-medium inline-flex items-center">
                            <i class="fab fa-spotify mr-2"></i> Spotify
                        </a>
                        <a href="#" class="bg-[#FF5E5B] text-white px-4 py-2 rounded-full text-sm font-medium inline-flex items-center">
                            <i class="fab fa-apple mr-2"></i> Apple Podcasts
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="py-16 px-4 bg-white">
        <div class="container mx-auto max-w-4xl text-center">
            <h2 class="hero-title text-3xl md:text-4xl font-bold mb-4">Stay Updated</h2>
            <p class="text-gray-600 mb-8 max-w-2xl mx-auto">
                Subscribe to my newsletter for monthly insights, creative tips, and exclusive content.
            </p>
            
            <form class="flex flex-col sm:flex-row gap-4 max-w-lg mx-auto">
                <input type="email" placeholder="Your email address" 
                       class="flex-grow px-4 py-3 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-[#E67E50] focus:border-transparent">
                <button type="submit" 
                        class="bg-[#E67E50] hover:bg-[#d46b3d] text-white px-6 py-3 rounded-full font-medium transition-all">
                    Subscribe
                </button>
            </form>
            
            <p class="text-xs text-gray-500 mt-4">
                I respect your privacy. Unsubscribe at any time.
            </p>
        </div>
    </section>

<footer class="bg-[#2C2C2C] text-white py-12 px-4">
        <div class="container mx-auto">
            <div class="flex flex-col md:flex-row justify-between">
                <div class="mb-8 md:mb-0">
                    <a href="#" class="text-2xl font-bold text-[#E67E50] mb-4 inline-block">CreativeMind</a>
                    <p class="text-gray-400 max-w-xs">
                        A space for creative exploration, design thinking, and sharing knowledge.
                    </p>
                </div>
                
                <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
                    <div>
                        <h3 class="text-lg font-bold mb-4">Explore</h3>
                        <ul class="space-y-2">
                            <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-white transition">Portfolio</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-white transition">Podcast</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
                        </ul>
                    </div>
                    
                    <div>
                        <h3 class="text-lg font-bold mb-4">Connect</h3>
                        <ul class="space-y-2">
                            <li><a href="#" class="text-gray-400 hover:text-white transition">Twitter</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-white transition">Instagram</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-white transition">LinkedIn</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-white transition">Dribbble</a></li>
                        </ul>
                    </div>
                    
                    <div>
                        <h3 class="text-lg font-bold mb-4">Legal</h3>
                        <ul class="space-y-2">
                            <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-white transition">Cookie Policy</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
                <p class="text-gray-500 text-sm mb-4 md:mb-0">
                    © 2023 CreativeMind. All rights reserved.
                </p>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-500 hover:text-white transition">
                        <i class="fab fa-instagram"></i>
                    </a>
                    <a href="#" class="text-gray-500 hover:text-white transition">
                        <i class="fab fa-twitter"></i>
                    </a>
                    <a href="#" class="text-gray-500 hover:text-white transition">
                        <i class="fab fa-linkedin-in"></i>
                    </a>
                    <a href="#" class="text-gray-500 hover:text-white transition">
                        <i class="fab fa-dribbble"></i>
                    </a>
                </div>
            </div>
        </div>
    </footer>

क्रिएटिव ब्लॉग: डिज़ाइन, पॉडकास्ट और पोर्टफोलियो HTML

अनुशंसित

प्रेमी खोजें और डेटिंग वेबसाइट

आवश्यक पोर्टफोलियो

डेवलपर पोर्टफोलियो वेबसाइट टेम्पलेट

HTML

CSS

JS

अनुशंसित

प्रेमी खोजें और डेटिंग वेबसाइट

आवश्यक पोर्टफोलियो

डेवलपर पोर्टफोलियो वेबसाइट टेम्पलेट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS