Join BackgroundChange

JIITODC · Aug 11, 2024 · 27d1adc · 27d1adc
1 parent cd23dd2
commit 27d1adc
Show file tree

Hide file tree

Showing 2 changed files with 112 additions and 76 deletions.
diff --git 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;
-    }
-
-}
+  .links2 {
+    font-size: 0.5em;
+    background-color: white;
+  }
+}
diff --git 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>