Merge pull request #137 from Avdhesh-Varshney/footer

[GSSoC'23] Styling Footer Section ✔️
sahil-sagwekar2652 · Aug 10, 2023 · 8ca4339 · 8ca4339
2 parents 80b1d75 + 11c67a0
commit 8ca4339
Show file tree

Hide file tree

Showing 2 changed files with 121 additions and 8 deletions.
diff --git a/css/style.css b/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 */
 

diff --git a/index.html b/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>