Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Classic Link - Construction & Building Experts</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| function scrollToSection(sectionId) { | |
| const section = document.getElementById(sectionId); | |
| if (section) { | |
| section.scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| } | |
| </script> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| @keyframes pulse-glow { | |
| 0% { box-shadow: 0 0 5px rgba(34, 211, 238, 0.5); } | |
| 50% { box-shadow: 0 0 20px rgba(34, 211, 238, 0.8); } | |
| 100% { box-shadow: 0 0 5px rgba(34, 211, 238, 0.5); } | |
| } | |
| @keyframes ripple { | |
| 0% { transform: scale(0.8); opacity: 1; } | |
| 100% { transform: scale(1.2); opacity: 0; } | |
| } | |
| @keyframes waveIn { | |
| 0% { transform: translateY(20px); opacity: 0; } | |
| 100% { transform: translateY(0); opacity: 1; } | |
| } | |
| @keyframes shimmer { | |
| 0% { background-position: -1000px 0; } | |
| 100% { background-position: 1000px 0; } | |
| } | |
| .pulse-glow { | |
| animation: pulse-glow 2s infinite; | |
| } | |
| .ripple-effect { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .ripple-effect:after { | |
| content: ""; | |
| display: block; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| pointer-events: none; | |
| background-image: radial-gradient(circle, #22d3ee 10%, transparent 10.01%); | |
| background-repeat: no-repeat; | |
| background-position: 50%; | |
| transform: scale(10, 10); | |
| opacity: 0; | |
| transition: transform .5s, opacity 1s; | |
| } | |
| .ripple-effect:active:after { | |
| transform: scale(0, 0); | |
| opacity: 0.3; | |
| transition: 0s; | |
| } | |
| .wave-in { | |
| animation: waveIn 0.8s ease-out forwards; | |
| } | |
| .shimmer-text { | |
| background: linear-gradient(90deg, #ffffff, #22d3ee, #ffffff); | |
| background-size: 200% auto; | |
| color: transparent; | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| animation: shimmer 3s linear infinite; | |
| } | |
| .rotate-3d:hover { | |
| transform: perspective(1000px) rotateY(20deg); | |
| transition: transform 0.5s ease; | |
| } | |
| .tilt-3d { | |
| transform: perspective(1000px) rotateX(0deg) rotateY(0deg); | |
| transition: transform 0.5s ease; | |
| } | |
| .tilt-3d:hover { | |
| transform: perspective(1000px) rotateX(5deg) rotateY(5deg); | |
| } | |
| .header-shrink { | |
| height: 70px; | |
| transition: all 0.3s ease; | |
| } | |
| .logo-spin:hover { | |
| animation: spin 1s linear; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotateY(0deg); } | |
| 100% { transform: rotateY(360deg); } | |
| } | |
| .mobile-menu { | |
| transform: translateX(100%); | |
| transition: transform 0.3s ease; | |
| } | |
| .mobile-menu.open { | |
| transform: translateX(0); | |
| } | |
| .underline-wave { | |
| position: relative; | |
| } | |
| .underline-wave:after { | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 2px; | |
| bottom: 0; | |
| left: 0; | |
| background-color: #22d3ee; | |
| transform: scaleX(0); | |
| transform-origin: bottom right; | |
| transition: transform 0.25s ease-out; | |
| } | |
| .underline-wave:hover:after { | |
| transform: scaleX(1); | |
| transform-origin: bottom left; | |
| } | |
| .grid-overlay { | |
| background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiMyMjIyMjIiIG9wYWNpdHk9IjAuMSI+PHBhdGggZD0iTTAgMGg0MHY0MEgweiIvPjwvZz48cGF0aCBkPSJNNDAgMEgwdjQwIiBzdHJva2U9IiMyMjIyMjIiIHN0cm9rZS13aWR0aD0iMSIvPjxwYXRoIGQ9Ik0wIDBoNDAiIHN0cm9rZT0iIzIyMjIyMiIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9nPjwvc3ZnPg=='); | |
| opacity: 0.1; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 0; | |
| animation: grid-flow 20s linear infinite; | |
| } | |
| @keyframes grid-flow { | |
| 0% { background-position: 0 0; } | |
| 100% { background-position: 40px 40px; } | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1e40af 0%, #4c1d95 100%); | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #22d3ee, #3b82f6); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .service-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .testimonial-card { | |
| transition: all 0.3s ease; | |
| } | |
| .testimonial-card:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-poppins bg-gray-900 text-white"> | |
| <!-- Header --> | |
| <header id="main-header" class="fixed w-full z-50 gradient-bg rounded-b-3xl shadow-2xl transition-all duration-300"> | |
| <div class="container mx-auto px-4 py-4"> | |
| <div class="flex justify-between items-center"> | |
| <!-- Logo --> | |
| <div class="flex items-center"> | |
| <div class="logo-spin"> | |
| <img src="https://via.placeholder.com/200" alt="Classic Link Logo" class="w-16 md:w-24 lg:w-32 pulse-glow rounded-full border-2 border-cyan-400"> | |
| </div> | |
| <h1 class="ml-3 text-xl md:text-2xl font-bold gradient-text">CLASSIC <span class="text-white">LINK</span></h1> | |
| </div> | |
| <!-- Desktop Navigation --> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#home" class="underline-wave px-2 py-1 text-white hover:text-cyan-400 transition-colors duration-300" onclick="scrollToSection('home')">Home</a> | |
| <a href="#about" class="underline-wave px-2 py-1 text-white hover:text-cyan-400 transition-colors duration-300" onclick="scrollToSection('about')">About</a> | |
| <a href="#services" class="underline-wave px-2 py-1 text-white hover:text-cyan-400 transition-colors duration-300" onclick="scrollToSection('services')">Services</a> | |
| <a href="#gallery" class="underline-wave px-2 py-1 text-white hover:text-cyan-400 transition-colors duration-300" onclick="scrollToSection('gallery')">Gallery</a> | |
| <a href="#contact" class="underline-wave px-2 py-1 text-white hover:text-cyan-400 transition-colors duration-300" onclick="scrollToSection('contact')">Contact</a> | |
| </nav> | |
| <!-- CTA Button --> | |
| <div class="hidden md:block"> | |
| <button class="ripple-effect bg-cyan-500 hover:bg-cyan-600 text-white font-bold py-2 px-6 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-cyan-500/50"> | |
| Contact Us | |
| </button> | |
| </div> | |
| <!-- Mobile Menu Button --> | |
| <button id="mobile-menu-button" class="md:hidden text-white focus:outline-none"> | |
| <svg class="w-6 h-6" 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> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="mobile-menu md:hidden fixed inset-0 bg-gray-900 bg-opacity-95 z-50 flex flex-col items-center justify-center"> | |
| <button id="close-mobile-menu" class="absolute top-4 right-4 text-white"> | |
| <svg class="w-8 h-8" 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="M6 18L18 6M6 6l12 12"></path> | |
| </svg> | |
| </button> | |
| <nav class="flex flex-col space-y-8 text-center"> | |
| <a href="#home" class="text-2xl text-white hover:text-cyan-400 transition-colors duration-300">Home</a> | |
| <a href="#about" class="text-2xl text-white hover:text-cyan-400 transition-colors duration-300">About</a> | |
| <a href="#services" class="text-2xl text-white hover:text-cyan-400 transition-colors duration-300">Services</a> | |
| <a href="#gallery" class="text-2xl text-white hover:text-cyan-400 transition-colors duration-300">Gallery</a> | |
| <a href="#contact" class="text-2xl text-white hover:text-cyan-400 transition-colors duration-300">Contact</a> | |
| </nav> | |
| <button class="mt-8 ripple-effect bg-cyan-500 hover:bg-cyan-600 text-white font-bold py-3 px-8 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-cyan-500/50"> | |
| Contact Us | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Hero Slider --> | |
| <section id="home" class="pt-24 pb-16 md:pt-32 md:pb-24 relative overflow-hidden"> | |
| <div class="grid-overlay"></div> | |
| <div class="container mx-auto px-4"> | |
| <div class="relative h-64 md:h-96 rounded-3xl overflow-hidden"> | |
| <!-- Slider Images --> | |
| <div id="slider" class="relative h-full w-full"> | |
| <div class="absolute inset-0 bg-black opacity-40"></div> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="text-center px-4"> | |
| <h2 class="text-3xl md:text-5xl font-bold text-white mb-4 wave-in">Building Your Vision Into Reality</h2> | |
| <p class="text-lg md:text-xl text-gray-200 mb-6 wave-in">Premium construction services with 20+ years of experience</p> | |
| <button class="ripple-effect bg-cyan-500 hover:bg-cyan-600 text-white font-bold py-3 px-8 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-cyan-500/50 wave-in"> | |
| Get a Free Quote | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slider Navigation --> | |
| <div class="absolute bottom-4 left-0 right-0 flex justify-center space-x-2"> | |
| <button class="w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 focus:outline-none"></button> | |
| <button class="w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 focus:outline-none"></button> | |
| <button class="w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 focus:outline-none"></button> | |
| <button class="w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 focus:outline-none"></button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-16 bg-gradient-to-b from-blue-900 to-indigo-900"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Our Services</h2> | |
| <div class="w-20 h-1 bg-cyan-400 mx-auto mb-6"></div> | |
| <p class="text-lg text-gray-300 max-w-3xl mx-auto">We offer comprehensive construction and maintenance services tailored to your needs</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Service Card 1 --> | |
| <div class="service-card bg-gray-800 rounded-2xl p-6 shadow-lg transition-all duration-300 hover:border-cyan-400 border border-gray-700"> | |
| <div class="w-16 h-16 bg-cyan-500 rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <svg class="w-8 h-8 text-white" 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3 text-center">Residential Construction</h3> | |
| <p class="text-gray-300 mb-4 text-center">Building high-quality homes tailored to your needs with precision and care.</p> | |
| <div class="text-center"> | |
| <a href="#" class="text-cyan-400 hover:text-cyan-300 font-medium inline-flex items-center"> | |
| Learn More | |
| <svg class="w-4 h-4 ml-1" 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="M9 5l7 7-7 7"></path> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Service Card 2 --> | |
| <div class="service-card bg-gray-800 rounded-2xl p-6 shadow-lg transition-all duration-300 hover:border-cyan-400 border border-gray-700"> | |
| <div class="w-16 h-16 bg-cyan-500 rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <svg class="w-8 h-8 text-white" 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="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3 text-center">Commercial Construction</h3> | |
| <p class="text-gray-300 mb-4 text-center">Delivering robust solutions for commercial spaces that stand the test of time.</p> | |
| <div class="text-center"> | |
| <a href="#" class="text-cyan-400 hover:text-cyan-300 font-medium inline-flex items-center"> | |
| Learn More | |
| <svg class="w-4 h-4 ml-1" 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="M9 5l7 7-7 7"></path> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Service Card 3 --> | |
| <div class="service-card bg-gray-800 rounded-2xl p-6 shadow-lg transition-all duration-300 hover:border-cyan-400 border border-gray-700"> | |
| <div class="w-16 h-16 bg-cyan-500 rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <svg class="w-8 h-8 text-white" 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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3 text-center">Maintenance Services</h3> | |
| <p class="text-gray-300 mb-4 text-center">Comprehensive maintenance for residential and commercial properties.</p> | |
| <div class="text-center"> | |
| <a href="#" class="text-cyan-400 hover:text-cyan-300 font-medium inline-flex items-center"> | |
| Learn More | |
| <svg class="w-4 h-4 ml-1" 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="M9 5l7 7-7 7"></path> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-16 bg-gray-900"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <img src="https://via.placeholder.com/600x400" alt="About Classic Link" class="rounded-2xl shadow-xl w-full tilt-3d"> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">About Classic Link</h2> | |
| <div class="w-20 h-1 bg-cyan-400 mb-6"></div> | |
| <p class="text-gray-300 mb-4">Founded in 2003, Classic Link has been at the forefront of construction innovation, delivering exceptional projects across residential and commercial sectors.</p> | |
| <p class="text-gray-300 mb-6">Our team of certified professionals brings together decades of experience, cutting-edge technology, and a commitment to sustainable building practices.</p> | |
| <div class="grid grid-cols-2 gap-4 mb-6"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-cyan-500 rounded-full flex items-center justify-center mr-3"> | |
| <svg class="w-5 h-5 text-white" 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="M5 13l4 4L19 7"></path> | |
| </svg> | |
| </div> | |
| <span class="text-white">20+ Years Experience</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-cyan-500 rounded-full flex items-center justify-center mr-3"> | |
| <svg class="w-5 h-5 text-white" 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="M5 13l4 4L19 7"></path> | |
| </svg> | |
| </div> | |
| <span class="text-white">500+ Projects</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-cyan-500 rounded-full flex items-center justify-center mr-3"> | |
| <svg class="w-5 h-5 text-white" 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="M5 13l4 4L19 7"></path> | |
| </svg> | |
| </div> | |
| <span class="text-white">Certified Professionals</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-cyan-500 rounded-full flex items-center justify-center mr-3"> | |
| <svg class="w-5 h-5 text-white" 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="M5 13l4 4L19 7"></path> | |
| </svg> | |
| </div> | |
| <span class="text-white">Sustainable Practices</span> | |
| </div> | |
| </div> | |
| <button class="ripple-effect bg-cyan-500 hover:bg-cyan-600 text-white font-bold py-3 px-8 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-cyan-500/50"> | |
| Read More | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-16 bg-gradient-to-b from-indigo-900 to-blue-900"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">What Our Clients Say</h2> | |
| <div class="w-20 h-1 bg-cyan-400 mx-auto mb-6"></div> | |
| <p class="text-lg text-gray-300 max-w-3xl mx-auto">Hear from our satisfied clients about their experience working with Classic Link</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="testimonial-card bg-gray-800 rounded-2xl p-6 shadow-lg border border-gray-700"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center text-cyan-400 font-bold text-xl">JD</div> | |
| <div class="ml-4"> | |
| <h4 class="text-white font-bold">Jane Doe</h4> | |
| <p class="text-gray-400 text-sm">Homeowner</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 mb-4">"Classic Link transformed our home with unmatched quality and professionalism! The attention to detail was exceptional."</p> | |
| <div class="flex text-yellow-400"> | |
| <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg> | |
| <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg> | |
| <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg> | |
| <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg> | |
| <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="testimonial-card bg-gray-800 rounded-2xl p-6 shadow-lg border border-gray-700"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center text-cyan-400 font-bold text-xl">JS</div> | |
| <div class="ml-4"> | |
| <h4 class="text-white font-bold">John Smith</h4> | |
| <p class="text-gray-400 text-sm">Business Owner</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 mb-4">"Their team delivered our office project on time and exceeded expectations. The communication throughout was excellent."</p> | |
| <div class="flex text-yellow-400"> | |
| <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg> | |
| <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg> | |
| <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg> | |
| <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg> | |
| <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.� 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="testimonial-card bg-gray-800 rounded-2xl p-6 shadow-lg border border-gray-700"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center text-cyan-400 font-bold text-xl">EJ</div> | |
| <div class="ml-4"> | |
| <h4 class="text-white font-bold">Emily Johnson</h4> | |
| <p class="text-gray-400 text-sm">Property Manager</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 mb-4">"Reliable maintenance services that keep our properties in top shape. Quick response times and professional staff."</p> | |
| <div class="flex text-yellow-400"> | |
| <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg> | |
| <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg> | |
| <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg> | |
| <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg> | |
| <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Gallery Section --> | |
| <section id="gallery" class="py-16 bg-gray-900"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Our Projects</h2> | |
| <div class="w-20 h-1 bg-cyan-400 mx-auto mb-6"></div> | |
| <p class="text-lg text-gray-300 max-w-3xl mx-auto">Explore our portfolio of completed projects showcasing our expertise and craftsmanship</p> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Gallery Item 1 --> | |
| <div class="relative group overflow-hidden rounded-2xl shadow-xl"> | |
| <img src="https://via.placeholder.com/600x400" alt="Project 1" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition duration-300 flex items-end p-6"> | |
| <div> | |
| <h3 class="text-white text-xl font-bold mb-1">Modern Residence</h3> | |
| <p class="text-gray-300">Completed in 2022</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Gallery Item 2 --> | |
| <div class="relative group overflow-hidden rounded-2xl shadow-xl"> | |
| <img src="https://via.placeholder.com/600x400" alt="Project 2" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition duration-300 flex items-end p-6"> | |
| <div> | |
| <h3 class="text-white text-xl font-bold mb-1">Office Complex</h3> | |
| <p class="text-gray-300">Completed in 2021</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Gallery Item 3 --> | |
| <div class="relative group overflow-hidden rounded-2xl shadow-xl"> | |
| <img src="https://via.placeholder.com/600x400" alt="Project 3" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition duration-300 flex items-end p-6"> | |
| <div> | |
| <h3 class="text-white text-xl font-bold mb-1">Retail Space</h3> | |
| <p class="text-gray-300">Completed in 2020</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Gallery Item 4 --> | |
| <div class="relative group overflow-hidden rounded-2xl shadow-xl"> | |
| <img src="https://via.placeholder.com/600x400" alt="Project 4" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition duration-300 flex items-end p-6"> | |
| <div> | |
| <h3 class="text-white text-xl font-bold mb-1">Apartment Building</h3> | |
| <p class="text-gray-300">Completed in 2019</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Gallery Item 5 --> | |
| <div class="relative group overflow-hidden rounded-2xl shadow-xl"> | |
| <img src="https://via.placeholder.com/600x400" alt="Project 5" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition duration-300 flex items-end p-6"> | |
| <div> | |
| <h3 class="text-white text-xl font-bold mb-1">Hospital Renovation</h3> | |
| <p class="text-gray-300">Completed in 2018</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Gallery Item 6 --> | |
| <div class="relative group overflow-hidden rounded-2xl shadow-xl"> | |
| <img src="https://via.placeholder.com/600x400" alt="Project 6" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition duration-300 flex items-end p-6"> | |
| <div> | |
| <h3 class="text-white text-xl font-bold mb-1">School Expansion</h3> | |
| <p class="text-gray-300">Completed in 2017</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <button class="ripple-effect bg-cyan-500 hover:bg-cyan-600 text-white font-bold py-3 px-8 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-cyan-500/50"> | |
| View More Projects | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-16 bg-gradient-to-b from-blue-900 to-indigo-900"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Get In Touch</h2> | |
| <div class="w-20 h-1 bg-cyan-400 mx-auto mb-6"></div> | |
| <p class="text-lg text-gray-300 max-w-3xl mx-auto">Have a project in mind or need more information? Contact us today for a free consultation</p> | |
| </div> | |
| <div class="flex flex-col md:flex-row gap-8"> | |
| <div class="md:w-1/2"> | |
| <form class="bg-gray-800 rounded-2xl p-6 shadow-lg"> | |
| <div class="mb-4"> | |
| <label for="name" class="block text-gray-300 mb-2">Your Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-500 text-white" placeholder="John Doe"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="email" class="block text-gray-300 mb-2">Email Address</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-500 text-white" placeholder="john@example.com"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="phone" class="block text-gray-300 mb-2">Phone Number</label> | |
| <input type="tel" id="phone" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-500 text-white" placeholder="(123) 456-7890"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="message" class="block text-gray-300 mb-2">Your Message</label> | |
| <textarea id="message" rows="5" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-500 text-white" placeholder="Tell us about your project..."></textarea> | |
| </div> | |
| <button type="submit" class="w-full ripple-effect bg-cyan-500 hover:bg-cyan-600 text-white font-bold py-3 px-8 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-cyan-500/50"> | |
| Send Message | |
| </button> | |
| </form> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="bg-gray-800 rounded-2xl p-6 shadow-lg h-full"> | |
| <h3 class="text-2xl font-bold text-white mb-6">Contact Information</h3> | |
| <div class="flex items-start mb-6"> | |
| <div class="w-10 h-10 bg-cyan-500 rounded-full flex items-center justify-center mr-4 mt-1"> | |
| <svg class="w-5 h-5 text-white" 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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path> | |
| </svg> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold text-white mb-1">Address</h4> | |
| <p class="text-gray-300">123 Construction Avenue, Building City, BC 12345</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-6"> | |
| <div class="w-10 h-10 bg-cyan-500 rounded-full flex items-center justify-center mr-4 mt-1"> | |
| <svg class="w-5 h-5 text-white" 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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path> | |
| </svg> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold text-white mb-1">Phone</h4> | |
| <p class="text-gray-300">Main: (123) 456-7890</p> | |
| <p class="text-gray-300">Support: (123) 456-7891</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-6"> | |
| <div class="w-10 h-10 bg-cyan-500 rounded-full flex items-center justify-center mr-4 mt-1"> | |
| <svg class="w-5 h-5 text-white" 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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path> | |
| </svg> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold text-white mb-1">Email</h4> | |
| <p class="text-gray-300">info@classiclink.com</p> | |
| <p class="text-gray-300">support@classiclink.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 bg-cyan-500 rounded-full flex items-center justify-center mr-4 mt-1"> | |
| <svg class="w-5 h-5 text-white" 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path> | |
| </svg> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold text-white mb-1">Hours</h4> | |
| <p class="text-gray-300">Monday - Friday: 8:00 AM - 6:00 PM</p> | |
| <p class="text-gray-300">Saturday: 9:00 AM - 3:00 PM</p> | |
| <p class="text-gray-300">Sunday: Closed</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 pt-16 pb-8 relative overflow-hidden"> | |
| <div class="grid-overlay"></div> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://via.placeholder.com/50" alt="Classic Link Logo" class="w-10 h-10 mr-3 rounded-full"> | |
| <h3 class="text-xl font-bold gradient-text">CLASSIC <span class="text-white">LINK</span></h3> | |
| </div> | |
| <p class="text-gray-400 mb-4">Building the future with precision and care since 2003.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors duration-300"> | |
| <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/> | |
| </svg> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors duration-300"> | |
| <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"/> | |
| </svg> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors duration-300"> | |
| <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/> | |
| </svg> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors duration-300"> | |
| <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold text-white mb-4">Quick Links</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#home" class="text-gray-400 hover:text-cyan-400 transition-colors duration-300">Home</a></li> | |
| <li><a href="#about" class="text-gray-400 hover:text-cyan-400 transition-colors duration-300">About Us</a></li> | |
| <li><a href="#services" class="text-gray-400 hover:text-cyan-400 transition-colors duration-300">Services</a></li> | |
| <li><a href | |
| <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=Batfly/classic-link" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |