Add hover effect to footer icon fixes #344 (#346)

* Add hover effect to footer icon fixes #344

* Changed the hover effect also added it to the participant card

* Changed transition time and transition scale

Author: anupm12

css/main.css

@@ -636,6 +636,17 @@ input:checked + .slider:before {
   align-items: left;
 }
 
+/* hover effect to footer icons */
+.footer-hover:hover {
+  transform: scale(1.2);
+  transition-duration: 0.5s;
+}
+
+.fab:hover {
+  transform: scale(1.2);
+  transition-duration: 0.4s;
+}
+
 .game-card {
   /* max-height: 470px;
   min-height: 470px; */
@@ -644,3 +655,4 @@ input:checked + .slider:before {
   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.12);
 
 }
+

index.html

@@ -908,12 +908,12 @@ <h1 class="text-left issue-title" >ISSUES</h1>
     <!-- Footer -->
     <footer class="py-5 bg-dark">
       <div class="footer_media">
-        <a href="https://www.facebook.com/opencodeiiita/" target="_blank"><i class="fab-night fab fa-facebook-f icon-color"></i></a>  
-        <a href="https://github.com/opencodeiiita " target="_blank"><i class="fab-night fab fa-github icon-color"></i></a>  
-        <a href="https://twitter.com/geekhaveniiita" target="_blank"><i class="fab-night fab fa-twitter icon-color"></i></a> 
+        <a href="https://www.facebook.com/opencodeiiita/" target="_blank"><i class="fab-night fab fa-facebook-f icon-color px-2"></i></a>  
+        <a href="https://github.com/opencodeiiita " target="_blank"><i class="fab-night fab fa-github icon-color px-2"></i></a>  
+        <a href="https://twitter.com/geekhaveniiita" target="_blank"><i class="fab-night fab fa-twitter icon-color px-2"></i></a> 
        <div class="col-12 col-sm-12 col-md-4 night-footer-ref" >
-        <a href="https://www.iiita.ac.in/" ><img class="night-footer-ref" src="./assets/img/iiitalogo.jpg" width="65" height="60"></a>
-        <a href="https://geekhaven.iiita.ac.in/" ><img class="night-footer-ref" src="./assets/img/geekhavenlogo.svg" width="60" height="60"></a>
+        <a href="https://www.iiita.ac.in/" class="px-2"><img class="night-footer-ref footer-hover" src="./assets/img/iiitalogo.jpg" width="65" height="60"></a>
+        <a href="https://geekhaven.iiita.ac.in/" class="px-2"><img class="night-footer-ref footer-hover" src="./assets/img/geekhavenlogo.svg" width="60" height="60"></a>
       </div>
       </div>
       <div class="container night-footer-ref">