Merge pull request #3 from KeyLo99/master

Improve the design & bug fix
grapheneX · Jul 15, 2019 · 38f1d5f · 38f1d5f
2 parents 2797a3f + e718f9c
commit 38f1d5f
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 56 deletions.
diff --git a/css/index.css b/css/index.css
@@ -20,32 +20,27 @@ body, html {
 }
 
 .deep-like {
-    -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
-    -moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
-    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
+    -webkit-box-shadow: 0px 0px 2px 0px #CCCCCC60;
+    -moz-box-shadow: 0px 0px 2px 0px #CCCCCC60;
+    box-shadow: 0px 0px 2px 0px #CCCCCC60;
 }
 
-.consolas {
-    font-family: monospace;
-    font-size: 24px;
+.ghico {
+    color: #f5f5f5;
 }
 
-.vertical {
-    border: none;
-    border-left: 1px solid white;
-    height: 350px;
-    width: 1px;
-    margin: 0px;
+.ghico:hover {
+    background-color: white;
+    color: #1E1E1E;
 }
 
-
-.ghico {
-    color: #CCCCCC;
+.pyico {
+    color: #FFE873;
 }
 
-.ghico:hover {
-    background-color: #24292E;
-    color: white;
+.pyico:hover {
+    background-color: #FFD43B;
+    color: #1E1E1E;
 }
 
 .twico {

diff --git a/images/banner.gif b/images/banner.gif
diff --git a/index.html b/index.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -9,47 +8,60 @@
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
         integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
     <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
-    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
+    <link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet">
     <link rel="stylesheet" href="css/index.css">
-    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
     <title>grapheneX</title>
 </head>
 
 <body>
-    <div class="container mt-5 mt-sm-5">
-        <div class="row">
-            <div class="col-md-6 pr-5 d-flex align-items-center" data-aos="zoom-in">
-                <img class="img-fluid rounded deep-like" src="images/banner.gif" alt="banner">
+    <div class="overlay text-center">
+        <img class="img-responsive align-middle loading-img" src="images/graphenex_logo.png" alt="logo" height="200" width="200">
+    </div>
+    <div class="text-center mt-2" data-aos="zoom-in">
+        <h1 style="color: #CCCCCC; font-size: 20px">~ grapheneX ~</h1>
+    </div>
+    <div class="text-center mt-3 mt-sm-3 mr-4 ml-4">
+        <img class="img-fluid rounded deep-like" src="images/banner.gif" alt="banner" data-aos="zoom-in">
+    </div>
+    <div class="d-flex justify-content-center mt-3" data-aos="fade-up">
+        <a href="https://github.com/grapheneX">
+            <div class="btn btn-ghost-dark ghico">
+                <i class="fab fa-github"></i> GitHub
             </div>
-            <hr class="vertical">
-            <div class="colm-md-6 mt-2 mt-sm-0 pl-5 d-flex align-items-center" style="color: #CCCCCC" data-aos="zoom-in">
-                <div>
-                    <h1 style="font-size: 48px">GrapheneX</h1>
-                    <p class="text-muted consolas">~ Automated System Hardening Framework.<br>
-                        + Created for Linux & Windows.<br>
-                        - Copyright (C) 2019</p>
-                </div>
+        </a>
+        <a href="https://pypi.org/project/graphenex/">
+            <div class="btn btn-ghost-dark pyico">
+                <i class="fab fa-python"></i> PyPI
             </div>
-        </div>
-
-        <div class="d-flex justify-content-center mt-4" data-aos="fade-up">
-            <a href="https://github.com/grapheneX/grapheneX">
-                <div class="btn btn-ghost-dark btn-lg ghico">
-                    <i class="fa fa-github"></i> Github
-                </div>
-            </a>
-            <a href="https://twitter.com/grapheneX_">
-                <div class="btn btn-ghost-dark btn-lg twico">
-                    <i class="fa fa-twitter"></i> Twitter
-                </div>
-            </a>
-        </div>
+        </a>
+        <a href="https://twitter.com/grapheneX_">
+            <div class="btn btn-ghost-dark twico">
+                <i class="fab fa-twitter"></i> Twitter
+            </div>
+        </a>
     </div>
 
-
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
     <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
     <script src="js/index.js"></script>
-</body>
+    <!--
 
+                 +ho:`
+           `:ohh. /dddy/.
+        ./ydddddd/ -hddddho:          | grapheneX.github.io |
+    `:ohdddddddddds``sddddds- :.      ~ Official website of the grapheneX project
+    +ddddddddddddddh. /dds- /hdd      > https://github.com/grapheneX
+    +dddddddddddddddd/ .. /hdddd      - Copyright (C) 2019
+    +ddddddddddddddddo``/hdddddd
+    +ddddddddddddddo.`+ddddddddd
+    `-/+oyhddddd+``+dddddddddddd
+    :o+/-.` `-` .syddddddddddddd
+    +dddddddyso+:-. `.-/+oyhdddd
+     -+yddddddddddddhyso/:-` `-`
+        `/sddddddddddddddy+-
+            -+hddddddds:`
+               `/sy+-
+    -->
+</body>
 </html>
diff --git a/js/index.js b/js/index.js
@@ -1,12 +1,11 @@
+var animDuration = 500;
 $(document).ready(function() {
-    AOS.init({
-        duration: 600
-    });
-
     // Remove the spinning animation after 500ms.
     setTimeout(function() {
         $(".overlay").fadeOut("slow");
-    }, 500);
-
-
+        // Initialize the AOS library.
+        AOS.init({
+            duration: animDuration
+        });
+    }, animDuration);
 })