feat : devWeb - projet - making css architecture for login and register page

This commit is contained in:
kmitresse
2024-03-17 19:10:18 +01:00
parent a9235dd3a9
commit 19ba5514b4
3 changed files with 106 additions and 20 deletions
@@ -0,0 +1,62 @@
html {
height: 100%;
display: flex;
align-items: center;
}
body {
width: 100%;
}
main {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
}
#title {
width:60%;
text-align: center;
font-size: xxx-large;
}
#form {
width: 18%;
height: 100%;
border-left: ridge;
padding-left: 6%;
}
h1 {
justify-self: center;
}
#loginForm, #registerForm {
display: grid;
}
.field {
display: flex;
flex-direction: row;
width: auto;
justify-content: space-between;
margin: 1%;
}
#birthdate {
width: 59%;
text-align: right;
}
.submit {
justify-self: right;
width: 35%;
margin: 1%;
}
p {
border-top: ridge;
padding-top: 5%;
}
+7 -2
View File
@@ -4,10 +4,13 @@
<head>
<title>Login</title>
<script defer type="text/javascript" src="js/login.js"></script>
<link rel="stylesheet" href="css/login.css"/>
</head>
<body>
<main>
<section id="title"> Titre du jeu </section>
<section id="form">
<h1>Login</h1>
<form id="loginForm" data-login-endpoint="api/login" action="dashboard.jsp" method="POST">
<div class="field">
@@ -20,11 +23,13 @@
<input type="password" id="password" name="password" required>
</div>
<input type="submit" value="Login">
<input class="submit" type="submit" value="Login">
<p>Don't have an account? <a href="register.jsp">Register</a></p>
</form>
</section>
</main>
</body>
</html>
</html>
+37 -18
View File
@@ -3,32 +3,51 @@
<html>
<head>
<title>Register</title>
<link rel="stylesheet" href="css/login.css"/>
</head>
<body>
<main>
<h1>Login</h1>
<form action="register" method="post">
<div class="field">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>
<section id="title">Titre du jeu</section>
<section id="form"><h1>Register</h1>
<form id="registerForm"action="register" method="post">
<div class="field">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="field">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<div class="field">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<div class="field">
<label for="password">RePassword:</label>
<input type="password" id="repassword" name="password" required>
</div>
<div class="field">
<label for="password">RePassword:</label>
<input type="password" id="repassword" name="password" required>
</div>
<input type="submit" value="Login">
<div class="field">
<label for="birthdate">Birthdate:</label>
<input type="date" id="birthdate" name="birthdate" required>
</div>
<p>Already have an account? <a href="login.jsp">Login</a></p>
</form>
<div class="field">
<label for="gender">Gender:</label>
<select name="gender" id="gender">
<option value="">--Please choose an option--</option>
<option value="male">Mâle</option>
<option value="female">Female</option>
<option value="non-binary">Non-binary</option>
</select>
</div>
<input class="submit" type="submit" value="Login">
<p>Already have an account? <a href="login.jsp">Login</a></p>
</form>
</section>
</main>
</body>
</html>
</html>