| <!DOCTYPE html> |
| <html lang="en" class="dark"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>CloudNimbus Hosting Haven | Premium Web Hosting Solutions</title> |
| <link rel="icon" type="image/x-icon" href="https://www.turnpage.io/assets/img/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script> |
| tailwind.config = { |
| darkMode: 'class', |
| theme: { |
| extend: { |
| colors: { |
| primary: '#6366f1', |
| secondary: '#10b981', |
| dark: { |
| 900: '#0f172a', |
| 800: '#1e293b', |
| 700: '#334155', |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
| body { |
| font-family: 'Inter', sans-serif; |
| } |
| .gradient-text { |
| background: linear-gradient(90deg, #6366f1, #10b981); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| } |
| .hero-gradient { |
| background: radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.1) 0%, rgba(16, 185, 129, 0.1) 90%); |
| } |
| .card-hover:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1); |
| } |
| .testimonial-card { |
| background: linear-gradient(145deg, #1e293b, #0f172a); |
| border: 1px solid #334155; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-900 text-gray-200"> |
| |
| <nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex items-center justify-between h-16"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0"> |
| <img class="h-8" src="https://www.turnpage.io/assets/img/logo-dark.png" alt="CloudNimbus Logo"> |
| </div> |
| <div class="hidden md:block"> |
| <div class="ml-10 flex items-baseline space-x-4"> |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium bg-primary text-white">Home</a> |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Hosting</a> |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Domains</a> |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Servers</a> |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Company</a> |
| </div> |
| </div> |
| </div> |
| <div class="hidden md:block"> |
| <div class="ml-4 flex items-center md:ml-6"> |
| <button class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none"> |
| <i data-feather="moon"></i> |
| </button> |
| <a href="#" class="ml-4 px-4 py-2 rounded-md text-sm font-medium text-white bg-secondary hover:bg-green-600">Sign In</a> |
| </div> |
| </div> |
| <div class="-mr-2 flex md:hidden"> |
| <button type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false"> |
| <i data-feather="menu"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section class="hero-gradient py-20"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center"> |
| <div class="mb-12 lg:mb-0"> |
| <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6"> |
| Elevate Your Business With |
| <span class="gradient-text">Expert Hosting</span> |
| </h1> |
| <p class="text-lg text-gray-300 mb-8"> |
| Lightning-fast hosting solutions with 99.9% uptime guarantee and 24/7 expert support. Perfect for businesses of all sizes. |
| </p> |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
| <a href="#" class="px-6 py-3 bg-primary hover:bg-indigo-700 text-white font-medium rounded-md transition duration-300 text-center"> |
| Get Started |
| </a> |
| <a href="#" class="px-6 py-3 border border-gray-600 hover:border-gray-500 text-white font-medium rounded-md transition duration-300 text-center"> |
| Learn More |
| </a> |
| </div> |
| </div> |
| <div class="relative"> |
| <img src="https://www.turnpage.io/assets/img/hero-2-img-2.png" alt="Hosting Illustration" class="w-full rounded-lg shadow-xl"> |
| <div class="absolute -bottom-8 -left-8 w-32 h-32 bg-primary rounded-full opacity-20"></div> |
| <div class="absolute -top-8 -right-8 w-24 h-24 bg-secondary rounded-full opacity-20"></div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-gray-800"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold mb-4">Comprehensive Hosting Solutions</h2> |
| <p class="text-lg text-gray-300 max-w-3xl mx-auto"> |
| Everything you need for a successful online presence. Our solutions are tailored for performance, security, and ease of use. |
| </p> |
| </div> |
| <div class="grid md:grid-cols-3 gap-8"> |
| |
| <div class="bg-gray-700 rounded-xl p-8 transition duration-300 card-hover"> |
| <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-6"> |
| <i data-feather="zap" class="text-primary w-6 h-6"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Blazing Fast Speed</h3> |
| <p class="text-gray-300"> |
| Experience lightning-fast loading times with our optimized servers, SSD storage, and advanced caching. |
| </p> |
| </div> |
| |
| <div class="bg-gray-700 rounded-xl p-8 transition duration-300 card-hover"> |
| <div class="w-14 h-14 bg-secondary bg-opacity-10 rounded-lg flex items-center justify-center mb-6"> |
| <i data-feather="shield" class="text-secondary w-6 h-6"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Enhanced Security</h3> |
| <p class="text-gray-300"> |
| Robust security measures including DDoS protection, firewalls, and malware scanning to keep your site safe. |
| </p> |
| </div> |
| |
| <div class="bg-gray-700 rounded-xl p-8 transition duration-300 card-hover"> |
| <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-6"> |
| <i data-feather="clock" class="text-primary w-6 h-6"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">99.9% Uptime</h3> |
| <p class="text-gray-300"> |
| We guarantee maximum uptime for your website, backed by our robust infrastructure and comprehensive SLA. |
| </p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-gray-900 relative overflow-hidden"> |
| <div class="absolute -right-32 -top-32 w-64 h-64 bg-primary rounded-full opacity-10"></div> |
| <div class="absolute -left-32 -bottom-32 w-64 h-64 bg-secondary rounded-full opacity-10"></div> |
| |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold mb-4">Choose Your Ideal Hosting Plan</h2> |
| <p class="text-lg text-gray-300 max-w-3xl mx-auto"> |
| Select from our range of hosting plans, each designed to provide optimal performance for your needs. |
| </p> |
| </div> |
| |
| <div class="grid md:grid-cols-4 gap-6"> |
| |
| <div class="bg-gray-800 rounded-xl p-6 border border-gray-700 transition duration-300 card-hover"> |
| <div class="mb-6"> |
| <h3 class="text-lg font-semibold mb-2">Starter Hosting</h3> |
| <p class="text-sm text-gray-400">Perfect for new websites and small businesses</p> |
| </div> |
| <div class="mb-6"> |
| <span class="text-gray-400">Starting at</span> |
| <div class="flex items-end"> |
| <span class="text-3xl font-bold">$2.49</span> |
| <span class="text-gray-400 ml-1">/mo</span> |
| </div> |
| <span class="text-xs text-gray-400">For 48-month term</span> |
| </div> |
| <ul class="space-y-3 mb-8"> |
| <li class="flex items-center"> |
| <i data-feather="check" class="w-4 h-4 text-secondary mr-2"></i> |
| <span>1 Website</span> |
| </li> |
| <li class="flex items-center"> |
| <i data-feather="check" class="w-4 h-4 text-secondary mr-2"></i> |
| <span>10GB SSD Storage</span> |
| </li> |
| <li class="flex items-center"> |
| <i data-feather="check" class="w-4 h-4 text-secondary mr-2"></i> |
| <span>Unmetered Bandwidth</span> |
| </li> |
| <li class="flex items-center"> |
| <i data-feather="check" class="w-4 h-4 text-secondary mr-2"></i> |
| <span>Free SSL Certificate</span> |
| </li> |
| </ul> |
| <a href="#" class="block w-full py-2 px-4 text-center bg-primary hover:bg-indigo-700 rounded-md transition duration-300">Get Started</a> |
| </div> |
| |
| |
| <div class="bg-gray-800 rounded-xl p-6 border-2 border-primary transition duration-300 card-hover transform scale-105 relative"> |
| <div class="absolute top-0 right-0 bg-primary text-white text-xs font-bold px-2 py-1 rounded-bl rounded-tr"> |
| POPULAR |
| </div> |
| <div class="mb-6"> |
| <h3 class="text-lg font-semibold mb-2">Business Hosting</h3> |
| <p class="text-sm text-gray-400">High-performance for growing businesses</p> |
| </div> |
| <div class="mb-6"> |
| <span class="text-gray-400">Starting at</span> |
| <div class="flex items-end"> |
| <span class="text-3xl font-bold">$4.99</span> |
| <span class="text-gray-400 ml-1">/mo</span> |
| </div> |
| <span class="text-xs text-gray-400">For 48-month term</span> |
| </div> |
| <ul class="space-y-3 mb-8"> |
| <li class="flex items-center"> |
| <i data-feather="check" class="w-4 h-4 text-secondary mr-2"></i> |
| <span>Unlimited Websites</span> |
| </li> |
| <li class="flex items-center"> |
| <i data-feather="check" class="w-4 h-4 text-secondary mr-2"></i> |
| <span>100GB SSD Storage</span> |
| </li> |
| <li class="flex items-center"> |
| <i data-feather="check" class="w-4 h-4 text-secondary mr-2"></i> |
| <span>Unmetered Bandwidth</span> |
| </li> |
| <li class="flex items-center"> |
| <i data-feather="check" class="w-4 h-4 text-secondary mr-2"></i> |
| <span>Free SSL Certificate</span> |
| </li> |
| <li class="flex items-center"> |
| <i data-feather="check" class="w-4 h-4 text-secondary mr-2"></i> |
| <span>Free Domain (1 year)</span> |
| </li> |
| </ul> |
| <a href="#" class="block w-full py-2 px-4 text-center bg-primary hover:bg-indigo-700 rounded-md transition duration-300">Get Started</a> |
| </div> |
| |
| |
| <div class="bg-gray-800 rounded-xl p-6 border border-gray-700 transition duration-300 card-hover"> |
| <div class="mb-6"> |
| <h3 class="text-lg font-semibold mb-2">VPS Hosting</h3> |
| <p class="text-sm text-gray-400">Flexible and powerful virtual servers</p> |
| </div> |
| <div class="mb-6"> |
| <span class="text-gray-400">Starting at</span> |
| <div class="flex items-end"> |
| <span class="text-3xl font-bold">$19.99</span> |
| <span class="text-gray-400 ml-1">/mo</span> |
| </div> |
| <span class="text-xs text-gray-400">For 12-month term</span> |
| </div> |
| <ul class="space-y-3 mb-8"> |
| <li class="flex items-center"> |
| <i data-feather="check" class="w-4 h-4 text-secondary mr-2"></i> |
| <span>2 vCPU Cores</span> |
| </li> |
| <li class="flex items-center"> |
| <i data-feather="check" class="w-4 h-4 text-secondary mr-2"></i> |
| <span>4GB RAM</span> |
| </li> |
| <li class="flex items-center"> |
| <i data-feather="check" class="w-4 h-4 text-secondary mr-2"></i> |
| <span>80GB SSD Storage</span> |
| </li> |
| <li class="flex items-center"> |
| <i data-feather="check" class="w-4 h-4 text-secondary mr-2"></i> |
| <span>4TB Bandwidth</span> |
| </li> |
| </ul> |
| <a href="#" class="block w-full py-2 px-4 text-center bg-primary hover:bg-indigo-700 rounded-md transition duration-300">Get Started</a> |
| </div> |
| |
| |
| <div class="bg-gray-800 rounded-xl p-6 border border-gray-700 transition duration-300 card-hover"> |
| <div class="mb-6"> |
| <h3 class="text-lg font-semibold mb-2">Dedicated Server</h3> |
| <p class="text-sm text-gray-400">Enterprise-grade dedicated resources</p> |
| </div> |
| <div class="mb-6"> |
| <span class="text-gray-400">Starting at</span> |
| <div class="flex items-end"> |
| <span class="text-3xl font-bold">$89.99</span> |
| <span class="text-gray-400 ml-1">/mo</span> |
| </div> |
| <span class="text-xs text-gray-400">For 12-month term</span> |
| </div> |
| <ul class="space-y-3 mb-8"> |
| <li class="flex items-center"> |
| <i data-feather="check" class="w-4 h-4 text-secondary mr-2"></i> |
| <span>4 CPU Cores</span> |
| </li> |
| <li class="flex items-center"> |
| <i data-feather="check" class="w-4 h-4 text-secondary mr-2"></i> |
| <span>16GB RAM</span> |
| </li> |
| <li class="flex items-center"> |
| <i data-feather="check" class="w-4 h-4 text-secondary mr-2"></i> |
| <span>240GB SSD Storage</span> |
| </li> |
| <li class="flex items-center"> |
| <i data-feather="check" class="w-4 h-4 text-secondary mr-2"></i> |
| <span>10TB Bandwidth</span> |
| </li> |
| </ul> |
| <a href="#" class="block w-full py-2 px-4 text-center bg-primary hover:bg-indigo-700 rounded-md transition duration-300">Get Started</a> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-gray-800"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold mb-4">Why Customers Love Our Services</h2> |
| <p class="text-lg text-gray-300 max-w-3xl mx-auto"> |
| Don't just take our word for it. Here's what our customers have to say about us. |
| </p> |
| </div> |
| |
| <div class="grid md:grid-cols-2 gap-8"> |
| |
| <div class="testimonial-card rounded-xl p-8"> |
| <div class="flex items-center mb-6"> |
| <div class="flex-shrink-0"> |
| <img class="h-12 w-12 rounded-full" src="https://www.turnpage.io/assets/img/user-60-1.png" alt="User avatar"> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-lg font-semibold">Sarah Johnson</h4> |
| <p class="text-gray-400">CEO, TechStart Inc</p> |
| </div> |
| </div> |
| <p class="text-gray-300 mb-6"> |
| "The migration to their Business Hosting was seamless, and our website speed improved dramatically. We're very impressed with the reliability and the comprehensive features offered." |
| </p> |
| <div class="flex"> |
| <i data-feather="star" class="w-5 h-5 text-yellow-400"></i> |
| <i data-feather="star" class="w-5 h-5 text-yellow-400"></i> |
| <i data-feather="star" class="w-5 h-5 text-yellow-400"></i> |
| <i data-feather="star" class="w-5 h-5 text-yellow-400"></i> |
| <i data-feather="star" class="w-5 h-5 text-yellow-400"></i> |
| </div> |
| </div> |
| |
| |
| <div class="testimonial-card rounded-xl p-8"> |
| <div class="flex items-center mb-6"> |
| <div class="flex-shrink-0"> |
| <img class="h-12 w-12 rounded-full" src="https://www.turnpage.io/assets/img/user-60-2.png" alt="User avatar"> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-lg font-semibold">Michael Chen</h4> |
| <p class="text-gray-400">CTO, Digital Solutions</p> |
| </div> |
| </div> |
| <p class="text-gray-300 mb-6"> |
| "As a developer, I appreciate the robust features and developer-friendly tools that come with their hosting. It has made my workflow much more efficient." |
| </p> |
| <div class="flex"> |
| <i data-feather="star" class="w-5 h-5 text-yellow-400"></i> |
| <i data-feather="star" class="w-5 h-5 text-yellow-400"></i> |
| <i data-feather="star" class="w-5 h-5 text-yellow-400"></i> |
| <i data-feather="star" class="w-5 h-5 text-yellow-400"></i> |
| <i data-feather="star" class="w-5 h-5 text-yellow-400"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-gradient-to-r from-primary to-secondary"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center"> |
| <h2 class="text-3xl font-bold text-white mb-6">Ready to Get Started?</h2> |
| <p class="text-lg text-white opacity-90 mb-8 max-w-3xl mx-auto"> |
| Join thousands of satisfied customers who trust CloudNimbus for their hosting needs. |
| </p> |
| <a href="#" class="inline-block px-8 py-3 bg-white text-primary font-bold rounded-md hover:bg-gray-100 transition duration-300"> |
| Sign Up Now |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-900 pt-16 pb-8 border-t border-gray-800"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 mb-12"> |
| <div class="col-span-2"> |
| <img src="https://www.turnpage.io/assets/img/logo-dark.png" alt="CloudNimbus Logo" class="h-8 mb-6"> |
| <p class="text-gray-400 mb-6"> |
| Over 20 years of experience have gone into creating the perfect cloud hosting platform. |
| </p> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i data-feather="facebook"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i data-feather="twitter"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i data-feather="linkedin"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i data-feather="instagram"></i> |
| </a> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Hosting</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white">Web Hosting</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">WordPress Hosting</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">VPS Hosting</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Cloud Hosting</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Reseller Hosting</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Features</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white">Data Center</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Server Location</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Server Uptime</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Operating Systems</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Company</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-400 mb-4 md:mb-0"> |
| © 2023 CloudNimbus Hosting Haven. All rights reserved. |
| </p> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-white">Terms of Service</a> |
| <a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a> |
| <a href="#" class="text-gray-400 hover:text-white">Sitemap</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| feather.replace(); |
| </script> |
| </body> |
| </html> |
|
|
