admin/Cobaltv2.html

Cobaltv2.html · 8.5 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 Navigation */
    .topbar {
        background: #005fb8;
        color: white;
        padding: 16px 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

.brand {
        font-size: 26px;
        font-weight: 600;
    }

nav a {
        margin-left: 25px;
        color: white;
        text-decoration: none;
        font-size: 15px;
    }

nav a:hover {
        text-decoration: underline;
    }

/* Hero Section */
    .hero {
        padding: 100px 50px;
        background: linear-gradient(135deg, #005fb8, #0078d4);
        color: white;
    }

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

.hero p {
        font-size: 20px;
        max-width: 700px;
    }

.hero .btn {
        margin-top: 30px;
        background: #ffffff;
        color: #005fb8;
        padding: 14px 26px;
        border-radius: 4px;
        border: none;
        font-size: 16px;
        cursor: pointer;
    }

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

/* Section Wrapper */
    .section {
        padding: 70px 50px;
        background: #f3f2f1;
    }

.section h2 {
        font-size: 32px;
        color: #005fb8;
        margin-bottom: 30px;
    }

/* Feature Grid */
    .features {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 25px;
    }

.feature {
        background: white;
        padding: 25px;
        border-radius: 6px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

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

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

/* Product Sections */
    .product {
        background: white;
        padding: 40px;
        border-radius: 6px;
        margin-bottom: 40px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

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

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

.product .btn {
        background: #005fb8;
        color: white;
        padding: 10px 18px;
        border-radius: 4px;
        border: none;
        cursor: pointer;
        font-size: 14px;
    }

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

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

.price-card {
        background: white;
        padding: 30px;
        border-radius: 6px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        text-align: center;
    }

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

.price-card p {
        font-size: 16px;
        margin-bottom: 20px;
    }

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

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

.testimonial {
        background: white;
        padding: 25px;
        border-radius: 6px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

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

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

/* Footer */
    .footer {
        padding: 30px 50px;
        background: #ffffff;
        font-size: 14px;
        color: #666;
        border-top: 1px solid #ddd;
        text-align: center;
    }
</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>
        A modern, Azure‑inspired cloud platform built for IT programs, labs, and real infrastructure learning.
        Simple. Fast. NAT‑friendly. Student‑ready.
    </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>Provision Linux and Windows VMs with clean networking, sane defaults, and instant access.</p>
        <button class="btn">Explore VMs</button>
    </div>

<div class="product">
        <h3>Storage</h3>
        <p>Simple, scalable storage buckets with predictable pricing and zero surprise egress fees.</p>
        <button class="btn">Explore Storage</button>
    </div>

<div class="product">
        <h3>Networking</h3>
        <p>Expose services safely with NAT‑friendly public endpoints and automatic firewall rules.</p>
        <button class="btn">Explore Networking</button>
    </div>

<div class="product">
        <h3>Identity</h3>
        <p>Lightweight identity system with MFA, roles, and clean 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, clean, and familiar interface without the enterprise clutter.</p>
        </div>
        <div class="feature">
            <h3>Student‑Ready</h3>
            <p>Designed for IT programs that teach real systems, not cloud simulations.</p>
        </div>
        <div class="feature">
            <h3>Fast Provisioning</h3>
            <p>VMs boot in seconds. Storage mounts instantly. Networking is automatic.</p>
        </div>
        <div class="feature">
            <h3>Predictable Pricing</h3>
            <p>No egress fees. No hidden charges. Flat per‑VM or per‑class pricing.</p>
        </div>
        <div class="feature">
            <h3>NAT‑Friendly Access</h3>
            <p>Expose ports safely with simple public endpoints and auto‑TLS.</p>
        </div>
        <div class="feature">
            <h3>Instructor Tools</h3>
            <p>Class templates, VM cloning, and environment resets built for teaching.</p>
        </div>
    </div>
</div>

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

<div class="pricing-grid">
        <div class="price-card">
            <h3>Starter</h3>
            <p>Perfect for small classes or labs.</p>
            <div class="price">$49/mo</div>
            <p>Up to 10 VMs</p>
        </div>

<div class="price-card">
            <h3>Standard</h3>
            <p>Ideal for full IT programs.</p>
            <div class="price">$99/mo</div>
            <p>Up to 30 VMs</p>
        </div>

<div class="price-card">
            <h3>Enterprise</h3>
            <p>Unlimited scale for institutions.</p>
            <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 finally 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 for student projects.”</p>
            <span>— Security Instructor</span>
        </div>
    </div>
</div>

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