add finished cloud hosting service

Author: solygambas

96-cloud hosting service/index.html

@@ -270,6 +270,83 @@ <h1 class="md">The Loruki Platform</h1>
       </div>
     </section>
 
+    <!-- docs -->
+    <section id="docs">
+      <!-- head -->
+      <div class="docs-head bg-primary py-3">
+        <div class="container grid">
+          <div>
+            <h1 class="xl">Docs</h1>
+            <p class="lead">Learn how to work with the Loruki platform</p>
+          </div>
+          <img
+            src="https://github.com/bradtraversy/loruki-website/blob/master/images/docs.png?raw=true"
+            alt=""
+          />
+        </div>
+      </div>
+      <!-- main docs -->
+      <div class="docs-main my-4">
+        <div class="container grid">
+          <div class="card bg-light p-3">
+            <h3 class="my-2">Essentials</h3>
+            <nav>
+              <ul>
+                <li><a class="text-primary" href="#">Introduction</a></li>
+                <li><a href="#">About Loruki</a></li>
+                <li><a href="#">Installation</a></li>
+              </ul>
+            </nav>
+
+            <h3 class="my-2">Deployment</h3>
+            <nav>
+              <ul>
+                <li><a href="#">Setting up a container</a></li>
+                <li><a href="#">Using the CLI</a></li>
+                <li><a href="#">Managing resources</a></li>
+                <li><a href="#">Upgrade & downgrade</a></li>
+              </ul>
+            </nav>
+          </div>
+          <div class="card">
+            <h2>Introduction</h2>
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit.
+              Distinctio illo facere perferendis laborum? Similique recusandae
+              incidunt eos dolorum aliquam ipsam unde perspiciatis laudantium
+              totam quam laborum velit, at maxime minus?
+            </p>
+
+            <div class="alert alert-success">
+              <i class="fas fa-info"></i> Lorem ipsum dolor sit amet consectetur
+              adipisicing elit. Quae, animi?
+            </div>
+
+            <h3>Lorem, ipsum dolor.</h3>
+            <p>
+              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima
+              totam magni eius vitae velit id, atque veritatis! At, vero porro.
+            </p>
+            <a href="#" class="btn btn-primary">Install CLI</a>
+
+            <h3>Requirements</h3>
+            <ul>
+              <li>Windows 10, Mac OSX, Linux</li>
+              <li>Node.js v14 or higher</li>
+            </ul>
+
+            <h3>Install</h3>
+            <p>Mac (Homebrew)</p>
+            <pre><code>$ brew install loruki-cli</code></pre>
+            <p>NPM</p>
+            <pre><code>$ npm install loruki-cli</code></pre>
+            <p>Yarn</p>
+            <pre><code>$ yarn install loruki-cli</code></pre>
+          </div>
+        </div>
+      </div>
+    </section>
+
     <!-- footer -->
     <footer class="footer bg-dark py-5">
       <div class="container grid grid-3">

96-cloud hosting service/style.css

@@ -220,6 +220,11 @@ pre {
 
 /* features */
 
+.features-head,
+.docs-head {
+  margin-top: 4rem;
+}
+
 .features-head img,
 .docs-head img {
   width: 200px;
@@ -247,6 +252,28 @@ pre {
   grid-column: 1 / span 2;
 }
 
+/* docs */
+
+.docs-main h3 {
+  margin: 20px 0;
+}
+
+.docs-main .grid {
+  grid-template-columns: 1fr 2fr;
+  align-items: flex-start;
+}
+
+.docs-main nav li {
+  font-size: 1.0625rem;
+  padding-bottom: 5px;
+  margin-bottom: 5px;
+  border-bottom: 1px solid #ccc;
+}
+
+.docs-main a:hover {
+  font-weight: bold;
+}
+
 /* footer */
 
 .footer .social a {
@@ -277,6 +304,16 @@ pre {
   }
 }
 
+@keyframes slideInFromTop {
+  0% {
+    transform: translateY(-33%);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}
+
 @keyframes slideInFromBottom {
   0% {
     opacity: 0;
@@ -287,3 +324,77 @@ pre {
     transform: translateY(0);
   }
 }
+
+/* media queries */
+
+@media (max-width: 768px) {
+  .grid,
+  .showcase .grid,
+  .stats .grid,
+  .cli .grid,
+  .cloud .grid,
+  .features-main .grid,
+  .docs-main .grid {
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+  }
+
+  .cli .grid > *:first-child,
+  .features-main .grid > *:first-child,
+  .features-main .grid > *:nth-child(2) {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  .showcase {
+    height: auto;
+  }
+
+  .showcase-text {
+    text-align: center;
+    margin-top: 40px;
+    animation: slideInFromTop 0.5s ease-out;
+  }
+
+  .showcase-form {
+    justify-self: center;
+    margin: auto;
+    animation: slideInFromBottom 0.5s ease-out;
+  }
+
+  .cloud .grid {
+    border-radius: 0;
+  }
+
+  .features-head,
+  .features-sub-head,
+  .docs-head {
+    text-align: center;
+  }
+
+  .features-head img,
+  .features-sub-head img,
+  .docs-head img {
+    width: 150px;
+    justify-self: center;
+  }
+}
+
+@media (max-width: 500px) {
+  .navbar {
+    height: 110px;
+  }
+
+  .navbar .flex {
+    flex-direction: column;
+  }
+
+  .navbar ul {
+    padding: 10px;
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+
+  .showcase-form {
+    width: 300px;
+  }
+}

96-cloud hosting service/utilities.css

@@ -128,6 +128,16 @@
   text-align: center;
 }
 
+@media (max-width: 768px) {
+  .lg {
+    font-size: 2rem;
+  }
+
+  .xl {
+    font-size: 2.5rem;
+  }
+}
+
 /* Alert */
 .alert {
   background-color: var(--light-color);

README.md

@@ -101,7 +101,7 @@
 | 93  | [Creative Portfolio](https://github.com/solygambas/html-css-fifty-projects/tree/master/93-creative%20portfolio)                         | [Live Demo](https://codepen.io/solygambas/full/zYNbgxR)  |
 | 94  | [Laptop UI](https://github.com/solygambas/html-css-fifty-projects/tree/master/94-laptop%20UI)                                           | [Live Demo](https://codepen.io/solygambas/full/eYgoxMo)  |
 | 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)  |
-| 96  | [Cloud Hosting Service](https://github.com/solygambas/html-css-fifty-projects/tree/master/96-cloud%20hosting%20service)                 | [Live Demo](#)                                           |
+| 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)  |
 
 This repository is mostly based on 2 courses by Brad Traversy (2020):