3

index.html

@@ -42,8 +42,7 @@
             </div>
         </div>
         <div id="os">
-            <a class="btn"
-                href="https://github.com/fwldom/Freedom-Guard/releases/latest/download/freedom-guard-linux-x64.tar.gz
+            <a class="btn" href="https://github.com/fwldom/Freedom-Guard/releases/latest/download/freedom-guard-linux-x64.tar.gz
                 "><button>For
                     Linux (x64)</button></a>
             <div class="btn" id="os-feat">
@@ -56,7 +55,23 @@
             </div>
         </div>
     </div>
-    <div id="Services"></div>
+    <div id="Services">
+        <div id="sect">
+            <h2>Freedom Warp</h2>
+            <img src="img-fg.png" alt="">
+        </div>
+        <div id="sect">
+            <h2>Freedom Vibe</h2>
+            <img src="img-fv.png" alt="">
+        </div>
+        <div id="sect">
+            <h2>Freedom Browser</h2>
+            <img src="img-fb.png" alt="">
+        </div>
+
+        <h2 style="margin-top: auto;">All in Freedom Guard</h2>
+        <a class="btn" href="#Download"><button>Get Freedom Guard (Free)</button></a>
+    </div>
     <div id="AboutUs">
         <h2>What is Freedom Guard?</h2>
         <p style="margin: 10px;margin-bottom: auto;">Freedom Guard is a software collection consisting of Freedom Vibe,

style.css

@@ -186,6 +186,19 @@ header>a {
 }
 
 #AboutUs {
+    margin-top: 30px;
+    height: 98vh;
+    width: 98vw;
+    text-align: center;
+    background-color: #3332323d;
+    border-radius: 15px;
+    font-size: 1.5em;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-wrap: wrap;
+}
+#Services {
     margin-top: 30px;
     height: 98vh;
     width: 98vw;
@@ -198,7 +211,18 @@ header>a {
     align-items: center;
     flex-wrap: wrap;
 }
-
+#Services  img {
+    max-width: 30vw;
+    border-radius: 15px;
+}
+#Services #sect {
+    max-width: 45vw;
+    max-height: 15vh;
+}
+#Services h2 {
+    font-size: 18px;
+    margin: 10px;
+}
 #ContactUs {
     margin-top: 30px;
     height: 98vh;
@@ -230,4 +254,24 @@ header>a {
     #Home {
         height: 70vh;
     }
+    #Services  img {
+        max-width: 75vw;
+        border-radius: 15px;
+    }
+    #Services #sect {
+        max-width: 90vw;
+        max-height: 25vh;
+    }
+    #os-feat {
+        width: 90vw;
+        margin: 2vh;
+        height: 30vh;
+        background-color: transparent;
+        color: #f1f1f1;
+        justify-self: center;
+        text-align: left;
+        line-height: 1.5;
+        font-size: 0.7em;
+        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    }
 }