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
+
+
+
+
+
-
-
-
+
+
+