Merge pull request #80 from aditya7302/main

added footer to hactoberfest.html and updated darkmode.css
agamjotsingh18 · Oct 19, 2022 · 11a6c25 · 11a6c25
2 parents f393199 + 0356b68
commit 11a6c25
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 0 deletions.
diff --git a/assets/css/darkmode.css b/assets/css/darkmode.css
@@ -46,3 +46,70 @@ body{
     color:var(--textcolor);
 
 }
+footer{
+    position: relative;
+    width: 100%;
+    background: #3586ff;
+    min-height: 100px;
+    padding: 20px 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
+  footer .social_icon,footer .menu{
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 10px 0;
+    flex-wrap: wrap;
+  }
+  footer .social_icon li,footer .menu li{
+    list-style: none;
+  }
+  footer .social_icon li a{
+    font-size: 2em;
+    color: #fff;
+    margin: 0 10px;
+    display: inline-block;
+    transition: 0.5s;
+  }
+  footer .social_icon li a:hover{
+    transform: translateY(-10px);
+  }
+  footer .menu li a{
+    font-size: 1.2em;
+    color: #fff;
+    margin: 0 10px;
+    display: inline-block;
+    transition: 0.5s;
+    text-decoration: none;
+    opacity: 0.75;
+  }
+  footer .menu li a:hover{
+    opacity: 1;
+  }  
+  footer .menu li{
+    transition: transform 0.5s;
+  }
+  footer .menu li:hover{
+    left: 10px;
+    transform: scale(1.2);
+  }
+  footer p{
+    color: #fff;
+    text-align: center;
+    margin-top: 15px;
+    margin-bottom: 10px;
+    font-size: 1.1em;
+  }
+  footer .wave{
+    position: absolute;
+    top: -100px;
+    left: 0;
+    width: 100%;
+    height: 100px;
+    background: url("/images/wave.png");
+    background-size: 1000px 100px;
+  }
diff --git a/hacktoberfest.html b/hacktoberfest.html
@@ -169,5 +169,45 @@ <h1 class="hacktober-heading">Repositories for Hacktoberfest 2022</h1>
     <script defer src="./assets/js/darkmode_logic.js"></script>
     <script src="assets/js/main.js"></script>
     <script src="./assets/js/hacktoberfest.js"></script>
+<br>
+    <!-- footer -->
+
+     <footer>
+      <ul class="social_icon">
+        <li>
+          <a
+            href="#"
+            ><ion-icon name="logo-facebook"></ion-icon
+          ></a>
+        </li>
+        <li>
+          <a href="#"><ion-icon name="logo-twitter"></ion-icon></a>
+        </li>
+        <li>
+          <a href="#"><ion-icon name="logo-linkedin"></ion-icon></a>
+        </li>
+        <li>
+          <a href="#"><ion-icon name="logo-instagram"></ion-icon></a>
+        </li>
+      </ul>
+      <ul class="menu">
+        <li><a href="#">Home</a></li>
+        <li><a href="#">About</a></li>
+        <li><a href="#">Events</a></li>
+        <li><a href="#">Schedule</a></li>
+        <li><a href="#">Sponsors</a></li>
+        <li><a href="#">Contact Us</a></li>
+        <li><a href="#">Register</a></li>
+      </ul>
+      <p>add a comment here</p>
+    </footer>
+    <script
+      type="module"
+      src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
+    ></script>
+    <script
+      nomodule
+      src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
+    ></script>
   </body>
 </html>