1// HTML PART
2
3<form action="action_page.php" style="border:1px solid #ccc">
4 <div class="container">
5 <h1>Sign Up</h1>
6 <p>Please fill in this form to create an account.</p>
7 <hr>
8
9 <label for="email"><b>Email</b></label>
10 <input type="text" placeholder="Enter Email" name="email" required>
11
12 <label for="psw"><b>Password</b></label>
13 <input type="password" placeholder="Enter Password" name="psw" required>
14
15 <label for="psw-repeat"><b>Repeat Password</b></label>
16 <input type="password" placeholder="Repeat Password" name="psw-repeat" required>
17
18 <label>
19 <input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
20 </label>
21
22 <p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p>
23
24 <div class="clearfix">
25 <button type="button" class="cancelbtn">Cancel</button>
26 <button type="submit" class="signupbtn">Sign Up</button>
27 </div>
28 </div>
29</form>
30
31// CSS PART
32
33* {box-sizing: border-box}
34
35/* Full-width input fields */
36 input[type=text], input[type=password] {
37 width: 100%;
38 padding: 15px;
39 margin: 5px 0 22px 0;
40 display: inline-block;
41 border: none;
42 background: #f1f1f1;
43}
44
45input[type=text]:focus, input[type=password]:focus {
46 background-color: #ddd;
47 outline: none;
48}
49
50hr {
51 border: 1px solid #f1f1f1;
52 margin-bottom: 25px;
53}
54
55/* Set a style for all buttons */
56button {
57 background-color: #4CAF50;
58 color: white;
59 padding: 14px 20px;
60 margin: 8px 0;
61 border: none;
62 cursor: pointer;
63 width: 100%;
64 opacity: 0.9;
65}
66
67button:hover {
68 opacity:1;
69}
70
71/* Extra styles for the cancel button */
72.cancelbtn {
73 padding: 14px 20px;
74 background-color: #f44336;
75}
76
77/* Float cancel and signup buttons and add an equal width */
78.cancelbtn, .signupbtn {
79 float: left;
80 width: 50%;
81}
82
83/* Add padding to container elements */
84.container {
85 padding: 16px;
86}
87
88/* Clear floats */
89.clearfix::after {
90 content: "";
91 clear: both;
92 display: table;
93}
94
95/* Change styles for cancel button and signup button on extra small screens */
96@media screen and (max-width: 300px) {
97 .cancelbtn, .signupbtn {
98 width: 100%;
99 }
100}