Improved in social icons

anuragverma108 · Jul 22, 2024 · 0f59931 · 0f59931
1 parent 040f589
commit 0f59931
Showing 1 changed file with 32 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -92,7 +92,6 @@
 
 
 .socialmediaicons {
- background-color:#fdebe8;
  display: flex;
  flex-direction: column;
  justify-content: center;
@@ -110,15 +109,40 @@
  transition: all 0.3s ease;
  color: rgb(0, 0, 0);
  font-size: 20px;
- border-radius: 10%;
  }
+
+
 
- .socialmediaicons a:hover {
- background-color: rgb(255, 255, 255);
- }
+.socialmediaicons .fa-instagram:hover{
+ background: radial-gradient(circle at 30% 110%,
+ #ffdb8b 0%,
+ #ee653d 25%,
+ #d42e81 50%,
+ #a237b6 75%,
+ #3e57bc 100%);
+ border-radius: 10px;
+ color: white;
+} 
+.socialmediaicons .fa-facebook:hover{
+ color: blue;
+} 
+.socialmediaicons .fa-youtube:hover{
+ color: red;
+}
 
 
-
+.dark-mode .socialmediaicons a {
+ color: white;
+}
+
+
+.dark-mode .socialmediaicons .fa-facebook:hover {
+ color: #425d9b
+}
+.dark-mode .socialmediaicons .fa-youtube:hover {
+ color: #f70000;
+}
+
  .instagram {
 
  margin: 5px;
@@ -688,10 +712,10 @@
  <div class="progress-bar"></div>
  </div>
 
- <div class="socialmediaicons" style="background-color:#fae2de">
+ <div class="socialmediaicons" style="z-index: 99;" >
 
 
- <a class="active" href="https://www.google.com/" class="instagram"><i class="fa-brands fa-instagram"></i>
+ <a class="active instagram" href="https://www.google.com/" class=""><i class="fa-brands fa-instagram"></i>
  </a>
  <a class="active" href="https://www.google.com/" class="facebook"><i class="fa-brands fa-facebook"></i>
  </a>