WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
A Code by Metehan
134
Metehan
Open In Editor
Publish Your Code
11 May 2024
Tooltip Instagram
6 September 2024
Valorant slider gallery
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) */
