WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Blog creativo: Diseño, podcast y portafolio HTML
98
Metehan
Abrir en el editor
Publica tu código
Recomendado
9 December 2024
Efecto de animación de desplazamiento mediante HTML, CSS y Javascript
24 February 2025
Un código de securearray494
9 June 2025
Pluma cayendo
HTML
Copy
<!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/Navigation --> <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> <!-- Desktop Navigation --> <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> <!-- Mobile Hamburger Menu --> <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> <!-- Mobile Menu --> <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> <!-- Hero Section --> <section class="pt-32 pb-20 px-4"> <div class="container mx-auto"> <div class="flex flex-col md:flex-row items-center"> <!-- Left Column - Text Content --> <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> <!-- Right Column - Image --> <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> <!-- Latest Blog Posts --> <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"> <!-- Blog Post 1 --> <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> <!-- Blog Post 2 --> <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> <!-- Blog Post 3 --> <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> <!-- Podcast 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> <!-- Newsletter 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 --> <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> <script> // Mobile menu toggle const menuToggle = document.getElementById('menu-toggle'); const mobileMenu = document.getElementById('mobile-menu'); const hamburger = document.querySelector('.hamburger'); menuToggle.addEventListener('click', () => { mobileMenu.classList.toggle('hidden'); hamburger.classList.toggle('active'); }); // Close mobile menu when clicking on a link const navLinks = document.querySelectorAll('#mobile-menu a'); navLinks.forEach(link => { link.addEventListener('click', () => { mobileMenu.classList.add('hidden'); hamburger.classList.remove('active'); }); }); // Active nav link indicator const currentPage = window.location.pathname.split('/').pop() || 'index.html'; const navLinksAll = document.querySelectorAll('.nav-link'); navLinksAll.forEach(link => { const linkHref = link.getAttribute('href').split('/').pop(); if (currentPage === linkHref) { link.classList.add('active'); } else { link.classList.remove('active'); } }); </script> </body> </html>
CSS
Copy
/* Replace with your CSS Code (Leave empty if not needed) */
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
