| 1 | <!DOCTYPE html>
|
| 2 | <html lang="en">
|
| 3 | <head>
|
| 4 | <meta charset="UTF-8">
|
| 5 | <title>COBALT Cloud — Hyper Edition</title>
|
| 6 | <style>
|
| 7 | body {
|
| 8 | margin: 0;
|
| 9 | font-family: "Segoe UI", sans-serif;
|
| 10 | background: #0a0f1c;
|
| 11 | color: #e6e6e6;
|
| 12 | overflow-x: hidden;
|
| 13 | }
|
| 14 |
|
| 15 | .glow {
|
| 16 | text-shadow: 0 0 10px rgba(0,150,255,0.8), 0 0 20px rgba(0,150,255,0.6);
|
| 17 | }
|
| 18 |
|
| 19 | .topbar {
|
| 20 | background: linear-gradient(90deg, #001a33, #003f7f, #005fb8, #0078d4);
|
| 21 | padding: 20px 60px;
|
| 22 | display: flex;
|
| 23 | justify-content: space-between;
|
| 24 | align-items: center;
|
| 25 | box-shadow: 0 4px 12px rgba(0,0,0,0.5);
|
| 26 | position: sticky;
|
| 27 | top: 0;
|
| 28 | z-index: 999;
|
| 29 | }
|
| 30 |
|
| 31 | .brand {
|
| 32 | font-size: 34px;
|
| 33 | font-weight: 700;
|
| 34 | color: #ffffff;
|
| 35 | letter-spacing: 2px;
|
| 36 | }
|
| 37 |
|
| 38 | nav a {
|
| 39 | margin-left: 30px;
|
| 40 | color: #ffffff;
|
| 41 | text-decoration: none;
|
| 42 | font-size: 16px;
|
| 43 | font-weight: 500;
|
| 44 | transition: 0.3s;
|
| 45 | }
|
| 46 |
|
| 47 | nav a:hover {
|
| 48 | color: #00aaff;
|
| 49 | text-shadow: 0 0 10px #00aaff;
|
| 50 | }
|
| 51 |
|
| 52 | .hero {
|
| 53 | padding: 160px 60px;
|
| 54 | background: radial-gradient(circle at top left, #0078d4, #003f7f, #001a33);
|
| 55 | color: white;
|
| 56 | position: relative;
|
| 57 | overflow: hidden;
|
| 58 | }
|
| 59 |
|
| 60 | .particle {
|
| 61 | position: absolute;
|
| 62 | width: 8px;
|
| 63 | height: 8px;
|
| 64 | background: #00aaff;
|
| 65 | border-radius: 50%;
|
| 66 | box-shadow: 0 0 12px #00aaff;
|
| 67 | animation: float 12s infinite ease-in-out;
|
| 68 | opacity: 0.7;
|
| 69 | }
|
| 70 |
|
| 71 | @keyframes float {
|
| 72 | 0% { transform: translateY(0px) translateX(0px); }
|
| 73 | 50% { transform: translateY(-80px) translateX(40px); }
|
| 74 | 100% { transform: translateY(0px) translateX(0px); }
|
| 75 | }
|
| 76 |
|
| 77 | .hero h1 {
|
| 78 | font-size: 80px;
|
| 79 | margin-bottom: 20px;
|
| 80 | color: #ffffff;
|
| 81 | text-shadow: 0 0 20px #00aaff;
|
| 82 | }
|
| 83 |
|
| 84 | .hero p {
|
| 85 | font-size: 24px;
|
| 86 | max-width: 900px;
|
| 87 | color: #d0eaff;
|
| 88 | }
|
| 89 |
|
| 90 | .hero .btn {
|
| 91 | margin-top: 40px;
|
| 92 | background: #00aaff;
|
| 93 | color: #001a33;
|
| 94 | padding: 18px 36px;
|
| 95 | border-radius: 8px;
|
| 96 | border: none;
|
| 97 | font-size: 20px;
|
| 98 | cursor: pointer;
|
| 99 | font-weight: 700;
|
| 100 | box-shadow: 0 0 20px #00aaff;
|
| 101 | transition: 0.3s;
|
| 102 | }
|
| 103 |
|
| 104 | .hero .btn:hover {
|
| 105 | background: #ffffff;
|
| 106 | box-shadow: 0 0 30px #00aaff;
|
| 107 | }
|
| 108 |
|
| 109 | .section {
|
| 110 | padding: 100px 60px;
|
| 111 | background: #0a0f1c;
|
| 112 | }
|
| 113 |
|
| 114 | .section h2 {
|
| 115 | font-size: 48px;
|
| 116 | color: #00aaff;
|
| 117 | text-align: center;
|
| 118 | margin-bottom: 60px;
|
| 119 | text-shadow: 0 0 20px #0078d4;
|
| 120 | }
|
| 121 |
|
| 122 | .features {
|
| 123 | display: grid;
|
| 124 | grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
| 125 | gap: 40px;
|
| 126 | }
|
| 127 |
|
| 128 | .feature {
|
| 129 | background: linear-gradient(135deg, #001a33, #003f7f);
|
| 130 | padding: 40px;
|
| 131 | border-radius: 12px;
|
| 132 | box-shadow: 0 0 20px rgba(0,150,255,0.4);
|
| 133 | transition: 0.3s;
|
| 134 | border: 2px solid #00aaff;
|
| 135 | }
|
| 136 |
|
| 137 | .feature:hover {
|
| 138 | transform: translateY(-10px);
|
| 139 | box-shadow: 0 0 40px rgba(0,150,255,0.8);
|
| 140 | }
|
| 141 |
|
| 142 | .feature h3 {
|
| 143 | margin-top: 0;
|
| 144 | font-size: 26px;
|
| 145 | color: #00aaff;
|
| 146 | text-shadow: 0 0 10px #00aaff;
|
| 147 | }
|
| 148 |
|
| 149 | .feature p {
|
| 150 | font-size: 18px;
|
| 151 | color: #cce6ff;
|
| 152 | }
|
| 153 |
|
| 154 | .product {
|
| 155 | background: linear-gradient(135deg, #00264d, #004c99);
|
| 156 | padding: 60px;
|
| 157 | border-radius: 16px;
|
| 158 | margin-bottom: 60px;
|
| 159 | box-shadow: 0 0 30px rgba(0,150,255,0.5);
|
| 160 | border: 2px solid #00aaff;
|
| 161 | }
|
| 162 |
|
| 163 | .product h3 {
|
| 164 | font-size: 32px;
|
| 165 | color: #00aaff;
|
| 166 | margin-top: 0;
|
| 167 | text-shadow: 0 0 12px #00aaff;
|
| 168 | }
|
| 169 |
|
| 170 | .product p {
|
| 171 | font-size: 20px;
|
| 172 | margin-bottom: 30px;
|
| 173 | color: #d0eaff;
|
| 174 | }
|
| 175 |
|
| 176 | .product .btn {
|
| 177 | background: #00aaff;
|
| 178 | color: #001a33;
|
| 179 | padding: 14px 26px;
|
| 180 | border-radius: 6px;
|
| 181 | border: none;
|
| 182 | cursor: pointer;
|
| 183 | font-size: 18px;
|
| 184 | font-weight: 700;
|
| 185 | box-shadow: 0 0 20px #00aaff;
|
| 186 | }
|
| 187 |
|
| 188 | .product .btn:hover {
|
| 189 | background: #ffffff;
|
| 190 | box-shadow: 0 0 30px #00aaff;
|
| 191 | }
|
| 192 |
|
| 193 | .pricing-grid {
|
| 194 | display: grid;
|
| 195 | grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
| 196 | gap: 30px;
|
| 197 | }
|
| 198 |
|
| 199 | .price-card {
|
| 200 | background: linear-gradient(135deg, #001a33, #003f7f);
|
| 201 | padding: 40px;
|
| 202 | border-radius: 12px;
|
| 203 | box-shadow: 0 0 20px rgba(0,150,255,0.4);
|
| 204 | text-align: center;
|
| 205 | border: 2px solid #00aaff;
|
| 206 | }
|
| 207 |
|
| 208 | .price-card h3 {
|
| 209 | font-size: 26px;
|
| 210 | color: #00aaff;
|
| 211 | margin-bottom: 10px;
|
| 212 | }
|
| 213 |
|
| 214 | .price-card .price {
|
| 215 | font-size: 40px;
|
| 216 | font-weight: 700;
|
| 217 | margin-bottom: 20px;
|
| 218 | color: #e6e6e6;
|
| 219 | }
|
| 220 |
|
| 221 | .price-card p {
|
| 222 | font-size: 18px;
|
| 223 | color: #cce6ff;
|
| 224 | }
|
| 225 |
|
| 226 | .testimonials {
|
| 227 | display: grid;
|
| 228 | grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
| 229 | gap: 30px;
|
| 230 | }
|
| 231 |
|
| 232 | .testimonial {
|
| 233 | background: linear-gradient(135deg, #001a33, #003f7f);
|
| 234 | padding: 30px;
|
| 235 | border-radius: 10px;
|
| 236 | box-shadow: 0 0 20px rgba(0,150,255,0.4);
|
| 237 | border-left: 6px solid #00aaff;
|
| 238 | }
|
| 239 |
|
| 240 | .testimonial p {
|
| 241 | font-size: 18px;
|
| 242 | margin-bottom: 10px;
|
| 243 | color: #d0eaff;
|
| 244 | }
|
| 245 |
|
| 246 | .testimonial span {
|
| 247 | font-size: 15px;
|
| 248 | color: #99c2ff;
|
| 249 | }
|
| 250 |
|
| 251 | .footer {
|
| 252 | padding: 50px 60px;
|
| 253 | background: linear-gradient(90deg, #001a33, #003f7f, #005fb8);
|
| 254 | color: white;
|
| 255 | text-align: center;
|
| 256 | font-size: 18px;
|
| 257 | margin-top: 60px;
|
| 258 | box-shadow: 0 -4px 12px rgba(0,0,0,0.5);
|
| 259 | }
|
| 260 | </style>
|
| 261 | </head>
|
| 262 | <body>
|
| 263 |
|
| 264 | <div class="topbar">
|
| 265 | <div class="brand glow">COBALT Cloud</div>
|
| 266 | <nav>
|
| 267 | <a href="#products">Products</a>
|
| 268 | <a href="#features">Features</a>
|
| 269 | <a href="#pricing">Pricing</a>
|
| 270 | <a href="#testimonials">Testimonials</a>
|
| 271 | <a href="#mission">Mission</a>
|
| 272 | <a href="#stack">Stack</a>
|
| 273 | <a href="#usecases">Use Cases</a>
|
| 274 | <a href="#about">About</a>
|
| 275 | </nav>
|
| 276 | </div>
|
| 277 |
|
| 278 | <div class="hero">
|
| 279 | <div class="particle" style="top:20%; left:10%; animation-delay:0s;"></div>
|
| 280 | <div class="particle" style="top:40%; left:30%; animation-delay:2s;"></div>
|
| 281 | <div class="particle" style="top:60%; left:50%; animation-delay:4s;"></div>
|
| 282 | <div class="particle" style="top:30%; left:70%; animation-delay:1s;"></div>
|
| 283 | <div class="particle" style="top:50%; left:90%; animation-delay:3s;"></div>
|
| 284 |
|
| 285 | <h1 class="glow">COBALT Cloud</h1>
|
| 286 | <p>
|
| 287 | The neon‑cobalt, hyper‑modern cloud platform built for IT programs, labs,
|
| 288 | and real infrastructure learning. Azure‑inspired. Cobalt‑enhanced.
|
| 289 | Absolutely fucking sick.
|
| 290 | </p>
|
| 291 | <button class="btn">Launch COBALT</button>
|
| 292 | </div>
|
| 293 |
|
| 294 | <div class="section" id="products">
|
| 295 | <h2>COBALT Products</h2>
|
| 296 |
|
| 297 | <div class="product">
|
| 298 | <h3>Virtual Machines</h3>
|
| 299 | <p>Lightning‑fast provisioning, clean networking, and instant access.</p>
|
| 300 | <button class="btn">Explore VMs</button>
|
| 301 | </div>
|
| 302 |
|
| 303 | <div class="product">
|
| 304 | <h3>Storage</h3>
|
| 305 | <p>Simple, scalable buckets with predictable pricing.</p>
|
| 306 | <button class="btn">Explore Storage</button>
|
| 307 | </div>
|
| 308 |
|
| 309 | <div class="product">
|
| 310 | <h3>Networking</h3>
|
| 311 | <p>NAT‑friendly public endpoints with auto‑TLS.</p>
|
| 312 | <button class="btn">Explore Networking</button>
|
| 313 | </div>
|
| 314 |
|
| 315 | <div class="product">
|
| 316 | <h3>Identity</h3>
|
| 317 | <p>Lightweight MFA, roles, and user management.</p>
|
| 318 | <button class="btn">Explore Identity</button>
|
| 319 | </div>
|
| 320 | </div>
|
| 321 |
|
| 322 | <div class="section" id="features">
|
| 323 | <h2>Platform Features</h2>
|
| 324 |
|
| 325 | <div class="features">
|
| 326 | <div class="feature">
|
| 327 | <h3>Neon Cobalt UI</h3>
|
| 328 | <p>Glowing, animated, futuristic interface.</p>
|
| 329 | </div>
|
| 330 | <div class="feature">
|
| 331 | <h3>Student‑Ready</h3>
|
| 332 | <p>Built for real IT education.</p>
|
| 333 | </div>
|
| 334 | <div class="feature">
|
| 335 | <h3>Fast Provisioning</h3>
|
| 336 | <p>VMs boot in seconds.</p>
|
| 337 | </div>
|
| 338 | <div class="feature">
|
| 339 | <h3>Predictable Pricing</h3>
|
| 340 | <p>No surprise fees.</p>
|
| 341 | </div>
|
| 342 | <div class="feature">
|
| 343 | <h3>NAT‑Friendly Access</h3>
|
| 344 | <p>Expose ports safely.</p>
|
| 345 | </div>
|
| 346 | <div class="feature">
|
| 347 | <h3>Instructor Tools</h3>
|
| 348 | <p>Class templates and resets.</p>
|
| 349 | </div>
|
| 350 | </div>
|
| 351 | </div>
|
| 352 |
|
| 353 | <div class="section" id="pricing">
|
| 354 | <h2>Pricing</h2>
|
| 355 |
|
| 356 | <div class="pricing-grid">
|
| 357 | <div class="price-card">
|
| 358 | <h3>Starter</h3>
|
| 359 | <div class="price">$49/mo</div>
|
| 360 | <p>Up to 10 VMs</p>
|
| 361 | </div>
|
| 362 |
|
| 363 | <div class="price-card">
|
| 364 | <h3>Standard</h3>
|
| 365 | <div class="price">$99/mo</div>
|
| 366 | <p>Up to 30 VMs</p>
|
| 367 | </div>
|
| 368 |
|
| 369 | <div class="price-card">
|
| 370 | <h3>Enterprise</h3>
|
| 371 | <div class="price">$199/mo</div>
|
| 372 | <p>Unlimited VMs</p>
|
| 373 | </div>
|
| 374 | </div>
|
| 375 | </div>
|
| 376 |
|
| 377 | <div class="section" id="testimonials">
|
| 378 | <h2>Testimonials</h2>
|
| 379 |
|
| 380 | <div class="testimonials">
|
| 381 | <div class="testimonial">
|
| 382 | <p>“COBALT gives my students real infrastructure to break and fix.”</p>
|
| 383 | <span>— IT Instructor</span>
|
| 384 | </div>
|
| 385 | <div class="testimonial">
|
| 386 | <p>“Way simpler than Azure or AWS. My class actually understands networking now.”</p>
|
| 387 | <span>— Network Admin</span>
|
| 388 | </div>
|
| 389 | <div class="testimonial">
|
| 390 | <p>“The NAT‑friendly endpoints are a game changer.”</p>
|
| 391 | <span>— Security Instructor</span>
|
| 392 | </div>
|
| 393 | </div>
|
| 394 | </div>
|
| 395 |
|
| 396 | <div class="section" id="mission">
|
| 397 | <h2>Our Mission</h2>
|
| 398 | <div class="product">
|
| 399 | <h3>Empowering Real Infrastructure Learning</h3>
|
| 400 | <p>
|
| 401 | COBALT exists because IT education deserves better than fake cloud simulators,
|
| 402 | locked‑down lab environments, and enterprise platforms bloated with noise.
|
| 403 | We deliver a neon‑cobalt, high‑performance environment where students build,
|
| 404 | break, fix, deploy, and understand real systems — the way it should be.
|
| 405 | </p>
|
| 406 | <p>
|
| 407 | Our mission is simple: <span class="glow">make real infrastructure accessible,
|
| 408 | modern, beautiful, and fucking exciting.</span>
|
| 409 | </p>
|
| 410 | </div>
|
| 411 | </div>
|
| 412 |
|
| 413 | <div class="section" id="stack">
|
| 414 | <h2>Technology Stack</h2>
|
| 415 | <div class="features">
|
| 416 | <div class="feature">
|
| 417 | <h3>Hypervisor Core</h3>
|
| 418 | <p>Optimized KVM/QEMU stack with lightning‑fast VM spin‑ups.</p>
|
| 419 | </div>
|
| 420 | <div class="feature">
|
| 421 | <h3>Neon Networking Engine</h3>
|
| 422 | <p>Auto‑NAT, auto‑TLS, auto‑firewall — cobalt‑powered simplicity.</p>
|
| 423 | </div>
|
| 424 | <div class="feature">
|
| 425 | <h3>COBALT Identity</h3>
|
| 426 | <p>Lightweight MFA, roles, and user federation without the Azure bloat.</p>
|
| 427 | </div>
|
| 428 | <div class="feature">
|
| 429 | <h3>COBALT Storage Layer</h3>
|
| 430 | <p>High‑throughput buckets with predictable pricing and zero egress traps.</p>
|
| 431 | </div>
|
| 432 | <div class="feature">
|
| 433 | <h3>Instructor Toolkit</h3>
|
| 434 | <p>Class templates, VM cloning, mass resets, and student isolation.</p>
|
| 435 | </div>
|
| 436 | <div class="feature">
|
| 437 | <h3>COBALT UI Framework</h3>
|
| 438 | <p>Neon‑cobalt gradients, glowing components, and Azure‑inspired clarity.</p>
|
| 439 | </div>
|
| 440 | </div>
|
| 441 | </div>
|
| 442 |
|
| 443 | <div class="section" id="usecases">
|
| 444 | <h2>Use Cases</h2>
|
| 445 | <div class="features">
|
| 446 | <div class="feature">
|
| 447 | <h3>IT Fundamentals</h3>
|
| 448 | <p>Teach OS basics, networking, and troubleshooting with real VMs.</p>
|
| 449 | </div>
|
| 450 | <div class="feature">
|
| 451 | <h3>Cybersecurity Labs</h3>
|
| 452 | <p>Isolated networks, attack‑safe environments, and instant resets.</p>
|
| 453 | </div>
|
| 454 | <div class="feature">
|
| 455 | <h3>Networking Courses</h3>
|
| 456 | <p>Students configure real routing, NAT, firewalls, and services.</p>
|
| 457 | </div>
|
| 458 | <div class="feature">
|
| 459 | <h3>Cloud Concepts</h3>
|
| 460 | <p>Hands‑on cloud learning without AWS/Azure complexity.</p>
|
| 461 | </div>
|
| 462 | <div class="feature">
|
| 463 | <h3>Dev Environments</h3>
|
| 464 | <p>Spin up dev boxes with VS Code Server, Docker, and more.</p>
|
| 465 | </div>
|
| 466 | <div class="feature">
|
| 467 | <h3>Capstone Projects</h3>
|
| 468 | <p>Students deploy full apps, networks, and services.</p>
|
| 469 | </div>
|
| 470 | </div>
|
| 471 | </div>
|
| 472 |
|
| 473 | <div class="section" id="about">
|
| 474 | <h2>About COBALT</h2>
|
| 475 | <div class="product">
|
| 476 | <h3>Built for Real IT Education</h3>
|
| 477 | <p>
|
| 478 | COBALT is built for instructors, students, and labs that care about real infrastructure.
|
| 479 | No enterprise noise. No fake cloud. Just clean, modern, cobalt‑blue tooling designed for
|
| 480 | Rhodes‑level IT programs.
|
| 481 | </p>
|
| 482 | <p>
|
| 483 | If your students are spinning up VMs, wiring networks, breaking things, and fixing them,
|
| 484 | COBALT is the environment they deserve.
|
| 485 | </p>
|
| 486 | </div>
|
| 487 | </div>
|
| 488 |
|
| 489 | <div class="footer">
|
| 490 | © COBALT Cloud — Hyper Edition
|
| 491 | </div>
|
| 492 |
|
| 493 | </body>
|
| 494 | </html>
|
| 495 |
|