Login Register

admin / Cobaltv4.html

Last active 1 month ago

Like 0

admin revised this gist 1 month ago · b59e40b

1 file changed, 311 insertions

Cobaltv4.html (file created)
@@ -0,0 +1,311 @@
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 + /* GLOBAL GLOW */
16 + .glow {
17 + text-shadow: 0 0 10px rgba(0,150,255,0.8), 0 0 20px rgba(0,150,255,0.6);
18 + }
19 +
20 + /* TOP NAV */
21 + .topbar {
22 + background: linear-gradient(90deg, #001a33, #003f7f, #005fb8, #0078d4);
23 + padding: 20px 60px;
24 + display: flex;
25 + justify-content: space-between;
26 + align-items: center;
27 + box-shadow: 0 4px 12px rgba(0,0,0,0.5);
28 + position: sticky;
29 + top: 0;
30 + z-index: 999;
31 + }
32 +
33 + .brand {
34 + font-size: 34px;
35 + font-weight: 700;
36 + color: #ffffff;
37 + letter-spacing: 2px;
38 + }
39 +
40 + nav a {
41 + margin-left: 30px;
42 + color: #ffffff;
43 + text-decoration: none;
44 + font-size: 16px;
45 + font-weight: 500;
46 + transition: 0.3s;
47 + }
48 +
49 + nav a:hover {
50 + color: #00aaff;
51 + text-shadow: 0 0 10px #00aaff;
52 + }
53 +
54 + /* HERO SECTION */
55 + .hero {
56 + padding: 160px 60px;
57 + background: radial-gradient(circle at top left, #0078d4, #003f7f, #001a33);
58 + color: white;
59 + position: relative;
60 + overflow: hidden;
61 + }
62 +
63 + /* Animated floating particles */
64 + .particle {
65 + position: absolute;
66 + width: 8px;
67 + height: 8px;
68 + background: #00aaff;
69 + border-radius: 50%;
70 + box-shadow: 0 0 12px #00aaff;
71 + animation: float 12s infinite ease-in-out;
72 + opacity: 0.7;
73 + }
74 +
75 + @keyframes float {
76 + 0% { transform: translateY(0px) translateX(0px); }
77 + 50% { transform: translateY(-80px) translateX(40px); }
78 + 100% { transform: translateY(0px) translateX(0px); }
79 + }
80 +
81 + .hero h1 {
82 + font-size: 80px;
83 + margin-bottom: 20px;
84 + color: #ffffff;
85 + text-shadow: 0 0 20px #00aaff;
86 + }
87 +
88 + .hero p {
89 + font-size: 24px;
90 + max-width: 900px;
91 + color: #d0eaff;
92 + }
93 +
94 + .hero .btn {
95 + margin-top: 40px;
96 + background: #00aaff;
97 + color: #001a33;
98 + padding: 18px 36px;
99 + border-radius: 8px;
100 + border: none;
101 + font-size: 20px;
102 + cursor: pointer;
103 + font-weight: 700;
104 + box-shadow: 0 0 20px #00aaff;
105 + transition: 0.3s;
106 + }
107 +
108 + .hero .btn:hover {
109 + background: #ffffff;
110 + box-shadow: 0 0 30px #00aaff;
111 + }
112 +
113 + /* SECTION */
114 + .section {
115 + padding: 100px 60px;
116 + background: #0a0f1c;
117 + }
118 +
119 + .section h2 {
120 + font-size: 48px;
121 + color: #00aaff;
122 + text-align: center;
123 + margin-bottom: 60px;
124 + text-shadow: 0 0 20px #0078d4;
125 + }
126 +
127 + /* FEATURE GRID */
128 + .features {
129 + display: grid;
130 + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
131 + gap: 40px;
132 + }
133 +
134 + .feature {
135 + background: linear-gradient(135deg, #001a33, #003f7f);
136 + padding: 40px;
137 + border-radius: 12px;
138 + box-shadow: 0 0 20px rgba(0,150,255,0.4);
139 + transition: 0.3s;
140 + border: 2px solid #00aaff;
141 + }
142 +
143 + .feature:hover {
144 + transform: translateY(-10px);
145 + box-shadow: 0 0 40px rgba(0,150,255,0.8);
146 + }
147 +
148 + .feature h3 {
149 + margin-top: 0;
150 + font-size: 26px;
151 + color: #00aaff;
152 + text-shadow: 0 0 10px #00aaff;
153 + }
154 +
155 + .feature p {
156 + font-size: 18px;
157 + color: #cce6ff;
158 + }
159 +
160 + /* PRODUCT CARDS */
161 + .product {
162 + background: linear-gradient(135deg, #00264d, #004c99);
163 + padding: 60px;
164 + border-radius: 16px;
165 + margin-bottom: 60px;
166 + box-shadow: 0 0 30px rgba(0,150,255,0.5);
167 + border: 2px solid #00aaff;
168 + }
169 +
170 + .product h3 {
171 + font-size: 32px;
172 + color: #00aaff;
173 + margin-top: 0;
174 + text-shadow: 0 0 12px #00aaff;
175 + }
176 +
177 + .product p {
178 + font-size: 20px;
179 + margin-bottom: 30px;
180 + color: #d0eaff;
181 + }
182 +
183 + .product .btn {
184 + background: #00aaff;
185 + color: #001a33;
186 + padding: 14px 26px;
187 + border-radius: 6px;
188 + border: none;
189 + cursor: pointer;
190 + font-size: 18px;
191 + font-weight: 700;
192 + box-shadow: 0 0 20px #00aaff;
193 + }
194 +
195 + .product .btn:hover {
196 + background: #ffffff;
197 + box-shadow: 0 0 30px #00aaff;
198 + }
199 +
200 + /* FOOTER */
201 + .footer {
202 + padding: 50px 60px;
203 + background: linear-gradient(90deg, #001a33, #003f7f, #005fb8);
204 + color: white;
205 + text-align: center;
206 + font-size: 18px;
207 + margin-top: 60px;
208 + box-shadow: 0 -4px 12px rgba(0,0,0,0.5);
209 + }
210 + </style>
211 + </head>
212 + <body>
213 +
214 + <!-- NAV -->
215 + <div class="topbar">
216 + <div class="brand glow">COBALT Cloud</div>
217 + <nav>
218 + <a href="#products">Products</a>
219 + <a href="#features">Features</a>
220 + <a href="#pricing">Pricing</a>
221 + <a href="#testimonials">Testimonials</a>
222 + <a href="#about">About</a>
223 + </nav>
224 + </div>
225 +
226 + <!-- HERO -->
227 + <div class="hero">
228 + <!-- PARTICLES -->
229 + <div class="particle" style="top:20%; left:10%; animation-delay:0s;"></div>
230 + <div class="particle" style="top:40%; left:30%; animation-delay:2s;"></div>
231 + <div class="particle" style="top:60%; left:50%; animation-delay:4s;"></div>
232 + <div class="particle" style="top:30%; left:70%; animation-delay:1s;"></div>
233 + <div class="particle" style="top:50%; left:90%; animation-delay:3s;"></div>
234 +
235 + <h1 class="glow">COBALT Cloud</h1>
236 + <p>
237 + The neon‑cobalt, hyper‑modern cloud platform built for IT programs, labs,
238 + and real infrastructure learning. Azure‑inspired. Cobalt‑enhanced.
239 + Absolutely fucking sick.
240 + </p>
241 + <button class="btn">Launch COBALT</button>
242 + </div>
243 +
244 + <!-- PRODUCTS -->
245 + <div class="section" id="products">
246 + <h2>COBALT Products</h2>
247 +
248 + <div class="product">
249 + <h3>Virtual Machines</h3>
250 + <p>Lightning‑fast provisioning, clean networking, and instant access.</p>
251 + <button class="btn">Explore VMs</button>
252 + </div>
253 +
254 + <div class="product">
255 + <h3>Storage</h3>
256 + <p>Simple, scalable buckets with predictable pricing.</p>
257 + <button class="btn">Explore Storage</button>
258 + </div>
259 +
260 + <div class="product">
261 + <h3>Networking</h3>
262 + <p>NAT‑friendly public endpoints with auto‑TLS.</p>
263 + <button class="btn">Explore Networking</button>
264 + </div>
265 +
266 + <div class="product">
267 + <h3>Identity</h3>
268 + <p>Lightweight MFA, roles, and user management.</p>
269 + <button class="btn">Explore Identity</button>
270 + </div>
271 + </div>
272 +
273 + <!-- FEATURES -->
274 + <div class="section" id="features">
275 + <h2>Platform Features</h2>
276 +
277 + <div class="features">
278 + <div class="feature">
279 + <h3>Neon Cobalt UI</h3>
280 + <p>Glowing, animated, futuristic interface.</p>
281 + </div>
282 + <div class="feature">
283 + <h3>Student‑Ready</h3>
284 + <p>Built for real IT education.</p>
285 + </div>
286 + <div class="feature">
287 + <h3>Fast Provisioning</h3>
288 + <p>VMs boot in seconds.</p>
289 + </div>
290 + <div class="feature">
291 + <h3>Predictable Pricing</h3>
292 + <p>No surprise fees.</p>
293 + </div>
294 + <div class="feature">
295 + <h3>NAT‑Friendly Access</h3>
296 + <p>Expose ports safely.</p>
297 + </div>
298 + <div class="feature">
299 + <h3>Instructor Tools</h3>
300 + <p>Class templates and resets.</p>
301 + </div>
302 + </div>
303 + </div>
304 +
305 + <!-- FOOTER -->
306 + <div class="footer">
307 + © COBALT Cloud — Hyper Edition
308 + </div>
309 +
310 + </body>
311 + </html>