Adding visible color to gitter and decrease the size of icons

Author: Vishal-raj-1

contact.html

@@ -118,15 +118,15 @@ <h3 class="contact-heading">NJACK</h3>
             <a href="https://facebook.com/njack.iitp" target="_blank"><i class="fab fa-facebook-f"></i></a>
             <a href="https://gitter.im/NJACKWinterOfCode/NWoC2020" target="_blank"><i class="fab fa-gitter"></i></a>
             <a href="https://github.com/Njack-IITP" target="_blank"><i class="fab fa-github"></i></a>
-            <a href="mailto:[email protected]" target="_blank"><i class="far fa-envelope"></i></a>
+            <a href="mailto:[email protected]" target="_blank"><i class="fas fa-envelope-square"></i></a>
           </div>
           <div class="mdl-cell mdl-cell--8-col mdl-cell--hide-tablet mdl-cell--hide-desktop social-links">
             <a href="mailto:[email protected]" target="_blank"><i class="far fa-envelope"></i></a>
             <a href="https://twitter.com/njackiitp" target="_blank"><i class="fab fa-twitter"></i></a>
             <a href="https://facebook.com/njack.iitp" target="_blank"><i class="fab fa-facebook-f"></i></a>
             <a href="https://gitter.im/NJACKWinterOfCode/NWoC2020" target="_blank"><i class="fab fa-gitter"></i></a>
             <a href="https://github.com/Njack-IITP" target="_blank"><i class="fab fa-github"></i></a>
-            <a href="mailto:[email protected]" target="_blank"><i class="far fa-envelope"></i></a>
+            <a href="mailto:[email protected]" target="_blank"><i class="fas fa-envelope-square"></i></a>
           </div>
 
         </div>
@@ -138,7 +138,7 @@ <h3 class="contact-heading">NWoC 2020 Organizing Committee</h3>
               src="https://avatars2.githubusercontent.com/u/56556919?s=400&u=ec3c32f3153368768726c092423cfc3b0fa69ff9&v=4"
               class="nwoc-contact" />
             <p>Ayush Shrivastava</p>
-            <div class="social-links">
+            <div class="social-links member-links">
               <a href="https://github.com/s-ayush2903" target="_blank"><i class="fab fa-github"></i></a>
               <a href="https://www.facebook.com/stvayush"><i class="fab fa-facebook-f"></i></a>
             </div>
@@ -148,7 +148,7 @@ <h3 class="contact-heading">NWoC 2020 Organizing Committee</h3>
               src="https://avatars1.githubusercontent.com/u/54908624?s=400&u=62e7d21699fa602487b27ff790a4afa5f7b1f723&v=4"
               class="nwoc-contact" />
             <p>Ankit Das</p>
-            <div class="social-links">
+            <div class="social-links member-links">
               <a href="https://github.com/Ankit7Das" target="_blank"><i class="fab fa-github"></i></a>
               <a href="https://m.facebook.com/profile.php?id=100006183317301"><i class="fab fa-facebook-f"></i></a>
             </div>
@@ -158,7 +158,7 @@ <h3 class="contact-heading">NWoC 2020 Organizing Committee</h3>
               src="https://avatars1.githubusercontent.com/u/54908756?s=400&u=67daa7738f89aa91806c866250a8196fba42ca24&v=4"
               class="nwoc-contact" />
             <p>Mehuli Pal</p>
-            <div class="social-links">
+            <div class="social-links member-links">
               <a href="https://github.com/Mehulipal" target="_blank"><i class="fab fa-github"></i></a>
               <a href="https://www.facebook.com/pmehuli"><i class="fab fa-facebook-f"></i></a>
             </div>
@@ -168,15 +168,15 @@ <h3 class="contact-heading">NWoC 2020 Organizing Committee</h3>
               src="https://avatars1.githubusercontent.com/u/56231576?s=400&u=2ec922ab0327973905c73b70b3e4bbdd6f3c9012&v=4"
               class="nwoc-contact" />
             <p>Priyanka Sachan</p>
-            <div class="social-links">
+            <div class="social-links member-links">
               <a href="https://github.com/Priyanka-Sachan" target="_blank"><i class="fab fa-github"></i></a>
               <a href="https://www.facebook.com/priyanka.sachan.77964201"><i class="fab fa-facebook-f"></i></a>
             </div>
           </div>
           <div class="mdl-cell mdl-cell--6-col">
             <img src="./assets/profile/madhur.jpg" class="nwoc-contact" />
             <p>Madhur Malpani</p>
-            <div class="social-links">
+            <div class="social-links member-links">
               <a href="https://github.com/madris112" target="_blank"><i class="fab fa-github"></i></a>
               <a href="https://www.facebook.com/madhur.nilu"><i class="fab fa-facebook-f"></i></a>
             </div>
@@ -188,15 +188,15 @@ <h3 class="contact-heading">NWoC Advisory Committee</h3>
           <div class="mdl-cell mdl-cell--6-col">
             <img src="https://avatars2.githubusercontent.com/u/43786728?s=400&v=4" class="nwoc-contact" />
             <p>Ashwani Yadav</p>
-            <div class="social-links">
+            <div class="social-links member-links">
               <a href="https://github.com/ashwaniYDV" target="_blank"><i class="fab fa-github"></i></a>
               <a href="https://www.facebook.com/ashwani.yadav9499"><i class="fab fa-facebook-f"></i></a>
             </div>
           </div>
           <div class="mdl-cell mdl-cell--6-col">
             <img src="https://avatars3.githubusercontent.com/u/42909612?s=460&v=4" class="nwoc-contact" />
             <p>Anmol Chaddha</p>
-            <div class="social-links">
+            <div class="social-links member-links">
               <a href="https://github.com/chanmol1999" target="_blank"><i class="fab fa-github"></i></a>
               <a href="https://www.facebook.com/anmol.chaddha.125"><i class="fab fa-facebook-f"></i></a>
             </div>

style.css

@@ -329,8 +329,8 @@ a {
 /* Contact Page Start Here */
 .nwoc-contact {
   width: 160px;
-  text-align: center;
 }
+
 .contact-heading{
   text-align: center;
 }
@@ -356,7 +356,7 @@ img.nwoc-contact{
 }
 
 .social-links a{
-  font-size: 25px;
+  font-size: 1.5em;
   padding: 12px;
   background-color: white;
   border: 2px solid rgb(167, 218, 233);
@@ -366,30 +366,35 @@ img.nwoc-contact{
   transition: all 0.1s ease;
 }
 
+.member-links a{
+  font-size: 16px;
+  padding: 8px;
+}
+
 .social-links a:hover{
   transform: scale(1.1);
   border: 2px solid rgb(129, 204, 227);
 }
 
-.social-links .fa-facebook-f{
+.fa-facebook-f{
   color: #3b5998;
-  margin: 2px 5px;
+  margin: 1px .3em;
 }
 
-.social-links .fa-twitter{
+.fa-twitter{
   color: #1DA1F2;
 }
 
-.social-links .fa-github{
+.fa-github{
   color: black;
 }
 
-.social-links .fa-gitter{
-  color: #e6e8fa;
+.fa-gitter{
+  color: #35dd02;
   margin: 1px 2px;
 }
 
-.social-links .fa-envelope{
+.fa-envelope{
   color: #ca6363;
 }