Skip to content
Snippets Groups Projects
Commit 4e4fbcee authored by Kenneth Ezekiel's avatar Kenneth Ezekiel
Browse files

style: login and register forms

parent 79ebe5e3
No related merge requests found
......@@ -23,6 +23,12 @@ time, mark, audio, video {
font: inherit;
vertical-align: baseline;
}
* {
box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
......@@ -51,3 +57,70 @@ table {
font-family: 'Open Sans', sans-serif;
}
.form-container {
margin: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 10%;
width: 30%;
border-radius: 60px;
border: 1px solid #CBD5E1;
background: #FFF;
padding: 5%;
margin-top: 5%;
}
.form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: auto;
}
.form-group {
padding: 5%;
width: 100%;
}
.header-title {
color: #414141;
text-align: center;
font-size: 30px;
font-style: normal;
font-weight: 700;
line-height: 36px; /* 120% */
letter-spacing: -0.225px;
margin-bottom: 10%;
}
.input {
border-radius: 6px;
border: 1px solid #CBD5E1;
background: #FFF;
width: 100%;
padding: 5%;
margin-top: 5%;
}
.button {
border-radius: 6px;
background: teal;
color: white;
width: 100%;
padding-top: 3%;
padding-bottom: 3%;
transition: all 0.5s;
cursor: pointer;
}
.button:hover {background-color: #08bc4d}
.button:active {
background-color: #2b5c02;
transform: translateY(4px);
}
......@@ -50,9 +50,12 @@
<main>
<h1>hai!!!</h1>
<?= $__content ?>
<div class="content">
<?= $__content ?>
</div>
</main>
</body>
</html>
\ No newline at end of file
<div class="login-container">
<h2>Login</h2>
<form class="login-form" method="post">
<div class="form-container">
<h2 class="header-title">Login</h2>
<form class="form" method="post">
<div class="form-group">
<label for="username-email">Username or Email</label>
<br>
<input type="text" id="username" name="username-email" required>
<input class="input" type="text" id="username" name="username-email" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<br>
<input type="password" id="password" name="password" required>
<input class="input" type="password" id="password" name="password" required>
</div>
<div class="form-group">
<button type="submit">Login</button>
<button class="button" ctype="submit">Login</button>
</div>
</form>
</div>
\ No newline at end of file
<div class="register-container">
<h2>Register</h2>
<form class="register-form" method="post">
<div class="form-container">
<h2 class="header-title">Register</h2>
<form class="form" method="post">
<div class="form-group">
<label for="username">Username</label>
<br>
<input type="text" id="username" name="username" required>
<input class="input" type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<br>
<input type="text" id="email" name="email" required>
<input class="input" type="text" id="email" name="email" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<br>
<input type="password" id="password" name="password" required>
<input class="input" type="password" id="password" name="password" required>
</div>
<div class="form-group">
<label for="confirm-password">Confirm Password</label>
<br>
<input type="password" id="confirm-password" name="confirm-password" required>
<input class="input" type="password" id="confirm-password" name="confirm-password" required>
</div>
<div class="form-group">
<button type="submit">Register</button>
<button class="button" type="submit">Register</button>
</div>
</form>
</div>
</div>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment