diff --git a/README.md b/README.md index e7ab9fe..4df96f7 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # C+N Hosting Website -A modern, pay-as-you-go web hosting website featuring affordable plans starting at $2/month. Built for gamers, small projects, and anyone who needs simple, reliable hosting without enterprise pricing. +A modern, pay-as-you-go web hosting website featuring affordable plans starting at just $0.50/month. Built for gamers, small projects, Discord bots, and anyone who needs simple, reliable hosting without enterprise pricing. ## 🎨 Design Features @@ -49,12 +49,12 @@ cn-hosting-website/ ## 🎯 Website Sections -1. **Hero Section**: Eye-catching introduction with animated server icons and "Pay As You Go" messaging -2. **Who We Are For**: Targeted audience section highlighting gamers, small projects, and backup storage needs -3. **Services**: Three simple plans (Starter, Growing, Pro) with clear feature lists -4. **Pricing**: Three transparent pricing tiers ($2, $5, $10 per month) with no hidden fees +1. **Hero Section**: Eye-catching introduction with "Pay As You Go" messaging +2. **Who We Are For**: Targeted audience section highlighting gamers, small projects, and developers +3. **Services**: Four simple plans (LFIT, Starter, Growing, Pro) with clear feature lists +4. **Pricing**: Four transparent pricing tiers ($0.50, $2, $5, $10 per month) with no hidden fees 5. **Contact**: Smart contact form with plan selection auto-fill and Discord/email support -6. **Disclaimer**: Honest transparency about being a small operation +6. **Disclaimer**: Honest transparency about being a small operation, including uptime limitations 7. **Footer**: Quick links, support options, and social connections ## 🎨 Customization @@ -136,7 +136,7 @@ When users click on a pricing plan's "Choose Plan" button: The website specifically caters to: - **Gamers** needing affordable game servers - **Small Projects** requiring simple hosting without complexity -- **Backup Storage** users wanting reliable, cheap storage +- **Developers** needing testing environments or portfolio hosting ### Pricing Philosophy - No contracts diff --git a/TECHNICAL.md b/TECHNICAL.md index 4f991bf..737ae92 100644 --- a/TECHNICAL.md +++ b/TECHNICAL.md @@ -29,6 +29,7 @@ This is a single-page application (SPA) built with vanilla HTML, CSS, and JavaSc ### 1. Email Auto-fill System Triggered when pricing plan buttons are clicked. Auto-fills contact form with: - Plan name and price in subject +- Works for all 4 plans: LFIT ($0.50 - ultralight hosting for bots/scripts), Starter ($2), Growing ($5), and Pro ($10) - Smart field focusing - Email persistence with localStorage - Visual feedback animations diff --git a/index.html b/index.html index b621260..f9c2bbe 100644 --- a/index.html +++ b/index.html @@ -27,26 +27,13 @@

Only pay for what you use. No contracts, no surprises. - Start at $2/month and scale when you need to. + Start at $0.50/month and scale when you need to.

Get Started Learn More
-
-
-
- -
-
- -
-
- -
-
-
@@ -75,10 +62,10 @@

Small Projects

- +
-

Backup Storage

-

Just need a little space to back up your important files? Simple, reliable storage without the enterprise price tag.

+

Developers

+

Need a place to test your apps or host your portfolio? Simple hosting without the complexity.

@@ -94,6 +81,18 @@

Backup Storage

Simple Plans

+
+
+ +
+

LFIT

+

Ultralight hosting for Discord bots, simple scripts, and lightweight web apps.

+
    +
  • Perfect for bots & scripts
    • +
  • 1GB storage
    • +
  • Always-on hosting
    • +
+
@@ -127,7 +126,7 @@

Pro

  • 50GB storage
  • Priority support
    • -
  • Daily backups
    • +
  • Advanced features
@@ -138,6 +137,25 @@

Pro

What You Pay

+
+
+

LFIT

+

Ultralight Hosting

+
+ $ + 0.50 + /month +
+
+
    +
  • Discord Bot Hosting
    • +
  • 1GB Storage
    • +
  • Basic SSL
    • +
  • Script Hosting
    • +
  • 24/7 Uptime*
    • +
+ Choose Plan +

Starter

@@ -152,7 +170,7 @@

Starter

  • Basic SSL
  • 1 Email Account
  • Email Support
    • -
  • 99% Uptime
    • +
  • 24/7 Uptime*
    • Choose Plan
    @@ -170,7 +188,7 @@

    Growing

  • Free SSL
  • 5 Email Accounts
  • Chat Support
    • -
  • 99.5% Uptime
    • +
  • 24/7 Uptime*
    • Choose Plan
    @@ -188,11 +206,12 @@

    Pro

  • Free SSL
  • 10 Email Accounts
  • Priority Support
    • -
  • Daily Backups
    • +
  • 24/7 Uptime*
    • Choose Plan
    +

    *See disclaimer below for uptime details

    @@ -248,6 +267,7 @@

    Chat With Us

    ⚠️ Heads Up

    We're a small operation trying to help people get online without breaking the bank.

    This site was created with AI - we're just doing our best to keep things simple and affordable.

    +

    *24/7 is best case scenario, we are a duo trying to provide low cost hosting so issues may occur

    diff --git a/styles.css b/styles.css index 82dc3f4..b7a6850 100644 --- a/styles.css +++ b/styles.css @@ -3,6 +3,7 @@ margin: 0; padding: 0; box-sizing: border-box; + -webkit-tap-highlight-color: transparent; } :root { @@ -463,7 +464,7 @@ section { .services-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; } @@ -491,12 +492,12 @@ section { } .service-card:hover::before { - transform: scaleX(1); + transform: scaleX(0); } .service-card:hover { - border-color: #FF8C00; - box-shadow: 0 0 30px rgba(255, 140, 0, 0.1); + border-color: #333; + box-shadow: none; } .service-icon { @@ -512,8 +513,8 @@ section { } .service-card:hover .service-icon { - transform: scale(1.1); - box-shadow: 0 0 20px rgba(255, 140, 0, 0.3); + transform: none; + box-shadow: none; } .service-icon i { @@ -551,6 +552,19 @@ section { color: #00ffff; } +.service-card.budget-service { + border-color: #4CAF50; +} + +.service-card.budget-service:hover { + border-color: #4CAF50; + box-shadow: none; +} + +.service-card.budget-service .service-icon { + color: #4CAF50; +} + /* Who We Are For Section */ .who-we-are-for { padding: 6rem 0; @@ -616,13 +630,13 @@ section { } .target-audience-item:hover::before { - left: 100%; + left: -100%; } .target-audience-item:hover { - transform: translateY(-5px); - border-color: rgba(255, 140, 0, 0.4); - box-shadow: 0 10px 30px rgba(255, 140, 0, 0.2); + transform: none; + border-color: #333; + box-shadow: none; } .target-icon { @@ -638,8 +652,8 @@ section { } .target-audience-item:hover .target-icon { - transform: scale(1.1); - box-shadow: 0 0 20px rgba(255, 140, 0, 0.4); + transform: none; + box-shadow: none; } .target-icon i { @@ -684,7 +698,7 @@ section { .pricing-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; } @@ -712,7 +726,7 @@ section { } .pricing-card:hover::before { - transform: scaleX(1); + transform: scaleX(0); } .pricing-card.featured { @@ -721,13 +735,41 @@ section { } .pricing-card:hover { - border-color: #FF8C00; - box-shadow: 0 0 30px rgba(255, 140, 0, 0.1); + border-color: #333; + box-shadow: none; } .pricing-card.featured:hover { - border-color: #FFB6C1; - box-shadow: 0 0 30px rgba(255, 182, 193, 0.2); + border-color: #FF8C00; + box-shadow: none; +} + +.pricing-card.budget { + border-color: #4CAF50; + position: relative; +} + +.pricing-card.budget::after { + content: 'Ultralight'; + position: absolute; + top: -10px; + right: 20px; + background: #4CAF50; + color: #000; + padding: 4px 12px; + border-radius: 15px; + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; +} + +.pricing-card.budget:hover { + border-color: #4CAF50; + box-shadow: none; +} + +.pricing-card.budget .amount { + font-size: 2.5rem; } .pricing-header h3 { @@ -1092,4 +1134,7 @@ section { .pricing-card .btn:active { transform: scale(0.95); transition: transform 0.1s ease; -} \ No newline at end of file +} +.service-card.budget-service .service-icon i { + color: #4CAF50; +}