Merge pull request sahil-sagwekar2652#137 from Avdhesh-Varshney/footer

[GSSoC'23] Styling Footer Section ✔️

Author: sahil-sagwekar2652

css/style.css

@@ -182,13 +182,112 @@ html {
 
 
 
-  /* Footer Style */
-  
-  footer {
-    margin-top: auto;
+/* Footer Style */
+
+footer {
+  margin-top: auto;
+  background-color: #000;
+  padding-top: 40px;
+  color: #fff;
+}
+
+.footer-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+}
+
+.footer-content h3 {
+  font-size: 2.1rem;
+  font-weight: 500;
+  text-transform: capitalize;
+  line-height: 3rem;
+  margin-top: 10px;
+}
+
+.footer-content p {
+  max-width: 500px;
+  margin: 10px auto;
+  line-height: 28px;
+  font-size: 14px;
+  color: #cacdd2;
+}
+
+.socials{
+  list-style: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 1rem 0 3rem 0;
+}
+
+.socials li{
+  margin: 0 10px;
+}
+
+.socials a{
+  text-decoration: none;
+  color: #fff;
+  border: 1.1px solid white;
+  padding: 10px;
+  font-size: 1.2rem;
+  border-radius: 50%;
+  transition: all .3s ease;
+}
+
+.socials a i{
+  font-size: 1.1rem;
+  width: 40px;
+  transition: color .4s ease;
+}
+
+.socials a:hover i{
+  color: aqua;
+}
+
+.footer-bottom{
+  background: #000;
+  padding-top: 20px;
+  padding-bottom: 30px;
+  text-align: center;
+}
+
+.tweet:hover {
+  color: white;
+  background: rgb(0, 140, 255);
+}
+
+.mail:hover {
+  color: salmon;
+  background: white;
+}
+
+.git:hover {
+  color: black;
+  background: white;
+}
+
+.in:hover {
+  color: #04669A;
+  background: white;
+}
+
+.youtube:hover {
+  color: red;
+  background: white;
+}
+
+@media (max-width:500px) {
+  .footer-menu ul{
+    display: flex;
+    margin-top: 10px;
+    margin-bottom: 20px;
   }
+}
 
-  /* ENDS ------------->>>>>>>>> */
+/* ENDS ------------->>>>>>>>> */
 
 /* Scroll Button Style */
 

index.html

@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.17/dist/tailwind.min.css" rel="stylesheet">
+  <script defer src="https://use.fontawesome.com/releases/v6.2.1/js/all.js"></script>
   <link href="css/style.css" rel="stylesheet">
   <link rel="stylesheet" href="./css/contributors.css">
   <title>GitHub Automation Scripts 🤖</title>
@@ -192,13 +193,26 @@ <h1 class="text-xl font-semibold mb-4">License</h1>
       </pre>
     </div>
   </main>
+
   <div class="contributors">
     <h1>Our Valuable Contributors</h1>
     <div id="contributor"></div>
   </div>
-  <footer class="bg-gray-200 py-4">
-    <div class="container mx-auto px-4">
-      <p class="text-sm text-gray-600">© 2023 GitHub Automation Scripts 🤖. All rights reserved.</p>
+
+  <footer class="py-4">
+    <div class="container mx-auto px-4 footer-content">
+      <h3>GITHUB AUTOMATION SCRIPTS 🤖</h3>
+      <p>Bash and Python scripts to automate your Git & GitHub workflow. Made by using only standard python libraries.</p>
+    </div>
+    <ul class="socials">
+      <li><a class="tweet" href="https://twitter.com/sagwekar_sahil"><i class="fa-brands fa-twitter"></i></a></li>
+      <li><a class="mail" href="malito: sahilss2652@gmail.com"><i class="fa-solid fa-envelope"></i></a></li>
+      <li><a class="youtube" href="https://www.youtube.com/@SahilSagwekar"><i class="fa-brands fa-youtube"></i></a></li>
+      <li><a class="in" href="https://www.linkedin.com/in/sahil-sagwekar-0b955b223/"><i class="fa-brands fa-linkedin"></i></a></li>
+      <li><a class="git" href="https://github.com/sahil-sagwekar2652"><i class="fa-brands fa-github"></i></a></li>
+    </ul>
+    <div class="footer-bottom">
+      <p class="text-sm">© 2023 GitHub Automation Scripts 🤖. All rights reserved.</p>
     </div>
   </footer>