Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AgileHost - Premium Web Hosting Solutions</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --primary-color: #4F46E5; | |
| --primary-dark: #4338CA; | |
| --secondary-color: #06B6D4; | |
| --text-dark: #1F2937; | |
| --text-light: #6B7280; | |
| --bg-light: #F9FAFB; | |
| --bg-white: #FFFFFF; | |
| --border-color: #E5E7EB; | |
| --success-color: #10B981; | |
| --warning-color: #F59E0B; | |
| --gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| --gradient-2: linear-gradient(135deg, #06B6D4 0%, #3B82F6 100%); | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; | |
| line-height: 1.6; | |
| color: var(--text-dark); | |
| overflow-x: hidden; | |
| } | |
| /* Header Styles */ | |
| header { | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(10px); | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); | |
| z-index: 1000; | |
| transition: all 0.3s ease; | |
| } | |
| nav { | |
| max-width: 1280px; | |
| margin: 0 auto; | |
| padding: 1rem 2rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| color: var(--primary-color); | |
| text-decoration: none; | |
| transition: transform 0.3s ease; | |
| } | |
| .logo:hover { | |
| transform: scale(1.05); | |
| } | |
| .logo i { | |
| margin-right: 0.5rem; | |
| font-size: 1.8rem; | |
| } | |
| .nav-links { | |
| display: flex; | |
| list-style: none; | |
| gap: 2rem; | |
| align-items: center; | |
| } | |
| .nav-links a { | |
| color: var(--text-dark); | |
| text-decoration: none; | |
| font-weight: 500; | |
| transition: color 0.3s ease; | |
| position: relative; | |
| } | |
| .nav-links a::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: var(--primary-color); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-links a:hover::after { | |
| width: 100%; | |
| } | |
| .nav-links a:hover { | |
| color: var(--primary-color); | |
| } | |
| .cta-button { | |
| background: var(--gradient-2); | |
| color: white; | |
| padding: 0.75rem 1.5rem; | |
| border-radius: 50px; | |
| text-decoration: none; | |
| font-weight: 600; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 15px rgba(6, 182, 212, 0.3); | |
| } | |
| .cta-button:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 20px rgba(6, 182, 212, 0.4); | |
| } | |
| .mobile-menu-toggle { | |
| display: none; | |
| flex-direction: column; | |
| cursor: pointer; | |
| } | |
| .mobile-menu-toggle span { | |
| width: 25px; | |
| height: 3px; | |
| background: var(--text-dark); | |
| margin: 3px 0; | |
| transition: 0.3s; | |
| border-radius: 3px; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| margin-top: 80px; | |
| padding: 5rem 2rem; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff20" fill-opacity="1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom; | |
| background-size: cover; | |
| } | |
| .hero-content { | |
| max-width: 1280px; | |
| margin: 0 auto; | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 4rem; | |
| align-items: center; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .hero-text h1 { | |
| font-size: 3.5rem; | |
| color: white; | |
| margin-bottom: 1.5rem; | |
| line-height: 1.2; | |
| animation: fadeInUp 0.8s ease; | |
| } | |
| .hero-text p { | |
| font-size: 1.25rem; | |
| color: rgba(255, 255, 255, 0.9); | |
| margin-bottom: 2rem; | |
| animation: fadeInUp 0.8s ease 0.2s both; | |
| } | |
| .hero-buttons { | |
| display: flex; | |
| gap: 1rem; | |
| animation: fadeInUp 0.8s ease 0.4s both; | |
| } | |
| .btn-primary, .btn-secondary { | |
| padding: 1rem 2rem; | |
| border-radius: 50px; | |
| text-decoration: none; | |
| font-weight: 600; | |
| transition: all 0.3s ease; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .btn-primary { | |
| background: white; | |
| color: var(--primary-color); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); | |
| } | |
| .btn-secondary { | |
| background: transparent; | |
| color: white; | |
| border: 2px solid white; | |
| } | |
| .btn-secondary:hover { | |
| background: white; | |
| color: var(--primary-color); | |
| } | |
| .hero-image { | |
| position: relative; | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| .hero-image img { | |
| width: 100%; | |
| height: auto; | |
| border-radius: 20px; | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); | |
| } | |
| /* Features Section */ | |
| .features { | |
| padding: 5rem 2rem; | |
| background: var(--bg-light); | |
| } | |
| .container { | |
| max-width: 1280px; | |
| margin: 0 auto; | |
| } | |
| .section-title { | |
| text-align: center; | |
| margin-bottom: 3rem; | |
| } | |
| .section-title h2 { | |
| font-size: 2.5rem; | |
| color: var(--text-dark); | |
| margin-bottom: 1rem; | |
| } | |
| .section-title p { | |
| font-size: 1.125rem; | |
| color: var(--text-light); | |
| } | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .feature-card { | |
| background: white; | |
| padding: 2rem; | |
| border-radius: 15px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07); | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .feature-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 4px; | |
| background: var(--gradient-2); | |
| transform: scaleX(0); | |
| transition: transform 0.3s ease; | |
| } | |
| .feature-card:hover::before { | |
| transform: scaleX(1); | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .feature-icon { | |
| width: 60px; | |
| height: 60px; | |
| background: var(--gradient-2); | |
| border-radius: 15px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 1.5rem; | |
| font-size: 1.5rem; | |
| color: white; | |
| } | |
| .feature-card h3 { | |
| font-size: 1.25rem; | |
| margin-bottom: 1rem; | |
| color: var(--text-dark); | |
| } | |
| .feature-card p { | |
| color: var(--text-light); | |
| line-height: 1.6; | |
| } | |
| /* Pricing Section */ | |
| .pricing { | |
| padding: 5rem 2rem; | |
| background: white; | |
| } | |
| .pricing-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 2rem; | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| } | |
| .pricing-card { | |
| background: white; | |
| border: 2px solid var(--border-color); | |
| border-radius: 15px; | |
| padding: 2rem; | |
| text-align: center; | |
| position: relative; | |
| transition: all 0.3s ease; | |
| } | |
| .pricing-card.featured { | |
| border-color: var(--primary-color); | |
| transform: scale(1.05); | |
| box-shadow: 0 10px 30px rgba(79, 70, 229, 0.2); | |
| } | |
| .pricing-card.featured::before { | |
| content: 'MOST POPULAR'; | |
| position: absolute; | |
| top: -12px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: var(--gradient-2); | |
| color: white; | |
| padding: 0.25rem 1rem; | |
| border-radius: 20px; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| } | |
| .pricing-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .pricing-card.featured:hover { | |
| transform: scale(1.05) translateY(-5px); | |
| } | |
| .plan-name { | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| margin-bottom: 1rem; | |
| color: var(--text-dark); | |
| } | |
| .plan-price { | |
| font-size: 3rem; | |
| font-weight: bold; | |
| color: var(--primary-color); | |
| margin-bottom: 0.5rem; | |
| } | |
| .plan-price span { | |
| font-size: 1rem; | |
| color: var(--text-light); | |
| } | |
| .plan-features { | |
| list-style: none; | |
| margin: 2rem 0; | |
| } | |
| .plan-features li { | |
| padding: 0.75rem 0; | |
| color: var(--text-light); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| } | |
| .plan-features li i { | |
| color: var(--success-color); | |
| } | |
| /* Stats Section */ | |
| .stats { | |
| padding: 3rem 2rem; | |
| background: var(--gradient-1); | |
| color: white; | |
| } | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 2rem; | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| text-align: center; | |
| } | |
| .stat-item h3 { | |
| font-size: 2.5rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .stat-item p { | |
| font-size: 1.125rem; | |
| opacity: 0.9; | |
| } | |
| /* FAQ Section */ | |
| .faq { | |
| padding: 5rem 2rem; | |
| background: var(--bg-light); | |
| } | |
| .faq-container { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .faq-item { | |
| background: white; | |
| border-radius: 10px; | |
| margin-bottom: 1rem; | |
| overflow: hidden; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); | |
| } | |
| .faq-question { | |
| padding: 1.5rem; | |
| cursor: pointer; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| font-weight: 600; | |
| color: var(--text-dark); | |
| transition: background 0.3s ease; | |
| } | |
| .faq-question:hover { | |
| background: var(--bg-light); | |
| } | |
| .faq-question i { | |
| transition: transform 0.3s ease; | |
| } | |
| .faq-item.active .faq-question i { | |
| transform: rotate(180deg); | |
| } | |
| .faq-answer { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease; | |
| padding: 0 1.5rem; | |
| } | |
| .faq-item.active .faq-answer { | |
| max-height: 300px; | |
| padding: 0 1.5rem 1.5rem; | |
| } | |
| /* Footer */ | |
| footer { | |
| background: var(--text-dark); | |
| color: white; | |
| padding: 3rem 2rem 1rem; | |
| } | |
| .footer-content { | |
| max-width: 1280px; | |
| margin: 0 auto; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .footer-section h3 { | |
| margin-bottom: 1rem; | |
| color: white; | |
| } | |
| .footer-section ul { | |
| list-style: none; | |
| } | |
| .footer-section ul li { | |
| margin-bottom: 0.5rem; | |
| } | |
| .footer-section a { | |
| color: rgba(255, 255, 255, 0.7); | |
| text-decoration: none; | |
| transition: color 0.3s ease; | |
| } | |
| .footer-section a:hover { | |
| color: white; | |
| } | |
| .social-links { | |
| display: flex; | |
| gap: 1rem; | |
| margin-top: 1rem; | |
| } | |
| .social-links a { | |
| width: 40px; | |
| height: 40px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.3s ease; | |
| } | |
| .social-links a:hover { | |
| background: var(--primary-color); | |
| transform: translateY(-3px); | |
| } | |
| .footer-bottom { | |
| text-align: center; | |
| padding-top: 2rem; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| color: rgba(255, 255, 255, 0.7); | |
| } | |
| /* Animations */ | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translateY(0); | |
| } | |
| 50% { | |
| transform: translateY(-20px); | |
| } | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .nav-links { | |
| display: none; | |
| position: absolute; | |
| top: 100%; | |
| left: 0; | |
| right: 0; | |
| background: white; | |
| flex-direction: column; | |
| padding: 2rem; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .nav-links.active { | |
| display: flex; | |
| } | |
| .mobile-menu-toggle { | |
| display: flex; | |
| } | |
| .hero-content { | |
| grid-template-columns: 1fr; | |
| text-align: center; | |
| } | |
| .hero-text h1 { | |
| font-size: 2.5rem; | |
| } | |
| .hero-buttons { | |
| justify-content: center; | |
| } | |
| .hero-image { | |
| display: none; | |
| } | |
| .pricing-card.featured { | |
| transform: scale(1); | |
| } | |
| } | |
| /* Loading Animation */ | |
| .loader { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: white; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 9999; | |
| transition: opacity 0.5s ease; | |
| } | |
| .loader.hidden { | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .loader-spinner { | |
| width: 50px; | |
| height: 50px; | |
| border: 4px solid var(--border-color); | |
| border-top: 4px solid var(--primary-color); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| /* Notification Toast */ | |
| .toast { | |
| position: fixed; | |
| bottom: -100px; | |
| right: 20px; | |
| background: var(--success-color); | |
| color: white; | |
| padding: 1rem 2rem; | |
| border-radius: 10px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| transition: bottom 0.3s ease; | |
| z-index: 1000; | |
| } | |
| .toast.show { | |
| bottom: 20px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Loader --> | |
| <div class="loader" id="loader"> | |
| <div class="loader-spinner"></div> | |
| </div> | |
| <!-- Header --> | |
| <header id="header"> | |
| <nav> | |
| <a href="#" class="logo"> | |
| <i class="fas fa-server"></i> | |
| AgileHost | |
| </a> | |
| <ul class="nav-links" id="navLinks"> | |
| <li><a href="#home">Home</a></li> | |
| <li><a href="#features">Features</a></li> | |
| <li><a href="#pricing">Pricing</a></li> | |
| <li><a href="#about">About</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| <li><a href="#" class="cta-button">Get Started</a></li> | |
| </ul> | |
| <div class="mobile-menu-toggle" id="mobileMenuToggle"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| </nav> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero" id="home"> | |
| <div class="hero-content"> | |
| <div class="hero-text"> | |
| <h1>Lightning Fast Web Hosting That Grows With You</h1> | |
| <p>Experience unparalleled performance, 99.9% uptime guarantee, and 24/7 expert support. Launch your website in minutes with our powerful hosting solutions.</p> | |
| <div class="hero-buttons"> | |
| <a href="#pricing" class="btn-primary"> | |
| <i class="fas fa-rocket"></i> | |
| Start Free Trial | |
| </a> | |
| <a href="#features" class="btn-secondary"> | |
| <i class="fas fa-play-circle"></i> | |
| Watch Demo | |
| </a> | |
| </div> | |
| </div> | |
| <div class="hero-image"> | |
| <img src="https://picsum.photos/seed/hosting/600/400" alt="Web Hosting"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="features" id="features"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>Why Choose AgileHost?</h2> | |
| <p>Everything you need to succeed online, backed by industry-leading technology</p> | |
| </div> | |
| <div class="features-grid"> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-tachometer-alt"></i> | |
| </div> | |
| <h3>Blazing Fast Speed</h3> | |
| <p>NVMe SSD storage, LiteSpeed web server, and global CDN ensure your website loads in milliseconds.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <h3>Enterprise Security</h3> | |
| <p>Free SSL certificates, DDoS protection, daily backups, and advanced firewall keep your site secure.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-headset"></i> | |
| </div> | |
| <h3>24/7 Expert Support</h3> | |
| <p>Our team of hosting experts is available round the clock via live chat, phone, and ticket system.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <h3>99.9% Uptime Guarantee</h3> | |
| <p>Reliable infrastructure with redundant systems ensures your website is always online.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-expand-arrows-alt"></i> | |
| </div> | |
| <h3>Scalable Resources</h3> | |
| <p>Easily upgrade your hosting plan as your website grows without any downtime.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-magic"></i> | |
| </div> | |
| <h3>One-Click Installs</h3> | |
| <p>Install WordPress, Joomla, Magento, and 400+ apps with just a single click.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="stats"> | |
| <div class="stats-grid"> | |
| <div class="stat-item"> | |
| <h3 data-counter="50000">0</h3> | |
| <p>Happy Customers</p> | |
| </div> | |
| <div class="stat-item"> | |
| <h3 data-counter="99">0</h3> | |
| <p>% Uptime</p> | |
| </div> | |
| <div class="stat-item"> | |
| <h3 data-counter="24">0</h3> | |
| <p>/7 Support</p> | |
| </div> | |
| <div class="stat-item"> | |
| <h3 data-counter="150">0</h3> | |
| <p>+ Countries</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section class="pricing" id="pricing"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>Choose Your Perfect Plan</h2> | |
| <p>Flexible pricing options for businesses of all sizes</p> | |
| </div> | |
| <div class="pricing-grid"> | |
| <div class="pricing-card"> | |
| <h3 class="plan-name">Starter</h3> | |
| <div class="plan-price">$3.99<span>/month</span></div> | |
| <p>Perfect for small websites and blogs</p> | |
| <ul class="plan-features"> | |
| <li><i class="fas fa-check"></i> 1 Website</li> | |
| <li><i class="fas fa-check"></i> 10 GB SSD Storage</li> | |
| <li><i class="fas fa-check"></i> 100 GB Bandwidth</li> | |
| <li><i class="fas fa-check"></i> Free SSL Certificate</li> | |
| <li><i class="fas fa-check"></i> 24/7 Support</li> | |
| </ul> | |
| <a href="#" class="cta-button" onclick="showToast('Starter plan selected!')">Get Started</a> | |
| </div> | |
| <div class="pricing-card featured"> | |
| <h3 class="plan-name">Professional</h3> | |
| <div class="plan-price">$8.99<span>/month</span></div> | |
| <p>Ideal for growing businesses</p> | |
| <ul class="plan-features"> | |
| <li><i class="fas fa-check"></i> 5 Websites</li> | |
| <li><i class="fas fa-check"></i> 50 GB SSD Storage</li> | |
| <li><i class="fas fa-check"></i> 500 GB Bandwidth</li> | |
| <li><i class="fas fa-check"></i> Free SSL & Domain</li> | |
| <li><i class="fas fa-check"></i> Priority Support</li> | |
| <li><i class="fas fa-check"></i> Daily Backups</li> | |
| </ul> | |
| <a href="#" class="cta-button" onclick="showToast('Professional plan selected!')">Get Started</a> | |
| </div> | |
| <div class="pricing-card"> | |
| <h3 class="plan-name">Business</h3> | |
| <div class="plan-price">$15.99<span>/month</span></div> | |
| <p>Maximum performance for enterprises</p> | |
| <ul class="plan-features"> | |
| <li><i class="fas fa-check"></i> Unlimited Websites</li> | |
| <li><i class="fas fa-check"></i> 200 GB SSD Storage</li> | |
| <li><i class="fas fa-check"></i> Unlimited Bandwidth</li> | |
| <li><i class="fas fa-check"></i> Free SSL & Domain</li> | |
| <li><i class="fas fa-check"></i> Dedicated Support</li> | |
| <li><i class="fas fa-check"></i> Advanced Security</li> | |
| </ul> | |
| <a href="#" class="cta-button" onclick="showToast('Business plan selected!')">Get Started</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section class="faq"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>Frequently Asked Questions</h2> | |
| <p>Everything you need to know about our hosting services</p> | |
| </div> | |
| <div class="faq-container"> | |
| <div class="faq-item"> | |
| <div class="faq-question"> | |
| <span>What is web hosting?</span> | |
| <i class="fas fa-chevron-down"></i> | |
| </div> | |
| <div class="faq-answer"> | |
| <p>Web hosting is a service that allows individuals and organizations to make their website accessible via the World Wide Web. We provide the technology and server space needed for your website to be viewed online.</p> | |
| </div> | |
| </div> | |
| <div class="faq-item"> | |
| <div class="faq-question"> | |
| <span>Do you offer a money-back guarantee?</span> | |
| <i class="fas fa-chevron-down"></i> | |
| </div> | |
| <div class="faq-answer"> | |
| <p>Yes! We offer a 30-day money-back guarantee. If you're not satisfied with our service within the first 30 days, we'll provide a full refund, no questions asked.</p> | |
| </div> | |
| </div> | |
| <div class="faq-item"> | |
| <div class="faq-question"> | |
| <span>Can I upgrade my plan later?</span> | |
| <i class="fas fa-chevron-down"></i> | |
| </div> | |
| <div class="faq-answer"> | |
| <p>Absolutely! You can upgrade your hosting plan at any time from your client dashboard. The upgrade process is instant and requires no downtime.</p> | |
| </div> | |
| </div> | |
| <div class="faq-item"> | |
| <div class="faq-question"> | |
| <span>What kind of support do you provide?</span> | |
| <i class="fas fa-chevron-down"></i> | |
| </div> | |
| <div class="faq-answer"> | |
| <p>We provide 24/7 customer support via live chat, email, and phone. Our support team consists of hosting experts who can help you with any technical issues.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer id="contact"> | |
| <div class="footer-content"> | |
| <div class="footer-section"> | |
| <h3>AgileHost</h3> | |
| <p>Your trusted partner for reliable web hosting solutions. Fast, secure, and always online.</p> | |
| <div class="social-links"> | |
| <a href="#"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#"><i class="fab fa-twitter"></i></a> | |
| <a href="#"><i class="fab fa-linkedin-in"></i></a> | |
| <a href="#"><i class="fab fa-instagram"></i></a> | |
| </div> | |
| </div> | |
| <div class="footer-section"> | |
| <h3>Services</h3> | |
| <ul> | |
| <li><a href="#">Shared Hosting</a></li> | |
| <li><a href="#">VPS Hosting</a></li> | |
| <li><a href="#">Dedicated Servers</a></li> | |
| <li><a href="#">Domain Registration</a></li> | |
| <li><a href="#">SSL Certificates</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-section"> | |
| <h3>Company</h3> | |
| <ul> | |
| <li><a href="#">About Us</a></li> | |
| <li><a href="#">Contact</a></li> | |
| <li><a href="#">Blog</a></li> | |
| <li><a href="#">Careers</a></li> | |
| <li><a href="#">Partners</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-section"> | |
| <h3>Support</h3> | |
| <ul> | |
| <li><a href="#">Help Center</a></li> | |
| <li><a href="#">Documentation</a></li> | |
| <li><a href="#">API Reference</a></li> | |
| <li><a href="#">Community</a></li> | |
| <li><a href="#">Status Page</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <p>© 2024 AgileHost. Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>. All rights reserved.</p> | |
| </div> | |
| </footer> | |
| <!-- Toast Notification --> | |
| <div class="toast" id="toast"></div> | |
| <script> | |
| // Loader | |
| window.addEventListener('load', () => { | |
| setTimeout(() => { | |
| document.getElementById('loader').classList.add('hidden'); | |
| }, 1000); | |
| }); | |
| // Mobile Menu Toggle | |
| const mobileMenuToggle = document.getElementById('mobileMenuToggle'); | |
| const navLinks = document.getElementById('navLinks'); | |
| mobileMenuToggle.addEventListener('click', () => { | |
| navLinks.classList.toggle('active'); | |
| // Animate hamburger menu | |
| const spans = mobileMenuToggle.querySelectorAll('span'); | |
| if (navLinks.classList.contains('active')) { | |
| spans[0].style.transform = 'rotate(45deg) translateY(8px)'; | |
| spans[1].style.opacity = '0'; | |
| spans[2].style.transform = 'rotate(-45deg) translateY(-8px)'; | |
| } else { | |
| spans[0].style.transform = ''; | |
| spans[1].style.opacity = '1'; | |
| spans[2].style.transform = ''; | |
| } | |
| }); | |
| // Smooth Scrolling | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ | |
| behavior: 'smooth', | |
| block: 'start' | |
| }); | |
| // Close mobile menu if open | |
| navLinks.classList.remove('active'); | |
| } | |
| }); | |
| }); | |
| // Header Scroll Effect | |
| let lastScroll = 0; | |
| window.addEventListener('scroll', () => { | |
| const header = document.getElementById('header'); | |
| const currentScroll = window.pageYOffset; | |
| if (currentScroll > 100) { | |
| header.style.background = 'rgba(255, 255, 255, 0.98)'; | |
| header.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)'; | |
| } else { | |
| header.style.background = 'rgba(255, 255, 255, 0.95)'; | |
| header.style.boxShadow = '0 1px 3px rgba(0, 0, 0, 0.1)'; | |
| } | |
| lastScroll = currentScroll; | |
| }); | |
| // FAQ Accordion | |
| document.querySelectorAll('.faq-question').forEach(question => { | |
| question.addEventListener('click', () => { | |
| const faqItem = question.parentElement; | |
| const currentlyActive = document.querySelector('.faq-item.active'); | |
| if (currentlyActive && currentlyActive !== faqItem) { | |
| currentlyActive.classList.remove('active'); | |
| } | |
| faqItem.classList.toggle('active'); | |
| }); | |
| }); | |
| // Counter Animation | |
| const counters = document.querySelectorAll('[data-counter]'); | |
| const speed = 200; | |
| const countUp = () => { | |
| counters.forEach(counter => { | |
| const target = +counter.getAttribute('data-counter'); | |
| const count = +counter.innerText; | |
| const inc = target / speed; | |
| if (count < target) { | |
| counter.innerText = Math.ceil(count + inc); | |
| setTimeout(countUp, 1); | |
| } else { | |
| counter.innerText = target; | |
| } | |
| }); | |
| }; | |
| // Intersection Observer for animations | |
| const observerOptions = { | |
| threshold: 0.1, | |
| rootMargin: '0px 0px -100px 0px' | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.animation = 'fadeInUp 0.8s ease forwards'; | |
| // Start counter animation when stats section is visible | |
| if (entry.target.classList.contains('stats-grid')) { | |
| countUp(); | |
| observer.unobserve(entry.target); | |
| } | |
| } | |
| }); | |
| }, |