Skip to content

Commit 8f271ae

Browse files
solygambassolygambas
committed
add finished cloud hosting service
1 parent f4d4c8b commit 8f271ae

File tree

4 files changed

+199
-1
lines changed

4 files changed

+199
-1
lines changed

‎96-cloud hosting service/index.html

+77
Original file line numberDiff line numberDiff line change
@@ -270,6 +270,83 @@ <h1 class="md">The Loruki Platform</h1>
270270
</div>
271271
</section>
272272

273+
<!-- docs -->
274+
<section id="docs">
275+
<!-- head -->
276+
<div class="docs-head bg-primary py-3">
277+
<div class="container grid">
278+
<div>
279+
<h1 class="xl">Docs</h1>
280+
<p class="lead">Learn how to work with the Loruki platform</p>
281+
</div>
282+
<img
283+
src="https://github.com/bradtraversy/loruki-website/blob/master/images/docs.png?raw=true"
284+
alt=""
285+
/>
286+
</div>
287+
</div>
288+
<!-- main docs -->
289+
<div class="docs-main my-4">
290+
<div class="container grid">
291+
<div class="card bg-light p-3">
292+
<h3 class="my-2">Essentials</h3>
293+
<nav>
294+
<ul>
295+
<li><a class="text-primary" href="#">Introduction</a></li>
296+
<li><a href="#">About Loruki</a></li>
297+
<li><a href="#">Installation</a></li>
298+
</ul>
299+
</nav>
300+
301+
<h3 class="my-2">Deployment</h3>
302+
<nav>
303+
<ul>
304+
<li><a href="#">Setting up a container</a></li>
305+
<li><a href="#">Using the CLI</a></li>
306+
<li><a href="#">Managing resources</a></li>
307+
<li><a href="#">Upgrade & downgrade</a></li>
308+
</ul>
309+
</nav>
310+
</div>
311+
<div class="card">
312+
<h2>Introduction</h2>
313+
<p>
314+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
315+
Distinctio illo facere perferendis laborum? Similique recusandae
316+
incidunt eos dolorum aliquam ipsam unde perspiciatis laudantium
317+
totam quam laborum velit, at maxime minus?
318+
</p>
319+
320+
<div class="alert alert-success">
321+
<i class="fas fa-info"></i> Lorem ipsum dolor sit amet consectetur
322+
adipisicing elit. Quae, animi?
323+
</div>
324+
325+
<h3>Lorem, ipsum dolor.</h3>
326+
<p>
327+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima
328+
totam magni eius vitae velit id, atque veritatis! At, vero porro.
329+
</p>
330+
<a href="#" class="btn btn-primary">Install CLI</a>
331+
332+
<h3>Requirements</h3>
333+
<ul>
334+
<li>Windows 10, Mac OSX, Linux</li>
335+
<li>Node.js v14 or higher</li>
336+
</ul>
337+
338+
<h3>Install</h3>
339+
<p>Mac (Homebrew)</p>
340+
<pre><code>$ brew install loruki-cli</code></pre>
341+
<p>NPM</p>
342+
<pre><code>$ npm install loruki-cli</code></pre>
343+
<p>Yarn</p>
344+
<pre><code>$ yarn install loruki-cli</code></pre>
345+
</div>
346+
</div>
347+
</div>
348+
</section>
349+
273350
<!-- footer -->
274351
<footer class="footer bg-dark py-5">
275352
<div class="container grid grid-3">

‎96-cloud hosting service/style.css

+111
Original file line numberDiff line numberDiff line change
@@ -220,6 +220,11 @@ pre {
220220

221221
/* features */
222222

223+
.features-head,
224+
.docs-head {
225+
margin-top: 4rem;
226+
}
227+
223228
.features-head img,
224229
.docs-head img {
225230
width: 200px;
@@ -247,6 +252,28 @@ pre {
247252
grid-column: 1 / span 2;
248253
}
249254

255+
/* docs */
256+
257+
.docs-main h3 {
258+
margin: 20px 0;
259+
}
260+
261+
.docs-main .grid {
262+
grid-template-columns: 1fr 2fr;
263+
align-items: flex-start;
264+
}
265+
266+
.docs-main nav li {
267+
font-size: 1.0625rem;
268+
padding-bottom: 5px;
269+
margin-bottom: 5px;
270+
border-bottom: 1px solid #ccc;
271+
}
272+
273+
.docs-main a:hover {
274+
font-weight: bold;
275+
}
276+
250277
/* footer */
251278

252279
.footer .social a {
@@ -277,6 +304,16 @@ pre {
277304
}
278305
}
279306

307+
@keyframes slideInFromTop {
308+
0% {
309+
transform: translateY(-33%);
310+
}
311+
312+
100% {
313+
transform: translateX(0);
314+
}
315+
}
316+
280317
@keyframes slideInFromBottom {
281318
0% {
282319
opacity: 0;
@@ -287,3 +324,77 @@ pre {
287324
transform: translateY(0);
288325
}
289326
}
327+
328+
/* media queries */
329+
330+
@media (max-width: 768px) {
331+
.grid,
332+
.showcase .grid,
333+
.stats .grid,
334+
.cli .grid,
335+
.cloud .grid,
336+
.features-main .grid,
337+
.docs-main .grid {
338+
grid-template-columns: 1fr;
339+
grid-template-rows: 1fr;
340+
}
341+
342+
.cli .grid > *:first-child,
343+
.features-main .grid > *:first-child,
344+
.features-main .grid > *:nth-child(2) {
345+
grid-column: 1;
346+
grid-row: 1;
347+
}
348+
349+
.showcase {
350+
height: auto;
351+
}
352+
353+
.showcase-text {
354+
text-align: center;
355+
margin-top: 40px;
356+
animation: slideInFromTop 0.5s ease-out;
357+
}
358+
359+
.showcase-form {
360+
justify-self: center;
361+
margin: auto;
362+
animation: slideInFromBottom 0.5s ease-out;
363+
}
364+
365+
.cloud .grid {
366+
border-radius: 0;
367+
}
368+
369+
.features-head,
370+
.features-sub-head,
371+
.docs-head {
372+
text-align: center;
373+
}
374+
375+
.features-head img,
376+
.features-sub-head img,
377+
.docs-head img {
378+
width: 150px;
379+
justify-self: center;
380+
}
381+
}
382+
383+
@media (max-width: 500px) {
384+
.navbar {
385+
height: 110px;
386+
}
387+
388+
.navbar .flex {
389+
flex-direction: column;
390+
}
391+
392+
.navbar ul {
393+
padding: 10px;
394+
background-color: rgba(0, 0, 0, 0.1);
395+
}
396+
397+
.showcase-form {
398+
width: 300px;
399+
}
400+
}

‎96-cloud hosting service/utilities.css

+10
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,16 @@
128128
text-align: center;
129129
}
130130

131+
@media (max-width: 768px) {
132+
.lg {
133+
font-size: 2rem;
134+
}
135+
136+
.xl {
137+
font-size: 2.5rem;
138+
}
139+
}
140+
131141
/* Alert */
132142
.alert {
133143
background-color: var(--light-color);

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@
101101
| 93 | [Creative Portfolio](https://github.com/solygambas/html-css-fifty-projects/tree/master/93-creative%20portfolio) | [Live Demo](https://codepen.io/solygambas/full/zYNbgxR) |
102102
| 94 | [Laptop UI](https://github.com/solygambas/html-css-fifty-projects/tree/master/94-laptop%20UI) | [Live Demo](https://codepen.io/solygambas/full/eYgoxMo) |
103103
| 95 | [Headphones Product Page](https://github.com/solygambas/html-css-fifty-projects/tree/master/95-headphones%20product%20page) | [Live Demo](https://codepen.io/solygambas/full/KKaLmEr) |
104-
| 96 | [Cloud Hosting Service](https://github.com/solygambas/html-css-fifty-projects/tree/master/96-cloud%20hosting%20service) | [Live Demo](#) |
104+
| 96 | [Cloud Hosting Service](https://github.com/solygambas/html-css-fifty-projects/tree/master/96-cloud%20hosting%20service) | [Live Demo](https://codepen.io/solygambas/full/oNBrXYr) |
105105

106106
This repository is mostly based on 2 courses by Brad Traversy (2020):
107107

0 commit comments

Comments
 (0)