WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Un code de Metehan
130
Metehan
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
28 July 2023
Animation de couleur de texte CSS
19 May 2025
animation moderne
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Professional Portfolio Website</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 animations and effects */ .section { transition: all 0.5s ease; } .section.hidden { opacity: 0; transform: translateY(20px); height: 0; overflow: hidden; padding: 0; } .section.active { opacity: 1; transform: translateY(0); height: auto; overflow: visible; padding: 5rem 0; } .gallery-item { transition: transform 0.3s ease; } .gallery-item:hover { transform: scale(1.05); } .video-container { transition: all 0.3s ease; } .video-container:hover { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); } .social-icon { transition: all 0.3s ease; } .social-icon:hover { transform: translateY(-5px); } .nav-link { position: relative; } .nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -2px; left: 0; background-color: #3b82f6; transition: width 0.3s ease; } .nav-link:hover::after { width: 100%; } .project-card { transition: all 0.3s ease; } .project-card:hover { transform: translateY(-10px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } </style> </head> <body class="bg-gray-50 font-sans"> <!-- Navigation --> <nav class="bg-white shadow-lg sticky top-0 z-50"> <div class="container mx-auto px-6 py-3"> <div class="flex justify-between items-center"> <div class="text-2xl font-bold text-gray-800">PortfolioPro</div> <div class="hidden md:flex space-x-8"> <a href="#" class="nav-link text-gray-800 hover:text-blue-500" onclick="showSection('home')">Home</a> <a href="#" class="nav-link text-gray-800 hover:text-blue-500" onclick="showSection('blog')">Blog</a> <a href="#" class="nav-link text-gray-800 hover:text-blue-500" onclick="showSection('services')">Services</a> <a href="#" class="nav-link text-gray-800 hover:text-blue-500" onclick="showSection('projects')">Projects</a> <a href="#" class="nav-link text-gray-800 hover:text-blue-500" onclick="showSection('gallery')">Gallery</a> <a href="#" class="nav-link text-gray-800 hover:text-blue-500" onclick="showSection('contact')">Contact</a> </div> <button class="md:hidden focus:outline-none" id="menu-btn"> <svg class="w-6 h-6 text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> </svg> </button> </div> <!-- Mobile menu --> <div class="md:hidden hidden mt-4" id="mobile-menu"> <a href="#" class="block py-2 text-gray-800 hover:text-blue-500" onclick="showSection('home')">Home</a> <a href="#" class="block py-2 text-gray-800 hover:text-blue-500" onclick="showSection('blog')">Blog</a> <a href="#" class="block py-2 text-gray-800 hover:text-blue-500" onclick="showSection('services')">Services</a> <a href="#" class="block py-2 text-gray-800 hover:text-blue-500" onclick="showSection('projects')">Projects</a> <a href="#" class="block py-2 text-gray-800 hover:text-blue-500" onclick="showSection('gallery')">Gallery</a> <a href="#" class="block py-2 text-gray-800 hover:text-blue-500" onclick="showSection('contact')">Contact</a> </div> </div> </nav> <!-- Home Section --> <section id="home" class="section active bg-gradient-to-r from-blue-500 to-indigo-600 text-white"> <div class="container mx-auto px-6 py-20 text-center"> <h1 class="text-5xl font-bold mb-6">Welcome to My Professional Portfolio</h1> <p class="text-xl mb-8 max-w-2xl mx-auto">I create stunning digital experiences that help businesses grow and succeed in the online world.</p> <div class="flex justify-center space-x-4"> <button class="bg-white text-blue-600 px-6 py-3 rounded-full font-semibold hover:bg-gray-100 transition duration-300">View My Work</button> <button class="border-2 border-white text-white px-6 py-3 rounded-full font-semibold hover:bg-white hover:text-blue-600 transition duration-300">Contact Me</button> </div> </div> </section> <!-- Blog Section --> <section id="blog" class="section hidden bg-white"> <div class="container mx-auto px-6"> <h2 class="text-3xl font-bold text-center mb-12">Latest Blog Posts</h2> <div class="grid md:grid-cols-3 gap-8"> <!-- Blog Post 1 --> <div class="bg-white rounded-lg shadow-md overflow-hidden"> <img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Blog Post 1" class="w-full h-48 object-cover"> <div class="p-6"> <div class="text-blue-500 text-sm mb-2">Web Development • June 15, 2023</div> <h3 class="text-xl font-bold mb-3">The Future of Responsive Design</h3> <p class="text-gray-600 mb-4">Exploring the latest trends in responsive web design and how they're shaping user experiences across devices.</p> <a href="#" class="text-blue-500 font-semibold hover:underline">Read More</a> </div> </div> <!-- Blog Post 2 --> <div class="bg-white rounded-lg shadow-md overflow-hidden"> <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Blog Post 2" class="w-full h-48 object-cover"> <div class="p-6"> <div class="text-blue-500 text-sm mb-2">UI/UX Design • June 10, 2023</div> <h3 class="text-xl font-bold mb-3">Creating Intuitive User Interfaces</h3> <p class="text-gray-600 mb-4">Best practices for designing interfaces that users find intuitive and enjoyable to interact with.</p> <a href="#" class="text-blue-500 font-semibold hover:underline">Read More</a> </div> </div> <!-- Blog Post 3 --> <div class="bg-white rounded-lg shadow-md overflow-hidden"> <img src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Blog Post 3" class="w-full h-48 object-cover"> <div class="p-6"> <div class="text-blue-500 text-sm mb-2">Digital Marketing • June 5, 2023</div> <h3 class="text-xl font-bold mb-3">SEO Strategies for 2023</h3> <p class="text-gray-600 mb-4">The most effective SEO techniques to boost your website's visibility in search engine results this year.</p> <a href="#" class="text-blue-500 font-semibold hover:underline">Read More</a> </div> </div> </div> <div class="text-center mt-12"> <button class="bg-blue-500 text-white px-6 py-3 rounded-full font-semibold hover:bg-blue-600 transition duration-300">View All Blog Posts</button> </div> </div> </section> <!-- Services Section --> <section id="services" class="section hidden bg-gray-100"> <div class="container mx-auto px-6"> <h2 class="text-3xl font-bold text-center mb-12">My Services</h2> <div class="grid md:grid-cols-3 gap-8"> <!-- Service 1 --> <div class="bg-white p-8 rounded-lg shadow-md text-center"> <div class="text-blue-500 text-4xl mb-4"> <i class="fas fa-code"></i> </div> <h3 class="text-xl font-bold mb-3">Web Development</h3> <p class="text-gray-600">Custom website development tailored to your business needs, built with the latest technologies for optimal performance.</p> </div> <!-- Service 2 --> <div class="bg-white p-8 rounded-lg shadow-md text-center"> <div class="text-blue-500 text-4xl mb-4"> <i class="fas fa-paint-brush"></i> </div> <h3 class="text-xl font-bold mb-3">UI/UX Design</h3> <p class="text-gray-600">Beautiful, intuitive user interfaces designed to enhance user experience and drive engagement with your product.</p> </div> <!-- Service 3 --> <div class="bg-white p-8 rounded-lg shadow-md text-center"> <div class="text-blue-500 text-4xl mb-4"> <i class="fas fa-search"></i> </div> <h3 class="text-xl font-bold mb-3">SEO Optimization</h3> <p class="text-gray-600">Comprehensive SEO strategies to improve your website's visibility and ranking in search engine results.</p> </div> <!-- Service 4 --> <div class="bg-white p-8 rounded-lg shadow-md text-center"> <div class="text-blue-500 text-4xl mb-4"> <i class="fas fa-mobile-alt"></i> </div> <h3 class="text-xl font-bold mb-3">Mobile App Development</h3> <p class="text-gray-600">Cross-platform mobile applications that provide seamless experiences across iOS and Android devices.</p> </div> <!-- Service 5 --> <div class="bg-white p-8 rounded-lg shadow-md text-center"> <div class="text-blue-500 text-4xl mb-4"> <i class="fas fa-chart-line"></i> </div> <h3 class="text-xl font-bold mb-3">Digital Marketing</h3> <p class="text-gray-600">Targeted digital marketing campaigns to grow your online presence and reach your ideal customers.</p> </div> <!-- Service 6 --> <div class="bg-white p-8 rounded-lg shadow-md text-center"> <div class="text-blue-500 text-4xl mb-4"> <i class="fas fa-cloud"></i> </div> <h3 class="text-xl font-bold mb-3">Cloud Solutions</h3> <p class="text-gray-600">Scalable cloud infrastructure and services to support your business growth and ensure reliability.</p> </div> </div> </div> </section> <!-- Projects Section --> <section id="projects" class="section hidden bg-white"> <div class="container mx-auto px-6"> <h2 class="text-3xl font-bold text-center mb-12">Featured Projects</h2> <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Project 1 --> <div class="project-card bg-white rounded-lg shadow-md overflow-hidden"> <img src="https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" alt="Project 1" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-xl font-bold mb-2">E-commerce Platform</h3> <p class="text-gray-600 mb-4">A fully responsive e-commerce solution with integrated payment processing and inventory management.</p> <div class="flex flex-wrap gap-2"> <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">React</span> <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Node.js</span> <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">MongoDB</span> </div> </div> </div> <!-- Project 2 --> <div class="project-card bg-white rounded-lg shadow-md overflow-hidden"> <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" alt="Project 2" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-xl font-bold mb-2">Health & Fitness App</h3> <p class="text-gray-600 mb-4">Mobile application for tracking workouts, nutrition, and health metrics with personalized recommendations.</p> <div class="flex flex-wrap gap-2"> <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Flutter</span> <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Firebase</span> <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Dart</span> </div> </div> </div> <!-- Project 3 --> <div class="project-card bg-white rounded-lg shadow-md overflow-hidden"> <img src="https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" alt="Project 3" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-xl font-bold mb-2">Corporate Website</h3> <p class="text-gray-600 mb-4">Modern corporate website with CMS integration, blog functionality, and lead capture forms.</p> <div class="flex flex-wrap gap-2"> <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">WordPress</span> <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">PHP</span> <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">MySQL</span> </div> </div> </div> <!-- Project 4 --> <div class="project-card bg-white rounded-lg shadow-md overflow-hidden"> <img src="https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" alt="Project 4" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-xl font-bold mb-2">Educational Platform</h3> <p class="text-gray-600 mb-4">Online learning management system with video courses, quizzes, and progress tracking.</p> <div class="flex flex-wrap gap-2"> <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Laravel</span> <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Vue.js</span> <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">AWS</span> </div> </div> </div> <!-- Project 5 --> <div class="project-card bg-white rounded-lg shadow-md overflow-hidden"> <img src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" alt="Project 5" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-xl font-bold mb-2">Travel Booking App</h3> <p class="text-gray-600 mb-4">Mobile application for booking flights, hotels, and activities with real-time availability.</p> <div class="flex flex-wrap gap-2"> <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">React Native</span> <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">GraphQL</span> <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">MongoDB</span> </div> </div> </div> <!-- Project 6 --> <div class="project-card bg-white rounded-lg shadow-md overflow-hidden"> <img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" alt="Project 6" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-xl font-bold mb-2">Portfolio Website</h3> <p class="text-gray-600 mb-4">Custom portfolio website for a photographer with gallery, blog, and contact functionality.</p> <div class="flex flex-wrap gap-2"> <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">HTML/CSS</span> <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">JavaScript</span> <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Netlify</span> </div> </div> </div> </div> <div class="text-center mt-12"> <button class="bg-blue-500 text-white px-6 py-3 rounded-full font-semibold hover:bg-blue-600 transition duration-300">View All Projects</button> </div> </div> </section> <!-- Gallery Section --> <section id="gallery" class="section hidden bg-gray-100"> <div class="container mx-auto px-6"> <h2 class="text-3xl font-bold text-center mb-12">Gallery & Videos</h2> <!-- Photo Gallery --> <div class="mb-16"> <h3 class="text-2xl font-semibold mb-6 text-center">Photo Gallery</h3> <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"> <div class="gallery-item rounded-lg overflow-hidden shadow-md"> <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Gallery 1" class="w-full h-40 object-cover"> </div> <div class="gallery-item rounded-lg overflow-hidden shadow-md"> <img src="https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Gallery 2" class="w-full h-40 object-cover"> </div> <div class="gallery-item rounded-lg overflow-hidden shadow-md"> <img src="https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Gallery 3" class="w-full h-40 object-cover"> </div> <div class="gallery-item rounded-lg overflow-hidden shadow-md"> <img src="https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Gallery 4" class="w-full h-40 object-cover"> </div> <div class="gallery-item rounded-lg overflow-hidden shadow-md"> <img src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Gallery 5" class="w-full h-40 object-cover"> </div> <div class="gallery-item rounded-lg overflow-hidden shadow-md"> <img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Gallery 6" class="w-full h-40 object-cover"> </div> <div class="gallery-item rounded-lg overflow-hidden shadow-md"> <img src="https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Gallery 7" class="w-full h-40 object-cover"> </div> <div class="gallery-item rounded-lg overflow-hidden shadow-md"> <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Gallery 8" class="w-full h-40 object-cover"> </div> </div> <div class="text-center mt-8"> <button class="bg-blue-500 text-white px-6 py-3 rounded-full font-semibold hover:bg-blue-600 transition duration-300">View Full Gallery</button> </div> </div> <!-- Video Gallery --> <div> <h3 class="text-2xl font-semibold mb-6 text-center">Video Showcase</h3> <div class="grid md:grid-cols-2 gap-8"> <div class="video-container bg-white rounded-lg shadow-md overflow-hidden"> <div class="relative pb-[56.25%] h-0 overflow-hidden"> <iframe class="absolute top-0 left-0 w-full h-full" 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="p-6"> <h3 class="text-xl font-bold mb-2">Project Walkthrough</h3> <p class="text-gray-600">A detailed walkthrough of our latest e-commerce platform project, showcasing its features and functionality.</p> </div> </div> <div class="video-container bg-white rounded-lg shadow-md overflow-hidden"> <div class="relative pb-[56.25%] h-0 overflow-hidden"> <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/9YffrCViTVk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> <div class="p-6"> <h3 class="text-xl font-bold mb-2">Client Testimonial</h3> <p class="text-gray-600">Hear from our satisfied clients about their experience working with us on their digital transformation.</p> </div> </div> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="section hidden bg-white"> <div class="container mx-auto px-6"> <h2 class="text-3xl font-bold text-center mb-12">Contact Me</h2> <div class="grid md:grid-cols-2 gap-12"> <!-- Contact Information --> <div> <h3 class="text-2xl font-semibold mb-6">Get In Touch</h3> <div class="space-y-6"> <div class="flex items-start"> <div class="bg-blue-100 p-3 rounded-full mr-4"> <i class="fas fa-map-marker-alt text-blue-600"></i> </div> <div> <h4 class="font-semibold">Location</h4> <p class="text-gray-600">123 Business Avenue, Suite 456<br>New York, NY 10001</p> </div> </div> <div class="flex items-start"> <div class="bg-blue-100 p-3 rounded-full mr-4"> <i class="fas fa-envelope text-blue-600"></i> </div> <div> <h4 class="font-semibold">Email</h4> <p class="text-gray-600">contact@portfoliopro.com<br>support@portfoliopro.com</p> </div> </div> <div class="flex items-start"> <div class="bg-blue-100 p-3 rounded-full mr-4"> <i class="fas fa-phone-alt text-blue-600"></i> </div> <div> <h4 class="font-semibold">Phone</h4> <p class="text-gray-600">+1 (555) 123-4567<br>+1 (555) 987-6543</p> </div> </div> </div> <h3 class="text-2xl font-semibold mt-12 mb-6">Social Media</h3> <div class="flex space-x-4"> <a href="https://facebook.com" target="_blank" class="social-icon bg-blue-600 text-white p-3 rounded-full hover:bg-blue-700"> <i class="fab fa-facebook-f"></i> </a> <a href="https://twitter.com" target="_blank" class="social-icon bg-blue-400 text-white p-3 rounded-full hover:bg-blue-500"> <i class="fab fa-twitter"></i> </a> <a href="https://linkedin.com" target="_blank" class="social-icon bg-blue-700 text-white p-3 rounded-full hover:bg-blue-800"> <i class="fab fa-linkedin-in"></i> </a> <a href="https://instagram.com" target="_blank" class="social-icon bg-pink-600 text-white p-3 rounded-full hover:bg-pink-700"> <i class="fab fa-instagram"></i> </a> <a href="https://github.com" target="_blank" class="social-icon bg-gray-800 text-white p-3 rounded-full hover:bg-gray-900"> <i class="fab fa-github"></i> </a> </div> </div> <!-- Contact Form --> <div> <h3 class="text-2xl font-semibold mb-6">Send Me a Message</h3> <form class="space-y-4"> <div> <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Your Name</label> <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> </div> <div> <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Your Email</label> <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> </div> <div> <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Subject</label> <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> </div> <div> <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Your Message</label> <input id="message" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"/> </div> <button type="submit" class="bg-blue-500 text-white px-6 py-3 rounded-md font-semibold hover:bg-blue-600 transition duration-300 w-full">Send Message</button> </form> </div> </div> </div> </section> <!-- Footer --> <footer class="bg-gray-800 text-white py-8"> <div class="container mx-auto px-6"> <div class="grid md:grid-cols-4 gap-8"> <div> <h3 class="text-xl font-bold mb-4">PortfolioPro</h3> <p class="text-gray-400">Creating digital experiences that inspire and engage audiences worldwide.</p> </div> <div> <h4 class="font-semibold mb-4">Quick Links</h4> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-white" onclick="showSection('home')">Home</a></li> <li><a href="#" class="text-gray-400 hover:text-white" onclick="showSection('blog')">Blog</a></li> <li><a href="#" class="text-gray-400 hover:text-white" onclick="showSection('services')">Services</a></li> <li><a href="#" class="text-gray-400 hover:text-white" onclick="showSection('projects')">Projects</a></li> </ul> </div> <div> <h4 class="font-semibold mb-4">Services</h4> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-white">Web Development</a></li> <li><a href="#" class="text-gray-400 hover:text-white">UI/UX Design</a></li> <li><a href="#" class="text-gray-400 hover:text-white">Mobile Apps</a></li> <li><a href="#" class="text-gray-400 hover:text-white">Digital Marketing</a></li> </ul> </div> <div> <h4 class="font-semibold mb-4">Newsletter</h4> <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-md focus:outline-none text-gray-800 w-full"> <button type="submit" class="bg-blue-500 px-4 py-2 rounded-r-md hover:bg-blue-600">Subscribe</button> </form> </div> </div> <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> <p>© 2023 PortfolioPro. All rights reserved.</p> </div> </div> </footer> <script> // Mobile menu toggle document.getElementById('menu-btn').addEventListener('click', function() { const menu = document.getElementById('mobile-menu'); menu.classList.toggle('hidden'); }); // Section navigation function showSection(sectionId) { // Hide all sections document.querySelectorAll('.section').forEach(section => { section.classList.remove('active'); section.classList.add('hidden'); }); // Show the selected section const section = document.getElementById(sectionId); section.classList.remove('hidden'); section.classList.add('active'); // Close mobile menu if open document.getElementById('mobile-menu').classList.add('hidden'); // Scroll to top of the section window.scrollTo({ top: section.offsetTop - 80, behavior: 'smooth' }); } // Set home as active by default document.addEventListener('DOMContentLoaded', function() { showSection('home'); }); </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) */
