WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Soluções Digitais: Web, Mobile, Marketing e Design
53
Metehan
Abrir no Editor
Publique Seu Código
Recomendado
22 June 2025
Modelo HTML do painel de administração
13 June 2025
Interface de usuário do aplicativo despertador e cronômetro
22 June 2025
o enigma do tempo
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Nexus | Modern Digital Solutions</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 animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 0.8s ease-out forwards; } .delay-100 { animation-delay: 0.1s; } .delay-200 { animation-delay: 0.2s; } .delay-300 { animation-delay: 0.3s; } /* Gallery hover effect */ .gallery-item { transition: all 0.3s ease; } .gallery-item:hover { transform: scale(1.03); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); } /* Smooth scroll */ html { scroll-behavior: smooth; } /* Mobile menu animation */ .mobile-menu { transition: all 0.3s ease; } /* Video play button */ .video-play-button { transition: all 0.3s ease; } .video-play-button:hover { transform: scale(1.1); } </style> </head> <body class="font-sans antialiased text-gray-800 bg-white"> <!-- Navigation --> <nav class="fixed w-full bg-white shadow-md z-50 transition-all duration-300"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex justify-between h-20 items-center"> <!-- Logo --> <div class="flex-shrink-0 flex items-center"> <a href="#" class="text-2xl font-bold text-indigo-600">Nexus</a> </div> <!-- Desktop Menu --> <div class="hidden md:flex space-x-8"> <a href="#home" class="text-gray-700 hover:text-indigo-600 px-3 py-2 font-medium transition-colors">Home</a> <a href="#services" class="text-gray-700 hover:text-indigo-600 px-3 py-2 font-medium transition-colors">Services</a> <a href="#gallery" class="text-gray-700 hover:text-indigo-600 px-3 py-2 font-medium transition-colors">Gallery</a> <a href="#video" class="text-gray-700 hover:text-indigo-600 px-3 py-2 font-medium transition-colors">Video</a> <a href="#contact" class="text-gray-700 hover:text-indigo-600 px-3 py-2 font-medium transition-colors">Contact</a> </div> <!-- CTA Button --> <div class="hidden md:block"> <a href="#contact" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-md font-medium transition-colors"> Get Started </a> </div> <!-- Mobile menu button --> <div class="md:hidden"> <button id="mobile-menu-button" class="text-gray-700 hover:text-indigo-600 focus:outline-none"> <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> </svg> </button> </div> </div> </div> <!-- Mobile Menu --> <div id="mobile-menu" class="mobile-menu md:hidden hidden bg-white shadow-lg"> <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Home</a> <a href="#services" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Services</a> <a href="#gallery" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Gallery</a> <a href="#video" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Video</a> <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Contact</a> <a href="#contact" class="block w-full text-center bg-indigo-600 text-white px-4 py-2 rounded-md font-medium mt-2"> Get Started </a> </div> </div> </nav> <!-- Hero Section --> <section id="home" class="pt-32 pb-20 md:pt-40 md:pb-32 bg-gradient-to-r from-indigo-50 to-blue-50"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="lg:grid lg:grid-cols-12 lg:gap-8 items-center"> <div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left"> <h1 class="text-4xl md:text-5xl font-extrabold tracking-tight text-gray-900 animate-fade-in"> <span class="block">Innovative Digital</span> <span class="block text-indigo-600">Solutions for You</span> </h1> <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0 animate-fade-in delay-100"> We help businesses transform their digital presence with cutting-edge technology and creative solutions. </p> <div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0 animate-fade-in delay-200"> <div class="flex flex-col sm:flex-row sm:justify-center lg:justify-start space-y-3 sm:space-y-0 sm:space-x-4"> <a href="#contact" class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10 transition-colors"> Get Started </a> <a href="#services" class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10 transition-colors"> Learn More </a> </div> </div> </div> <div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center animate-fade-in delay-300"> <div class="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md"> <img class="w-full rounded-lg" src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80" alt="Digital solutions"> </div> </div> </div> </div> </section> <!-- Services Section --> <section id="services" class="py-20 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center"> <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> Our Premium Services </h2> <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> We offer comprehensive digital solutions tailored to your business needs. </p> </div> <div class="mt-16 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3"> <!-- Service 1 --> <div class="pt-6 pb-8 px-6 bg-gray-50 rounded-xl transition-all hover:shadow-lg"> <div class="flow-root bg-indigo-50 rounded-lg -mt-16 p-4 w-20 h-20 flex items-center justify-center mx-auto"> <i class="fas fa-globe text-indigo-600 text-3xl"></i> </div> <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Web Development</h3> <p class="mt-5 text-base text-gray-500"> Custom websites built with modern technologies that are fast, secure, and scalable. </p> <div class="mt-6"> <a href="#" class="text-indigo-600 font-medium hover:text-indigo-500 transition-colors"> Learn more <span aria-hidden="true">→</span> </a> </div> </div> <!-- Service 2 --> <div class="pt-6 pb-8 px-6 bg-gray-50 rounded-xl transition-all hover:shadow-lg"> <div class="flow-root bg-indigo-50 rounded-lg -mt-16 p-4 w-20 h-20 flex items-center justify-center mx-auto"> <i class="fas fa-mobile-alt text-indigo-600 text-3xl"></i> </div> <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Mobile Apps</h3> <p class="mt-5 text-base text-gray-500"> Beautiful, intuitive mobile applications for iOS and Android platforms. </p> <div class="mt-6"> <a href="#" class="text-indigo-600 font-medium hover:text-indigo-500 transition-colors"> Learn more <span aria-hidden="true">→</span> </a> </div> </div> <!-- Service 3 --> <div class="pt-6 pb-8 px-6 bg-gray-50 rounded-xl transition-all hover:shadow-lg"> <div class="flow-root bg-indigo-50 rounded-lg -mt-16 p-4 w-20 h-20 flex items-center justify-center mx-auto"> <i class="fas fa-chart-line text-indigo-600 text-3xl"></i> </div> <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Digital Marketing</h3> <p class="mt-5 text-base text-gray-500"> Data-driven marketing strategies to grow your business and increase conversions. </p> <div class="mt-6"> <a href="#" class="text-indigo-600 font-medium hover:text-indigo-500 transition-colors"> Learn more <span aria-hidden="true">→</span> </a> </div> </div> </div> </div> </section> <!-- Stats Section --> <section class="py-20 bg-indigo-600 text-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid grid-cols-1 gap-8 md:grid-cols-3"> <div class="text-center"> <div class="text-5xl font-extrabold">250+</div> <div class="mt-2 text-lg font-medium">Projects Completed</div> </div> <div class="text-center"> <div class="text-5xl font-extrabold">98%</div> <div class="mt-2 text-lg font-medium">Client Satisfaction</div> </div> <div class="text-center"> <div class="text-5xl font-extrabold">15+</div> <div class="mt-2 text-lg font-medium">Years Experience</div> </div> </div> </div> </section> <!-- Gallery Section --> <section id="gallery" class="py-20 bg-gray-50"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center"> <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> Our Work Gallery </h2> <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> Explore some of our recent projects and success stories. </p> </div> <div class="mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"> <!-- Gallery Item 1 --> <div class="gallery-item relative group overflow-hidden rounded-lg"> <img class="w-full h-64 object-cover" src="https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="Project 1"> <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"> <div class="text-white text-center p-4"> <h3 class="text-xl font-bold">E-commerce Website</h3> <p class="mt-2">Custom online store with payment integration</p> </div> </div> </div> <!-- Gallery Item 2 --> <div class="gallery-item relative group overflow-hidden rounded-lg"> <img class="w-full h-64 object-cover" src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="Project 2"> <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"> <div class="text-white text-center p-4"> <h3 class="text-xl font-bold">Mobile Application</h3> <p class="mt-2">Fitness tracking app for iOS and Android</p> </div> </div> </div> <!-- Gallery Item 3 --> <div class="gallery-item relative group overflow-hidden rounded-lg"> <img class="w-full h-64 object-cover" src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="Project 3"> <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"> <div class="text-white text-center p-4"> <h3 class="text-xl font-bold">Corporate Website</h3> <p class="mt-2">Modern design with CMS integration</p> </div> </div> </div> <!-- Gallery Item 4 --> <div class="gallery-item relative group overflow-hidden rounded-lg"> <img class="w-full h-64 object-cover" src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="Project 4"> <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"> <div class="text-white text-center p-4"> <h3 class="text-xl font-bold">Marketing Campaign</h3> <p class="mt-2">Social media strategy and implementation</p> </div> </div> </div> <!-- Gallery Item 5 --> <div class="gallery-item relative group overflow-hidden rounded-lg"> <img class="w-full h-64 object-cover" src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="Project 5"> <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"> <div class="text-white text-center p-4"> <h3 class="text-xl font-bold">Blog Platform</h3> <p class="mt-2">Custom content management system</p> </div> </div> </div> <!-- Gallery Item 6 --> <div class="gallery-item relative group overflow-hidden rounded-lg"> <img class="w-full h-64 object-cover" src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="Project 6"> <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"> <div class="text-white text-center p-4"> <h3 class="text-xl font-bold">Team Collaboration</h3> <p class="mt-2">Internal communication platform</p> </div> </div> </div> </div> <div class="mt-12 text-center"> <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 transition-colors"> View All Projects <i class="fas fa-arrow-right ml-2"></i> </a> </div> </div> </section> <!-- Video Section --> <section id="video" class="py-20 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="lg:grid lg:grid-cols-12 lg:gap-8 items-center"> <div class="lg:col-span-6"> <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> Our Story in Motion </h2> <p class="mt-4 text-lg text-gray-500"> Watch our company video to learn more about our mission, values, and the people behind our success. </p> <div class="mt-8"> <div class="inline-flex rounded-md shadow"> <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 transition-colors"> Learn more about us </a> </div> </div> </div> <div class="mt-12 lg:mt-0 lg:col-span-6 relative"> <div class="relative w-full rounded-lg shadow-xl overflow-hidden"> <div class="aspect-w-16 aspect-h-9"> <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1579389083078-4e7018379f7e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="Video thumbnail"> </div> <div class="absolute inset-0 flex items-center justify-center"> <button class="video-play-button bg-white bg-opacity-75 rounded-full w-16 h-16 flex items-center justify-center hover:bg-opacity-100 transition-all"> <i class="fas fa-play text-indigo-600 text-2xl"></i> </button> </div> </div> </div> </div> </div> </section> <!-- Testimonials --> <section class="py-20 bg-gray-50"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center"> <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> What Our Clients Say </h2> <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> Don't just take our word for it - hear from some of our satisfied clients. </p> </div> <div class="mt-16 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3"> <!-- Testimonial 1 --> <div class="bg-white p-8 rounded-xl shadow-sm"> <div class="flex items-center"> <div class="flex-shrink-0"> <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah Johnson"> </div> <div class="ml-4"> <h3 class="text-lg font-medium text-gray-900">Sarah Johnson</h3> <p class="text-gray-500">CEO, TechSolutions</p> </div> </div> <div class="mt-4"> <p class="text-gray-600"> "Working with Nexus was a game-changer for our business. Their team delivered exceptional results and were a pleasure to work with throughout the entire process." </p> </div> <div class="mt-4 flex text-yellow-400"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> </div> <!-- Testimonial 2 --> <div class="bg-white p-8 rounded-xl shadow-sm"> <div class="flex items-center"> <div class="flex-shrink-0"> <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/54.jpg" alt="Michael Chen"> </div> <div class="ml-4"> <h3 class="text-lg font-medium text-gray-900">Michael Chen</h3> <p class="text-gray-500">Marketing Director, GlobalCorp</p> </div> </div> <div class="mt-4"> <p class="text-gray-600"> "The digital marketing strategy Nexus developed for us exceeded all expectations. Our online presence and lead generation have improved dramatically." </p> </div> <div class="mt-4 flex text-yellow-400"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> </div> <!-- Testimonial 3 --> <div class="bg-white p-8 rounded-xl shadow-sm"> <div class="flex items-center"> <div class="flex-shrink-0"> <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma Rodriguez"> </div> <div class="ml-4"> <h3 class="text-lg font-medium text-gray-900">Emma Rodriguez</h3> <p class="text-gray-500">Founder, StartupX</p> </div> </div> <div class="mt-4"> <p class="text-gray-600"> "Nexus built our mobile app from scratch and delivered it ahead of schedule. Their technical expertise and attention to detail were impressive." </p> </div> <div class="mt-4 flex text-yellow-400"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star-half-alt"></i> </div> </div> </div> </div> </section> <!-- CTA Section --> <section class="bg-indigo-700"> <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between"> <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl"> <span class="block">Ready to transform your business?</span> <span class="block text-indigo-200">Get started with us today.</span> </h2> <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0"> <div class="inline-flex rounded-md shadow"> <a href="#contact" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 transition-colors"> Contact Us </a> </div> <div class="ml-3 inline-flex rounded-md shadow"> <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 bg-opacity-60 hover:bg-opacity-70 transition-colors"> Learn More </a> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="py-20 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="lg:grid lg:grid-cols-12 lg:gap-8"> <div class="lg:col-span-5"> <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> Get in Touch </h2> <p class="mt-4 text-lg text-gray-500"> Have a project in mind or want to learn more about our services? Fill out the form and we'll get back to you within 24 hours. </p> <div class="mt-8"> <div class="flex items-center"> <i class="fas fa-map-marker-alt text-indigo-600 text-xl"></i> <p class="ml-4 text-gray-600">123 Business Ave, Suite 400, San Francisco, CA 94107</p> </div> <div class="mt-4 flex items-center"> <i class="fas fa-phone-alt text-indigo-600 text-xl"></i> <p class="ml-4 text-gray-600">+1 (555) 123-4567</p> </div> <div class="mt-4 flex items-center"> <i class="fas fa-envelope text-indigo-600 text-xl"></i> <p class="ml-4 text-gray-600">info@nexusdigital.com</p> </div> </div> </div> <div class="mt-12 lg:mt-0 lg:col-span-7"> <form class="grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-8"> <div> <label for="first-name" class="block text-sm font-medium text-gray-700">First name</label> <div class="mt-1"> <input type="text" name="first-name" id="first-name" autocomplete="given-name" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md"> </div> </div> <div> <label for="last-name" class="block text-sm font-medium text-gray-700">Last name</label> <div class="mt-1"> <input type="text" name="last-name" id="last-name" autocomplete="family-name" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md"> </div> </div> <div class="sm:col-span-2"> <label for="email" class="block text-sm font-medium text-gray-700">Email</label> <div class="mt-1"> <input id="email" name="email" type="email" autocomplete="email" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md"> </div> </div> <div class="sm:col-span-2"> <label for="phone" class="block text-sm font-medium text-gray-700">Phone Number</label> <div class="mt-1"> <input type="text" name="phone" id="phone" autocomplete="tel" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md"> </div> </div> <div class="sm:col-span-2"> <label for="message" class="block text-sm font-medium text-gray-700">Message</label> <div class="mt-1"> <input id="message" name="message" rows="4" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md"/> </div> </div> <div class="sm:col-span-2"> <button type="submit" class="w-full inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors"> Submit Message </button> </div> </form> </div> </div> </div> </section> <!-- Footer --> <footer class="bg-gray-900 text-white"> <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> <div> <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Solutions</h3> <div class="mt-4 space-y-4"> <a href="#" class="text-base text-gray-300 hover:text-white">Marketing</a> <a href="#" class="text-base text-gray-300 hover:text-white">Analytics</a> <a href="#" class="text-base text-gray-300 hover:text-white">Commerce</a> <a href="#" class="text-base text-gray-300 hover:text-white">Insights</a> </div> </div> <div> <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Support</h3> <div class="mt-4 space-y-4"> <a href="#" class="text-base text-gray-300 hover:text-white">Pricing</a> <a href="#" class="text-base text-gray-300 hover:text-white">Documentation</a> <a href="#" class="text-base text-gray-300 hover:text-white">Guides</a> <a href="#" class="text-base text-gray-300 hover:text-white">API Status</a> </div> </div> <div> <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3> <div class="mt-4 space-y-4"> <a href="#" class="text-base text-gray-300 hover:text-white">About</a> <a href="#" class="text-base text-gray-300 hover:text-white">Blog</a> <a href="#" class="text-base text-gray-300 hover:text-white">Jobs</a> <a href="#" class="text-base text-gray-300 hover:text-white">Press</a> </div> </div> <div> <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3> <div class="mt-4 space-y-4"> <a href="#" class="text-base text-gray-300 hover:text-white">Claim</a> <a href="#" class="text-base text-gray-300 hover:text-white">Privacy</a> <a href="#" class="text-base text-gray-300 hover:text-white">Terms</a> <a href="#" class="text-base text-gray-300 hover:text-white">Policy</a> </div> </div> </div> <div class="mt-12 border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center"> <div class="flex space-x-6"> <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-instagram"></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-linkedin-in"></i> </a> <a href="#" class="text-gray-400 hover:text-white"> <i class="fab fa-youtube"></i> </a> </div> <p class="mt-4 md:mt-0 text-base text-gray-400"> © 2023 Nexus Digital Solutions. All rights reserved. </p> </div> </div> </footer> <script> // Mobile menu toggle const mobileMenuButton = document.getElementById('mobile-menu-button'); const mobileMenu = document.getElementById('mobile-menu'); mobileMenuButton.addEventListener('click', () => { mobileMenu.classList.toggle('hidden'); }); // Close mobile menu when clicking on a link const mobileMenuLinks = document.querySelectorAll('#mobile-menu a'); mobileMenuLinks.forEach(link => { link.addEventListener('click', () => { mobileMenu.classList.add('hidden'); }); }); // Smooth scroll for navigation links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const targetId = this.getAttribute('href'); if (targetId === '#') return; const targetElement = document.querySelector(targetId); if (targetElement) { window.scrollTo({ top: targetElement.offsetTop - 80, behavior: 'smooth' }); } }); }); // Video play button functionality const videoPlayButton = document.querySelector('.video-play-button'); if (videoPlayButton) { videoPlayButton.addEventListener('click', () => { // In a real implementation, this would open a modal with the video alert('Video player would open here in a real implementation'); }); } // Add animation classes when elements come into view const animateOnScroll = () => { const elements = document.querySelectorAll('.animate-fade-in'); elements.forEach(element => { const elementPosition = element.getBoundingClientRect().top; const screenPosition = window.innerHeight / 1.2; if (elementPosition < screenPosition) { element.style.opacity = '1'; element.style.transform = 'translateY(0)'; } }); }; window.addEventListener('scroll', animateOnScroll); window.addEventListener('load', animateOnScroll); // Initialize animations on page load document.addEventListener('DOMContentLoaded', () => { animateOnScroll(); }); </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) */
