Update 1.4.0

Freedom-Guard · Jan 22, 2025 · 5b90c0a · 5b90c0a
1 parent bc5a044
commit 5b90c0a
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 15 deletions.
diff --git a/index.html b/index.html
@@ -24,12 +24,13 @@
             <a href="#ContactUs">Contact Us</a>
             <a href="#Services">Services</a>
         </div>
-        <a href="#Download"> <button style='margin-left:auto;background-color:#fa6400;width:90%;height:75%;'>Get App</button></a>
+        <a href="#Download" class="btn" style="margin-top: 0;">Get
+                App</a>
     </header>
     <div id="Home" style="overflow: hidden;">
         <p>Freedom Warp <br>Freedom Vibe <br> Freedom Plus <br>All in <br> Freedom Guard</p>
         <img src="ico.png" width="30%" style="border-radius: 50%;" alt="">
-        <a class="btn" href="#Download"><button>Get Freedom Guard (Free)</button></a>
+        <a class="btn fade" href="#Download">Get Freedom Guard (Free)</a>
     </div>
     <h2 style="text-align: center;background-color: #27253a;border-radius: 0 0 10px 10px;">Download Freedom Guard</h2>
     <div id="Download">
@@ -76,26 +77,29 @@ <h2>Freedom Browser</h2>
         </div>
 
         <h2 style="margin-top: auto;">All in Freedom Guard</h2>
-        <a class="btn" href="#Download"></a>
     </div>
     <div id="AboutUs">
         <h2>What is Freedom Guard?</h2>
-        <p style="margin: 10px;margin-bottom: auto;">Freedom Guard is a tool to bypass internet censorship. Freedom Guard works on the core of other software such as Warp Plus. Freedom Guard is not just a software, Freedom Guard was created with the aim of free internet and continues
-</p>
-        <a class="btn" href="https://github.com/Freedom-Guard/Freedom-Guard"><button>Github Repository</button></a>
+        <p style="margin: 10px;margin-bottom: auto;">Freedom Guard is a tool to bypass internet censorship. Freedom
+            Guard works on the core of other software such as Warp Plus. Freedom Guard is not just a software, Freedom
+            Guard was created with the aim of free internet and continues
+        </p>
+        <a class="btn" href="https://github.com/Freedom-Guard/Freedom-Guard">Github Repository</a>
     </div>
     <div id="ContactUs">
         <h2>Contact US</h2>
         <p style="margin: 10px;margin-bottom: auto;">You can use [email protected] to contact us.
             You can also visit the Freedom Guard GitHub project for help and request a pull or issue from there.</p>
-        <a class="btn" href="https://github.com/Freedom-Guard/Freedom-Guard"><button>Github Repository</button></a>
-        <a class="btn" href="mailto:[email protected]"><button>Email</button></a>
-        <a class="btn" href="https://youtube.com/@Freedom_Guard_Net"><button>youtube channel</button></a>
-        <a class="btn" href="https://t.me/Freedom_Guard_Net"><button>telegram channel</button></a>
+        <a class="btn" href="https://github.com/Freedom-Guard/Freedom-Guard">Github Repository</a>
+        <a class="btn" href="mailto:[email protected]">Email</a>
+        <a class="btn" href="https://youtube.com/@Freedom_Guard_Net">youtube channel</a>
+        <a class="btn" href="https://t.me/Freedom_Guard_Net">telegram channel</a>
     </div>
     <footer>
         <p>Copyright © 2025 Freedom Guard</p>
     </footer>
+    <script src="script.js"></script>
+
 </body>
 
 </html>
diff --git a/script.js b/script.js
diff --git a/style.css b/style.css
@@ -1,4 +1,3 @@
-
 body {
     margin: 0;
     font-family: 'Poppins', sans-serif;
@@ -47,7 +46,7 @@ header #links a:hover {
     color: #bb86fc;
 }
 
-header button {
+header .btn {
     padding: 10px 20px;
     border: none;
     background-color: #7c4dff;
@@ -58,7 +57,7 @@ header button {
     font-size: 1em;
 }
 
-header button:hover {
+header .btn:hover {
     background-color: #bb86fc;
 }
 
@@ -157,6 +156,7 @@ header button:hover {
     background: linear-gradient(135deg, #3a2d7d, #7c4dff);
     color: white;
 }
+
 #Services #sect h2 {
     border-radius: 10px 10px 0 0;
     font-size: 1.8em;
@@ -168,6 +168,7 @@ header button:hover {
     width: 80%;
     margin: auto;
 }
+
 #Services #sect {
     display: inline-block;
     width: 30%;
@@ -223,11 +224,21 @@ header button:hover {
 a.btn {
     display: inline-block;
     text-decoration: none;
-    color: white;
     border-radius: 30px;
     font-weight: bold;
+    background-color: #7c4dff;
+    color: white;
+    border: none;
+    padding: 12px 25px;
+    border-radius: 30px;
+    transition: background-color 0.3s ease-in-out;
+    font-size: 1.0em;
+    min-width: fit-content;
+    margin-top: 15px;
+}
+a.btn:hover {
+    background-color: #bb86fc;
 }
-
 h2 {
     border-radius: 10px 10px 0 0;
     font-size: 1.8em;
@@ -244,11 +255,39 @@ footer {
     color: #d1cfe6;
     font-size: 0.9em;
 }
+::-webkit-scrollbar {
+    width: 0.8em;
+}
 
+::-webkit-scrollbar-track {
+    background-color: #27253a;
+}
+::-webkit-scrollbar-thumb {
+    background-color: #7c4dff;
+}
+.fade {
+    animation: fade ease-in-out;
+    animation-timeline: view();
+}
+@keyframes fade {
+    0% {
+        transform: translateX(-100px);
+    }
+
+    30% {
+        transition: 0.3s;
+        opacity: 1;
+    }
+    100% {
+        transform: translateX(+30px);
+        opacity: 1;
+    }
+}
 @media screen and (max-width:685px) {
     .os {
         width: 99%;
     }
+
     .os-feat,
     #Services #sect {
         width: 99%;