Spaces:
Running
Running
| Here's the complete HTML file with the "Why Choose YouCantSeeMeVPN?" section added below the hero section: | |
| ```html | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>YouCantSeeMeVPN - Bypass Adult Content Restrictions</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #111; | |
| color: white; | |
| } | |
| h1, h2, h3, h4 { | |
| font-family: 'Montserrat', sans-serif; | |
| } | |
| .logo { | |
| font-weight: 900; | |
| } | |
| .logo-vpn { | |
| background-color: #f8981d; | |
| color: #111; | |
| padding: 0 8px; | |
| border-radius: 4px; | |
| font-weight: 700; | |
| } | |
| .hero-bg { | |
| background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1563986768609-322da13575f3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); | |
| } | |
| .feature-icon { | |
| font-size: 2.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .modal { | |
| transition: opacity 0.3s ease, visibility 0.3s ease; | |
| } | |
| .modal-content { | |
| transform: translateY(20px); | |
| transition: transform 0.3s ease; | |
| } | |
| .modal.active { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .modal.active .modal-content { | |
| transform: translateY(0); | |
| } | |
| .accordion-content { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease; | |
| } | |
| .accordion.active .accordion-content { | |
| max-height: 300px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Sticky Navbar --> | |
| <nav class="sticky top-0 z-50 bg-black/80 backdrop-blur-sm border-b border-gray-800"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-8"> | |
| <a href="#" class="text-white text-2xl font-bold logo"> | |
| YouCantSee<span class="logo-vpn">VPN</span> | |
| </a> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="#features" class="text-gray-300 hover:text-white transition">Features</a> | |
| <a href="#pricing" class="text-gray-300 hover:text-white transition">Pricing</a> | |
| <a href="#faq" class="text-gray-300 hover:text-white transition">FAQ</a> | |
| <a href="#contact" class="text-gray-300 hover:text-white transition">Contact</a> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button id="loginBtn" class="text-gray-300 hover:text-white transition">Login</button> | |
| <button id="signupBtn" class="bg-[#f8981d] hover:bg-[#e68a17] text-black font-bold py-2 px-4 rounded transition"> | |
| Sign Up | |
| </button> | |
| <button class="md:hidden text-white"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero-bg min-h-[70vh] flex items-center"> | |
| <div class="container mx-auto px-4 py-20"> | |
| <div class="max-w-3xl"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6"> | |
| Trouble Accessing Adult Sites? | |
| </h1> | |
| <p class="text-xl md:text-2xl text-gray-300 mb-8"> | |
| Alabama and other states are blocking |