admin/Cobalthome

Cobalthome · 4.0 KiB · Text Raw

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

/* Top bar */
    .topbar {
        background: #005fb8;
        color: white;
        padding: 14px 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

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

.topbar nav a {
        margin-left: 20px;
        color: white;
        text-decoration: none;
        font-size: 14px;
    }

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

/* Hero */
    .hero {
        padding: 80px 40px;
        background: linear-gradient(135deg, #005fb8, #0078d4);
        color: white;
        text-align: left;
    }

.hero h1 {
        font-size: 42px;
        margin-bottom: 10px;
    }

.hero p {
        font-size: 18px;
        max-width: 600px;
    }

.hero .btn {
        margin-top: 25px;
        background: #ffffff;
        color: #005fb8;
        padding: 12px 22px;
        border-radius: 4px;
        border: none;
        font-size: 15px;
        cursor: pointer;
    }

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

/* Sections */
    .section {
        padding: 50px 40px;
        background: #f3f2f1;
    }

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

.features {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 20px;
    }

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

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

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

/* Footer */
    .footer {
        padding: 20px 40px;
        background: #ffffff;
        font-size: 13px;
        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="#features">Features</a>
        <a href="#pricing">Pricing</a>
        <a href="#about">About</a>
    </nav>
</div>

<div class="hero">
    <h1>COBALT Cloud</h1>
    <p>
        A simple, IT‑friendly cloud platform with Azure‑style clarity and zero enterprise bullshit.
        Provision VMs, expose services, and teach real infrastructure—fast.
    </p>
    <button class="btn">Get Started</button>
</div>

<div class="section" id="features">
    <h2>Why COBALT</h2>
    <div class="features">
        <div class="feature">
            <h3>VM‑First Design</h3>
            <p>Spin up teaching and lab VMs in seconds with sane defaults and clean networking.</p>
        </div>
        <div class="feature">
            <h3>NAT‑Friendly Access</h3>
            <p>Expose services safely with simple public endpoints—no 40‑step wizard.</p>
        </div>
        <div class="feature">
            <h3>Student‑Ready</h3>
            <p>Built for IT programs: real systems, real networks, no fake “cloud” simulations.</p>
        </div>
        <div class="feature">
            <h3>Azure‑Inspired UI</h3>
            <p>Modern, familiar interface that feels like the Azure portal without the clutter.</p>
        </div>
    </div>
</div>

<div class="section" id="pricing">
    <h2>Pricing</h2>
    <p>Keep it simple: flat per‑VM or per‑class pricing. No hidden egress, no surprise bills.</p>
</div>

<div class="section" id="about">
    <h2>About COBALT</h2>
    <p>
        COBALT is designed for instructors, students, and labs that actually care about
        understanding infrastructure—not just clicking through cloud dashboards.
    </p>
</div>

</body>
</html>

1	<!DOCTYPE html>
2	<html lang="en">
3	<head>
4	<meta charset="UTF-8">
5	<title>COBALT Cloud</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 bar */
15	.topbar {
16	background: #005fb8;
17	color: white;
18	padding: 14px 40px;
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	.topbar .brand {
26	font-size: 22px;
27	font-weight: 600;
28	}
29
30	.topbar nav a {
31	margin-left: 20px;
32	color: white;
33	text-decoration: none;
34	font-size: 14px;
35	}
36
37	.topbar nav a:hover {
38	text-decoration: underline;
39	}
40
41	/* Hero */
42	.hero {
43	padding: 80px 40px;
44	background: linear-gradient(135deg, #005fb8, #0078d4);
45	color: white;
46	text-align: left;
47	}
48
49	.hero h1 {
50	font-size: 42px;
51	margin-bottom: 10px;
52	}
53
54	.hero p {
55	font-size: 18px;
56	max-width: 600px;
57	}
58
59	.hero .btn {
60	margin-top: 25px;
61	background: #ffffff;
62	color: #005fb8;
63	padding: 12px 22px;
64	border-radius: 4px;
65	border: none;
66	font-size: 15px;
67	cursor: pointer;
68	}
69
70	.hero .btn:hover {
71	background: #e5e5e5;
72	}
73
74	/* Sections */
75	.section {
76	padding: 50px 40px;
77	background: #f3f2f1;
78	}
79
80	.section h2 {
81	font-size: 26px;
82	color: #005fb8;
83	margin-bottom: 20px;
84	}
85
86	.features {
87	display: grid;
88	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
89	gap: 20px;
90	}
91
92	.feature {
93	background: white;
94	padding: 20px;
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: 18px;
102	color: #005fb8;
103	}
104
105	.feature p {
106	font-size: 14px;
107	}
108
109	/* Footer */
110	.footer {
111	padding: 20px 40px;
112	background: #ffffff;
113	font-size: 13px;
114	color: #666;
115	border-top: 1px solid #ddd;
116	text-align: center;
117	}
118	</style>
119	</head>
120	<body>
121
122	<div class="topbar">
123	<div class="brand">🔷 COBALT Cloud</div>
124	<nav>
125	<a href="#features">Features</a>
126	<a href="#pricing">Pricing</a>
127	<a href="#about">About</a>
128	</nav>
129	</div>
130
131	<div class="hero">
132	<h1>COBALT Cloud</h1>
133	<p>
134	A simple, IT‑friendly cloud platform with Azure‑style clarity and zero enterprise bullshit.
135	Provision VMs, expose services, and teach real infrastructure—fast.
136	</p>
137	<button class="btn">Get Started</button>
138	</div>
139
140	<div class="section" id="features">
141	<h2>Why COBALT</h2>
142	<div class="features">
143	<div class="feature">
144	<h3>VM‑First Design</h3>
145	<p>Spin up teaching and lab VMs in seconds with sane defaults and clean networking.</p>
146	</div>
147	<div class="feature">
148	<h3>NAT‑Friendly Access</h3>
149	<p>Expose services safely with simple public endpoints—no 40‑step wizard.</p>
150	</div>
151	<div class="feature">
152	<h3>Student‑Ready</h3>
153	<p>Built for IT programs: real systems, real networks, no fake “cloud” simulations.</p>
154	</div>
155	<div class="feature">
156	<h3>Azure‑Inspired UI</h3>
157	<p>Modern, familiar interface that feels like the Azure portal without the clutter.</p>
158	</div>
159	</div>
160	</div>
161
162	<div class="section" id="pricing">
163	<h2>Pricing</h2>
164	<p>Keep it simple: flat per‑VM or per‑class pricing. No hidden egress, no surprise bills.</p>
165	</div>
166
167	<div class="section" id="about">
168	<h2>About COBALT</h2>
169	<p>
170	COBALT is designed for instructors, students, and labs that actually care about
171	understanding infrastructure—not just clicking through cloud dashboards.
172	</p>
173	</div>
174
175	<div class="footer">
176	© COBALT Cloud — Built for Rhodes‑style IT programs.
177	</div>
178
179	</body>
180	</html>
181