mirror of
https://github.com/kmitresse/Cards-Rush.git
synced 2026-05-14 01:21:49 +00:00
feat : devWeb - projet - making css architecture for login and register page
This commit is contained in:
@@ -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%;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user