Merge pull request #1139 from ANKeshri/feat/real-colour-hover-on-soci…

…al-icons feat: hover on social icons in login
apu52 · Jul 21, 2024 · 6c5c164 · 6c5c164
2 parents 3f8d448 + 4d380af
commit 6c5c164
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 12 deletions.
diff --git a/login/login.css b/login/login.css
@@ -54,9 +54,7 @@ a {
   transition: 0.3s ease-in-out;
 }
 
-a:hover {
-  color: #4bb6b7;
-}
+
 
 .content {
   display: flex;
@@ -313,9 +311,7 @@ input {
   transition: 0.3s ease-in-out;
 }
 
-.social-container a:hover {
-  border: 1px solid #4bb6b7;
-}
+
 
 #login-section{
   display: flex;
@@ -357,3 +353,16 @@ input {
   padding:2px;
   transition: 0.3s ease-in-out;
  }
+/* hover ibn social icons */
+.social-container .fb:hover {
+  color: white;
+  background-color: #1877F2;
+}
+.social-container .goog:hover {
+  color: white;
+  background-color: #DB4437;
+}
+.social-container .lin:hover {
+  color: white;
+  background-color: #0A66C2;
+}
diff --git a/newLogin.html b/newLogin.html
@@ -27,9 +27,9 @@ <h1>Tour Guide</h1>
           <button type="submit">Register</button>
           <span id="registerMessage" style="display: none;">Account created successfully</span>
           <div class="social-container">
-            <a href="www.facebook.com" class="social"><i class="lni lni-facebook-fill"></i></a>
-            <a href="www.google.com" class="social"><i class="lni lni-google"></i></a>
-            <a href="www.linkedin.com" class="social"><i class="lni lni-linkedin-original"></i></a>
+            <a class="fb" href="www.facebook.com" class="social"><i class="lni lni-facebook-fill"></i></a>
+            <a class="goog" href="www.google.com" class="social"><i class="lni lni-google"></i></a>
+            <a class="lin" href="www.linkedin.com" class="social"><i class="lni lni-linkedin-original"></i></a>
           </div>
         </form>
       </div>
@@ -62,9 +62,9 @@ <h1><a style="margin-right: 300px;" href="index.html" class="back-to-home">
           <button type="submit">Login</button>
           <span>or use your account</span>
           <div class="social-container">
-            <a href="www.facebook.com" class="social"><i class="lni lni-facebook-fill"></i></a>
-            <a href="www.google.com" class="social"><i class="lni lni-google"></i></a>
-            <a href="www.linkedin.com" class="social"><i class="lni lni-linkedin-original"></i></a>
+            <a class="fb" href="www.facebook.com" class="social"><i class="lni lni-facebook-fill"></i></a>
+            <a class="goog" href="www.google.com" class="social"><i class="lni lni-google"></i></a>
+            <a class="lin" href="www.linkedin.com" class="social"><i class="lni lni-linkedin-original"></i></a>
           </div>
           <!-- Back to Home Button -->