From 27d1adce9335d1caa5f6a2da72cec708c0a89401 Mon Sep 17 00:00:00 2001
From: Tushar Singhal <tsinghal666@gmail.com>
Date: Sun, 11 Aug 2024 19:43:27 +0530
Subject: [PATCH] Join BackgroundChange

---
 src/components/Header/Header.css | 186 ++++++++++++++++++-------------
 src/components/Header/Header.jsx |   2 +-
 2 files changed, 112 insertions(+), 76 deletions(-)

diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
index 617d604..3c9c397 100644
--- a/src/components/Header/Header.css
+++ b/src/components/Header/Header.css
@@ -1,90 +1,126 @@
-.header{
-    display: flex;
-    justify-content: space-between;
-    position: fixed;
-    width: 98.5vw;
-    background-color: transparent;
-    backdrop-filter: blur(5px);
-    transition: background-color 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out;
-    z-index: 999;
-    padding: 0.5em;
+.joinS {
+  font-size: 2rem;
+  font-weight: bold;
+  background-image: linear-gradient(-45deg, #ff0081, #ffd600, #ff6f00);
+  background-size: 300%;
+  background-clip: text;
+  color: transparent;
+  animation: gradientAnimation 5s ease-in-out infinite;
+  transition: transform 0.3s ease, text-shadow 0.3s ease;
+  text-shadow: 0 0 4px rgba(255, 255, 255, 0.7);
 }
 
-.header1{
-    display: flex;
-    gap: 1em;
-    padding-left: 1em;
-    background-color: transparent;
-    backdrop-filter: blur(5px); 
-    transition: background-color 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out;
+@keyframes gradientAnimation {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
 }
-.links1{
-    color: rgb(216, 216, 216);
-    text-decoration: none;
-    cursor: pointer;
-    background-color: transparent;
-    backdrop-filter: blur(5px); 
-    transition: background-color 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out;
+
+.joinS:hover {
+  transform: scale(1.1);
+  text-shadow: 0 0 15px rgba(255, 255, 255, 1);
 }
-.links1:hover{
-    color: white;
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  position: fixed;
+  width: 98.5vw;
+  background-color: transparent;
+  backdrop-filter: blur(5px);
+  transition: background-color 0.3s ease-in-out,
+    backdrop-filter 0.3s ease-in-out;
+  z-index: 999;
+  padding: 0.5em;
 }
 
-.header2{
-    display: flex;
-    align-items: center;
-    gap: 1em;
-    cursor: pointer;
-    padding-right: 1em;
-    background-color: transparent;
-    backdrop-filter: blur(5px); 
-    transition: background-color 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out;
+.header1 {
+  display: flex;
+  gap: 1em;
+  padding-left: 1em;
+  background-color: transparent;
+  backdrop-filter: blur(5px);
+  transition: background-color 0.3s ease-in-out,
+    backdrop-filter 0.3s ease-in-out;
 }
-.header2>a{
-    background-color: transparent;
-    backdrop-filter: blur(5px); 
-    transition: background-color 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out;
+.links1 {
+  color: rgb(216, 216, 216);
+  text-decoration: none;
+  cursor: pointer;
+  background-color: transparent;
+  backdrop-filter: blur(5px);
+  transition: background-color 0.3s ease-in-out,
+    backdrop-filter 0.3s ease-in-out;
+}
+.links1:hover {
+  color: white;
 }
 
-.links2{
-    color: rgb(216, 216, 216);
-    background-color: transparent;
-    backdrop-filter: blur(5px); 
-    transition: background-color 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out;
+.header2 {
+  display: flex;
+  align-items: center;
+  gap: 1em;
+  cursor: pointer;
+  padding-right: 1em;
+  background-color: transparent;
+  backdrop-filter: blur(5px);
+  transition: background-color 0.3s ease-in-out,
+    backdrop-filter 0.3s ease-in-out;
+}
+.header2 > a {
+  background-color: transparent;
+  backdrop-filter: blur(5px);
+  transition: background-color 0.3s ease-in-out,
+    backdrop-filter 0.3s ease-in-out;
+}
+
+.links2 {
+  color: rgb(216, 216, 216);
+  background-color: transparent;
+  backdrop-filter: blur(5px);
+  transition: background-color 0.3s ease-in-out,
+    backdrop-filter 0.3s ease-in-out;
 }
 
-.links2:hover{
-    color: white;
+.links2:hover {
+  color: white;
 }
 
-.icons{
-    font-size: 22px;
+.icons {
+  font-size: 22px;
+  background-color: transparent;
+  backdrop-filter: blur(5px);
+  transition: background-color 0.3s ease-in-out,
+    backdrop-filter 0.3s ease-in-out;
+}
+
+@media (min-width: 320px) and (max-width: 450px) {
+  .header1 {
+    display: flex;
+    gap: 0.5em;
+  }
+  .links1 {
+    font-size: 0.9em;
+  }
+  .header {
+    width: 100%;
+    gap: 3em;
+  }
+  .header2 > a {
     background-color: transparent;
-    backdrop-filter: blur(5px); 
-    transition: background-color 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out;
+    backdrop-filter: blur(5px);
+    transition: background-color 0.3s ease-in-out,
+      backdrop-filter 0.3s ease-in-out;
+    font-size: 0.8em;
   }
-
-@media (min-width:320px) and (max-width:450px){
-    .header1{
-        display: flex;
-        gap: 0.5em;
-    }
-    .links1{
-       font-size: 0.9em;
-    }
-    .header{
-        width: 100%;
-        gap: 3em;
-    }
-    .header2>a{
-        background-color: transparent;
-        backdrop-filter: blur(5px); 
-        transition: background-color 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out;
-        font-size: 0.8em;
-    }
-    .links2{
-        font-size: 0.5em;
-        background-color: white;
-    }
-    
-}
\ No newline at end of file
+  .links2 {
+    font-size: 0.5em;
+    background-color: white;
+  }
+}
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index 9485137..37dba35 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -35,7 +35,7 @@ function Header() {
           <FaDiscord className="icons links2" />
         </a>
         <Link to="/join" className="links1">
-          <h3 className="links1">Join the society</h3>
+          <h3 className="joinS">Join the society</h3>
         </Link>
       </div>
     </div>