admin/Cobaltv3.html

Cobaltv3.html · 8.7 KiB · HTML Raw

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>COBALT Cloud Platform</title>
<style>
    body {
        margin: 0;
        font-family: "Segoe UI", sans-serif;
        background: #f3f2f1;
        color: #323130;
    }

/* TOP NAV */
    .topbar {
        background: linear-gradient(90deg, #003f7f, #005fb8, #0078d4);
        color: white;
        padding: 18px 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 3px 8px rgba(0,0,0,0.25);
    }

.brand {
        font-size: 30px;
        font-weight: 700;
        letter-spacing: 1px;
    }

nav a {
        margin-left: 30px;
        color: white;
        text-decoration: none;
        font-size: 16px;
        font-weight: 500;
    }

nav a:hover {
        opacity: 0.8;
    }

/* HERO */
    .hero {
        padding: 120px 60px;
        background: linear-gradient(135deg, #003f7f, #005fb8, #0078d4, #0094ff);
        color: white;
        text-shadow: 0 2px 6px rgba(0,0,0,0.4);
        animation: gradientShift 12s ease infinite;
        background-size: 300% 300%;
    }

@keyframes gradientShift {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }

.hero h1 {
        font-size: 64px;
        margin-bottom: 20px;
    }

.hero p {
        font-size: 22px;
        max-width: 800px;
    }

.hero .btn {
        margin-top: 40px;
        background: white;
        color: #005fb8;
        padding: 16px 30px;
        border-radius: 6px;
        border: none;
        font-size: 18px;
        cursor: pointer;
        font-weight: 600;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }

.hero .btn:hover {
        background: #e5e5e5;
    }

/* SECTION */
    .section {
        padding: 80px 60px;
    }

.section h2 {
        font-size: 38px;
        color: #005fb8;
        margin-bottom: 40px;
        text-align: center;
    }

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

.feature {
        background: white;
        padding: 30px;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        transition: 0.3s;
        border-top: 6px solid #005fb8;
    }

.feature:hover {
        transform: translateY(-6px);
        box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    }

.feature h3 {
        margin-top: 0;
        font-size: 22px;
        color: #005fb8;
    }

.feature p {
        font-size: 16px;
    }

/* PRODUCT CARDS */
    .product {
        background: linear-gradient(135deg, #ffffff, #e8f3ff);
        padding: 50px;
        border-radius: 12px;
        margin-bottom: 50px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

.product h3 {
        font-size: 28px;
        color: #005fb8;
        margin-top: 0;
    }

.product p {
        font-size: 18px;
        margin-bottom: 20px;
    }

.product .btn {
        background: #005fb8;
        color: white;
        padding: 12px 22px;
        border-radius: 6px;
        border: none;
        cursor: pointer;
        font-size: 16px;
    }

.product .btn:hover {
        background: #004a8c;
    }

/* PRICING */
    .pricing-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 30px;
    }

.price-card {
        background: white;
        padding: 40px;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        text-align: center;
        border-top: 8px solid #005fb8;
    }

.price-card h3 {
        font-size: 26px;
        color: #005fb8;
        margin-bottom: 10px;
    }

.price-card .price {
        font-size: 40px;
        font-weight: 700;
        margin-bottom: 20px;
        color: #323130;
    }

/* TESTIMONIALS */
    .testimonials {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        gap: 30px;
    }

.testimonial {
        background: white;
        padding: 30px;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        border-left: 6px solid #005fb8;
    }

.testimonial p {
        font-size: 18px;
        margin-bottom: 10px;
    }

.testimonial span {
        font-size: 15px;
        color: #666;
    }

/* FOOTER */
    .footer {
        padding: 40px 60px;
        background: linear-gradient(90deg, #003f7f, #005fb8, #0078d4);
        color: white;
        text-align: center;
        font-size: 16px;
        margin-top: 40px;
    }
</style>
</head>
<body>

<div class="topbar">
    <div class="brand">🔷 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">
    <h1>COBALT Cloud</h1>
    <p>
        The next‑generation Azure‑inspired cloud platform built for IT programs, labs,
        and real infrastructure learning — now with full cobalt‑blue gradients and
        animated flair.
    </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>Azure‑Inspired UI</h3>
            <p>Modern, gradient‑rich, and familiar.</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>

<div class="section" id="pricing">
    <h2>Pricing</h2>

<div class="pricing-grid">
        <div class="price-card">
            <h3>Starter</h3>
            <div class="price">$49/mo</div>
            <p>Up to 10 VMs</p>
        </div>

<div class="price-card">
            <h3>Standard</h3>
            <div class="price">$99/mo</div>
            <p>Up to 30 VMs</p>
        </div>

<div class="price-card">
            <h3>Enterprise</h3>
            <div class="price">$199/mo</div>
            <p>Unlimited VMs</p>
        </div>
    </div>
</div>

<div class="section" id="testimonials">
    <h2>Testimonials</h2>

<div class="testimonials">
        <div class="testimonial">
            <p>“COBALT gives my students real infrastructure to break and fix.”</p>
            <span>— IT Instructor</span>
        </div>
        <div class="testimonial">
            <p>“Way simpler than Azure or AWS. My class actually understands networking now.”</p>
            <span>— Network Admin</span>
        </div>
        <div class="testimonial">
            <p>“The NAT‑friendly endpoints are a game changer.”</p>
            <span>— Security Instructor</span>
        </div>
    </div>
</div>

<div class="section" id="about">
    <h2>About COBALT</h2>
    <p style="font-size:20px; max-width:900px; margin:auto;">
        COBALT is built for instructors, students, and labs that care about real infrastructure.
        No enterprise noise. No fake cloud. Just clean, modern, cobalt‑blue tooling designed for
        Rhodes‑level IT programs.
    </p>
</div>

</body>
</html>

1	<!DOCTYPE html>
2	<html lang="en">
3	<head>
4	<meta charset="UTF-8">
5	<title>COBALT Cloud Platform</title>
6	<style>
7	body {
8	margin: 0;
9	font-family: "Segoe UI", sans-serif;
10	background: #f3f2f1;
11	color: #323130;
12	}
13
14	/* TOP NAV */
15	.topbar {
16	background: linear-gradient(90deg, #003f7f, #005fb8, #0078d4);
17	color: white;
18	padding: 18px 60px;
19	display: flex;
20	justify-content: space-between;
21	align-items: center;
22	box-shadow: 0 3px 8px rgba(0,0,0,0.25);
23	}
24
25	.brand {
26	font-size: 30px;
27	font-weight: 700;
28	letter-spacing: 1px;
29	}
30
31	nav a {
32	margin-left: 30px;
33	color: white;
34	text-decoration: none;
35	font-size: 16px;
36	font-weight: 500;
37	}
38
39	nav a:hover {
40	opacity: 0.8;
41	}
42
43	/* HERO */
44	.hero {
45	padding: 120px 60px;
46	background: linear-gradient(135deg, #003f7f, #005fb8, #0078d4, #0094ff);
47	color: white;
48	text-shadow: 0 2px 6px rgba(0,0,0,0.4);
49	animation: gradientShift 12s ease infinite;
50	background-size: 300% 300%;
51	}
52
53	@keyframes gradientShift {
54	0% { background-position: 0% 50%; }
55	50% { background-position: 100% 50%; }
56	100% { background-position: 0% 50%; }
57	}
58
59	.hero h1 {
60	font-size: 64px;
61	margin-bottom: 20px;
62	}
63
64	.hero p {
65	font-size: 22px;
66	max-width: 800px;
67	}
68
69	.hero .btn {
70	margin-top: 40px;
71	background: white;
72	color: #005fb8;
73	padding: 16px 30px;
74	border-radius: 6px;
75	border: none;
76	font-size: 18px;
77	cursor: pointer;
78	font-weight: 600;
79	box-shadow: 0 4px 10px rgba(0,0,0,0.3);
80	}
81
82	.hero .btn:hover {
83	background: #e5e5e5;
84	}
85
86	/* SECTION */
87	.section {
88	padding: 80px 60px;
89	}
90
91	.section h2 {
92	font-size: 38px;
93	color: #005fb8;
94	margin-bottom: 40px;
95	text-align: center;
96	}
97
98	/* FEATURE GRID */
99	.features {
100	display: grid;
101	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
102	gap: 30px;
103	}
104
105	.feature {
106	background: white;
107	padding: 30px;
108	border-radius: 10px;
109	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
110	transition: 0.3s;
111	border-top: 6px solid #005fb8;
112	}
113
114	.feature:hover {
115	transform: translateY(-6px);
116	box-shadow: 0 6px 18px rgba(0,0,0,0.25);
117	}
118
119	.feature h3 {
120	margin-top: 0;
121	font-size: 22px;
122	color: #005fb8;
123	}
124
125	.feature p {
126	font-size: 16px;
127	}
128
129	/* PRODUCT CARDS */
130	.product {
131	background: linear-gradient(135deg, #ffffff, #e8f3ff);
132	padding: 50px;
133	border-radius: 12px;
134	margin-bottom: 50px;
135	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
136	}
137
138	.product h3 {
139	font-size: 28px;
140	color: #005fb8;
141	margin-top: 0;
142	}
143
144	.product p {
145	font-size: 18px;
146	margin-bottom: 20px;
147	}
148
149	.product .btn {
150	background: #005fb8;
151	color: white;
152	padding: 12px 22px;
153	border-radius: 6px;
154	border: none;
155	cursor: pointer;
156	font-size: 16px;
157	}
158
159	.product .btn:hover {
160	background: #004a8c;
161	}
162
163	/* PRICING */
164	.pricing-grid {
165	display: grid;
166	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
167	gap: 30px;
168	}
169
170	.price-card {
171	background: white;
172	padding: 40px;
173	border-radius: 12px;
174	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
175	text-align: center;
176	border-top: 8px solid #005fb8;
177	}
178
179	.price-card h3 {
180	font-size: 26px;
181	color: #005fb8;
182	margin-bottom: 10px;
183	}
184
185	.price-card .price {
186	font-size: 40px;
187	font-weight: 700;
188	margin-bottom: 20px;
189	color: #323130;
190	}
191
192	/* TESTIMONIALS */
193	.testimonials {
194	display: grid;
195	grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
196	gap: 30px;
197	}
198
199	.testimonial {
200	background: white;
201	padding: 30px;
202	border-radius: 10px;
203	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
204	border-left: 6px solid #005fb8;
205	}
206
207	.testimonial p {
208	font-size: 18px;
209	margin-bottom: 10px;
210	}
211
212	.testimonial span {
213	font-size: 15px;
214	color: #666;
215	}
216
217	/* FOOTER */
218	.footer {
219	padding: 40px 60px;
220	background: linear-gradient(90deg, #003f7f, #005fb8, #0078d4);
221	color: white;
222	text-align: center;
223	font-size: 16px;
224	margin-top: 40px;
225	}
226	</style>
227	</head>
228	<body>
229
230	<!-- NAV -->
231	<div class="topbar">
232	<div class="brand">🔷 COBALT Cloud</div>
233	<nav>
234	<a href="#products">Products</a>
235	<a href="#features">Features</a>
236	<a href="#pricing">Pricing</a>
237	<a href="#testimonials">Testimonials</a>
238	<a href="#about">About</a>
239	</nav>
240	</div>
241
242	<!-- HERO -->
243	<div class="hero">
244	<h1>COBALT Cloud</h1>
245	<p>
246	The next‑generation Azure‑inspired cloud platform built for IT programs, labs,
247	and real infrastructure learning — now with full cobalt‑blue gradients and
248	animated flair.
249	</p>
250	<button class="btn">Launch COBALT</button>
251	</div>
252
253	<!-- PRODUCTS -->
254	<div class="section" id="products">
255	<h2>COBALT Products</h2>
256
257	<div class="product">
258	<h3>Virtual Machines</h3>
259	<p>Lightning‑fast provisioning, clean networking, and instant access.</p>
260	<button class="btn">Explore VMs</button>
261	</div>
262
263	<div class="product">
264	<h3>Storage</h3>
265	<p>Simple, scalable buckets with predictable pricing.</p>
266	<button class="btn">Explore Storage</button>
267	</div>
268
269	<div class="product">
270	<h3>Networking</h3>
271	<p>NAT‑friendly public endpoints with auto‑TLS.</p>
272	<button class="btn">Explore Networking</button>
273	</div>
274
275	<div class="product">
276	<h3>Identity</h3>
277	<p>Lightweight MFA, roles, and user management.</p>
278	<button class="btn">Explore Identity</button>
279	</div>
280	</div>
281
282	<!-- FEATURES -->
283	<div class="section" id="features">
284	<h2>Platform Features</h2>
285
286	<div class="features">
287	<div class="feature">
288	<h3>Azure‑Inspired UI</h3>
289	<p>Modern, gradient‑rich, and familiar.</p>
290	</div>
291	<div class="feature">
292	<h3>Student‑Ready</h3>
293	<p>Built for real IT education.</p>
294	</div>
295	<div class="feature">
296	<h3>Fast Provisioning</h3>
297	<p>VMs boot in seconds.</p>
298	</div>
299	<div class="feature">
300	<h3>Predictable Pricing</h3>
301	<p>No surprise fees.</p>
302	</div>
303	<div class="feature">
304	<h3>NAT‑Friendly Access</h3>
305	<p>Expose ports safely.</p>
306	</div>
307	<div class="feature">
308	<h3>Instructor Tools</h3>
309	<p>Class templates and resets.</p>
310	</div>
311	</div>
312	</div>
313
314	<!-- PRICING -->
315	<div class="section" id="pricing">
316	<h2>Pricing</h2>
317
318	<div class="pricing-grid">
319	<div class="price-card">
320	<h3>Starter</h3>
321	<div class="price">$49/mo</div>
322	<p>Up to 10 VMs</p>
323	</div>
324
325	<div class="price-card">
326	<h3>Standard</h3>
327	<div class="price">$99/mo</div>
328	<p>Up to 30 VMs</p>
329	</div>
330
331	<div class="price-card">
332	<h3>Enterprise</h3>
333	<div class="price">$199/mo</div>
334	<p>Unlimited VMs</p>
335	</div>
336	</div>
337	</div>
338
339	<!-- TESTIMONIALS -->
340	<div class="section" id="testimonials">
341	<h2>Testimonials</h2>
342
343	<div class="testimonials">
344	<div class="testimonial">
345	<p>“COBALT gives my students real infrastructure to break and fix.”</p>
346	<span>— IT Instructor</span>
347	</div>
348	<div class="testimonial">
349	<p>“Way simpler than Azure or AWS. My class actually understands networking now.”</p>
350	<span>— Network Admin</span>
351	</div>
352	<div class="testimonial">
353	<p>“The NAT‑friendly endpoints are a game changer.”</p>
354	<span>— Security Instructor</span>
355	</div>
356	</div>
357	</div>
358
359	<!-- ABOUT -->
360	<div class="section" id="about">
361	<h2>About COBALT</h2>
362	<p style="font-size:20px; max-width:900px; margin:auto;">
363	COBALT is built for instructors, students, and labs that care about real infrastructure.
364	No enterprise noise. No fake cloud. Just clean, modern, cobalt‑blue tooling designed for
365	Rhodes‑level IT programs.
366	</p>
367	</div>
368
369	<!-- FOOTER -->
370	<div class="footer">
371	© COBALT Cloud — Built for real IT education.
372	</div>
373
374	</body>
375	</html>
376