Authentication pages

This commit is contained in:
Piotr Kopycki 2021-12-10 15:39:22 +01:00
parent 2be89b6901
commit fa65947965
5 changed files with 90 additions and 23 deletions

View File

@ -28,21 +28,66 @@
padding: 0px 10px;
}
.authBox {
height: 100px;
width: 100px;
.authContent {
top: 50%;
left: 50%;
position: absolute;
width: 400px;
height: 550px;
padding: 80px 40px;
background-color: #FEEFE5;
color: #111;
padding: 250px 300px 0px 300px;
position: relative;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
color: #2B3D41;
}
.authContent {
background-color:#FA003F
padding: 250px 300px 0px 300px;
height: 100%;
.authContent h2 {
margin: 0;
padding: 0 0 20px;
text-align: center;
text-transform: uppercase;
}
.authContent p {
margin: 0;
padding: 0;
font-weight: bold;
line-height: 1.5;
}
.authContent input {
width: 100%;
position: absolute;
margin-bottom: 20px;
}
.authContent input[type=text],
.authContent input[type=email],
.authContent input[type=password]{
border: none;
border-bottom: 1px solid #2B3D41;;
background: transparent;
outline: none;
height: 35px;
color: #2B3D41;;
}
.authContent input[type=submit]{
height: 30px;
color: #FFF;
font-size: 15px;
background: #00916E;
cursor: pointer;
border-radius: 25px;
border: none;
outline: none;
margin-top: 15px;
}
input[type=checkbox]{
width: 20%;
}
.titleBar {
@ -59,4 +104,6 @@
font-size: 30px;
color: #FEEFE5;
display: block;
}
}
background-color:#FA003F

View File

@ -8,15 +8,13 @@
<meta name="description" content="{% block description %}{% endblock %}">
</head>
<body>
<body style="background-color: #FA003F">
<div class="titleBar">
SOITA
</div>
<div name="content", class="authContent">
<div name="box", class="authBox">
{% block content %}
{% endblock %}
</div>
<div class="authContent">
{% block content %}
{% endblock %}
</div>
</body>

View File

@ -1,8 +1,16 @@
{% extends "authBase.html" %}
{% block title %}Login{% endblock %}
{% block title %}Log In{% endblock %}
{% block content %}
Login
<h2>Log In</h2>
<form action="">
<p>Email</p>
<input type="email" placeholder="Enter Email">
<p>Password</p>
<input type="password" placeholder="Enter Password">
<input type="submit" value="Log in">
<p><input type="checkbox">Remember Me</p>
</form>
{% endblock %}

View File

@ -1,8 +1,8 @@
{% extends "authBase.html" %}
{% block title %}Logout{% endblock %}
{% block title %}Log Out{% endblock %}
{% block content %}
Logout
<p>You have been logged out successfully</p>
{% endblock %}

View File

@ -3,6 +3,20 @@
{% block title %}Create account{% endblock %}
{% block content %}
Create account
<h2>Register</h2>
<form action="">
<p>First Name</p>
<input type="text" placeholder="Enter First Name">
<p>Last Name</p>
<input type="text" placeholder="Enter Last Name">
<p>Email</p>
<input type="email" placeholder="Enter Email">
<p>Password</p>
<input type="password" placeholder="Enter Password">
<p>Repeat password</p>
<input type="password" placeholder="Enter Password">
<input type="submit" value="Crete account">
<p><input type="checkbox">Remember Me</p>
</form>
{% endblock %}