Download index.html from gsfdfd/91a: direct link, hf CLI and curl.
- Browser
- Download file 59.3 kB
-
https://huggingface.co/spaces/gsfdfd/91a/resolve/main/index.html
- Command line
-
hf download hf://spaces/gsfdfd/91a/index.html
-
curl -L -o index.html https://huggingface.co/spaces/gsfdfd/91a/resolve/main/index.html
59.3 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>91Editors | $100M+ In Client Results | Premium YouTube Editing</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --primary: #0F0F2D; | |
| --secondary: #F5C445; | |
| --accent: #E63946; | |
| --light: #F8F9FA; | |
| --dark: #0A0A1A; | |
| } | |
| body { | |
| font-family: 'Manrope', sans-serif; | |
| background-color: var(--light); | |
| color: var(--dark); | |
| overflow-x: hidden; | |
| } | |
| .font-display { | |
| font-family: 'Montserrat', sans-serif; | |
| font-weight: 800; | |
| } | |
| .hero-video { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| z-index: -1; | |
| opacity: 0.15; | |
| } | |
| .portfolio-item { | |
| transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); | |
| position: relative; | |
| overflow: hidden; | |
| transform-style: preserve-3d; | |
| perspective: 1000px; | |
| } | |
| .portfolio-item:hover { | |
| transform: translateY(-10px) scale(1.02); | |
| } | |
| .portfolio-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(0deg, rgba(15,15,45,0.9) 0%, rgba(15,15,45,0.7) 50%, rgba(15,15,45,0.5) 100%); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| opacity: 0; | |
| transition: opacity 0.5s ease; | |
| } | |
| .portfolio-item:hover .portfolio-overlay { | |
| opacity: 1; | |
| } | |
| .video-hover { | |
| transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .video-hover:hover { | |
| transform: scale(1.05) rotateY(5deg) rotateX(5deg); | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link:after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 3px; | |
| bottom: -5px; | |
| left: 0; | |
| background-color: var(--secondary); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover:after { | |
| width: 100%; | |
| } | |
| .scroll-indicator { | |
| animation: bounce 2s infinite; | |
| } | |
| @keyframes bounce { | |
| 0%, 20%, 50%, 80%, 100% { | |
| transform: translateY(0); | |
| } | |
| 40% { | |
| transform: translateY(-20px); | |
| } | |
| 60% { | |
| transform: translateY(-10px); | |
| } | |
| } | |
| .testimonial-card { | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
| transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); | |
| transform-style: preserve-3d; | |
| } | |
| .testimonial-card:hover { | |
| transform: translateY(-10px) rotateY(5deg); | |
| box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, var(--secondary), var(--accent)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .service-card { | |
| transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); | |
| border-top: 4px solid var(--secondary); | |
| transform-style: preserve-3d; | |
| } | |
| .service-card:hover { | |
| transform: translateY(-15px) rotateY(5deg); | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); | |
| } | |
| .stats-item { | |
| position: relative; | |
| } | |
| .stats-item:after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 60px; | |
| height: 3px; | |
| background: var(--secondary); | |
| } | |
| .contact-input { | |
| border-bottom: 2px solid rgba(0,0,0,0.1); | |
| transition: all 0.3s ease; | |
| } | |
| .contact-input:focus { | |
| border-bottom-color: var(--secondary); | |
| } | |
| .floating { | |
| animation: floating 6s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px) rotate(0deg); } | |
| 50% { transform: translateY(-20px) rotate(5deg); } | |
| 100% { transform: translateY(0px) rotate(0deg); } | |
| } | |
| .floating-2 { | |
| animation: floating-2 8s ease-in-out infinite; | |
| } | |
| @keyframes floating-2 { | |
| 0% { transform: translateY(0px) rotate(5deg); } | |
| 50% { transform: translateY(-30px) rotate(-5deg); } | |
| 100% { transform: translateY(0px) rotate(5deg); } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .vanta-bg { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 1024px) { | |
| .hero-heading { | |
| font-size: 3.5rem ; | |
| } | |
| .hero-subheading { | |
| font-size: 1.2rem ; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .hero-heading { | |
| font-size: 2.5rem ; | |
| } | |
| .process-step { | |
| margin-bottom: 2rem; | |
| } | |
| .stats-item { | |
| margin-bottom: 1.5rem; | |
| } | |
| .stats-item:after { | |
| display: none; | |
| } | |
| } | |
| @media (max-width: 640px) { | |
| .hero-heading { | |
| font-size: 2rem ; | |
| } | |
| .hero-subheading { | |
| font-size: 1rem ; | |
| } | |
| .cta-buttons { | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="antialiased"> | |
| <!-- Vanta.js Background --> | |
| <div id="vanta-bg" class="vanta-bg"></div> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full bg-white/90 backdrop-blur-md z-50 shadow-lg"> | |
| <div class="container mx-auto px-4 sm:px-6 py-3"> | |
| <div class="flex justify-between items-center"> | |
| <a href="#" class="text-2xl font-bold text-primary"> | |
| <span class="text-primary">91</span><span class="text-secondary">Editors</span> | |
| </a> | |
| <div class="hidden lg:flex space-x-8"> | |
| <a href="#home" class="nav-link text-primary font-semibold">Home</a> | |
| <a href="#services" class="nav-link text-primary font-semibold">Services</a> | |
| <a href="#portfolio" class="nav-link text-primary font-semibold">Portfolio</a> | |
| <a href="#results" class="nav-link text-primary font-semibold">Results</a> | |
| <a href="#testimonials" class="nav-link text-primary font-semibold">Testimonials</a> | |
| <a href="#contact" class="nav-link text-primary font-semibold">Contact</a> | |
| </div> | |
| <a href="#contact" class="hidden lg:block bg-gradient-to-r from-secondary to-accent text-primary px-6 py-2 rounded-full font-bold hover:opacity-90 transition duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1"> | |
| Get Started | |
| </a> | |
| <button id="mobile-menu-button" class="lg:hidden text-primary focus:outline-none"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="fixed inset-0 bg-primary z-40 flex flex-col items-center justify-center hidden lg:hidden"> | |
| <button id="close-mobile-menu" class="absolute top-6 right-6 text-white text-3xl"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| <div class="flex flex-col items-center space-y-8"> | |
| <a href="#home" class="text-white text-2xl font-medium hover:text-secondary transition duration-300">Home</a> | |
| <a href="#services" class="text-white text-2xl font-medium hover:text-secondary transition duration-300">Services</a> | |
| <a href="#portfolio" class="text-white text-2xl font-medium hover:text-secondary transition duration-300">Portfolio</a> | |
| <a href="#results" class="text-white text-2xl font-medium hover:text-secondary transition duration-300">Results</a> | |
| <a href="#testimonials" class="text-white text-2xl font-medium hover:text-secondary transition duration-300">Testimonials</a> | |
| <a href="#contact" class="text-white text-2xl font-medium hover:text-secondary transition duration-300">Contact</a> | |
| <a href="#contact" class="bg-gradient-to-r from-secondary to-accent text-primary px-8 py-3 rounded-full font-bold hover:opacity-90 transition duration-300 text-lg mt-4"> | |
| Get Started | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Hero Section --> | |
| <section id="home" class="relative min-h-screen flex items-center justify-center bg-primary overflow-hidden pt-20"> | |
| <video autoplay muted loop class="hero-video"> | |
| <source src="https://assets.mixkit.co/videos/preview/mixkit-woman-editing-video-on-her-laptop-2283-large.mp4" type="video/mp4"> | |
| </video> | |
| <!-- Floating 3D Elements --> | |
| <div class="absolute top-1/4 left-1/4 w-16 h-16 bg-secondary rounded-full opacity-20 floating"></div> | |
| <div class="absolute bottom-1/4 right-1/4 w-24 h-24 bg-accent rounded-full opacity-20 floating-2"></div> | |
| <div class="absolute top-1/3 right-1/3 w-20 h-20 bg-white rounded-full opacity-10 floating"></div> | |
| <div class="container mx-auto px-4 sm:px-6 z-10"> | |
| <div class="max-w-5xl mx-auto text-center"> | |
| <h1 class="font-display text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-bold text-white mb-6 hero-heading"> | |
| <span class="gradient-text">$100M+</span> Generated For Clients<br> | |
| With Our <span class="gradient-text">Editing</span> | |
| </h1> | |
| <p class="text-xl md:text-2xl text-white opacity-90 mb-10 hero-subheading"> | |
| The secret weapon top YouTubers use to 10X their views, engagement, and revenue. | |
| We don't just edit videos - we engineer audience retention machines. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4 cta-buttons"> | |
| <a href="#contact" class="bg-gradient-to-r from-secondary to-accent text-primary px-8 py-4 rounded-full font-bold hover:opacity-90 transition duration-300 text-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 pulse"> | |
| Get Started Today - 24H Turnaround | |
| </a> | |
| <a href="#portfolio" class="border-2 border-white text-white px-8 py-4 rounded-full font-bold hover:bg-white hover:bg-opacity-10 transition duration-300 text-lg"> | |
| See Case Studies → | |
| </a> | |
| </div> | |
| <!-- Trust Badges --> | |
| <div class="mt-16 flex flex-wrap justify-center items-center gap-6"> | |
| <div class="flex items-center"> | |
| <div class="text-secondary mr-2"> | |
| <i class="fas fa-check-circle text-2xl"></i> | |
| </div> | |
| <span class="text-white font-medium">24/7 Support</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="text-secondary mr-2"> | |
| <i class="fas fa-check-circle text-2xl"></i> | |
| </div> | |
| <span class="text-white font-medium">Money-Back Guarantee</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="text-secondary mr-2"> | |
| <i class="fas fa-check-circle text-2xl"></i> | |
| </div> | |
| <span class="text-white font-medium">500+ Happy Clients</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 scroll-indicator"> | |
| <a href="#services" class="text-white text-4xl"> | |
| <i class="fas fa-chevron-down"></i> | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4 sm:px-6"> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 text-center"> | |
| <div class="stats-item py-6"> | |
| <h3 class="text-4xl font-bold text-primary mb-2">500+</h3> | |
| <p class="text-gray-600 font-medium">Videos Edited Monthly</p> | |
| </div> | |
| <div class="stats-item py-6"> | |
| <h3 class="text-4xl font-bold text-primary mb-2">100M+</h3> | |
| <p class="text-gray-600 font-medium">Total Views Generated</p> | |
| </div> | |
| <div class="stats-item py-6"> | |
| <h3 class="text-4xl font-bold text-primary mb-2">3-5X</h3> | |
| <p class="text-gray-600 font-medium">Average Retention Boost</p> | |
| </div> | |
| <div class="stats-item py-6"> | |
| <h3 class="text-4xl font-bold text-primary mb-2">24H</h3> | |
| <p class="text-gray-600 font-medium">Standard Turnaround</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4 sm:px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="font-display text-4xl md:text-5xl font-bold text-primary mb-4"> | |
| Our <span class="gradient-text">High-Converting</span> Editing Packages | |
| </h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> | |
| We've reverse-engineered what makes videos go viral. Choose the package that matches your growth goals. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="service-card bg-white p-8 rounded-xl"> | |
| <div class="text-secondary text-4xl mb-4"> | |
| <i class="fas fa-rocket"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-primary mb-3">Growth Package</h3> | |
| <p class="text-gray-600 mb-4"> | |
| For creators who want to systematically grow their channel with high-retention videos. | |
| </p> | |
| <div class="mb-6"> | |
| <span class="text-3xl font-bold text-primary">$497</span> | |
| <span class="text-gray-500">/video</span> | |
| </div> | |
| <ul class="space-y-3 mb-6"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-secondary mt-1 mr-2"></i> | |
| <span>Strategic cuts for maximum retention</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-secondary mt-1 mr-2"></i> | |
| <span>Hook engineering</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-secondary mt-1 mr-2"></i> | |
| <span>Performance color grading</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-secondary mt-1 mr-2"></i> | |
| <span>Retention-focused pacing</span> | |
| </li> | |
| </ul> | |
| <a href="#contact" class="block text-center bg-gradient-to-r from-secondary to-accent text-primary px-6 py-3 rounded-full font-bold hover:opacity-90 transition duration-300"> | |
| Get Started | |
| </a> | |
| </div> | |
| <div class="service-card bg-white p-8 rounded-xl transform scale-105 relative z-10 shadow-xl"> | |
| <div class="absolute top-0 right-0 bg-secondary text-primary px-4 py-1 rounded-bl-lg rounded-tr-lg font-bold"> | |
| MOST POPULAR | |
| </div> | |
| <div class="text-secondary text-4xl mb-4"> | |
| <i class="fas fa-fire"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-primary mb-3">Premium Package</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Our most powerful editing for creators who demand cinematic quality and maximum conversions. | |
| </p> | |
| <div class="mb-6"> | |
| <span class="text-3xl font-bold text-primary">$997</span> | |
| <span class="text-gray-500">/video</span> | |
| </div> | |
| <ul class="space-y-3 mb-6"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-secondary mt-1 mr-2"></i> | |
| <span>Everything in Growth +</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-secondary mt-1 mr-2"></i> | |
| <span>Custom motion graphics</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-secondary mt-1 mr-2"></i> | |
| <span>Cinematic color grading</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-secondary mt-1 mr-2"></i> | |
| <span>Advanced sound design</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-secondary mt-1 mr-2"></i> | |
| <span>Strategic storytelling</span> | |
| </li> | |
| </ul> | |
| <a href="#contact" class="block text-center bg-gradient-to-r from-secondary to-accent text-primary px-6 py-3 rounded-full font-bold hover:opacity-90 transition duration-300"> | |
| Get Started | |
| </a> | |
| </div> | |
| <div class="service-card bg-white p-8 rounded-xl"> | |
| <div class="text-secondary text-4xl mb-4"> | |
| <i class="fas fa-crown"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-primary mb-3">Agency Package</h3> | |
| <p class="text-gray-600 mb-4"> | |
| For agencies and top creators who need unlimited edits with white-glove service. | |
| </p> | |
| <div class="mb-6"> | |
| <span class="text-3xl font-bold text-primary">$4,997</span> | |
| <span class="text-gray-500">/month</span> | |
| </div> | |
| <ul class="space-y-3 mb-6"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-secondary mt-1 mr-2"></i> | |
| <span>Unlimited videos</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-secondary mt-1 mr-2"></i> | |
| <span>Everything in Premium +</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-secondary mt-1 mr-2"></i> | |
| <span>Dedicated senior editor</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-secondary mt-1 mr-2"></i> | |
| <span>24/7 priority support</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-secondary mt-1 mr-2"></i> | |
| <span>Strategic consulting</span> | |
| </li> | |
| </ul> | |
| <a href="#contact" class="block text-center bg-gradient-to-r from-secondary to-accent text-primary px-6 py-3 rounded-full font-bold hover:opacity-90 transition duration-300"> | |
| Get Started | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Results Section --> | |
| <section id="results" class="py-20 bg-primary text-white"> | |
| <div class="container mx-auto px-4 sm:px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="font-display text-4xl md:text-5xl font-bold mb-4"> | |
| Real <span class="gradient-text">Results</span> From Real Clients | |
| </h2> | |
| <p class="text-xl opacity-90 max-w-3xl mx-auto"> | |
| Don't take our word for it - see the numbers for yourself | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="bg-white/10 p-8 rounded-xl backdrop-blur-sm hover:backdrop-blur-md transition duration-300"> | |
| <div class="text-5xl font-bold text-secondary mb-2">3.7X</div> | |
| <h3 class="text-xl font-bold mb-3">Increase in Retention</h3> | |
| <p class="opacity-90 mb-4"> | |
| "Our average watch time went from 2:30 to over 9 minutes after switching to 91Editors." | |
| </p> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full overflow-hidden mr-3"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <div class="font-bold">James R.</div> | |
| <div class="text-sm opacity-80">Tech Channel - 450K subs</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white/10 p-8 rounded-xl backdrop-blur-sm hover:backdrop-blur-md transition duration-300"> | |
| <div class="text-5xl font-bold text-secondary mb-2">$287K</div> | |
| <h3 class="text-xl font-bold mb-3">In Additional Revenue</h3> | |
| <p class="opacity-90 mb-4"> | |
| "Our sponsorship deals doubled after our videos started looking more professional." | |
| </p> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full overflow-hidden mr-3"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Client" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <div class="font-bold">Sarah L.</div> | |
| <div class="text-sm opacity-80">Lifestyle Channel - 1.2M subs</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white/10 p-8 rounded-xl backdrop-blur-sm hover:backdrop-blur-md transition duration-300"> | |
| <div class="text-5xl font-bold text-secondary mb-2">10X</div> | |
| <h3 class="text-xl font-bold mb-3">Faster Growth</h3> | |
| <p class="opacity-90 mb-4"> | |
| "We went from gaining 1K subs/month to 10K subs/month after implementing their editing strategies." | |
| </p> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full overflow-hidden mr-3"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Client" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <div class="font-bold">Mike T.</div> | |
| <div class="text-sm opacity-80">Finance Channel - 350K subs</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-16 text-center"> | |
| <a href="#portfolio" class="inline-block border-2 border-white text-white px-8 py-3 rounded-full font-bold hover:bg-white hover:bg-opacity-10 transition duration-300"> | |
| See More Case Studies | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Portfolio Section --> | |
| <section id="portfolio" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4 sm:px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="font-display text-4xl md:text-5xl font-bold text-primary mb-4"> | |
| Our <span class="gradient-text">Portfolio</span> | |
| </h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> | |
| See how we've transformed raw footage into high-performing content | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12"> | |
| <div class="portfolio-item rounded-xl overflow-hidden shadow-lg"> | |
| <video class="w-full h-64 md:h-80 object-cover video-hover" muted loop> | |
| <source src="https://assets.mixkit.co/videos/preview/mixkit-man-filming-with-a-professional-camera-43745-large.mp4" type="video/mp4"> | |
| </video> | |
| <div class="portfolio-overlay"> | |
| <h3 class="text-white text-xl font-bold mb-2">Travel Vlog</h3> | |
| <p class="text-white text-center px-4 mb-4">3.5X retention increase</p> | |
| <a href="#" class="text-secondary font-medium">View Case Study →</a> | |
| </div> | |
| </div> | |
| <div class="portfolio-item rounded-xl overflow-hidden shadow-lg"> | |
| <video class="w-full h-64 md:h-80 object-cover video-hover" muted loop> | |
| <source src="https://assets.mixkit.co/videos/preview/mixkit-woman-doing-a-demonstration-of-a-cosmetic-product-43746-large.mp4" type="video/mp4"> | |
| </video> | |
| <div class="portfolio-overlay"> | |
| <h3 class="text-white text-xl font-bold mb-2">Beauty Tutorial</h3> | |
| <p class="text-white text-center px-4 mb-4">2.8X CTR improvement</p> | |
| <a href="#" class="text-secondary font-medium">View Case Study →</a> | |
| </div> | |
| </div> | |
| <div class="portfolio-item rounded-xl overflow-hidden shadow-lg"> | |
| <video class="w-full h-64 md:h-80 object-cover video-hover" muted loop> | |
| <source src="https://assets.mixkit.co/videos/preview/mixkit-man-doing-exercises-with-weights-43747-large.mp4" type="video/mp4"> | |
| </video> | |
| <div class="portfolio-overlay"> | |
| <h3 class="text-white text-xl font-bold mb-2">Fitness Channel</h3> | |
| <p class="text-white text-center px-4 mb-4">4.1X watch time increase</p> | |
| <a href="#" class="text-secondary font-medium">View Case Study →</a> | |
| </div> | |
| </div> | |
| <div class="portfolio-item rounded-xl overflow-hidden shadow-lg"> | |
| <video class="w-full h-64 md:h-80 object-cover video-hover" muted loop> | |
| <source src="https://assets.mixkit.co/videos/preview/mixkit-man-talking-about-a-product-in-a-vlog-43748-large.mp4" type="video/mp4"> | |
| </video> | |
| <div class="portfolio-overlay"> | |
| <h3 class="text-white text-xl font-bold mb-2">Tech Review</h3> | |
| <p class="text-white text-center px-4 mb-4">3.2X conversion lift</p> | |
| <a href="#" class="text-secondary font-medium">View Case Study →</a> | |
| </div> | |
| </div> | |
| <div class="portfolio-item rounded-xl overflow-hidden shadow-lg"> | |
| <video class="w-full h-64 md:h-80 object-cover video-hover" muted loop> | |
| <source src="https://assets.mixkit.co/videos/preview/mixkit-woman-preparing-food-in-a-kitchen-43749-large.mp4" type="video/mp4"> | |
| </video> | |
| <div class="portfolio-overlay"> | |
| <h3 class="text-white text-xl font-bold mb-2">Cooking Show</h3> | |
| <p class="text-white text-center px-4 mb-4">5X sponsorship revenue</p> | |
| <a href="#" class="text-secondary font-medium">View Case Study →</a> | |
| </div> | |
| </div> | |
| <div class="portfolio-item rounded-xl overflow-hidden shadow-lg"> | |
| <video class="w-full h-64 md:h-80 object-cover video-hover" muted loop> | |
| <source src="https://assets.mixkit.co/videos/preview/mixkit-gamer-playing-in-front-of-his-computer-43750-large.mp4" type="video/mp4"> | |
| </video> | |
| <div class="portfolio-overlay"> | |
| <h3 class="text-white text-xl font-bold mb-2">Gaming Channel</h3> | |
| <p class="text-white text-center px-4 mb-4">10X subscriber growth</p> | |
| <a href="#" class="text-secondary font-medium">View Case Study →</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <a href="#" class="inline-block border-2 border-primary text-primary px-8 py-3 rounded-full font-bold hover:bg-primary hover:text-white transition duration-300"> | |
| View Full Portfolio | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Process Section --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4 sm:px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="font-display text-4xl md:text-5xl font-bold text-primary mb-4"> | |
| Our <span class="gradient-text">Proven</span> Process | |
| </h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> | |
| The exact system we use to create high-performing content for our clients | |
| </p> | |
| </div> | |
| <div class="flex flex-col lg:flex-row justify-between items-center mb-12"> | |
| <div class="process-step flex flex-col items-center mb-8 lg:mb-0"> | |
| <div class="w-20 h-20 bg-secondary rounded-full flex items-center justify-center text-primary text-2xl font-bold mb-4 shadow-lg">1</div> | |
| <h3 class="text-xl font-bold text-primary mb-2">Strategy Call</h3> | |
| <p class="text-gray-600 text-center max-w-xs">We analyze your content and growth goals</p> | |
| </div> | |
| <div class="hidden lg:block"> | |
| <lottie-player src="https://assets1.lottiefiles.com/packages/lf20_0s6r2fpe.json" background="transparent" speed="1" style="width: 80px; height: 80px;" loop autoplay></lottie-player> | |
| </div> | |
| <div class="process-step flex flex-col items-center mb-8 lg:mb-0"> | |
| <div class="w-20 h-20 bg-secondary rounded-full flex items-center justify-center text-primary text-2xl font-bold mb-4 shadow-lg">2</div> | |
| <h3 class="text-xl font-bold text-primary mb-2">Content Delivery</h3> | |
| <p class="text-gray-600 text-center max-w-xs">You send us your raw footage and notes</p> | |
| </div> | |
| <div class="hidden lg:block"> | |
| <lottie-player src="https://assets1.lottiefiles.com/packages/lf20_0s6r2fpe.json" background="transparent" speed="1" style="width: 80px; height: 80px;" loop autoplay></lottie-player> | |
| </div> | |
| <div class="process-step flex flex-col items-center mb-8 lg:mb-0"> | |
| <div class="w-20 h-20 bg-secondary rounded-full flex items-center justify-center text-primary text-2xl font-bold mb-4 shadow-lg">3</div> | |
| <h3 class="text-xl font-bold text-primary mb-2">Editing Magic</h3> | |
| <p class="text-gray-600 text-center max-w-xs">We transform your content into a retention machine</p> | |
| </div> | |
| <div class="hidden lg:block"> | |
| <lottie-player src="https://assets1.lottiefiles.com/packages/lf20_0s6r2fpe.json" background="transparent" speed="1" style="width: 80px; height: 80px;" loop autoplay></lottie-player> | |
| </div> | |
| <div class="process-step flex flex-col items-center"> | |
| <div class="w-20 h-20 bg-secondary rounded-full flex items-center justify-center text-primary text-2xl font-bold mb-4 shadow-lg">4</div> | |
| <h3 class="text-xl font-bold text-primary mb-2">Performance Review</h3> | |
| <p class="text-gray-600 text-center max-w-xs">We analyze results and optimize further</p> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-xl p-8 max-w-4xl mx-auto"> | |
| <h3 class="text-2xl font-bold text-primary mb-6">Why 91Editors Outperforms The Competition</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div class="flex items-start"> | |
| <div class="text-secondary text-2xl mr-4 mt-1"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-primary mb-2">Psychological Editing</h4> | |
| <p class="text-gray-600">We use proven psychological principles to keep viewers engaged and clicking.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-secondary text-2xl mr-4 mt-1"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-primary mb-2">Data-Driven Approach</h4> | |
| <p class="text-gray-600">Every edit is backed by performance data from hundreds of videos.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-secondary text-2xl mr-4 mt-1"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-primary mb-2">Lightning Fast</h4> | |
| <p class="text-gray-600">Get your edits back in as little as 24 hours without sacrificing quality.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-secondary text-2xl mr-4 mt-1"> | |
| <i class="fas fa-lock"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-primary mb-2">Proven Framework</h4> | |
| <p class="text-gray-600">We use the exact same editing framework that's generated $100M+ for clients.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section id="testimonials" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4 sm:px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="font-display text-4xl md:text-5xl font-bold text-primary mb-4"> | |
| What <span class="gradient-text">Top Creators</span> Say | |
| </h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> | |
| Don't just take our word for it - hear from creators who've transformed their channels | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="testimonial-card bg-white p-8 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-14 h-14 rounded-full overflow-hidden mr-4"> | |
| <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah J." class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-primary">Sarah J.</h4> | |
| <p class="text-gray-500 text-sm">Travel Vlogger - 1.4M subs</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-4"> | |
| "After switching to 91Editors, my RPM increased by 62% and I landed my first 5-figure sponsorship deal. Their editing is literally printing me money." | |
| </p> | |
| <div class="flex text-secondary"> | |
| <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 class="mt-4 pt-4 border-t border-gray-100"> | |
| <div class="text-sm font-bold text-primary">RESULTS:</div> | |
| <div class="flex justify-between text-sm"> | |
| <span>+3.7X Retention</span> | |
| <span>+62% RPM</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="testimonial-card bg-white p-8 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-14 h-14 rounded-full overflow-hidden mr-4"> | |
| <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Mike T." class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-primary">Mike T.</h4> | |
| <p class="text-gray-500 text-sm">Tech Reviewer - 2.1M subs</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-4"> | |
| "I was skeptical at first, but after seeing my CTR jump from 4% to 11%, I'm a believer. Their editing framework is like having a cheat code for YouTube." | |
| </p> | |
| <div class="flex text-secondary"> | |
| <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 class="mt-4 pt-4 border-t border-gray-100"> | |
| <div class="text-sm font-bold text-primary">RESULTS:</div> | |
| <div class="flex justify-between text-sm"> | |
| <span>+175% CTR</span> | |
| <span>+89% Watch Time</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="testimonial-card bg-white p-8 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-14 h-14 rounded-full overflow-hidden mr-4"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Lisa M." class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-primary">Lisa M.</h4> | |
| <p class="text-gray-500 text-sm">Beauty Creator - 3.8M subs</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-4"> | |
| "I've worked with many editors, but none who understand beauty content like 91Editors. They've helped me land deals with Sephora and L'Oreal." | |
| </p> | |
| <div class="flex text-secondary"> | |
| <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 class="mt-4 pt-4 border-t border-gray-100"> | |
| <div class="text-sm font-bold text-primary">RESULTS:</div> | |
| <div class="flex justify-between text-sm"> | |
| <span>+5X Sponsorships</span> | |
| <span>+3.1M New Subs</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-16 text-center"> | |
| <a href="#" class="inline-block border-2 border-primary text-primary px-8 py-3 rounded-full font-bold hover:bg-primary hover:text-white transition duration-300"> | |
| View More Testimonials | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 bg-gradient-to-br from-primary to-primary-dark text-white"> | |
| <div class="container mx-auto px-4 sm:px-6 text-center"> | |
| <h2 class="font-display text-4xl md:text-5xl font-bold mb-6"> | |
| Ready To <span class="gradient-text">10X Your Results</span>? | |
| </h2> | |
| <p class="text-xl max-w-3xl mx-auto mb-10 opacity-90"> | |
| Join the hundreds of creators who trust 91Editors with their most valuable asset - their content. | |
| </p> | |
| <div class="max-w-2xl mx-auto bg-white/10 backdrop-blur-sm rounded-xl p-8"> | |
| <h3 class="text-2xl font-bold mb-4">Limited Time Offer</h3> | |
| <p class="mb-6 opacity-90"> | |
| Get your first video edited for <span class="font-bold text-secondary">50% OFF</span> when you sign up today | |
| </p> | |
| <a href="#contact" class="inline-block bg-gradient-to-r from-secondary to-accent text-primary px-8 py-4 rounded-full font-bold hover:opacity-90 transition duration-300 text-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 pulse"> | |
| Claim Your Discount Now | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4 sm:px-6"> | |
| <div class="flex flex-col lg:flex-row"> | |
| <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12"> | |
| <h2 class="font-display text-4xl md:text-5xl font-bold text-primary mb-6"> | |
| Let's <span class="gradient-text">Work Together</span> | |
| </h2> | |
| <p class="text-lg text-gray-600 mb-8"> | |
| Fill out the form and we'll get back to you within 24 hours with a custom proposal for your channel. | |
| </p> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="text-secondary text-2xl mr-4 mt-1"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-primary mb-1">Email Us</h4> | |
| <a href="mailto:growth@91editors.com" class="text-gray-600 hover:text-secondary transition duration-300">growth@91editors.com</a> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-secondary text-2xl mr-4 mt-1"> | |
| <i class="fas fa-phone-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-primary mb-1">Call Us</h4> | |
| <a href="tel:+180091EDIT" class="text-gray-600 hover:text-secondary transition duration-300">+1 (800) 91-EDIT</a> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-secondary text-2xl mr-4 mt-1"> | |
| <i class="fas fa-clock"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-primary mb-1">Hours</h4> | |
| <p class="text-gray-600">24/7 Support - We edit while you sleep</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12"> | |
| <h4 class="font-bold text-primary mb-4">Follow Our Work</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-secondary hover:text-white transition duration-300"> | |
| <i class="fab fa-youtube text-xl"></i> | |
| </a> | |
| <a href="#" class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-secondary hover:text-white transition duration-300"> | |
| <i class="fab fa-instagram text-xl"></i> | |
| </a> | |
| <a href="#" class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-secondary hover:text-white transition duration-300"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-secondary hover:text-white transition duration-300"> | |
| <i class="fab fa-linkedin-in text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <form class="bg-gray-50 p-8 rounded-xl shadow-lg"> | |
| <div class="mb-6"> | |
| <label class="block text-primary font-medium mb-2">Your Name</label> | |
| <input type="text" placeholder="John Doe" class="w-full bg-transparent border-b-2 border-gray-300 py-3 px-4 contact-input focus:outline-none"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-primary font-medium mb-2">Your Email</label> | |
| <input type="email" placeholder="john@youtube.com" class="w-full bg-transparent border-b-2 border-gray-300 py-3 px-4 contact-input focus:outline-none"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-primary font-medium mb-2">Channel URL</label> | |
| <input type="text" placeholder="youtube.com/yourchannel" class="w-full bg-transparent border-b-2 border-gray-300 py-3 px-4 contact-input focus:outline-none"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-primary font-medium mb-2">What service are you interested in?</label> | |
| <select class="w-full bg-transparent border-b-2 border-gray-300 py-3 px-4 contact-input focus:outline-none"> | |
| <option value="">Select a package</option> | |
| <option value="growth">Growth Package ($497/video)</option> | |
| <option value="premium">Premium Package ($997/video)</option> | |
| <option value="agency">Agency Package ($4,997/month)</option> | |
| <option value="custom">Custom Project (Get a quote)</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-primary font-medium mb-2">Tell us about your goals</label> | |
| <textarea placeholder="I want to increase my retention and get more sponsorships..." rows="4" class="w-full bg-transparent border-b-2 border-gray-300 py-3 px-4 contact-input focus:outline-none"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-gradient-to-r from-secondary to-accent text-primary py-4 rounded-full font-bold hover:opacity-90 transition duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1"> | |
| Get My Free Strategy Call | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-primary text-white py-12"> | |
| <div class="container mx-auto px-4 sm:px-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <a href="#" class="text-2xl font-bold"> | |
| <span class="text-white">91</span><span class="text-secondary">Editors</span> | |
| </a> | |
| <p class="mt-2 text-white opacity-80"> | |
| Premium video editing for serious creators. | |
| </p> | |
| </div> | |
| <div class="flex flex-col md:flex-row md:space-x-8 space-y-4 md:space-y-0"> | |
| <a href="#home" class="hover:text-secondary transition duration-300">Home</a> | |
| <a href="#services" class="hover:text-secondary transition duration-300">Services</a> | |
| <a href="#portfolio" class="hover:text-secondary transition duration-300">Portfolio</a> | |
| <a href="#results" class="hover:text-secondary transition duration-300">Results</a> | |
| <a href="#contact" class="hover:text-secondary transition duration-300">Contact</a> | |
| </div> | |
| </div> | |
| <div class="border-t border-white/20 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-white opacity-70 mb-4 md:mb-0"> | |
| © 2023 91Editors. All rights reserved. | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-white opacity-70 hover:text-secondary transition duration-300">Privacy Policy</a> | |
| <a href="#" class="text-white opacity-70 hover:text-secondary transition duration-300">Terms of Service</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.NET({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0xf5c445, | |
| backgroundColor: 0xf0f0f, | |
| points: 12.00, | |
| maxDistance: 23.00, | |
| spacing: 18.00 | |
| }); | |
| // Mobile menu toggle | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| const closeMobileMenu = document.getElementById('close-mobile-menu'); | |
| mobileMenuButton.addEventListener('click', function() { | |
| mobileMenu.classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| }); | |
| closeMobileMenu.addEventListener('click', function() { | |
| mobileMenu.classList.add('hidden'); | |
| document.body.style.overflow = ''; | |
| }); | |
| // Auto-play portfolio videos on hover | |
| const portfolioVideos = document.querySelectorAll('.portfolio-item video'); | |
| portfolioVideos.forEach(video => { | |
| video.addEventListener('mouseover', () => { | |
| video.play(); | |
| }); | |
| video.addEventListener('mouseout', () => { | |
| video.pause(); | |
| video.currentTime = 0; | |
| }); | |
| }); | |
| // Smooth scrolling for anchor 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' | |
| }); | |
| // Close mobile menu if open | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| document.body.style.overflow = ''; | |
| } | |
| } | |
| }); | |
| }); | |
| // Animate elements when they come into view | |
| const animateOnScroll = function() { | |
| const elements = document.querySelectorAll('.service-card, .testimonial-card, .portfolio-item, .process-step'); | |
| elements.forEach(element => { | |
| const elementPosition = element.getBoundingClientRect().top; | |
| const windowHeight = window.innerHeight; | |
| if (elementPosition < windowHeight - 100) { | |
| element.style.opacity = '1'; | |
| element.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| }; | |
| // Set initial state | |
| document.querySelectorAll('.service-card, .testimonial-card, .portfolio-item, .process-step').forEach(el => { | |
| el.style.opacity = '0'; | |
| el.style.transform = 'translateY(30px)'; | |
| el.style.transition = 'all 0.6s cubic-bezier(0.16, 1, 0.3, 1)'; | |
| }); | |
| // Run once on load | |
| animateOnScroll(); | |
| // Run on scroll | |
| window.addEventListener('scroll', animateOnScroll); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=gsfdfd/91a" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |