Merge pull request #212 from divyansh-4/main

Improving the Footer
Prajwal0225 · Oct 18, 2023 · 12cfe3c · 12cfe3c
2 parents f89ebec + 51d3f84
commit 12cfe3c
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 35 deletions.
diff --git a/index.html b/index.html
@@ -127,43 +127,20 @@ <h2><label for=""> First-appearance: </label></h2>
         <br />
 
       </div>
-      <div class="bottom-container">
-
-
-        <a class="footer-link" href="https://www.linkedin.com/feed/"
-          ><img
-            class="footer-img linkedin tilt pic"
-            id="linkedin"
-            src="./images/linkedin.png"
-            alt="linkedin"
-          />
-        </a>
-
-
-        <a class="footer-link" href="https://twitter.com/home"
-          ><img
-            class="footer-img twitter tilt pic"
-            id="twitter"
-            src="./images/twitter.png"
-            alt="Twitter"
-          />
-        </a>
-
-        <a class="footer-link" href="https://github.com/Prajwal0225" target="_blank">
-
-        <img
-            class="footer-img global tilt pic"
-            id="github"
-            src="./images/github.png"
-            alt="Github"
-        />
-        </a>
-
-        <p class="bookmark">
-          © <span id="year"></span> Superhero's World By Prajwal Somalkar. All
+      <!-- Footer -->
+      <div class="footer-container">
+        <div class="social-icons">
+          <a href="https://www.linkedin.com/feed/"><i class="fa-brands fa-linkedin"></i></a>
+          <a href="https://twitter.com/home"><i class="fa-brands fa-x-twitter"></i></a>
+          <a href="https://github.com/Prajwal0225"><i class="fa-brands fa-github"></i></a>
+        </div> 
+      </div>
+      <div class="footer-bottom">
+        <p>
+          &copy;<span id="year"></span> Superhero's World By Prajwal Somalkar. All
           rights reserved.
         </p>
-      </div>
+      </div> 
     </center>
  <script src="script.js"></script>
 </body>

diff --git a/style.css b/style.css
@@ -695,6 +695,48 @@ center {
   animation: spin-horizontal 2s linear infinite;
 }
 
+.footer-container{
+  width:100%;
+  padding: 70px 30px 20px;
+}
+
+.social-icons{
+  display:flex;
+  justify-content: center;
+}
+
+.social-icons a{
+  text-decoration: none;
+  padding: 10px;
+  background-color: white;
+  margin:20px;
+  border-radius: 50%;
+}
+
+.social-icons a i{
+  font-size: 2em;
+  color: black;
+  opacity: 0.9;
+}
+.social-icons a:hover{
+  background-color: #111;
+  transition: 0.5s;
+}
+.social-icons a:hover i{
+  color:white;
+  transition: 0.5s;
+}
+.footer-bottom{
+  padding:10px;
+  padding-bottom: 100px;
+  text-align: center;
+  background-color: #000;
+}
+.footer-bottom p{
+  color:white;
+}
+
+
 @media screen and (max-width: 406px) {
   .head-title {
     font-size: 50px;