Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Team 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 tooltips and animations */ | |
| .citation-tooltip { | |
| position: relative; | |
| display: inline-block; | |
| border-bottom: 1px dotted #666; | |
| cursor: help; | |
| } | |
| .citation-tooltip .tooltip-text { | |
| visibility: hidden; | |
| width: 300px; | |
| background-color: #333; | |
| color: #fff; | |
| text-align: center; | |
| border-radius: 6px; | |
| padding: 10px; | |
| position: absolute; | |
| z-index: 1; | |
| bottom: 125%; | |
| left: 50%; | |
| margin-left: -150px; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .citation-tooltip:hover .tooltip-text { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| .like-animation { | |
| animation: like 0.5s ease; | |
| } | |
| @keyframes like { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.3); } | |
| 100% { transform: scale(1); } | |
| } | |
| .comment-box { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease-out; | |
| } | |
| .comment-box.active { | |
| max-height: 500px; | |
| transition: max-height 0.5s ease-in; | |
| } | |
| /* Custom video container */ | |
| .video-container { | |
| position: relative; | |
| padding-bottom: 56.25%; /* 16:9 */ | |
| height: 0; | |
| overflow: hidden; | |
| } | |
| .video-container iframe { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800 font-sans"> | |
| <!-- Header --> | |
| <header class="bg-indigo-700 text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <i class="fas fa-users text-3xl"></i> | |
| <h1 class="text-2xl md:text-3xl font-bold">Team Blog</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="#" class="hover:text-indigo-200 transition">Home</a> | |
| <a href="#" class="hover:text-indigo-200 transition">About</a> | |
| <a href="#" class="hover:text-indigo-200 transition">Team</a> | |
| <a href="#" class="hover:text-indigo-200 transition">Contact</a> | |
| </nav> | |
| <button class="md:hidden text-2xl" id="mobile-menu-button"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="md:hidden hidden bg-indigo-800" id="mobile-menu"> | |
| <div class="container mx-auto px-4 py-2 flex flex-col space-y-3"> | |
| <a href="#" class="py-2 hover:text-indigo-200 transition">Home</a> | |
| <a href="#" class="py-2 hover:text-indigo-200 transition">About</a> | |
| <a href="#" class="py-2 hover:text-indigo-200 transition">Team</a> | |
| <a href="#" class="py-2 hover:text-indigo-200 transition">Contact</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Featured Post --> | |
| <section class="mb-12 bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-2/3 p-6"> | |
| <div class="flex items-center mb-4"> | |
| <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded">Featured</span> | |
| </div> | |
| <h2 class="text-2xl md:text-3xl font-bold mb-3">Our Latest Research on Machine Learning</h2> | |
| <p class="text-gray-600 mb-4">Published on <span class="font-semibold">June 15, 2023</span> by <span class="text-indigo-600 font-medium">Dr. Sarah Johnson</span></p> | |
| <p class="mb-4">In this article, we explore the latest advancements in machine learning algorithms and their applications in real-world scenarios. According to <span class="citation-tooltip">recent studies<span class="tooltip-text">"Machine Learning Trends 2023" by AI Research Institute, published in Journal of Artificial Intelligence, Vol. 12, Issue 3</span></span>, the adoption of ML has increased by 47% in the past year.</p> | |
| <div class="flex items-center space-x-4 mb-4"> | |
| <button class="like-button flex items-center space-x-1 text-gray-600 hover:text-indigo-600 transition" data-likes="124"> | |
| <i class="far fa-heart"></i> | |
| <span class="like-count">124</span> | |
| </button> | |
| <button class="comment-toggle flex items-center space-x-1 text-gray-600 hover:text-indigo-600 transition"> | |
| <i class="far fa-comment"></i> | |
| <span>8 Comments</span> | |
| </button> | |
| <span class="text-gray-400">5 min read</span> | |
| </div> | |
| <a href="#" class="inline-flex items-center text-indigo-600 hover:text-indigo-800 font-medium"> | |
| Read more | |
| <i class="fas fa-arrow-right ml-1"></i> | |
| </a> | |
| </div> | |
| <div class="md:w-1/3"> | |
| <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Featured Post" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| <!-- Comment Section --> | |
| <div class="comment-box px-6 pb-6"> | |
| <div class="border-t pt-4 mt-4"> | |
| <h3 class="font-semibold mb-4">Comments (8)</h3> | |
| <div class="space-y-4 mb-6"> | |
| <!-- Sample comments --> | |
| <div class="flex space-x-3"> | |
| <div class="flex-shrink-0"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-10 h-10 rounded-full"> | |
| </div> | |
| <div class="bg-gray-50 p-3 rounded-lg flex-1"> | |
| <div class="flex items-center justify-between mb-1"> | |
| <span class="font-medium">Emily Chen</span> | |
| <span class="text-xs text-gray-500">2 days ago</span> | |
| </div> | |
| <p class="text-sm">This is a fantastic article! I particularly liked the section on neural networks.</p> | |
| </div> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <div class="flex-shrink-0"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-10 h-10 rounded-full"> | |
| </div> | |
| <div class="bg-gray-50 p-3 rounded-lg flex-1"> | |
| <div class="flex items-center justify-between mb-1"> | |
| <span class="font-medium">Michael Rodriguez</span> | |
| <span class="text-xs text-gray-500">1 week ago</span> | |
| </div> | |
| <p class="text-sm">Great insights! Do you have any recommendations for beginners in this field?</p> | |
| </div> | |
| </div> | |
| </div> | |
| <form class="space-y-3"> | |
| <div> | |
| <label for="comment" class="sr-only">Your comment</label> | |
| <textarea id="comment" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Write a comment..."></textarea> | |
| </div> | |
| <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">Post Comment</button> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Blog Posts Grid --> | |
| <section class="mb-12"> | |
| <h2 class="text-2xl font-bold mb-6">Recent Articles</h2> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Post 1 --> | |
| <article class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded">Technology</span> | |
| <span class="text-xs text-gray-500">Jun 10, 2023</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">The Future of Web Development</h3> | |
| <p class="text-gray-600 mb-4">Exploring the emerging trends in web development frameworks and tools. As noted by <span class="citation-tooltip">industry experts<span class="tooltip-text">"Web Development Trends 2023" by Tech Insights Group, published in Developer Weekly</span></span>, the landscape is changing rapidly.</p> | |
| <!-- Video Embed --> | |
| <div class="video-container mb-4 rounded-lg overflow-hidden"> | |
| <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Author" class="w-8 h-8 rounded-full"> | |
| <span class="text-sm font-medium">Alex Turner</span> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <button class="like-button flex items-center space-x-1 text-gray-600 hover:text-indigo-600 transition" data-likes="89"> | |
| <i class="far fa-heart"></i> | |
| <span class="like-count">89</span> | |
| </button> | |
| <button class="comment-toggle flex items-center space-x-1 text-gray-600 hover:text-indigo-600 transition"> | |
| <i class="far fa-comment"></i> | |
| <span>5</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Comment Section --> | |
| <div class="comment-box px-6 pb-6"> | |
| <div class="border-t pt-4 mt-4"> | |
| <h3 class="text-sm font-semibold mb-3">Comments (5)</h3> | |
| <div class="space-y-3 mb-4"> | |
| <div class="flex space-x-2"> | |
| <div class="flex-shrink-0"> | |
| <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="User" class="w-8 h-8 rounded-full"> | |
| </div> | |
| <div class="bg-gray-50 p-2 rounded-lg flex-1"> | |
| <div class="flex items-center justify-between mb-1"> | |
| <span class="text-sm font-medium">Lisa Wong</span> | |
| <span class="text-xs text-gray-500">3 days ago</span> | |
| </div> | |
| <p class="text-xs">Great video explanation!</p> | |
| </div> | |
| </div> | |
| </div> | |
| <form class="space-y-2"> | |
| <div> | |
| <textarea rows="2" class="w-full px-2 py-1 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-indigo-500" placeholder="Add a comment..."></textarea> | |
| </div> | |
| <button type="submit" class="px-3 py-1 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">Post</button> | |
| </form> | |
| </div> | |
| </div> | |
| </article> | |
| <!-- Post 2 --> | |
| <article class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <span class="bg-purple-100 text-purple-800 text-xs font-semibold px-2.5 py-0.5 rounded">Science</span> | |
| <span class="text-xs text-gray-500">May 28, 2023</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Breakthrough in Quantum Computing</h3> | |
| <p class="text-gray-600 mb-4">Our team has made significant progress in quantum algorithm development. This builds on previous work by <span class="citation-tooltip">Smith et al.<span class="tooltip-text">"Quantum Algorithms for Optimization Problems" by Smith, J., et al., published in Quantum Computing Journal, 2022</span></span>.</p> | |
| <!-- Image Gallery --> | |
| <div class="grid grid-cols-2 gap-2 mb-4"> | |
| <img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Quantum Lab" class="w-full h-32 object-cover rounded-lg"> | |
| <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Quantum Computer" class="w-full h-32 object-cover rounded-lg"> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Author" class="w-8 h-8 rounded-full"> | |
| <span class="text-sm font-medium">Dr. Maria Garcia</span> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <button class="like-button flex items-center space-x-1 text-gray-600 hover:text-indigo-600 transition" data-likes="156"> | |
| <i class="far fa-heart"></i> | |
| <span class="like-count">156</span> | |
| </button> | |
| <button class="comment-toggle flex items-center space-x-1 text-gray-600 hover:text-indigo-600 transition"> | |
| <i class="far fa-comment"></i> | |
| <span>12</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Comment Section --> | |
| <div class="comment-box px-6 pb-6"> | |
| <div class="border-t pt-4 mt-4"> | |
| <h3 class="text-sm font-semibold mb-3">Comments (12)</h3> | |
| <div class="space-y-3 mb-4"> | |
| <div class="flex space-x-2"> | |
| <div class="flex-shrink-0"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User" class="w-8 h-8 rounded-full"> | |
| </div> | |
| <div class="bg-gray-50 p-2 rounded-lg flex-1"> | |
| <div class="flex items-center justify-between mb-1"> | |
| <span class="text-sm font-medium">Robert Kim</span> | |
| <span class="text-xs text-gray-500">1 week ago</span> | |
| </div> | |
| <p class="text-xs">Fascinating research! When can we expect a follow-up paper?</p> | |
| </div> | |
| </div> | |
| </div> | |
| <form class="space-y-2"> | |
| <div> | |
| <textarea rows="2" class="w-full px-2 py-1 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-indigo-500" placeholder="Add a comment..."></textarea> | |
| </div> | |
| <button type="submit" class="px-3 py-1 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">Post</button> | |
| </form> | |
| </div> | |
| </div> | |
| </article> | |
| <!-- Post 3 --> | |
| <article class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">Design</span> | |
| <span class="text-xs text-gray-500">May 15, 2023</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">UX Principles for 2023</h3> | |
| <p class="text-gray-600 mb-4">A comprehensive guide to modern user experience design principles. As highlighted in <span class="citation-tooltip">Nielsen's research<span class="tooltip-text">"10 Usability Heuristics for User Interface Design" by Jakob Nielsen, Nielsen Norman Group</span></span>, these principles remain foundational.</p> | |
| <!-- Single Image --> | |
| <img src="https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="UX Design" class="w-full h-48 object-cover rounded-lg mb-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <img src="https://randomuser.me/api/portraits/men/42.jpg" alt="Author" class="w-8 h-8 rounded-full"> | |
| <span class="text-sm font-medium">David Park</span> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <button class="like-button flex items-center space-x-1 text-gray-600 hover:text-indigo-600 transition" data-likes="72"> | |
| <i class="far fa-heart"></i> | |
| <span class="like-count">72</span> | |
| </button> | |
| <button class="comment-toggle flex items-center space-x-1 text-gray-600 hover:text-indigo-600 transition"> | |
| <i class="far fa-comment"></i> | |
| <span>3</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Comment Section --> | |
| <div class="comment-box px-6 pb-6"> | |
| <div class="border-t pt-4 mt-4"> | |
| <h3 class="text-sm font-semibold mb-3">Comments (3)</h3> | |
| <div class="space-y-3 mb-4"> | |
| <div class="flex space-x-2"> | |
| <div class="flex-shrink-0"> | |
| <img src="https://randomuser.me/api/portraits/women/28.jpg" alt="User" class="w-8 h-8 rounded-full"> | |
| </div> | |
| <div class="bg-gray-50 p-2 rounded-lg flex-1"> | |
| <div class="flex items-center justify-between mb-1"> | |
| <span class="text-sm font-medium">Sophia Lee</span> | |
| <span class="text-xs text-gray-500">2 weeks ago</span> | |
| </div> | |
| <p class="text-xs">Very helpful for my current project. Thanks!</p> | |
| </div> | |
| </div> | |
| </div> | |
| <form class="space-y-2"> | |
| <div> | |
| <textarea rows="2" class="w-full px-2 py-1 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-indigo-500" placeholder="Add a comment..."></textarea> | |
| </div> | |
| <button type="submit" class="px-3 py-1 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">Post</button> | |
| </form> | |
| </div> | |
| </div> | |
| </article> | |
| </div> | |
| </section> | |
| <!-- Team Section --> | |
| <section class="mb-12"> | |
| <h2 class="text-2xl font-bold mb-6">Our Team</h2> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <!-- Team Member 1 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Team Member" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-1">Dr. Sarah Johnson</h3> | |
| <p class="text-indigo-600 mb-3">Lead Researcher</p> | |
| <p class="text-gray-600 text-sm">Specializes in machine learning and artificial intelligence with over 10 years of experience.</p> | |
| <div class="flex space-x-3 mt-4"> | |
| <a href="#" class="text-gray-500 hover:text-indigo-600 transition"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-indigo-600 transition"><i class="fab fa-linkedin"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-indigo-600 transition"><i class="fas fa-envelope"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Team Member 2 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Team Member" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-1">Alex Turner</h3> | |
| <p class="text-indigo-600 mb-3">Senior Developer</p> | |
| <p class="text-gray-600 text-sm">Full-stack developer with expertise in modern web technologies and frameworks.</p> | |
| <div class="flex space-x-3 mt-4"> | |
| <a href="#" class="text-gray-500 hover:text-indigo-600 transition"><i class="fab fa-github"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-indigo-600 transition"><i class="fab fa-linkedin"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-indigo-600 transition"><i class="fas fa-globe"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Team Member 3 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Team Member" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-1">Dr. Maria Garcia</h3> | |
| <p class="text-indigo-600 mb-3">Quantum Physicist</p> | |
| <p class="text-gray-600 text-sm">Leading our quantum computing research with several published papers in top journals.</p> | |
| <div class="flex space-x-3 mt-4"> | |
| <a href="#" class="text-gray-500 hover:text-indigo-600 transition"><i class="fab fa-researchgate"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-indigo-600 transition"><i class="fas fa-graduation-cap"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-indigo-600 transition"><i class="fas fa-envelope"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Team Member 4 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <img src="https://randomuser.me/api/portraits/men/42.jpg" alt="Team Member" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-1">David Park</h3> | |
| <p class="text-indigo-600 mb-3">UX Designer</p> | |
| <p class="text-gray-600 text-sm">Creates intuitive user experiences with a focus on accessibility and usability testing.</p> | |
| <div class="flex space-x-3 mt-4"> | |
| <a href="#" class="text-gray-500 hover:text-indigo-600 transition"><i class="fab fa-dribbble"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-indigo-600 transition"><i class="fab fa-behance"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-indigo-600 transition"><i class="fas fa-globe"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Newsletter --> | |
| <section class="bg-indigo-700 text-white py-12"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-2xl md:text-3xl font-bold mb-4">Stay Updated</h2> | |
| <p class="max-w-2xl mx-auto mb-6">Subscribe to our newsletter to receive the latest articles, research updates, and team news directly to your inbox.</p> | |
| <form class="max-w-md mx-auto flex"> | |
| <input type="email" placeholder="Your email address" class="flex-1 px-4 py-2 rounded-l-lg focus:outline-none text-gray-800"> | |
| <button type="submit" class="bg-indigo-900 hover:bg-indigo-800 px-6 py-2 rounded-r-lg transition">Subscribe</button> | |
| </form> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-gray-300 py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <h3 class="text-white font-bold text-lg mb-4">Team Blog</h3> | |
| <p class="mb-4">Sharing knowledge, research, and insights from our diverse team of experts.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-github"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-bold text-lg mb-4">Quick Links</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white transition">Home</a></li> | |
| <li><a href="#" class="hover:text-white transition">About</a></li> | |
| <li><a href="#" class="hover:text-white transition">Team</a></li> | |
| <li><a href="#" class="hover:text-white transition">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-bold text-lg mb-4">Categories</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white transition">Technology</a></li> | |
| <li><a href="#" class="hover:text-white transition">Science</a></li> | |
| <li><a href="#" class="hover:text-white transition">Design</a></li> | |
| <li><a href="#" class="hover:text-white transition">Research</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-bold text-lg mb-4">Contact</h3> | |
| <address class="not-italic"> | |
| <p class="mb-2">123 Research Park</p> | |
| <p class="mb-2">Innovation City, CA 90210</p> | |
| <p class="mb-2">Email: [email protected]</p> | |
| <p>Phone: (123) 456-7890</p> | |
| </address> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 pt-6 text-center text-sm"> | |
| <p>© 2023 Team Blog. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- JavaScript --> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Like button functionality | |
| document.querySelectorAll('.like-button').forEach(button => { | |
| button.addEventListener('click', function() { | |
| const icon = this.querySelector('i'); | |
| const countElement = this.querySelector('.like-count'); | |
| let count = parseInt(countElement.textContent); | |
| if (icon.classList.contains('far')) { | |
| icon.classList.remove('far'); | |
| icon.classList.add('fas', 'like-animation'); | |
| count++; | |
| } else { | |
| icon.classList.remove('fas'); | |
| icon.classList.add('far'); | |
| count--; | |
| } | |
| countElement.textContent = count; | |
| }); | |
| }); | |
| // Comment toggle functionality | |
| document.querySelectorAll('.comment-toggle').forEach(button => { | |
| button.addEventListener('click', function() { | |
| const article = this.closest('article, section'); | |
| const commentBox = article.querySelector('.comment-box'); | |
| commentBox.classList.toggle('active'); | |
| }); | |
| }); | |
| // Smooth scroll for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=yellowtown/blog-demo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |