1<html>
2 <head>
3 <title>
4 Log In or Sign Up
5 </title>
6 </head>
7 <body>
8 <div>
9 <input type="textarea" placeholder="Enter your username">
10 <br>
11 <br>
12 <input type="password" placeholder="Enter your username">
13 <br>
14 <br>
15 <input type="submit" value="Log In">
16 <br>
17 <br>
18 </div>
19 <div>
20 <p>
21 Or Sign Up!
22 </p>
23 <br>
24 <br>
25 <input type="textarea" placeholder="Create a username">
26 <br>
27 <br>
28 <input type="password" placeholder="Create a password">
29 <br>
30 <br>
31 <input type="submit" value="Sign Up">
32 </div>
33 </body>
34</html>
1 <!DOCTYPE html>
2<html>
3<head>
4<meta name="viewport" content="width=device-width, initial-scale=1">
5<style>
6body ,html{font-family: Arial, Helvetica, sans-serif;;}
7form{
8 width:fit-content;
9 padding: 60px;
10
11
12 height:fit-content;
13 margin:0 auto;
14 margin-top: 2%;
15 background-color: #f9f9f9
16}
17/* Full-width input fields */
18.form-control {
19 width: 100%;
20 padding: 12px 20px;
21 margin: 8px 0;
22 display: inline-block;
23 border: 1px solid #ccc;
24 box-sizing: border-box;
25}
26
27/* Set a style for all buttons */
28button{
29 background-color: #4CAF50;
30 color: white;
31 border: none;
32 cursor: pointer;
33 width: 60%;
34 margin: 5px auto;
35 padding: 15px;
36 box-shadow: 0px 5px 5px #ccc;
37 border-radius: 5px;
38 border-top: 1px solid #e9e9e9;
39 display:block;
40 text-align:center;
41}
42.signup{
43 background-color:blue;
44 margin-bottom:20px;
45}
46.login-box {
47 position: absolute;
48 top: 50%;
49 transform: translateY(-50%);
50 padding: 15px;
51 background-color: #fff;
52 box-shadow: 0px 5px 5px #ccc;
53 border-radius: 5px;
54 border-top: 1px solid #e9e9e9;
55 }
56button:hover,#btn-signup:hover {
57 opacity: 0.8;
58}
59
60
61
62/* Center the image and position the close button */
63.imgcontainer {
64 text-align: center;
65 margin: 24px 0 12px 0;
66 position: relative;
67}
68
69img.avatar {
70 width: 40%;
71 border-radius: 50%;
72}
73
74.container {
75 padding: 16px;
76}
77
78span.psw {
79 float: right;
80 padding-top: 16px;
81}
82
83h2,p{
84 text-align:center;
85}
86
87
88
89/* Change styles for span and cancel button on extra small screens */
90@media screen and (max-width: 300px) {
91 span.psw {
92 display: block;
93 float: none;
94 }
95
96}
97</style>
98</head>
99<body>
100
101
102
103
104 <form action="/action_page.php" method="post">
105
106 <h2>Welcome To Newscongragated</h2>
107 <p>Sign in</p>
108 <div class="container">
109
110 <label for="email"><b>Email</b></label>
111 <input
112 type="email"
113 class="form-control"
114 id="email"
115 placeholder="Enter your email"
116 required pattern='/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/'>
117
118
119
120 <label for="name"><b>Password</b</label>
121 <input
122 type="password"
123 class="form-control"
124 id="password"
125 placeholder="Enter your password"
126 minlength="8"
127 required>
128
129 <button type="submit">Login</button>
130 <button type="button"
131 href="account/signup.php"
132 class="signup" >
133 Sign Up
134 </button>
135 <a href="./resetpassword.php">Forgot your password? </a>
136
137
138 </div>
139
140
141
142
143 </form>
144
145
146</body>
147</html>
148
1<html>
2<head>
3<title>Account</title>
4<style>
5body
6{
7 background-color:#ffda08;
8}
9table
10{
11 border:1px white;
12 margin-top:200px;
13 margin-left:500px;
14 background-color:white;
15 padding:20px
16}
17#btn
18{
19 width:200px;
20 height:50px;
21 background-color:#1ee3d2;
22}
23
24</style>
25</head>
26<body>
27 <form name=frmNewAcc>
28 <table border=0 cellspacing=5px>
29 <tr>
30 <th colspan=3><input class=in =text name=txtuname placeholder="Enter your account name"></th>
31 </tr>
32 <tr>
33 <th colspan=3><input class=in type=password name=txtupass placeholder="Enter your new password"></th>
34 </tr>
35 <tr>
36 <th colspan=3><input class=in type=password name=txtuconfirmpass placeholder="Enter confirmed password"></th>
37 </tr>
38 <tr>
39 <th colspan=3><input id=btn type=button value="Create new account"></th>
40 <a href="Login task 1.html">Go back to login</a>
41 </tr>
42
43
44</table>
45</form>
46</body>
47</html>
48
49
1<html>
2 <head>
3 <title>Login page example</title>
4 <style>
5 input{
6 font-size: 20;
7 }
8 body{
9 background-color: red;
10 }
11 </style>
12 </head>
13 <body>
14 <input placeholder="Username"/>
15 <br />
16 <input type="password" placeholder="Password"/>
17 <br/>
18 <br/>
19 <button>Login</button>
20 </body>
21
22</html>
1{% extends '!!!!!ALERT_CHANGE_THIS_ALERT!!!!!!!/base.html' %}
2{% load crispy_forms_tags %}
3
4{% block title %}
5<title>Login</title>
6{% endblock %}
7
8{% block body %}
9<div class="container">
10 <div class="row justify-content-center mt-5">
11 <div class="col-5 border shadow rounded p-4">
12 <h1 class="font-weight-lighter text-center">Login</h1>
13 <form method="POST">
14 {% csrf_token %}
15 {{ form | crispy }}
16 <button class="btn btn-outline-secondary btn-block mt-4">
17 Login
18 </button>
19 </form>
20 </div>
21 </div>
22</div>
23{% endblock %}
1<!DOCTYPE html>
2<html>
3<head>
4<meta name="viewport" content="width=device-width, initial-scale=1">
5<style>
6body {font-family: Arial, Helvetica, sans-serif;}
7
8/* Full-width input fields */
9input[type=text], input[type=password] {
10 width: 100%;
11 padding: 12px 20px;
12 margin: 8px 0;
13 display: inline-block;
14 border: 1px solid #ccc;
15 box-sizing: border-box;
16}
17
18/* Set a style for all buttons */
19button {
20 background-color: #4CAF50;
21 color: white;
22 padding: 14px 20px;
23 margin: 8px 0;
24 border: none;
25 cursor: pointer;
26 width: 100%;
27}
28
29button:hover {
30 opacity: 0.8;
31}
32
33/* Extra styles for the cancel button */
34.cancelbtn {
35 width: auto;
36 padding: 10px 18px;
37 background-color: #f44336;
38}
39
40/* Center the image and position the close button */
41.imgcontainer {
42 text-align: center;
43 margin: 24px 0 12px 0;
44 position: relative;
45}
46
47img.avatar {
48 width: 40%;
49 border-radius: 50%;
50}
51
52.container {
53 padding: 16px;
54}
55
56span.psw {
57 float: right;
58 padding-top: 16px;
59}
60
61/* The Modal (background) */
62.modal {
63 display: none; /* Hidden by default */
64 position: fixed; /* Stay in place */
65 z-index: 1; /* Sit on top */
66 left: 0;
67 top: 0;
68 width: 100%; /* Full width */
69 height: 100%; /* Full height */
70 overflow: auto; /* Enable scroll if needed */
71 background-color: rgb(0,0,0); /* Fallback color */
72 background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
73 padding-top: 60px;
74}
75
76/* Modal Content/Box */
77.modal-content {
78 background-color: #fefefe;
79 margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
80 border: 1px solid #888;
81 width: 80%; /* Could be more or less, depending on screen size */
82}
83
84/* The Close Button (x) */
85.close {
86 position: absolute;
87 right: 25px;
88 top: 0;
89 color: #000;
90 font-size: 35px;
91 font-weight: bold;
92}
93
94.close:hover,
95.close:focus {
96 color: red;
97 cursor: pointer;
98}
99
100/* Add Zoom Animation */
101.animate {
102 -webkit-animation: animatezoom 0.6s;
103 animation: animatezoom 0.6s
104}
105
106@-webkit-keyframes animatezoom {
107 from {-webkit-transform: scale(0)}
108 to {-webkit-transform: scale(1)}
109}
110
111@keyframes animatezoom {
112 from {transform: scale(0)}
113 to {transform: scale(1)}
114}
115
116/* Change styles for span and cancel button on extra small screens */
117@media screen and (max-width: 300px) {
118 span.psw {
119 display: block;
120 float: none;
121 }
122 .cancelbtn {
123 width: 100%;
124 }
125}
126</style>
127</head>
128<body>
129
130<h2>Modal Login Form</h2>
131
132<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button>
133
134<div id="id01" class="modal">
135
136 <form class="modal-content animate" action="/action_page.php" method="post">
137 <div class="imgcontainer">
138 <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
139 <img src="img_avatar2.png" alt="Avatar" class="avatar">
140 </div>
141
142 <div class="container">
143 <label for="uname"><b>Username</b></label>
144 <input type="text" placeholder="Enter Username" name="uname" required>
145
146 <label for="psw"><b>Password</b></label>
147 <input type="password" placeholder="Enter Password" name="psw" required>
148
149 <button type="submit">Login</button>
150 <label>
151 <input type="checkbox" checked="checked" name="remember"> Remember me
152 </label>
153 </div>
154
155 <div class="container" style="background-color:#f1f1f1">
156 <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
157 <span class="psw">Forgot <a href="#">password?</a></span>
158 </div>
159 </form>
160</div>
161
162<script>
163// Get the modal
164var modal = document.getElementById('id01');
165
166// When the user clicks anywhere outside of the modal, close it
167window.onclick = function(event) {
168 if (event.target == modal) {
169 modal.style.display = "none";
170 }
171}
172</script>
173
174</body>
175</html>
176