add features section

Author: solygambas

96-cloud hosting service/index.html

@@ -110,8 +110,8 @@ <h3>Deploy in seconds</h3>
     </section>
 
     <!-- cloud -->
-    <section class="cloud bg-primary my-2 py-2">
-      <div class="container grid">
+    <section class="cloud my-2 py-2">
+      <div class="container grid bg-secondary">
         <div class="text-center">
           <h2 class="lg">Extreme Cloud Hosting</h2>
           <p class="lead my-1">
@@ -182,6 +182,94 @@ <h4>Clojure</h4>
       </div>
     </section>
 
+    <!-- features -->
+    <section id="features">
+      <!-- head -->
+      <div class="features-head bg-primary py-3">
+        <div class="container grid">
+          <div>
+            <h1 class="xl">Features</h1>
+            <p class="lead">
+              Check out the features of Loruki that separate us from the
+              competition
+            </p>
+          </div>
+          <img
+            src="https://github.com/bradtraversy/loruki-website/blob/master/images/server.png?raw=true"
+            alt=""
+          />
+        </div>
+      </div>
+
+      <!-- sub head -->
+      <div class="features-sub-head bg-light py-3">
+        <div class="container grid">
+          <div>
+            <h1 class="md">The Loruki Platform</h1>
+            <p>
+              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolor
+              cupiditate dignissimos temporibus perspiciatis quae! Suscipit qui,
+              consectetur ea consequatur, doloribus repellendus quasi, aut
+              corporis nam alias culpa. Nostrum, inventore accusantium!
+            </p>
+          </div>
+          <img
+            src="https://github.com/bradtraversy/loruki-website/blob/master/images/server2.png?raw=true"
+            alt=""
+          />
+        </div>
+      </div>
+      <!-- main features -->
+      <div class="features-main my-2">
+        <div class="container grid grid-3">
+          <div class="card flex">
+            <i class="fas fa-server fa-3x"></i>
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas
+              nemo saepe corrupti et dolorem voluptate at, nostrum rem
+              voluptatem ab alias quia molestiae ea, libero nihil deserunt.
+              Molestias, eum? Necessitatibus!
+            </p>
+          </div>
+          <div class="card flex">
+            <i class="fas fa-network-wired fa-3x"></i>
+            <p>
+              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus
+              recusandae perferendis culpa, reiciendis a itaque debitis qui vel
+              dignissimos ipsum!
+            </p>
+          </div>
+          <div class="card flex">
+            <i class="fas fa-laptop-code fa-3x"></i>
+            <p>
+              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis,
+              magnam.
+            </p>
+          </div>
+          <div class="card flex">
+            <i class="fas fa-database fa-3x"></i>
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, a!
+            </p>
+          </div>
+          <div class="card flex">
+            <i class="fas fa-power-off fa-3x"></i>
+            <p>
+              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis,
+              magnam.
+            </p>
+          </div>
+          <div class="card flex">
+            <i class="fas fa-upload fa-3x"></i>
+            <p>
+              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis,
+              magnam.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+
     <!-- footer -->
     <footer class="footer bg-dark py-5">
       <div class="container grid grid-3">

96-cloud hosting service/style.css

@@ -194,6 +194,7 @@ pre {
 
 .cloud .grid {
   grid-template-columns: 4fr 3fr;
+  border-radius: 10px;
 }
 
 /* languages */
@@ -217,6 +218,35 @@ pre {
   margin-bottom: 10px;
 }
 
+/* features */
+
+.features-head img,
+.docs-head img {
+  width: 200px;
+  justify-self: flex-end;
+}
+
+.features-sub-head img {
+  width: 300px;
+  justify-self: flex-end;
+}
+
+.features-main .card > i {
+  margin-right: 20px;
+}
+
+.features-main .grid {
+  padding: 30px;
+}
+
+.features-main .grid > *:first-child {
+  grid-column: 1 / span 3;
+}
+
+.features-main .grid > *:nth-child(2) {
+  grid-column: 1 / span 2;
+}
+
 /* footer */
 
 .footer .social a {