Added Footer

TheRealMrGamz · May 2, 2023 · 0bf026b · 0bf026b
1 parent 10921e4
commit 0bf026b
Show file tree

Hide file tree

Showing 2 changed files with 134 additions and 18 deletions.
diff --git a/index.html b/index.html
@@ -30,9 +30,6 @@
                 <li class="navbar__item">
                     <a href="/" class="navbar__links"> Emulation </a>
                 </li>
-                <li class="navbar__btn">
-                    <a href="/" class="button"> Sign Up </a>
-                </li>
             </ul>
         </div>
     </nav>
@@ -48,8 +45,24 @@ <h2> Exploits </h2>
                 <img src="Images/pic1.svg" alt="pic" id="main__img">
             </div>
         </div>
-    </div>
+    </div> 
 
+    <div class="footer__container">
+        <div class="footer__links">
+            <div class="footer__link--wrapper">
+                <div class="footer__link--items">
+                    <h2>About Us</h2>
+                    <a href="/">Github</a>
+                </div>
+                <div class="footer__link--items">
+                    <h2>Contact Us</h2>
+                    <a href="/">Discord</a>
+                    <a href="/">E-Mail</a>
+                </div>
+                <p class="website__right"> © Project Gateway. No Rights Reserved For Me :/</p>
+            </div>
+        </div>
+    </div>
 
     <script src="app.js"></script>
 </body>

diff --git a/styles.css b/styles.css
@@ -166,19 +166,6 @@
         transform: translate(5%, 20%);
     }
 
-    .navbar__btn {
-    padding-bottom: 2rem;
-    }
-
-    .button {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 80%;
-        height: 80px;
-        margin: 0;
-    }
-
     .navbar__toggle .bar {
         display: block;
         cursor: pointer;
@@ -289,4 +276,120 @@
 
 .main__img--container {
     text-align: center;
-}
+}
+
+#main__img {
+    height: 80%;
+    width: 80%;
+}
+
+@media screen and (max-width: 768px) {
+    .main__container {
+        display: grid;
+        grid-template-columns: auto;
+        align-items: center;
+        justify-self: center;
+        width: 100%;
+        margin: 0 auto;
+        height: 90vh;
+    }
+
+    .main__content {
+        text-align: center;
+        margin-bottom: 4rem;
+    }
+
+    .main__content h1 {
+        font-size: 2.5rem;
+        margin-top: 2rem;
+    }
+
+    .main__content h2 {
+        font-size: 3rem;
+    }
+
+    .main__content p {
+        margin-top: 1rem;
+        font-size: 1.5rem;
+    }
+}
+
+@media screen and (max-width: 480px) {
+
+    .main__content h1 {
+        font-size: 2rem;
+        margin-top: 3rem;
+    }
+
+    .main__content h2 {
+        font-size: 2rem;
+    }
+
+    .main__content p {
+        margin-top: 2rem;
+        font-size: 1.5rem;
+    }
+
+    .main__btn {
+        padding: 12px 36px;
+        margin: 2.5rem 0;
+    }
+}
+
+.footer__container {
+    background-color: #141414;
+    padding: 5rem 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+#footer__logo {
+    color: #fff;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    text-decoration: none;
+    font-size: 2rem;
+}
+
+.footer__links {
+    width: 100%;
+    max-width: 1000px;
+    display: flex;
+    justify-content: center;
+}
+
+.footer__link--wrapper {
+    display: flex;
+}
+
+.footer__link--items {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin: 16px;
+    width: 160px;
+    box-sizing: border-box;
+}
+
+.footer__link--items h2 {
+    margin-bottom: 16px;
+}
+
+.footer__link--items > h2 {
+    color: #fff;
+}
+
+.footer__link--items a {
+    color: #fff;
+    text-decoration: none;
+    margin-bottom: 0.5rem;
+}
+
+.footer__link--items a:hover {
+    color: #e9e9e9;
+    transition: 0.3s ease-out;
+}
+