admin/Cobaltv4.html

Cobaltv4.html · 7.5 KiB · HTML Raw

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>COBALT Cloud — Hyper Edition</title>
<style>
    body {
        margin: 0;
        font-family: "Segoe UI", sans-serif;
        background: #0a0f1c;
        color: #e6e6e6;
        overflow-x: hidden;
    }

/* GLOBAL GLOW */
    .glow {
        text-shadow: 0 0 10px rgba(0,150,255,0.8), 0 0 20px rgba(0,150,255,0.6);
    }

/* TOP NAV */
    .topbar {
        background: linear-gradient(90deg, #001a33, #003f7f, #005fb8, #0078d4);
        padding: 20px 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 4px 12px rgba(0,0,0,0.5);
        position: sticky;
        top: 0;
        z-index: 999;
    }

.brand {
        font-size: 34px;
        font-weight: 700;
        color: #ffffff;
        letter-spacing: 2px;
    }

nav a {
        margin-left: 30px;
        color: #ffffff;
        text-decoration: none;
        font-size: 16px;
        font-weight: 500;
        transition: 0.3s;
    }

nav a:hover {
        color: #00aaff;
        text-shadow: 0 0 10px #00aaff;
    }

/* HERO SECTION */
    .hero {
        padding: 160px 60px;
        background: radial-gradient(circle at top left, #0078d4, #003f7f, #001a33);
        color: white;
        position: relative;
        overflow: hidden;
    }

/* Animated floating particles */
    .particle {
        position: absolute;
        width: 8px;
        height: 8px;
        background: #00aaff;
        border-radius: 50%;
        box-shadow: 0 0 12px #00aaff;
        animation: float 12s infinite ease-in-out;
        opacity: 0.7;
    }

@keyframes float {
        0% { transform: translateY(0px) translateX(0px); }
        50% { transform: translateY(-80px) translateX(40px); }
        100% { transform: translateY(0px) translateX(0px); }
    }

.hero h1 {
        font-size: 80px;
        margin-bottom: 20px;
        color: #ffffff;
        text-shadow: 0 0 20px #00aaff;
    }

.hero p {
        font-size: 24px;
        max-width: 900px;
        color: #d0eaff;
    }

.hero .btn {
        margin-top: 40px;
        background: #00aaff;
        color: #001a33;
        padding: 18px 36px;
        border-radius: 8px;
        border: none;
        font-size: 20px;
        cursor: pointer;
        font-weight: 700;
        box-shadow: 0 0 20px #00aaff;
        transition: 0.3s;
    }

.hero .btn:hover {
        background: #ffffff;
        box-shadow: 0 0 30px #00aaff;
    }

/* SECTION */
    .section {
        padding: 100px 60px;
        background: #0a0f1c;
    }

.section h2 {
        font-size: 48px;
        color: #00aaff;
        text-align: center;
        margin-bottom: 60px;
        text-shadow: 0 0 20px #0078d4;
    }

/* FEATURE GRID */
    .features {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 40px;
    }

.feature {
        background: linear-gradient(135deg, #001a33, #003f7f);
        padding: 40px;
        border-radius: 12px;
        box-shadow: 0 0 20px rgba(0,150,255,0.4);
        transition: 0.3s;
        border: 2px solid #00aaff;
    }

.feature:hover {
        transform: translateY(-10px);
        box-shadow: 0 0 40px rgba(0,150,255,0.8);
    }

.feature h3 {
        margin-top: 0;
        font-size: 26px;
        color: #00aaff;
        text-shadow: 0 0 10px #00aaff;
    }

.feature p {
        font-size: 18px;
        color: #cce6ff;
    }

/* PRODUCT CARDS */
    .product {
        background: linear-gradient(135deg, #00264d, #004c99);
        padding: 60px;
        border-radius: 16px;
        margin-bottom: 60px;
        box-shadow: 0 0 30px rgba(0,150,255,0.5);
        border: 2px solid #00aaff;
    }

.product h3 {
        font-size: 32px;
        color: #00aaff;
        margin-top: 0;
        text-shadow: 0 0 12px #00aaff;
    }

.product p {
        font-size: 20px;
        margin-bottom: 30px;
        color: #d0eaff;
    }

.product .btn {
        background: #00aaff;
        color: #001a33;
        padding: 14px 26px;
        border-radius: 6px;
        border: none;
        cursor: pointer;
        font-size: 18px;
        font-weight: 700;
        box-shadow: 0 0 20px #00aaff;
    }

.product .btn:hover {
        background: #ffffff;
        box-shadow: 0 0 30px #00aaff;
    }

/* FOOTER */
    .footer {
        padding: 50px 60px;
        background: linear-gradient(90deg, #001a33, #003f7f, #005fb8);
        color: white;
        text-align: center;
        font-size: 18px;
        margin-top: 60px;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.5);
    }
</style>
</head>
<body>

<div class="topbar">
    <div class="brand glow">COBALT Cloud</div>
    <nav>
        <a href="#products">Products</a>
        <a href="#features">Features</a>
        <a href="#pricing">Pricing</a>
        <a href="#testimonials">Testimonials</a>
        <a href="#about">About</a>
    </nav>
</div>

<div class="hero">
    
    <div class="particle" style="top:20%; left:10%; animation-delay:0s;"></div>
    <div class="particle" style="top:40%; left:30%; animation-delay:2s;"></div>
    <div class="particle" style="top:60%; left:50%; animation-delay:4s;"></div>
    <div class="particle" style="top:30%; left:70%; animation-delay:1s;"></div>
    <div class="particle" style="top:50%; left:90%; animation-delay:3s;"></div>

<h1 class="glow">COBALT Cloud</h1>
    <p>
        The neon‑cobalt, hyper‑modern cloud platform built for IT programs, labs,
        and real infrastructure learning. Azure‑inspired. Cobalt‑enhanced.
        Absolutely fucking sick.
    </p>
    <button class="btn">Launch COBALT</button>
</div>

<div class="section" id="products">
    <h2>COBALT Products</h2>

<div class="product">
        <h3>Virtual Machines</h3>
        <p>Lightning‑fast provisioning, clean networking, and instant access.</p>
        <button class="btn">Explore VMs</button>
    </div>

<div class="product">
        <h3>Storage</h3>
        <p>Simple, scalable buckets with predictable pricing.</p>
        <button class="btn">Explore Storage</button>
    </div>

<div class="product">
        <h3>Networking</h3>
        <p>NAT‑friendly public endpoints with auto‑TLS.</p>
        <button class="btn">Explore Networking</button>
    </div>

<div class="product">
        <h3>Identity</h3>
        <p>Lightweight MFA, roles, and user management.</p>
        <button class="btn">Explore Identity</button>
    </div>
</div>

<div class="section" id="features">
    <h2>Platform Features</h2>

<div class="features">
        <div class="feature">
            <h3>Neon Cobalt UI</h3>
            <p>Glowing, animated, futuristic interface.</p>
        </div>
        <div class="feature">
            <h3>Student‑Ready</h3>
            <p>Built for real IT education.</p>
        </div>
        <div class="feature">
            <h3>Fast Provisioning</h3>
            <p>VMs boot in seconds.</p>
        </div>
        <div class="feature">
            <h3>Predictable Pricing</h3>
            <p>No surprise fees.</p>
        </div>
        <div class="feature">
            <h3>NAT‑Friendly Access</h3>
            <p>Expose ports safely.</p>
        </div>
        <div class="feature">
            <h3>Instructor Tools</h3>
            <p>Class templates and resets.</p>
        </div>
    </div>
</div>

</body>
</html>

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>
312