Form data retrieval and UI correction
This commit is contained in:
parent
fa09ce5854
commit
144520016f
@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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 {
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user