WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Modern Blog</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> /* Custom CSS for elements that need more styling than Tailwind provides */ .hero-gradient { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .card-hover:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); } .transition-all { transition: all 0.3s ease; } .article-content p { margin-bottom: 1.5rem; line-height: 1.7; } .article-content h2 { font-size: 1.5rem; font-weight: 700; margin: 2rem 0 1rem; } .article-content img { border-radius: 0.5rem; margin: 1.5rem 0; max-width: 100%; } .dark-mode { background-color: #1a202c; color: #f7fafc; } .dark-mode .bg-white { background-color: #2d3748 !important; color: #f7fafc; } .dark-mode .text-gray-800 { color: #f7fafc !important; } .dark-mode .border-gray-200 { border-color: #4a5568 !important; } .dark-mode .bg-gray-100 { background-color: #4a5568 !important; } </style> </head> <body class="bg-gray-50 font-sans antialiased"> <!-- Dark Mode Toggle --> <div class="fixed bottom-4 right-4 z-50"> <button id="darkModeToggle" class="bg-gray-800 text-white p-3 rounded-full shadow-lg hover:bg-gray-700 transition-all"> <i class="fas fa-moon"></i> </button> </div> <!-- Header/Navigation --> <header class="bg-white shadow-sm sticky top-0 z-40"> <div class="container mx-auto px-4 py-3 flex justify-between items-center"> <div class="flex items-center space-x-2"> <div class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold text-xl">B</div> <span class="text-xl font-bold text-gray-800">ModernBlog</span> </div> <div class="hidden md:flex items-center space-x-8"> <nav> <ul class="flex space-x-6"> <li><a href="#" class="text-blue-600 font-medium">Home</a></li> <li><a href="#" class="text-gray-600 hover:text-blue-600 transition">Blog</a></li> <li><a href="#" class="text-gray-600 hover:text-blue-600 transition">Categories</a></li> <li><a href="#" class="text-gray-600 hover:text-blue-600 transition">About</a></li> <li><a href="#" class="text-gray-600 hover:text-blue-600 transition">Contact</a></li> </ul> </nav> <div class="relative"> <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> <i class="fas fa-search absolute left-3 top-2.5 text-gray-400 text-sm"></i> </div> </div> <button id="mobileMenuButton" class="md:hidden text-gray-600 focus:outline-none"> <i class="fas fa-bars text-xl"></i> </button> </div> <!-- Mobile Menu --> <div id="mobileMenu" class="hidden md:hidden bg-white border-t border-gray-200 px-4 py-3"> <nav> <ul class="space-y-3"> <li><a href="#" class="block text-blue-600 font-medium">Home</a></li> <li><a href="#" class="block text-gray-600 hover:text-blue-600 transition">Blog</a></li> <li><a href="#" class="block text-gray-600 hover:text-blue-600 transition">Categories</a></li> <li><a href="#" class="block text-gray-600 hover:text-blue-600 transition">About</a></li> <li><a href="#" class="block text-gray-600 hover:text-blue-600 transition">Contact</a></li> </ul> </nav> <div class="mt-4 relative"> <input type="text" placeholder="Search..." class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> <i class="fas fa-search absolute left-3 top-2.5 text-gray-400 text-sm"></i> </div> </div> </header> <!-- Hero Section --> <section class="hero-gradient text-white py-20"> <div class="container mx-auto px-4"> <div class="max-w-3xl mx-auto text-center"> <h1 class="text-4xl md:text-5xl font-bold mb-6">Welcome to ModernBlog</h1> <p class="text-xl mb-8 opacity-90">Discover insightful articles on technology, design, and more. Join our community of readers and writers.</p> <div class="flex flex-col sm:flex-row justify-center space-y-3 sm:space-y-0 sm:space-x-4"> <a href="#" class="bg-white text-blue-600 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition-all">Start Reading</a> <a href="#" class="border border-white text-white px-6 py-3 rounded-full font-medium hover:bg-white hover:text-blue-600 transition-all">Subscribe</a> </div> </div> </div> </section> <!-- Featured Posts --> <section class="py-16 bg-white"> <div class="container mx-auto px-4"> <h2 class="text-3xl font-bold text-center mb-12">Featured Posts</h2> <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Featured Post 1 --> <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 card-hover"> <div class="h-48 overflow-hidden"> <img src="https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Featured post" class="w-full h-full object-cover"> </div> <div class="p-6"> <div class="flex items-center mb-4"> <span class="bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded-full font-medium">Technology</span> <span class="text-gray-500 text-sm ml-4">May 15, 2023</span> </div> <h3 class="text-xl font-bold mb-3">The Future of Web Development in 2023</h3> <p class="text-gray-600 mb-4">Exploring the latest trends and technologies that are shaping the future of web development this year.</p> <div class="flex items-center"> <div class="w-8 h-8 rounded-full bg-gray-300 overflow-hidden mr-3"> <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author" class="w-full h-full object-cover"> </div> <span class="text-sm text-gray-600">By Sarah Johnson</span> </div> </div> </div> <!-- Featured Post 2 --> <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 card-hover"> <div class="h-48 overflow-hidden"> <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Featured post" class="w-full h-full object-cover"> </div> <div class="p-6"> <div class="flex items-center mb-4"> <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full font-medium">Design</span> <span class="text-gray-500 text-sm ml-4">June 2, 2023</span> </div> <h3 class="text-xl font-bold mb-3">Minimalist Design Principles for Modern Websites</h3> <p class="text-gray-600 mb-4">Learn how to apply minimalist design principles to create clean, effective, and user-friendly websites.</p> <div class="flex items-center"> <div class="w-8 h-8 rounded-full bg-gray-300 overflow-hidden mr-3"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author" class="w-full h-full object-cover"> </div> <span class="text-sm text-gray-600">By Michael Chen</span> </div> </div> </div> <!-- Featured Post 3 --> <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 card-hover"> <div class="h-48 overflow-hidden"> <img src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Featured post" class="w-full h-full object-cover"> </div> <div class="p-6"> <div class="flex items-center mb-4"> <span class="bg-purple-100 text-purple-600 text-xs px-2 py-1 rounded-full font-medium">Productivity</span> <span class="text-gray-500 text-sm ml-4">June 10, 2023</span> </div> <h3 class="text-xl font-bold mb-3">10 Tools to Boost Your Productivity as a Developer</h3> <p class="text-gray-600 mb-4">Discover the best tools that can help you stay organized and productive in your development workflow.</p> <div class="flex items-center"> <div class="w-8 h-8 rounded-full bg-gray-300 overflow-hidden mr-3"> <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Author" class="w-full h-full object-cover"> </div> <span class="text-sm text-gray-600">By Emma Wilson</span> </div> </div> </div> </div> <div class="text-center mt-12"> <a href="#" class="inline-block bg-blue-600 text-white px-6 py-3 rounded-full font-medium hover:bg-blue-700 transition-all">View All Posts</a> </div> </div> </section> <!-- Latest Posts --> <section class="py-16 bg-gray-50"> <div class="container mx-auto px-4"> <div class="flex flex-col md:flex-row justify-between items-center mb-12"> <h2 class="text-3xl font-bold">Latest Posts</h2> <div class="mt-4 md:mt-0"> <select class="border border-gray-300 rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> <option>All Categories</option> <option>Technology</option> <option>Design</option> <option>Productivity</option> <option>Business</option> <option>Lifestyle</option> </select> </div> </div> <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Latest Post 1 --> <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 card-hover"> <div class="h-48 overflow-hidden"> <img src="https://images.unsplash.com/photo-1517430816045-df4b7de11d1d?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Latest post" class="w-full h-full object-cover"> </div> <div class="p-6"> <div class="flex items-center mb-3"> <span class="bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded-full font-medium">Technology</span> <span class="text-gray-500 text-sm ml-4">June 15, 2023</span> </div> <h3 class="text-xl font-bold mb-3">Getting Started with React Hooks</h3> <p class="text-gray-600 mb-4">A beginner's guide to understanding and implementing React Hooks in your projects.</p> <a href="#" class="text-blue-600 font-medium inline-flex items-center hover:text-blue-700"> Read More <i class="fas fa-arrow-right ml-2 text-sm"></i> </a> </div> </div> <!-- Latest Post 2 --> <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 card-hover"> <div class="h-48 overflow-hidden"> <img src="https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Latest post" class="w-full h-full object-cover"> </div> <div class="p-6"> <div class="flex items-center mb-3"> <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full font-medium">Design</span> <span class="text-gray-500 text-sm ml-4">June 12, 2023</span> </div> <h3 class="text-xl font-bold mb-3">Color Theory for Digital Designers</h3> <p class="text-gray-600 mb-4">Essential color theory concepts every digital designer should know to create visually appealing interfaces.</p> <a href="#" class="text-blue-600 font-medium inline-flex items-center hover:text-blue-700"> Read More <i class="fas fa-arrow-right ml-2 text-sm"></i> </a> </div> </div> <!-- Latest Post 3 --> <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 card-hover"> <div class="h-48 overflow-hidden"> <img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Latest post" class="w-full h-full object-cover"> </div> <div class="p-6"> <div class="flex items-center mb-3"> <span class="bg-yellow-100 text-yellow-600 text-xs px-2 py-1 rounded-full font-medium">Business</span> <span class="text-gray-500 text-sm ml-4">June 8, 2023</span> </div> <h3 class="text-xl font-bold mb-3">Remote Work: Best Practices for Teams</h3> <p class="text-gray-600 mb-4">How to maintain productivity and team cohesion when working remotely in distributed teams.</p> <a href="#" class="text-blue-600 font-medium inline-flex items-center hover:text-blue-700"> Read More <i class="fas fa-arrow-right ml-2 text-sm"></i> </a> </div> </div> <!-- Latest Post 4 --> <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 card-hover"> <div class="h-48 overflow-hidden"> <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Latest post" class="w-full h-full object-cover"> </div> <div class="p-6"> <div class="flex items-center mb-3"> <span class="bg-purple-100 text-purple-600 text-xs px-2 py-1 rounded-full font-medium">Productivity</span> <span class="text-gray-500 text-sm ml-4">June 5, 2023</span> </div> <h3 class="text-xl font-bold mb-3">Time Management Techniques That Work</h3> <p class="text-gray-600 mb-4">Proven time management strategies to help you get more done in less time without burning out.</p> <a href="#" class="text-blue-600 font-medium inline-flex items-center hover:text-blue-700"> Read More <i class="fas fa-arrow-right ml-2 text-sm"></i> </a> </div> </div> <!-- Latest Post 5 --> <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 card-hover"> <div class="h-48 overflow-hidden"> <img src="https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Latest post" class="w-full h-full object-cover"> </div> <div class="p-6"> <div class="flex items-center mb-3"> <span class="bg-pink-100 text-pink-600 text-xs px-2 py-1 rounded-full font-medium">Lifestyle</span> <span class="text-gray-500 text-sm ml-4">June 1, 2023</span> </div> <h3 class="text-xl font-bold mb-3">Digital Minimalism: Living Better with Less Tech</h3> <p class="text-gray-600 mb-4">How to embrace digital minimalism to reduce stress and improve your quality of life.</p> <a href="#" class="text-blue-600 font-medium inline-flex items-center hover:text-blue-700"> Read More <i class="fas fa-arrow-right ml-2 text-sm"></i> </a> </div> </div> <!-- Latest Post 6 --> <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 card-hover"> <div class="h-48 overflow-hidden"> <img src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Latest post" class="w-full h-full object-cover"> </div> <div class="p-6"> <div class="flex items-center mb-3"> <span class="bg-indigo-100 text-indigo-600 text-xs px-2 py-1 rounded-full font-medium">Technology</span> <span class="text-gray-500 text-sm ml-4">May 28, 2023</span> </div> <h3 class="text-xl font-bold mb-3">The Rise of AI in Everyday Applications</h3> <p class="text-gray-600 mb-4">How artificial intelligence is becoming increasingly integrated into our daily lives and applications.</p> <a href="#" class="text-blue-600 font-medium inline-flex items-center hover:text-blue-700"> Read More <i class="fas fa-arrow-right ml-2 text-sm"></i> </a> </div> </div> </div> <div class="mt-12 flex justify-center"> <nav class="flex items-center space-x-1"> <a href="#" class="px-4 py-2 border border-gray-300 rounded-full text-gray-600 hover:bg-gray-100">«</a> <a href="#" class="px-4 py-2 border border-blue-600 bg-blue-600 text-white rounded-full">1</a> <a href="#" class="px-4 py-2 border border-gray-300 rounded-full text-gray-600 hover:bg-gray-100">2</a> <a href="#" class="px-4 py-2 border border-gray-300 rounded-full text-gray-600 hover:bg-gray-100">3</a> <a href="#" class="px-4 py-2 border border-gray-300 rounded-full text-gray-600 hover:bg-gray-100">»</a> </nav> </div> </div> </section> <!-- Newsletter --> <section class="py-16 bg-blue-600 text-white"> <div class="container mx-auto px-4"> <div class="max-w-3xl mx-auto text-center"> <h2 class="text-3xl font-bold mb-6">Subscribe to Our Newsletter</h2> <p class="text-xl mb-8 opacity-90">Get the latest posts delivered right to your inbox. No spam, ever.</p> <form class="flex flex-col sm:flex-row max-w-md mx-auto sm:max-w-xl"> <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-full sm:rounded-r-none mb-2 sm:mb-0 focus:outline-none text-gray-800"> <button type="submit" class="bg-white text-blue-600 px-6 py-3 rounded-full sm:rounded-l-none font-medium hover:bg-gray-100 transition-all">Subscribe</button> </form> </div> </div> </section> <!-- Popular Categories --> <section class="py-16 bg-white"> <div class="container mx-auto px-4"> <h2 class="text-3xl font-bold text-center mb-12">Popular Categories</h2> <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6"> <!-- Category 1 --> <a href="#" class="bg-gray-50 rounded-lg p-6 flex items-center hover:bg-gray-100 transition-all"> <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mr-4"> <i class="fas fa-laptop-code text-xl"></i> </div> <div> <h3 class="font-bold text-lg">Technology</h3> <p class="text-gray-500 text-sm">24 Articles</p> </div> </a> <!-- Category 2 --> <a href="#" class="bg-gray-50 rounded-lg p-6 flex items-center hover:bg-gray-100 transition-all"> <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center text-green-600 mr-4"> <i class="fas fa-paint-brush text-xl"></i> </div> <div> <h3 class="font-bold text-lg">Design</h3> <p class="text-gray-500 text-sm">18 Articles</p> </div> </a> <!-- Category 3 --> <a href="#" class="bg-gray-50 rounded-lg p-6 flex items-center hover:bg-gray-100 transition-all"> <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center text-purple-600 mr-4"> <i class="fas fa-chart-line text-xl"></i> </div> <div> <h3 class="font-bold text-lg">Business</h3> <p class="text-gray-500 text-sm">15 Articles</p> </div> </a> <!-- Category 4 --> <a href="#" class="bg-gray-50 rounded-lg p-6 flex items-center hover:bg-gray-100 transition-all"> <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center text-yellow-600 mr-4"> <i class="fas fa-lightbulb text-xl"></i> </div> <div> <h3 class="font-bold text-lg">Productivity</h3> <p class="text-gray-500 text-sm">12 Articles</p> </div> </a> </div> </div> </section> <!-- Article Example (hidden by default, shown when clicking "Read More") --> <div id="articleModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden"> <div class="bg-white rounded-xl max-w-4xl w-full max-h-screen overflow-y-auto mx-4 my-8"> <div class="sticky top-0 bg-white p-4 border-b flex justify-between items-center"> <h2 class="text-xl font-bold">Article Title</h2> <button id="closeModal" class="text-gray-500 hover:text-gray-700"> <i class="fas fa-times"></i> </button> </div> <div class="p-6 md:p-8"> <div class="mb-8"> <img src="https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Article" class="w-full rounded-lg"> </div> <div class="flex items-center mb-8"> <div class="flex items-center"> <div class="w-10 h-10 rounded-full bg-gray-300 overflow-hidden mr-3"> <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author" class="w-full h-full object-cover"> </div> <div> <p class="font-medium">Sarah Johnson</p> <p class="text-gray-500 text-sm">Published on June 15, 2023</p> </div> </div> <div class="ml-auto flex space-x-2"> <span class="bg-blue-100 text-blue-600 text-xs px-3 py-1 rounded-full font-medium">Technology</span> </div> </div> <div class="article-content"> <h2 class="text-2xl font-bold mb-6">The Future of Web Development in 2023</h2> <p>As we move further into 2023, the landscape of web development continues to evolve at a rapid pace. New technologies emerge, existing ones mature, and developer preferences shift. In this article, we'll explore the key trends shaping the future of web development this year.</p> <h2>The Rise of WebAssembly</h2> <p>WebAssembly (Wasm) has been gaining significant traction as a way to run high-performance applications on the web. With near-native performance, Wasm allows developers to write code in languages like C, C++, and Rust that can run in the browser.</p> <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="WebAssembly"> <p>In 2023, we expect to see more adoption of WebAssembly for computationally intensive tasks like video editing, 3D rendering, and scientific simulations directly in the browser.</p> <h2>Progressive Web Apps (PWAs) Become Standard</h2> <p>Progressive Web Apps have been around for several years, but 2023 might be the year they truly become mainstream. With capabilities like offline functionality, push notifications, and near-native performance, PWAs offer a compelling alternative to traditional mobile apps.</p> <p>Major platforms are improving their PWA support, and developers are recognizing the cost benefits of building one codebase that works across all devices rather than maintaining separate iOS and Android apps.</p> <h2>Serverless Architecture Matures</h2> <p>Serverless computing continues to grow in popularity as developers appreciate the reduced operational overhead and automatic scaling capabilities. In 2023, we're seeing more sophisticated tooling emerge for serverless development, making it easier to build and deploy complex applications.</p> <p>Frameworks like Next.js and Nuxt.js are making server-side rendering and static site generation more accessible, blurring the lines between traditional and serverless architectures.</p> <h2>Conclusion</h2> <p>The web development landscape in 2023 is characterized by performance improvements, architectural shifts, and an emphasis on developer experience. As these technologies mature, they're enabling developers to build more powerful, efficient, and user-friendly web applications than ever before.</p> </div> <div class="mt-12 pt-8 border-t"> <h3 class="text-lg font-bold mb-6">Share this article</h3> <div class="flex space-x-4"> <a href="#" class="w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center hover:bg-blue-700"> <i class="fab fa-facebook-f"></i> </a> <a href="#" class="w-10 h-10 bg-blue-400 text-white rounded-full flex items-center justify-center hover:bg-blue-500"> <i class="fab fa-twitter"></i> </a> <a href="#" class="w-10 h-10 bg-red-600 text-white rounded-full flex items-center justify-center hover:bg-red-700"> <i class="fab fa-pinterest-p"></i> </a> <a href="#" class="w-10 h-10 bg-gray-700 text-white rounded-full flex items-center justify-center hover:bg-gray-800"> <i class="fab fa-linkedin-in"></i> </a> </div> </div> <div class="mt-12 pt-8 border-t"> <h3 class="text-lg font-bold mb-6">Leave a comment</h3> <form> <div class="mb-4"> <input class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" rows="4" placeholder="Your comment"/> </div> <div class="grid md:grid-cols-2 gap-4 mb-4"> <input type="text" class="px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Your name"> <input type="email" class="px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Your email"> </div> <button type="submit" class="bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition-all">Post Comment</button> </form> </div> </div> </div> </div> <!-- Footer --> <footer class="bg-gray-800 text-white py-12"> <div class="container mx-auto px-4"> <div class="grid md:grid-cols-4 gap-8"> <div> <div class="flex items-center space-x-2 mb-4"> <div class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold text-xl">B</div> <span class="text-xl font-bold">ModernBlog</span> </div> <p class="text-gray-400 mb-4">A modern blog about technology, design, and productivity.</p> <div class="flex space-x-4"> <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a> </div> </div> <div> <h3 class="text-lg font-bold mb-4">Quick Links</h3> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-white">Home</a></li> <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li> <li><a href="#" class="text-gray-400 hover:text-white">About</a></li> <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li> <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li> </ul> </div> <div> <h3 class="text-lg font-bold mb-4">Categories</h3> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-white">Technology</a></li> <li><a href="#" class="text-gray-400 hover:text-white">Design</a></li> <li><a href="#" class="text-gray-400 hover:text-white">Business</a></li> <li><a href="#" class="text-gray-400 hover:text-white">Productivity</a></li> <li><a href="#" class="text-gray-400 hover:text-white">Lifestyle</a></li> </ul> </div> <div> <h3 class="text-lg font-bold mb-4">Newsletter</h3> <p class="text-gray-400 mb-4">Subscribe to our newsletter for the latest updates.</p> <form class="flex"> <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-full text-gray-800 focus:outline-none w-full"> <button type="submit" class="bg-blue-600 px-4 py-2 rounded-r-full hover:bg-blue-700"> <i class="fas fa-paper-plane"></i> </button> </form> </div> </div> <div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400"> <p>© 2023 ModernBlog. All rights reserved.</p> </div> </div> </footer> <!-- Back to Top Button --> <a href="#" id="backToTop" class="fixed bottom-4 right-20 bg-gray-800 text-white p-3 rounded-full shadow-lg hover:bg-gray-700 transition-all hidden"> <i class="fas fa-arrow-up"></i> </a> <script> // Mobile Menu Toggle const mobileMenuButton = document.getElementById('mobileMenuButton'); const mobileMenu = document.getElementById('mobileMenu'); mobileMenuButton.addEventListener('click', () => { mobileMenu.classList.toggle('hidden'); }); // Dark Mode Toggle const darkModeToggle = document.getElementById('darkModeToggle'); const html = document.documentElement; darkModeToggle.addEventListener('click', () => { html.classList.toggle('dark-mode'); if (html.classList.contains('dark-mode')) { darkModeToggle.innerHTML = '<i class="fas fa-sun"></i>'; localStorage.setItem('darkMode', 'enabled'); } else { darkModeToggle.innerHTML = '<i class="fas fa-moon"></i>'; localStorage.setItem('darkMode', 'disabled'); } }); // Check for saved dark mode preference if (localStorage.getItem('darkMode') === 'enabled') { html.classList.add('dark-mode'); darkModeToggle.innerHTML = '<i class="fas fa-sun"></i>'; } // Back to Top Button const backToTopButton = document.getElementById('backToTop'); window.addEventListener('scroll', () => { if (window.pageYOffset > 300) { backToTopButton.classList.remove('hidden'); } else { backToTopButton.classList.add('hidden'); } }); backToTopButton.addEventListener('click', (e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }); // Article Modal const readMoreLinks = document.querySelectorAll('a[href="#"]'); const articleModal = document.getElementById('articleModal'); const closeModal = document.getElementById('closeModal'); readMoreLinks.forEach(link => { link.addEventListener('click', (e) => { e.preventDefault(); articleModal.classList.remove('hidden'); document.body.style.overflow = 'hidden'; }); }); closeModal.addEventListener('click', () => { articleModal.classList.add('hidden'); document.body.style.overflow = 'auto'; }); // Close modal when clicking outside articleModal.addEventListener('click', (e) => { if (e.target === articleModal) { articleModal.classList.add('hidden'); document.body.style.overflow = 'auto'; } }); </script> </body> </html>
/* Replace with your CSS Code (Leave empty if not needed) */
/* Replace with your JS Code (Leave empty if not needed) */
Validating your code, please wait...
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Modern Blog</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> /* Custom CSS for elements that need more styling than Tailwind provides */ .hero-gradient { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .card-hover:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); } .transition-all { transition: all 0.3s ease; } .article-content p { margin-bottom: 1.5rem; line-height: 1.7; } .article-content h2 { font-size: 1.5rem; font-weight: 700; margin: 2rem 0 1rem; } .article-content img { border-radius: 0.5rem; margin: 1.5rem 0; max-width: 100%; } .dark-mode { background-color: #1a202c; color: #f7fafc; } .dark-mode .bg-white { background-color: #2d3748 !important; color: #f7fafc; } .dark-mode .text-gray-800 { color: #f7fafc !important; } .dark-mode .border-gray-200 { border-color: #4a5568 !important; } .dark-mode .bg-gray-100 { background-color: #4a5568 !important; } </style> </head> <body class="bg-gray-50 font-sans antialiased"> <!-- Dark Mode Toggle --> <div class="fixed bottom-4 right-4 z-50"> <button id="darkModeToggle" class="bg-gray-800 text-white p-3 rounded-full shadow-lg hover:bg-gray-700 transition-all"> <i class="fas fa-moon"></i> </button> </div> <!-- Header/Navigation --> <header class="bg-white shadow-sm sticky top-0 z-40"> <div class="container mx-auto px-4 py-3 flex justify-between items-center"> <div class="flex items-center space-x-2"> <div class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold text-xl">B</div> <span class="text-xl font-bold text-gray-800">ModernBlog</span> </div> <div class="hidden md:flex items-center space-x-8"> <nav> <ul class="flex space-x-6"> <li><a href="#" class="text-blue-600 font-medium">Home</a></li> <li><a href="#" class="text-gray-600 hover:text-blue-600 transition">Blog</a></li> <li><a href="#" class="text-gray-600 hover:text-blue-600 transition">Categories</a></li> <li><a href="#" class="text-gray-600 hover:text-blue-600 transition">About</a></li> <li><a href="#" class="text-gray-600 hover:text-blue-600 transition">Contact</a></li> </ul> </nav> <div class="relative"> <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> <i class="fas fa-search absolute left-3 top-2.5 text-gray-400 text-sm"></i> </div> </div> <button id="mobileMenuButton" class="md:hidden text-gray-600 focus:outline-none"> <i class="fas fa-bars text-xl"></i> </button> </div> <!-- Mobile Menu --> <div id="mobileMenu" class="hidden md:hidden bg-white border-t border-gray-200 px-4 py-3"> <nav> <ul class="space-y-3"> <li><a href="#" class="block text-blue-600 font-medium">Home</a></li> <li><a href="#" class="block text-gray-600 hover:text-blue-600 transition">Blog</a></li> <li><a href="#" class="block text-gray-600 hover:text-blue-600 transition">Categories</a></li> <li><a href="#" class="block text-gray-600 hover:text-blue-600 transition">About</a></li> <li><a href="#" class="block text-gray-600 hover:text-blue-600 transition">Contact</a></li> </ul> </nav> <div class="mt-4 relative"> <input type="text" placeholder="Search..." class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> <i class="fas fa-search absolute left-3 top-2.5 text-gray-400 text-sm"></i> </div> </div> </header> <!-- Hero Section --> <section class="hero-gradient text-white py-20"> <div class="container mx-auto px-4"> <div class="max-w-3xl mx-auto text-center"> <h1 class="text-4xl md:text-5xl font-bold mb-6">Welcome to ModernBlog</h1> <p class="text-xl mb-8 opacity-90">Discover insightful articles on technology, design, and more. Join our community of readers and writers.</p> <div class="flex flex-col sm:flex-row justify-center space-y-3 sm:space-y-0 sm:space-x-4"> <a href="#" class="bg-white text-blue-600 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition-all">Start Reading</a> <a href="#" class="border border-white text-white px-6 py-3 rounded-full font-medium hover:bg-white hover:text-blue-600 transition-all">Subscribe</a> </div> </div> </div> </section> <!-- Featured Posts --> <section class="py-16 bg-white"> <div class="container mx-auto px-4"> <h2 class="text-3xl font-bold text-center mb-12">Featured Posts</h2> <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Featured Post 1 --> <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 card-hover"> <div class="h-48 overflow-hidden"> <img src="https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Featured post" class="w-full h-full object-cover"> </div> <div class="p-6"> <div class="flex items-center mb-4"> <span class="bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded-full font-medium">Technology</span> <span class="text-gray-500 text-sm ml-4">May 15, 2023</span> </div> <h3 class="text-xl font-bold mb-3">The Future of Web Development in 2023</h3> <p class="text-gray-600 mb-4">Exploring the latest trends and technologies that are shaping the future of web development this year.</p> <div class="flex items-center"> <div class="w-8 h-8 rounded-full bg-gray-300 overflow-hidden mr-3"> <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author" class="w-full h-full object-cover"> </div> <span class="text-sm text-gray-600">By Sarah Johnson</span> </div> </div> </div> <!-- Featured Post 2 --> <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 card-hover"> <div class="h-48 overflow-hidden"> <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Featured post" class="w-full h-full object-cover"> </div> <div class="p-6"> <div class="flex items-center mb-4"> <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full font-medium">Design</span> <span class="text-gray-500 text-sm ml-4">June 2, 2023</span> </div> <h3 class="text-xl font-bold mb-3">Minimalist Design Principles for Modern Websites</h3> <p class="text-gray-600 mb-4">Learn how to apply minimalist design principles to create clean, effective, and user-friendly websites.</p> <div class="flex items-center"> <div class="w-8 h-8 rounded-full bg-gray-300 overflow-hidden mr-3"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author" class="w-full h-full object-cover"> </div> <span class="text-sm text-gray-600">By Michael Chen</span> </div> </div> </div> <!-- Featured Post 3 --> <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 card-hover"> <div class="h-48 overflow-hidden"> <img src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Featured post" class="w-full h-full object-cover"> </div> <div class="p-6"> <div class="flex items-center mb-4"> <span class="bg-purple-100 text-purple-600 text-xs px-2 py-1 rounded-full font-medium">Productivity</span> <span class="text-gray-500 text-sm ml-4">June 10, 2023</span> </div> <h3 class="text-xl font-bold mb-3">10 Tools to Boost Your Productivity as a Developer</h3> <p class="text-gray-600 mb-4">Discover the best tools that can help you stay organized and productive in your development workflow.</p> <div class="flex items-center"> <div class="w-8 h-8 rounded-full bg-gray-300 overflow-hidden mr-3"> <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Author" class="w-full h-full object-cover"> </div> <span class="text-sm text-gray-600">By Emma Wilson</span> </div> </div> </div> </div> <div class="text-center mt-12"> <a href="#" class="inline-block bg-blue-600 text-white px-6 py-3 rounded-full font-medium hover:bg-blue-700 transition-all">View All Posts</a> </div> </div> </section> <!-- Latest Posts --> <section class="py-16 bg-gray-50"> <div class="container mx-auto px-4"> <div class="flex flex-col md:flex-row justify-between items-center mb-12"> <h2 class="text-3xl font-bold">Latest Posts</h2> <div class="mt-4 md:mt-0"> <select class="border border-gray-300 rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> <option>All Categories</option> <option>Technology</option> <option>Design</option> <option>Productivity</option> <option>Business</option> <option>Lifestyle</option> </select> </div> </div> <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Latest Post 1 --> <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 card-hover"> <div class="h-48 overflow-hidden"> <img src="https://images.unsplash.com/photo-1517430816045-df4b7de11d1d?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Latest post" class="w-full h-full object-cover"> </div> <div class="p-6"> <div class="flex items-center mb-3"> <span class="bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded-full font-medium">Technology</span> <span class="text-gray-500 text-sm ml-4">June 15, 2023</span> </div> <h3 class="text-xl font-bold mb-3">Getting Started with React Hooks</h3> <p class="text-gray-600 mb-4">A beginner's guide to understanding and implementing React Hooks in your projects.</p> <a href="#" class="text-blue-600 font-medium inline-flex items-center hover:text-blue-700"> Read More <i class="fas fa-arrow-right ml-2 text-sm"></i> </a> </div> </div> <!-- Latest Post 2 --> <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 card-hover"> <div class="h-48 overflow-hidden"> <img src="https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Latest post" class="w-full h-full object-cover"> </div> <div class="p-6"> <div class="flex items-center mb-3"> <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full font-medium">Design</span> <span class="text-gray-500 text-sm ml-4">June 12, 2023</span> </div> <h3 class="text-xl font-bold mb-3">Color Theory for Digital Designers</h3> <p class="text-gray-600 mb-4">Essential color theory concepts every digital designer should know to create visually appealing interfaces.</p> <a href="#" class="text-blue-600 font-medium inline-flex items-center hover:text-blue-700"> Read More <i class="fas fa-arrow-right ml-2 text-sm"></i> </a> </div> </div> <!-- Latest Post 3 --> <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 card-hover"> <div class="h-48 overflow-hidden"> <img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Latest post" class="w-full h-full object-cover"> </div> <div class="p-6"> <div class="flex items-center mb-3"> <span class="bg-yellow-100 text-yellow-600 text-xs px-2 py-1 rounded-full font-medium">Business</span> <span class="text-gray-500 text-sm ml-4">June 8, 2023</span> </div> <h3 class="text-xl font-bold mb-3">Remote Work: Best Practices for Teams</h3> <p class="text-gray-600 mb-4">How to maintain productivity and team cohesion when working remotely in distributed teams.</p> <a href="#" class="text-blue-600 font-medium inline-flex items-center hover:text-blue-700"> Read More <i class="fas fa-arrow-right ml-2 text-sm"></i> </a> </div> </div> <!-- Latest Post 4 --> <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 card-hover"> <div class="h-48 overflow-hidden"> <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Latest post" class="w-full h-full object-cover"> </div> <div class="p-6"> <div class="flex items-center mb-3"> <span class="bg-purple-100 text-purple-600 text-xs px-2 py-1 rounded-full font-medium">Productivity</span> <span class="text-gray-500 text-sm ml-4">June 5, 2023</span> </div> <h3 class="text-xl font-bold mb-3">Time Management Techniques That Work</h3> <p class="text-gray-600 mb-4">Proven time management strategies to help you get more done in less time without burning out.</p> <a href="#" class="text-blue-600 font-medium inline-flex items-center hover:text-blue-700"> Read More <i class="fas fa-arrow-right ml-2 text-sm"></i> </a> </div> </div> <!-- Latest Post 5 --> <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 card-hover"> <div class="h-48 overflow-hidden"> <img src="https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Latest post" class="w-full h-full object-cover"> </div> <div class="p-6"> <div class="flex items-center mb-3"> <span class="bg-pink-100 text-pink-600 text-xs px-2 py-1 rounded-full font-medium">Lifestyle</span> <span class="text-gray-500 text-sm ml-4">June 1, 2023</span> </div> <h3 class="text-xl font-bold mb-3">Digital Minimalism: Living Better with Less Tech</h3> <p class="text-gray-600 mb-4">How to embrace digital minimalism to reduce stress and improve your quality of life.</p> <a href="#" class="text-blue-600 font-medium inline-flex items-center hover:text-blue-700"> Read More <i class="fas fa-arrow-right ml-2 text-sm"></i> </a> </div> </div> <!-- Latest Post 6 --> <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 card-hover"> <div class="h-48 overflow-hidden"> <img src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Latest post" class="w-full h-full object-cover"> </div> <div class="p-6"> <div class="flex items-center mb-3"> <span class="bg-indigo-100 text-indigo-600 text-xs px-2 py-1 rounded-full font-medium">Technology</span> <span class="text-gray-500 text-sm ml-4">May 28, 2023</span> </div> <h3 class="text-xl font-bold mb-3">The Rise of AI in Everyday Applications</h3> <p class="text-gray-600 mb-4">How artificial intelligence is becoming increasingly integrated into our daily lives and applications.</p> <a href="#" class="text-blue-600 font-medium inline-flex items-center hover:text-blue-700"> Read More <i class="fas fa-arrow-right ml-2 text-sm"></i> </a> </div> </div> </div> <div class="mt-12 flex justify-center"> <nav class="flex items-center space-x-1"> <a href="#" class="px-4 py-2 border border-gray-300 rounded-full text-gray-600 hover:bg-gray-100">«</a> <a href="#" class="px-4 py-2 border border-blue-600 bg-blue-600 text-white rounded-full">1</a> <a href="#" class="px-4 py-2 border border-gray-300 rounded-full text-gray-600 hover:bg-gray-100">2</a> <a href="#" class="px-4 py-2 border border-gray-300 rounded-full text-gray-600 hover:bg-gray-100">3</a> <a href="#" class="px-4 py-2 border border-gray-300 rounded-full text-gray-600 hover:bg-gray-100">»</a> </nav> </div> </div> </section> <!-- Newsletter --> <section class="py-16 bg-blue-600 text-white"> <div class="container mx-auto px-4"> <div class="max-w-3xl mx-auto text-center"> <h2 class="text-3xl font-bold mb-6">Subscribe to Our Newsletter</h2> <p class="text-xl mb-8 opacity-90">Get the latest posts delivered right to your inbox. No spam, ever.</p> <form class="flex flex-col sm:flex-row max-w-md mx-auto sm:max-w-xl"> <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-full sm:rounded-r-none mb-2 sm:mb-0 focus:outline-none text-gray-800"> <button type="submit" class="bg-white text-blue-600 px-6 py-3 rounded-full sm:rounded-l-none font-medium hover:bg-gray-100 transition-all">Subscribe</button> </form> </div> </div> </section> <!-- Popular Categories --> <section class="py-16 bg-white"> <div class="container mx-auto px-4"> <h2 class="text-3xl font-bold text-center mb-12">Popular Categories</h2> <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6"> <!-- Category 1 --> <a href="#" class="bg-gray-50 rounded-lg p-6 flex items-center hover:bg-gray-100 transition-all"> <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mr-4"> <i class="fas fa-laptop-code text-xl"></i> </div> <div> <h3 class="font-bold text-lg">Technology</h3> <p class="text-gray-500 text-sm">24 Articles</p> </div> </a> <!-- Category 2 --> <a href="#" class="bg-gray-50 rounded-lg p-6 flex items-center hover:bg-gray-100 transition-all"> <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center text-green-600 mr-4"> <i class="fas fa-paint-brush text-xl"></i> </div> <div> <h3 class="font-bold text-lg">Design</h3> <p class="text-gray-500 text-sm">18 Articles</p> </div> </a> <!-- Category 3 --> <a href="#" class="bg-gray-50 rounded-lg p-6 flex items-center hover:bg-gray-100 transition-all"> <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center text-purple-600 mr-4"> <i class="fas fa-chart-line text-xl"></i> </div> <div> <h3 class="font-bold text-lg">Business</h3> <p class="text-gray-500 text-sm">15 Articles</p> </div> </a> <!-- Category 4 --> <a href="#" class="bg-gray-50 rounded-lg p-6 flex items-center hover:bg-gray-100 transition-all"> <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center text-yellow-600 mr-4"> <i class="fas fa-lightbulb text-xl"></i> </div> <div> <h3 class="font-bold text-lg">Productivity</h3> <p class="text-gray-500 text-sm">12 Articles</p> </div> </a> </div> </div> </section> <!-- Article Example (hidden by default, shown when clicking "Read More") --> <div id="articleModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden"> <div class="bg-white rounded-xl max-w-4xl w-full max-h-screen overflow-y-auto mx-4 my-8"> <div class="sticky top-0 bg-white p-4 border-b flex justify-between items-center"> <h2 class="text-xl font-bold">Article Title</h2> <button id="closeModal" class="text-gray-500 hover:text-gray-700"> <i class="fas fa-times"></i> </button> </div> <div class="p-6 md:p-8"> <div class="mb-8"> <img src="https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Article" class="w-full rounded-lg"> </div> <div class="flex items-center mb-8"> <div class="flex items-center"> <div class="w-10 h-10 rounded-full bg-gray-300 overflow-hidden mr-3"> <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author" class="w-full h-full object-cover"> </div> <div> <p class="font-medium">Sarah Johnson</p> <p class="text-gray-500 text-sm">Published on June 15, 2023</p> </div> </div> <div class="ml-auto flex space-x-2"> <span class="bg-blue-100 text-blue-600 text-xs px-3 py-1 rounded-full font-medium">Technology</span> </div> </div> <div class="article-content"> <h2 class="text-2xl font-bold mb-6">The Future of Web Development in 2023</h2> <p>As we move further into 2023, the landscape of web development continues to evolve at a rapid pace. New technologies emerge, existing ones mature, and developer preferences shift. In this article, we'll explore the key trends shaping the future of web development this year.</p> <h2>The Rise of WebAssembly</h2> <p>WebAssembly (Wasm) has been gaining significant traction as a way to run high-performance applications on the web. With near-native performance, Wasm allows developers to write code in languages like C, C++, and Rust that can run in the browser.</p> <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="WebAssembly"> <p>In 2023, we expect to see more adoption of WebAssembly for computationally intensive tasks like video editing, 3D rendering, and scientific simulations directly in the browser.</p> <h2>Progressive Web Apps (PWAs) Become Standard</h2> <p>Progressive Web Apps have been around for several years, but 2023 might be the year they truly become mainstream. With capabilities like offline functionality, push notifications, and near-native performance, PWAs offer a compelling alternative to traditional mobile apps.</p> <p>Major platforms are improving their PWA support, and developers are recognizing the cost benefits of building one codebase that works across all devices rather than maintaining separate iOS and Android apps.</p> <h2>Serverless Architecture Matures</h2> <p>Serverless computing continues to grow in popularity as developers appreciate the reduced operational overhead and automatic scaling capabilities. In 2023, we're seeing more sophisticated tooling emerge for serverless development, making it easier to build and deploy complex applications.</p> <p>Frameworks like Next.js and Nuxt.js are making server-side rendering and static site generation more accessible, blurring the lines between traditional and serverless architectures.</p> <h2>Conclusion</h2> <p>The web development landscape in 2023 is characterized by performance improvements, architectural shifts, and an emphasis on developer experience. As these technologies mature, they're enabling developers to build more powerful, efficient, and user-friendly web applications than ever before.</p> </div> <div class="mt-12 pt-8 border-t"> <h3 class="text-lg font-bold mb-6">Share this article</h3> <div class="flex space-x-4"> <a href="#" class="w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center hover:bg-blue-700"> <i class="fab fa-facebook-f"></i> </a> <a href="#" class="w-10 h-10 bg-blue-400 text-white rounded-full flex items-center justify-center hover:bg-blue-500"> <i class="fab fa-twitter"></i> </a> <a href="#" class="w-10 h-10 bg-red-600 text-white rounded-full flex items-center justify-center hover:bg-red-700"> <i class="fab fa-pinterest-p"></i> </a> <a href="#" class="w-10 h-10 bg-gray-700 text-white rounded-full flex items-center justify-center hover:bg-gray-800"> <i class="fab fa-linkedin-in"></i> </a> </div> </div> <div class="mt-12 pt-8 border-t"> <h3 class="text-lg font-bold mb-6">Leave a comment</h3> <form> <div class="mb-4"> <input class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" rows="4" placeholder="Your comment"/> </div> <div class="grid md:grid-cols-2 gap-4 mb-4"> <input type="text" class="px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Your name"> <input type="email" class="px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Your email"> </div> <button type="submit" class="bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition-all">Post Comment</button> </form> </div> </div> </div> </div> <!-- Footer --> <footer class="bg-gray-800 text-white py-12"> <div class="container mx-auto px-4"> <div class="grid md:grid-cols-4 gap-8"> <div> <div class="flex items-center space-x-2 mb-4"> <div class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold text-xl">B</div> <span class="text-xl font-bold">ModernBlog</span> </div> <p class="text-gray-400 mb-4">A modern blog about technology, design, and productivity.</p> <div class="flex space-x-4"> <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a> </div> </div> <div> <h3 class="text-lg font-bold mb-4">Quick Links</h3> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-white">Home</a></li> <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li> <li><a href="#" class="text-gray-400 hover:text-white">About</a></li> <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li> <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li> </ul> </div> <div> <h3 class="text-lg font-bold mb-4">Categories</h3> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-white">Technology</a></li> <li><a href="#" class="text-gray-400 hover:text-white">Design</a></li> <li><a href="#" class="text-gray-400 hover:text-white">Business</a></li> <li><a href="#" class="text-gray-400 hover:text-white">Productivity</a></li> <li><a href="#" class="text-gray-400 hover:text-white">Lifestyle</a></li> </ul> </div> <div> <h3 class="text-lg font-bold mb-4">Newsletter</h3> <p class="text-gray-400 mb-4">Subscribe to our newsletter for the latest updates.</p> <form class="flex"> <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-full text-gray-800 focus:outline-none w-full"> <button type="submit" class="bg-blue-600 px-4 py-2 rounded-r-full hover:bg-blue-700"> <i class="fas fa-paper-plane"></i> </button> </form> </div> </div> <div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400"> <p>© 2023 ModernBlog. All rights reserved.</p> </div> </div> </footer> <!-- Back to Top Button --> <a href="#" id="backToTop" class="fixed bottom-4 right-20 bg-gray-800 text-white p-3 rounded-full shadow-lg hover:bg-gray-700 transition-all hidden"> <i class="fas fa-arrow-up"></i> </a> <script> // Mobile Menu Toggle const mobileMenuButton = document.getElementById('mobileMenuButton'); const mobileMenu = document.getElementById('mobileMenu'); mobileMenuButton.addEventListener('click', () => { mobileMenu.classList.toggle('hidden'); }); // Dark Mode Toggle const darkModeToggle = document.getElementById('darkModeToggle'); const html = document.documentElement; darkModeToggle.addEventListener('click', () => { html.classList.toggle('dark-mode'); if (html.classList.contains('dark-mode')) { darkModeToggle.innerHTML = '<i class="fas fa-sun"></i>'; localStorage.setItem('darkMode', 'enabled'); } else { darkModeToggle.innerHTML = '<i class="fas fa-moon"></i>'; localStorage.setItem('darkMode', 'disabled'); } }); // Check for saved dark mode preference if (localStorage.getItem('darkMode') === 'enabled') { html.classList.add('dark-mode'); darkModeToggle.innerHTML = '<i class="fas fa-sun"></i>'; } // Back to Top Button const backToTopButton = document.getElementById('backToTop'); window.addEventListener('scroll', () => { if (window.pageYOffset > 300) { backToTopButton.classList.remove('hidden'); } else { backToTopButton.classList.add('hidden'); } }); backToTopButton.addEventListener('click', (e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }); // Article Modal const readMoreLinks = document.querySelectorAll('a[href="#"]'); const articleModal = document.getElementById('articleModal'); const closeModal = document.getElementById('closeModal'); readMoreLinks.forEach(link => { link.addEventListener('click', (e) => { e.preventDefault(); articleModal.classList.remove('hidden'); document.body.style.overflow = 'hidden'; }); }); closeModal.addEventListener('click', () => { articleModal.classList.add('hidden'); document.body.style.overflow = 'auto'; }); // Close modal when clicking outside articleModal.addEventListener('click', (e) => { if (e.target === articleModal) { articleModal.classList.add('hidden'); document.body.style.overflow = 'auto'; } }); </script> </body> </html>
/* Replace with your CSS Code (Leave empty if not needed) */
/* Replace with your JS Code (Leave empty if not needed) */