sign up html template

Solutions on MaxInterview for sign up html template by the best coders in the world

Search
showing results for - "sign up html template"
Andrea
02 Aug 2019
1<!DOCTYPE html>
2<html>
3<style>
4    body {
5        font-family: Arial, Helvetica, sans-serif;
6    }
7    
8    * {
9        box-sizing: border-box;
10    }
11    /* Full-width input fields */
12    
13    input[type=text],
14    input[type=password] {
15        width: 100%;
16        padding: 15px;
17        margin: 5px 0 22px 0;
18        display: inline-block;
19        border: none;
20        background: #f1f1f1;
21    }
22    /* Add a background color when the inputs get focus */
23    
24    input[type=text]:focus,
25    input[type=password]:focus {
26        background-color: #ddd;
27        outline: none;
28    }
29    /* Set a style for all buttons */
30    
31    button {
32        background-color: #04AA6D;
33        color: white;
34        padding: 14px 20px;
35        margin: 8px 0;
36        border: none;
37        cursor: pointer;
38        width: 100%;
39        opacity: 0.9;
40    }
41    
42    button:hover {
43        opacity: 1;
44    }
45    /* Extra styles for the cancel button */
46    
47    .cancelbtn {
48        padding: 14px 20px;
49        background-color: #f44336;
50    }
51    /* Float cancel and signup buttons and add an equal width */
52    
53    .cancelbtn,
54    .signupbtn {
55        float: left;
56        width: 50%;
57    }
58    /* Add padding to container elements */
59    
60    .container {
61        padding: 16px;
62    }
63    /* The Modal (background) */
64    
65    .modal {
66        /* display: none; Hidden by default */
67        position: fixed;
68        /* Stay in place */
69        z-index: 1;
70        /* Sit on top */
71        left: 0;
72        top: 0;
73        width: 100%;
74        /* Full width */
75        height: 100%;
76        /* Full height */
77        overflow: auto;
78        /* Enable scroll if needed */
79        background-color: #474e5d;
80        padding-top: 50px;
81    }
82    /* Modal Content/Box */
83    
84    .modal-content {
85        background-color: #fefefe;
86        margin: 5% auto 15% auto;
87        /* 5% from the top, 15% from the bottom and centered */
88        border: 1px solid #888;
89        width: 80%;
90        /* Could be more or less, depending on screen size */
91    }
92    /* Style the horizontal ruler */
93    
94    hr {
95        border: 1px solid #f1f1f1;
96        margin-bottom: 25px;
97    }
98    /* The Close Button (x) */
99    
100    .close {
101        position: absolute;
102        right: 35px;
103        top: 15px;
104        font-size: 40px;
105        font-weight: bold;
106        color: #f1f1f1;
107    }
108    
109    .close:hover,
110    .close:focus {
111        color: #f44336;
112        cursor: pointer;
113    }
114    /* Clear floats */
115    
116    .clearfix::after {
117        content: "";
118        clear: both;
119        display: table;
120    }
121    /* Change styles for cancel button and signup button on extra small screens */
122    
123    @media screen and (max-width: 300px) {
124        .cancelbtn,
125        .signupbtn {
126            width: 100%;
127        }
128    }
129</style>
130
131<body>
132
133    <h2>Modal Signup Form</h2>
134
135    <button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Sign Up</button>
136
137    <div id="id01" class="modal">
138        <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
139        <form class="modal-content" action="/action_page.php">
140            <div class="container">
141                <h1>Sign Up</h1>
142                <p>Please fill in this form to create an account.</p>
143                <hr>
144                <label for="email"><b>Email</b></label>
145                <input type="text" placeholder="Enter Email" name="email" required>
146
147                <label for="psw"><b>Password</b></label>
148                <input type="password" placeholder="Enter Password" name="psw" required>
149
150                <label for="psw-repeat"><b>Repeat Password</b></label>
151                <input type="password" placeholder="Repeat Password" name="psw-repeat" required>
152
153                <label>
154        <input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
155      </label>
156
157                <p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p>
158
159            </div>
160        </form>
161    </div>
162
163
164</body>
165
166</html>
similar questions
how to make a sign up pagehtml won signhtml lira signlogin form in html template free downloadand sign htmlemail template htmlhtml one page template freesign up or log in htmleducation html templatesuser profile template htmlhow to make a signup page in htmlpopup html templatesingle page template htmlregistration form template htmlhtml email templatehtml spesmilo signhtml tenge sign
queries leading to this page
sign up page html css templatesignup page template html csshtml sign up page templatehtml weclome signup templatessign up html template freefree sign up html templateaccount page html templatesign in page html template sign in html template for freewebsite signup page html templateshtml sign up templatefree signup form template htmlhtml simple signin template downloadsignup html templatehtml sign up form templatessignup form template html csshtml free sign up page templatessignup template htmlhtml css sign in sign up page templatehtml signup templatessignup page html templatesign in template htmlsign up template htmlsign up html css templatesign in html templatesign up html template html sign in templatefree sign up form html templatebest html signup templatessign up form html css templatesign up html template