Login Register

admin / Cobaltv5

Last active 1 month ago

Like 0

Revision 5bde94e62c3fa36c74fa12d926e1cc56bdf02868

Cobaltv5 Raw
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