Form data retrieval and UI correction

This commit is contained in:
MathewFrancis 2025-05-21 17:47:53 +05:30
parent fa09ce5854
commit 144520016f
3 changed files with 25 additions and 10 deletions

View File

@ -2,7 +2,7 @@
margin-top: 2rem; margin-top: 2rem;
background-color: #caf0f8; background-color: #caf0f8;
font-size: 1.6rem; font-size: 1.6rem;
padding: 1rem; padding: 0rem 2rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 2rem; gap: 2rem;
@ -31,6 +31,7 @@
.cezen_banner_top h1 { .cezen_banner_top h1 {
align-self: center; align-self: center;
font-size: 2rem; font-size: 2rem;
padding: 2rem 0rem;
/* font-weight: 500; */ /* font-weight: 500; */
} }
@ -61,14 +62,16 @@
transition: all 0.3s; transition: all 0.3s;
} }
.RHS_nav div img {
max-width: 2.2rem;
margin-right: 0.8rem;
}
.RHS_nav div:hover { .RHS_nav div:hover {
padding-left: 1rem; padding-left: 1rem;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
border-bottom: 0.2rem solid rgba(0, 137, 133, 0.8); border-bottom: 0.2rem solid rgba(0, 137, 133, 0.8);
cursor: pointer; cursor: pointer;
margin-bottom: 0rem;
}
.RHS_nav div img {
max-width: 2.2rem;
margin-right: 0.6rem;
margin-bottom: -0.4rem;
} }

View File

@ -20,7 +20,7 @@ section {
.LHS { .LHS {
background-color: #03045e; background-color: #03045e;
justify-items: center; justify-items: center;
padding: 5rem; padding: 2.4rem 5rem;
text-transform: capitalize; text-transform: capitalize;
color: #0096c7; color: #0096c7;
border-top-left-radius: 2rem; border-top-left-radius: 2rem;
@ -43,7 +43,7 @@ section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 4rem; gap: 4rem;
padding: 2rem; padding: 3rem 0rem;
} }
.form-elements div { .form-elements div {
@ -69,7 +69,7 @@ section {
} }
form button { form button {
margin-top: 4rem; margin-top: 1rem;
background-color: #90e0ef; background-color: #90e0ef;
color: #03045e; color: #03045e;
font-size: 2rem; font-size: 2rem;
@ -79,6 +79,7 @@ form button {
border-radius: 0.5rem; border-radius: 0.5rem;
transition: all 0.3s; transition: all 0.3s;
border: 0.3rem solid #03045e; border: 0.3rem solid #03045e;
margin-left: -3rem;
} }
form button:hover { form button:hover {

View File

@ -1,8 +1,19 @@
export default function SignUp() { export default function SignUp() {
function onSubmitLoginForm(event) {
event.preventDefault();
const formData = new FormData(event.target);
const data = Object.fromEntries(formData.entries());
console.log(data);
// event.target.reset();
}
return ( return (
<div className="LHS"> <div className="LHS">
<h2>Sign Up</h2> <h2>Sign Up</h2>
<form> <form onSubmit={onSubmitLoginForm}>
<div className="form-elements"> <div className="form-elements">
<div> <div>
<label>user name</label> <label>user name</label>