diff --git a/src/App.jsx b/src/App.jsx index 1061e32..5625d3a 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -25,8 +25,8 @@ const App = () => { - {/* - */} + + {/* */} diff --git a/src/components/signup/Signup.css b/src/components/signup/Signup.css index bdfc981..07dba2d 100644 --- a/src/components/signup/Signup.css +++ b/src/components/signup/Signup.css @@ -31,56 +31,51 @@ text-align: center; } -.s-content{ +.scontent{ display: flex; justify-content: center; - /* flex-wrap: wrap; */ + align-items: center; flex-direction: column; - position: relative; - + gap: 30px; + } -.email{ - display: flex; - justify-content: center; +.inputbox{ position: relative; - + width: 250px; } -.email input[type="email"]{ - margin-left: 10px; - /* border: 2px solid green; */ - position: relative; - color: white; - background: rgba(128, 128, 128,0.2); - width: 10rem; - border-radius: 4px; - - - +.inputbox input{ + width: 100%; + padding: 10px; + border: 1px solid rgb(1, 209, 105); + background: rgb(1, 15, 20,0.25); + border-radius: 5px; + outline: none; + color: #fff; + font-size: 1em; + } -.email input:focus{ - /* color: rgb(1, 95, 48); */ - border: 2px solid rgb(1, 95, 48) ; -} -.input::before{ - content:''; - width: 50px; - height: 5px; - border: 2px solid green; +.inputbox span{ + position: absolute; - top: 0; -} -.sbtn{ - display: flex; - justify-content: center; - margin-top: 1rem; + left:0; + padding: 10px; + pointer-events: none; + font-size: 1em; + color: rgb(1, 209, 105,0.5); - + text-transform: uppercase; } -.sbtn button{ - border-radius: 4px; +.inputbox .input:valid ~ span, +.inputbox .input:valid ~ span :focus +{ + } + + + + diff --git a/src/components/signup/Signup.jsx b/src/components/signup/Signup.jsx index 0a575f3..e775551 100644 --- a/src/components/signup/Signup.jsx +++ b/src/components/signup/Signup.jsx @@ -9,18 +9,21 @@ const Signup = () => {

Sign in now and register for upcoming events and
future announcements.

- -
-
- Email -
- -
+
+
+ + + Email + +
+
+ +
- -
-
+
+ +