Added Some More Stuff

TheRealMrGamz · May 1, 2023 · 337a208 · 337a208
1 parent 4474d8c
commit 337a208
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 1 deletion.
diff --git a/Images/pic1.svg b/Images/pic1.svg
diff --git a/index.html b/index.html
@@ -11,7 +11,7 @@
 <body>
     <nav class="navbar">
         <div class="navbar__container">
-            <a href="/" id="navbar__logo"><i class="fa-solid fa-wifi"></i>
+            <a href="/" id="navbar__logo"><i class="fa-solid fa-wifi"></i>Project Gateway </a>
             <div class="navbar__toggle" id="mobile-menu">
                 <span class="bar"></span>
                 <span class="bar"></span>
@@ -33,6 +33,21 @@
             </ul>
         </div>
     </nav>
+    <div class="main">  
+        <div class="main__container">
+            <div class="main__content">
+                <h1> Project Gateway </h1>
+                <h2> Exploits </h2>
+                <p>See How To Use Useful Exploits</p>
+                <button class="main__btn"><a href="/">Get Started!</a></button>
+            </div>
+            <div class="main__img--container">
+                <img src="Images/pic1.svg" alt="pic" id="main__img">
+            </div>
+        </div>
+    </div>
+
+
     <script src="app.js"></script>
 </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -189,7 +189,58 @@
     }
 
     #mobile-menu.is-active .bar:nth-child(1) {
+        transform: translateY(8px) rotate(45deg);
+    }
+
+    #mobile-menu.is-active .bar:nth-child(3) {
         transform: translateY(-8px) rotate(-45deg);
     }
 
 }
+
+.main {
+    background-color: #141414;
+}
+
+
+.main__container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+    height: 90vh;
+    background-color: #141414;
+    z-index: 1;
+    width: 100%;
+    max-width: 1300px;
+    padding: 0 50 px;
+}
+
+.main__content h1 {
+    font-size: 4rem;
+    background-color: #9D00FF;
+    background-image: linear-gradient(to top, #301934 0%, #CF9FFF 100%);
+    background-size: 100%;
+    -webkit-background-clip: text;
+    -moz-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    -moz-text-fill-color: transparent;
+}
+
+.main__content h2 {
+    font-size: 4rem;
+    background-color: #9D00FF;
+    background-image: linear-gradient(to top, #20C20E 0%, #CFFF9F 100%);
+    background-size: 100%;
+    -webkit-background-clip: text;
+    -moz-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    -moz-text-fill-color: transparent;
+}
+
+.main__content p {
+    margin-top: 1rem;
+    font-size: 2rem;
+    font-weight: 700;
+}