diff --git a/src/components/Home/Home.css b/src/components/Home/Home.css index 117cc7b..74f3a2d 100644 --- a/src/components/Home/Home.css +++ b/src/components/Home/Home.css @@ -41,153 +41,34 @@ .glow { font-family: "Valorant"; - padding-right: .15rem; + padding: .15rem; /* font-family: "clips"; */ /* text-transform: uppercase; */ - font-size: 35px; + font-size: 20px; + width: 60%; + text-decoration: none; /* position: relative; */ text-align: center; /* margin-left: 16rem; */ - background-image: radial-gradient( ellipse 27% 25% at 50% 50%, #33ff85, transparent); + background: linear-gradient( + 111.17deg, + rgba(0, 253, 101, 0.09) 0.84%, + rgba(0, 253, 101, 0.38) 0.84%, + rgba(0, 253, 101, 0) 90%, + rgba(0, 253, 101, 0) 90%, + rgba(0, 253, 101, 0) 90% + ); color: var(--text-p); - text-shadow: 0 0 0.6rem #5cff99, 0 0 1.5rem #33ff85, -0.2rem 0.1rem 1rem #1fff78, 0.2rem 0.1rem 1rem #00fd65, 0 -0.5rem 2rem #00fd62, 0 0.5rem 3rem #00cc52; + border-radius: 5px; + animation: shine 2s forwards, flicker 3s infinite; } - -@keyframes blink { - 0%, - 22%, - 36%, - 75% { - color: #ffe6ff; - text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #1fff78, -0.2rem 0.1rem 1rem #00fd65, 0.2rem 0.1rem 1rem #33ff85, 0 -0.5rem 2rem #00fd62, 0 0.5rem 3rem #00cc52; - } - 28%, - 33% { - color: var(--text-p); - text-shadow: none; - } - 82%, - 97% { - color: var(--text-p); - text-shadow: none; - } -} - -.flicker { - animation: shine 2s forwards, blink 3s 2s infinite; +.glow a{ + text-decoration: none; + color: var(--text-p); } -.fast-flicker { - animation: shine 2s forwards, blink 10s 1s infinite; -} -@keyframes shine { - 0% { - color: #00fd65; - text-shadow: none; - } - 100% { - color: var(--text-p); - text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #1fff78, -0.2rem 0.1rem 1rem #00fd65, 0.2rem 0.1rem 1rem #33ff85, 0 -0.5rem 2rem #00fd62, 0 0.5rem 3rem #00cc52; - } -} - -@keyframes flicker { - from { - opacity: 1; - } - 4% { - opacity: 0.9; - } - 6% { - opacity: 0.85; - } - 8% { - opacity: 0.95; - } - 10% { - opacity: 0.9; - } - 11% { - opacity: 0.922; - } - 12% { - opacity: 0.9; - } - 14% { - opacity: 0.95; - } - 16% { - opacity: 0.98; - } - 17% { - opacity: 0.9; - } - 19% { - opacity: 0.93; - } - 20% { - opacity: 0.99; - } - 24% { - opacity: 1; - } - 26% { - opacity: 0.94; - } - 28% { - opacity: 0.98; - } - 37% { - opacity: 0.93; - } - 38% { - opacity: 0.5; - } - 39% { - opacity: 0.96; - } - 42% { - opacity: 1; - } - 44% { - opacity: 0.97; - } - 46% { - opacity: 0.94; - } - 56% { - opacity: 0.9; - } - 58% { - opacity: 0.9; - } - 60% { - opacity: 0.99; - } - 68% { - opacity: 1; - } - 70% { - opacity: 0.9; - } - 72% { - opacity: 0.95; - } - 93% { - opacity: 0.93; - } - 95% { - opacity: 0.95; - } - 97% { - opacity: 0.93; - } - to { - opacity: 1; - } -} .home__logo { width: 100%; @@ -211,7 +92,7 @@ -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; - text-fill-color: transparent; + } @media screen and (max-width: 1024px) { @@ -296,6 +177,7 @@ /* position: relative; margin-left: 6rem; margin-top: 3rem; */ + font-size: 15px; } .video { width: 300px; diff --git a/src/components/Home/Home.jsx b/src/components/Home/Home.jsx index 33ee173..7b626fa 100644 --- a/src/components/Home/Home.jsx +++ b/src/components/Home/Home.jsx @@ -28,9 +28,7 @@ const Home = () => { technologies developed in Prakarsh by students.{" "}