├── green2.png
├── red2.png
├── user.png
├── password.png
├── background.jpg
├── ExitGlyph_a2.png
├── LICENSE
├── README.md
├── Login Page 4.html
├── Login Page 3.html
├── Registration Page.html
├── Login Page 2.html
├── Feedback Page.html
└── Login Page 1.html


/green2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ishaanjav/Webpage-Templates/HEAD/green2.png


--------------------------------------------------------------------------------
/red2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ishaanjav/Webpage-Templates/HEAD/red2.png


--------------------------------------------------------------------------------
/user.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ishaanjav/Webpage-Templates/HEAD/user.png


--------------------------------------------------------------------------------
/password.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ishaanjav/Webpage-Templates/HEAD/password.png


--------------------------------------------------------------------------------
/background.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ishaanjav/Webpage-Templates/HEAD/background.jpg


--------------------------------------------------------------------------------
/ExitGlyph_a2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ishaanjav/Webpage-Templates/HEAD/ExitGlyph_a2.png


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Ishaan Javali
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Webpage Templates
 2 | This repository contains a couple of webpage templates for login, registration, and feedback pages.
 3 | 
 4 | To get started, simply download the html files along with the images. Feel free to modify the files for your own use.
 5 | 
 6 | -----
 7 | 
 8 | ## Templates
 9 | **Click on the image or text to go to the file**
10 | 
11 | ### Feedback Page
12 | 
13 |  [<img src="https://github.com/ishaanjav/Images-for-my-Other-Repostiories/blob/master/Webpage%20Templates/Feedback%20Page.png" width="64%" alt="Feedback Page">](https://github.com/ishaanjav/Webpage-Templates/blob/master/Feedback%20Page.html)
14 | 
15 | ### Login Pages
16 | 
17 | <table border="0">
18 |  <tr>
19 |    <td align="center" colspan="2"><b style="font-size:30px">
20 |      <a href="https://github.com/ishaanjav/Webpage-Templates/blob/master/Login%20Page%202.html">Template 1</a></b></td>
21 |    
22 |  </tr>
23 |  <tr>
24 |     <td colspan="2">
25 |       <a href="https://github.com/ishaanjav/Webpage-Templates/blob/master/Login%20Page%202.html">
26 |         <img src="https://github.com/ishaanjav/Images-for-my-Other-Repostiories/blob/master/Webpage%20Templates/Login%20Page%202.png" style="margin-left:50px;" width="100%" alt = "Template 1">
27 |       </a>
28 |     </td>
29 |     
30 |  </tr>
31 |  
32 |  <tr>
33 |    <td align="center"><b style="font-size:30px"><a href="https://github.com/ishaanjav/Webpage-Templates/blob/master/Login%20Page%201.html">Template 2</a></b></td>
34 |     <td align="center"><b style="font-size:30px"><a href="https://github.com/ishaanjav/Webpage-Templates/blob/master/Login%20Page%203.html">Template 3</a></b></td>
35 |  </tr>
36 |  <tr>
37 |     <td>
38 |       <a href="https://github.com/ishaanjav/Webpage-Templates/blob/master/Login%20Page%201.html">
39 |         <img src="https://github.com/ishaanjav/Images-for-my-Other-Repostiories/blob/master/Webpage%20Templates/Login%20Page%201.png" width="100%" alt = "Template 2">
40 |       </a>
41 |     </td>
42 |     <td>
43 |       <a href="https://github.com/ishaanjav/Webpage-Templates/blob/master/Login%20Page%203.html">
44 |         <img src="https://github.com/ishaanjav/Images-for-my-Other-Repostiories/blob/master/Webpage%20Templates/Login%20Page%203.png" width="100%" alt = "Template 3">
45 |      </a>
46 |     </td>
47 |  </tr>
48 |  
49 |  
50 |  <tr>
51 |    <td align="center" colspan="2"><b style="font-size:30px"><a href="https://github.com/ishaanjav/Webpage-Templates/blob/master/Login%20Page%204.html">Template 4</a></b></td>
52 |    
53 |  </tr>
54 |  <tr>
55 |     <td colspan="2">
56 |       <a href="https://github.com/ishaanjav/Webpage-Templates/blob/master/Login%20Page%204.html">
57 |         <p align="center">
58 |         <img src="https://github.com/ishaanjav/Images-for-my-Other-Repostiories/blob/master/Webpage%20Templates/Login%20Page%204.png" style="margin-left:50px;" width="90%" alt = "Template 4"> </p>
59 |       </a>
60 |     </td>
61 |     
62 |  </tr>
63 |  
64 | </table>
65 | 
66 | ### Registration Page
67 | 
68 |  [<img src="https://github.com/ishaanjav/Images-for-my-Other-Repostiories/blob/master/Webpage%20Templates/Registration%20Page.png" width="60%" alt="Feedback Page">](https://github.com/ishaanjav/Webpage-Templates/blob/master/Registration%20Page.html)
69 | 


--------------------------------------------------------------------------------
/Login Page 4.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en-US">
  3 |         <!--Initial Web-page design attempt-->
  4 | 
  5 | 
  6 | <head>
  7 |     <style>
  8 |         @import url(https://fonts.googleapis.com/css?family=Sofia);
  9 |         @import url(https://fonts.googleapis.com/css?family=Raleway);
 10 |         @import url(https://fonts.googleapis.com/css?family=Comfortaa);
 11 |         @import url(https://fonts.googleapis.com/css?family=Nunito);
 12 | 
 13 |         h1 {
 14 |             color: blue;
 15 |             font-size: 48;
 16 |         }
 17 | 
 18 |         p {
 19 |             color: red;
 20 |         }
 21 | 
 22 |         div {
 23 |             background-color: whitesmoke
 24 |         }
 25 | 
 26 |         .row {
 27 |             font-size: 21px;
 28 |         }
 29 | 
 30 |         .buttonRed {
 31 |             background-color: red;
 32 |             /* Red*/
 33 |             border: none;
 34 |             color: white;
 35 |             padding: 8px 18px;
 36 |             text-align: center;
 37 |             text-decoration: none;
 38 |             display: inline-block;
 39 |             font-size: 16px;
 40 |             font-weight: bold;
 41 |             margin: 4px 2px;
 42 |             cursor: pointer;
 43 |             border-radius: 5px;
 44 |         }
 45 | 
 46 |         body {
 47 |             background: #3b7ed9;
 48 |         }
 49 | 
 50 |         textarea {
 51 |             border: 2px solid #5a5a5a;
 52 |             resize: none;
 53 |             padding-left: 7px;
 54 |             font-size: 18px;
 55 |             white-space: nowrap;
 56 |             overflow: hidden;
 57 |             padding-top: 6px;
 58 |             padding-bottom: 5px;
 59 |             height: 25px;
 60 |         }
 61 |     </style>
 62 | 
 63 |     <title>Login</title>
 64 | </head>
 65 | 
 66 | <body>
 67 | 
 68 |     <div id="1">
 69 |         <table align="center" border="0" cellpadding="0" cellspacing="0" style="background-image: linear-gradient(to bottom right, #aacbff , #1872ff);width:100%;">
 70 |             <tr>
 71 |                 <td style="margin-left:5px">
 72 |                     <h2 style="font-family: cursive; margin-left: 25px;">Website Name</h2>
 73 |                 </td>
 74 |                 <td>
 75 |                     <h1 style="margin-left: 250px; color: #06349b;font-family: sans-serif"><u>Login Page</u></h1>
 76 |                 </td>
 77 |                 <td style="margin-top: 4px" ;>
 78 |                     <form action="/exit_icon.php">
 79 |                         <img style="margin-top: 10px; margin-left: 90px" src="ExitGlyph_a2.png" alt="Exit!">
 80 |                     </form>
 81 |                 </td>
 82 |             </tr>
 83 |             <tr>
 84 |                 <td>
 85 |                     <p style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;border-radius: 5px ;color: #073396; line-height: 15px;  font-size: 17 px; margin-left: 25px;"> <i>Slogan</i></p>
 86 |                 </td>
 87 |                 <td>
 88 |                     <h1></h1>
 89 |                 </td>
 90 | 
 91 |             </tr>
 92 |         </table>
 93 | 
 94 | 
 95 |     </div>
 96 | 
 97 |     <div align="center" style="align-content: center; text-align: center; background-color: transparent;">
 98 |         <br><br><br>
 99 |         <img src="logo.PNG" width="30%" style="background-color: #84b5f7;padding-top: 15px; padding-bottom: 6px; padding-left: 29px; padding-right: 38px;" alt="Logo Image over here">
100 |         <br>
101 |         <div id="container" align="center" style="display:inline-block;width:35%;background: #e3bb36;">
102 |             <br>
103 |             <div id="usernameD" width="90%" style="background-color: transparent;">
104 |                 <img width="9%" src="user.png" alt="Username icon" style="margin-top: 0px;" />
105 |                 <textarea id="username" width="90%" height="20px" placeholder="Username" style="font-family: nunito; margin-top: 0px; padding-left: 6px;"></textarea>
106 |             </div>
107 |             <div id="passwordD" width="90%" style="background-color: transparent;">
108 |                 <img width="9%" src="password.png" alt="Username icon" style="margin-top: 0px;" />
109 |                 <textarea id="password" width="90%" height="20px" placeholder="Password" style="font-family: nunito; margin-top: 0px; padding-left: 6px;"></textarea>
110 |             </div>
111 | 
112 |             <input align="left" id="remember" type="checkbox">
113 |             <p align="left" style="font-size: 19px; color: black; display:inline-block; margin-left: 4px; font-family: nunito"><b>Remember me</b></p>
114 | 
115 |             <br>
116 | 
117 |             <button id="login" style="padding: 6px; width: 300px; font-size: 26px; font-family: raleway; background-color: #c13636;color:white">Login</button>
118 | 
119 |             <br>
120 |             <p style="color:black;font-size: 21px;">Don't have an account? <span style="color: #004eff;"><u>Sign Up</u></span></p>
121 |             <p style="margin-top: -15px; color:#004eff;font-size: 21px;"><u>Forgot Your Password?</u></p>
122 | 
123 |         </div>
124 | 
125 |     </div>
126 | 
127 | 
128 | 
129 | </body></html>
130 | 


--------------------------------------------------------------------------------
/Login Page 3.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en-US">
  3 |         <!--Initial Web-page design attempt-->
  4 |         
  5 | <head>
  6 | <style>
  7 |     
  8 |     h1   {color: blue;font-size: 48;}
  9 |     p    {color: red;}
 10 |     div  { background-color: whitesmoke}
 11 |    
 12 |     .row{
 13 |         font-size: 21px;
 14 |     }
 15 |     
 16 |     .buttonRed 
 17 |     {
 18 |         background-color: red; /* Red*/
 19 |         border: none;
 20 |         color: white;
 21 |         padding: 8px 18px;
 22 |         text-align: center;
 23 |         text-decoration: none;
 24 |         display: inline-block;
 25 |         font-size: 16px;
 26 |         font-weight: bold;
 27 |         margin: 4px 2px;
 28 |         cursor: pointer;
 29 |         border-radius: 5px;
 30 |     }
 31 |     
 32 |     .buttonRed:hover {
 33 |          background-color: rgba(255, 115, 0, 0.767)}
 34 | 
 35 |     .buttonBlue 
 36 |     {
 37 |         background-color:rgb(0, 0, 255);
 38 |         border: none;
 39 |         color: white;
 40 |         padding: 8px 18px;
 41 |         text-align: center;
 42 |         text-decoration: none;
 43 |         display: inline-block;
 44 |         font-size: 16px;
 45 |         font-weight: bold;
 46 |         margin: 4px 2px;
 47 |         cursor: pointer;
 48 |         border-radius: 5px;
 49 |     }
 50 |     .buttonBlue:hover {
 51 |          background-color: rgba(38, 0, 255, 0.623)}
 52 |     
 53 |     { /* might create issues the brackets */
 54 |         .buttonBlue {background-color: #008CBA;} /* Blue */
 55 |         .buttonRed {background-color: #f44336;} /* Red */ 
 56 |         .buttonGray {background-color: #e7e7e7; color: black;} /* Gray */ 
 57 |         .buttonBlack {background-color: #555555;} /* Black */
 58 |     }
 59 |         /* Create four equal columns that floats next to each other */
 60 | 
 61 |         *  
 62 |             {
 63 |                 box-sizing: border-box;
 64 |             }
 65 | 
 66 |         /* Create four equal columns that floats next to each other */
 67 |         .column25 {
 68 |         float: left;
 69 |         font-weight: bold;
 70 |         width: 15%;
 71 |         padding: 10px;
 72 |         }
 73 | 
 74 |         /* Clear floats after the columns */
 75 |         .row:after {
 76 |         content: "";
 77 |         display: table;
 78 |         clear: both;
 79 |             
 80 |         }
 81 | 
 82 |         /* Create two equal columns that floats next to each other */
 83 |         .column50 {
 84 |         float: left;
 85 |         width: 50%;
 86 |         padding: 10px;
 87 |         }
 88 | 
 89 |         /* Clear floats after the columns  50*/
 90 |         .row:after {
 91 |         content: "";
 92 |         display: table;
 93 |         clear: both;
 94 |         }
 95 |         /* Create columns 67% that floats next to each other */
 96 |         .column67 {
 97 |         float: left;
 98 |         width: 67%;
 99 |         padding: 10px;
100 |         }
101 | 
102 |         /* Clear floats after the columns   67*/
103 |         .row:after {
104 |         content: "";
105 |         display: table;
106 |         clear: both;
107 |         }
108 | 
109 |         /* Create columns 33% that floats next to each other */
110 |         .column33 {
111 |         float: left;
112 |         width: 33%;
113 |         padding: 10px;
114 |         }
115 | 
116 |         /* Clear floats after the columns  33*/
117 |         .row:after {
118 |         content: "";
119 |         display: table;
120 |         clear: both;
121 |         }
122 |         /* Create columns 40% that floats next to each other */
123 |         .column40 {
124 |         float: left;
125 |         width: 40%;
126 |         padding: 10px;
127 |         }
128 | 
129 |         /* Clear floats after the columns  40*/
130 |         .row:after {
131 |         content: "";
132 |         display: table;
133 |         clear: both;
134 |         }
135 |         /* Create columns 60% that floats next to each other */
136 |         .column60 {
137 |         float: left;
138 |         width: 60%;
139 |         padding: 10px;
140 |         }
141 | 
142 |         /* Clear floats after the columns  60*/
143 |         .row:after {
144 |         content: "";
145 |         display: table;
146 |         clear: both;
147 |         }
148 |         /* Create columns 100% that floats next to each other */
149 |         .column100 {
150 |         float: left;
151 |         width: 100%;
152 |         padding: 10px;
153 |         }
154 | 
155 |         /* Clear floats after the columns  100*/
156 |         .row:after {
157 |         content: "";
158 |         display: table;
159 |         clear: both;
160 |         }
161 |         /* Create columns 75% that floats next to each other  */
162 |         .column75 {
163 |         float: left;
164 |         width: 85%;
165 |         padding: 10px;
166 |         }
167 | 
168 |         /* Clear floats after the columns   75*/
169 |         .row:after {
170 |         content: "";
171 |         display: table;
172 |         clear: both;
173 |         }
174 |    
175 | .type {
176 |     text-align: center;
177 |     color: #756bea;
178 |     font-size:29px;
179 | }
180 |     
181 |     p{
182 |         max-width: 200px;
183 |     }
184 |     
185 |     #column1{
186 |         background: #bfbfbf;
187 |         display: inline-block;
188 |         width: 76%;
189 |         float: left;
190 |     }
191 |     #column2{
192 |         background: #bfbfbf;
193 |         float: left;
194 |         width: 24%;
195 |     }
196 |   
197 |     #background{
198 |         border: 4px solid #5a5a5a;
199 |         background: #bfbfbf;
200 |         width: 530px;
201 |         
202 |         height: 408px;
203 |         display: inline-block;
204 |         border-radius: 65px;
205 |     }
206 |     #parent{
207 |         text-align: center;
208 |     }
209 |     
210 |     #signin{
211 |         background: #83d8ff;
212 |         width: 62%;
213 |         margin-left: 35px;
214 |         margin-top: 40px;
215 |         box-shadow: 0px 0px 0px 3px #5a5a5a inset;
216 |     }
217 |     #forgot{
218 |         display: table;
219 |         margin-left: 170px;
220 |         margin-top: -50px;
221 |         font-size: 18px;
222 |         color: darkgreen;
223 |         padding-bottom: 10px;
224 |     }
225 |     .userImage{
226 |         width:50px;
227 |         margin-top: 15px;
228 |         border: 2px solid #5a5a5a;
229 |         background: #9f9f9f;
230 |         align-content: center;
231 |         border-radius: 7px;
232 |         margin-left: -80px;
233 |         text-align: center;
234 |         display: inline-block;
235 |     }
236 |     .input{
237 |         width: 120px;
238 |         display: inline-block;
239 |         margin-left: 10px;
240 |         height: 50px;
241 |     }
242 |     textarea{
243 |         border: 2px solid #5a5a5a;
244 |         resize: none;
245 |         padding-left: 5px;
246 |         font-size: 16px;
247 |     }
248 |     #login{
249 |         width: 70px;
250 |         height: 50px;
251 |         color: #fff;
252 |         margin-left: 60px;
253 |         font-size: 20px;
254 |         background: #179033;
255 |         border: 2px solid #5a5a5a;
256 |         display: inline-block;
257 |         border-radius: 7px;
258 |     }
259 |     #container{
260 |         width: 100%;
261 |     }
262 |     #google{
263 |         margin-left: 5px;
264 |         height: 50px;
265 |         color: #fff;
266 |         font-size: 20px;
267 |         padding-left: 10px;
268 |         padding-right: 10px;
269 |         background: #3096eb;
270 |         border: 2px solid #5a5a5a;
271 |         display: inline-block;
272 |         border-radius: 7px;
273 |     }
274 |     #remember{
275 |         margin-left: -230px;
276 |         width: 17px;
277 |         height: 17px; 
278 |     }
279 |     #newUser{
280 |         margin-left: -42px;
281 |         color: #000;
282 |         margin-top: 40px;
283 |         font-size: 20px;
284 |     }
285 |     #reg{
286 |         margin-left: -45px;
287 |         color: #1660d6;
288 |         margin-top: -10px;
289 |         font-size: 21px;
290 |     }
291 |     .buttons{
292 |         margin-top: 30px;
293 |     }
294 | }
295 | 
296 | </style>
297 |         
298 | <title>Login</title> 
299 | </head>
300 | 
301 | <body>
302 |     
303 |         <div id="1">
304 |                 <table align="center" border="0" cellpadding="0" cellspacing="0" style="background-image: linear-gradient(to bottom right, #aacbff , #1872ff); width: 600px;">
305 |                         <tr>
306 |                             <td style="margin-left:5px">
307 |                                     <h2 style="font-family: cursive;">Website Name</h2>
308 |                             </td>
309 |                             <td>
310 |                                 <h1 style="margin-left: -10px; color: #06349b;font-family: sans-serif"><u>Login Page</u></h1>
311 |                             </td>
312 |                             
313 |                         </tr>
314 |                         <tr>
315 |                                 <td>
316 |                                         <p style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;border-radius: 5px ;color: #073396; line-height: 15px;  font-size: 17 px; margin-left: 5px;"  > <i>Logo</i></p>
317 |                                 </td>
318 |                                 <td>  
319 |                                         <h1></h1>
320 |                                 </td>
321 |                                 
322 |                             </tr>
323 |                     </table>
324 |     
325 | 
326 |         </div>
327 |             <div id="parent">
328 |     <div id="background">
329 |         <div id="signin">
330 |             <h2 style="font-size: 29px; text-align: left; padding-left: 15px; padding-top: 10px; display: table;
331 |  padding-bottom: 7px;">Sign In</h2>
332 |             <p id="forgot"><u><b>Forgot password?</b></u></p>
333 |         
334 |         </div>
335 |         <div id="container">
336 |         
337 |             <div id="column1" width = "80%">
338 |                 <div class = "userImage">
339 |                     <img width="90%" height="90%" src="user.png" alt="Username icon"/>
340 |                 </div>
341 |                 <div class = "input">
342 |                     <textarea placeholder="Username" width="100%"></textarea>
343 |                 </div>
344 | 
345 | 
346 |                 <br>
347 | 
348 |                 <div class = "userImage">
349 |                     <img width="90%" height="80%" src="password.png" alt="Username icon"/>
350 |                 </div>
351 |                 <div class = "input">
352 |                     <textarea placeholder="Password" width="100%"></textarea>
353 |                 </div>
354 |             
355 |             </div>
356 |             <div id="column2" width = "20%">
357 |                 <p id="newUser"><b>New User?      </b></p>
358 |                 <a href="http://127.0.0.1:55909/Registration.html"><p id="reg"><b><u>Register Now</u></b></p></a>
359 |             </div>
360 |         
361 |         </div>
362 |         
363 |         
364 |         <button class="buttons" id="login">Login</button>
365 |         <button class="buttons" id="google">Login with Google</button>
366 |     
367 |         <br>
368 |         <input id="remember"  type="checkbox"> 
369 |         <p style="font-size: 20px; color: black; display:inline-block;">Remember me</p>
370 |     </div>
371 |                 </div>
372 |     
373 | 
374 | </body>
375 | </html>
376 | 


--------------------------------------------------------------------------------
/Registration Page.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en-US">
  3 |         <!--Initial Web-page design attempt-->
  4 |         
  5 | <head>
  6 | <style>
  7 |     
  8 |     h1   {color: blue;font-size: 48;}
  9 |     p    {color: red;}
 10 |     div  { background-color: whitesmoke}
 11 |    
 12 |     .row{
 13 |         font-size: 21px;
 14 |     }
 15 |     
 16 |     .buttonRed 
 17 |     {
 18 |         background-color: red; /* Red*/
 19 |         border: none;
 20 |         color: white;
 21 |         padding: 8px 18px;
 22 |         text-align: center;
 23 |         text-decoration: none;
 24 |         display: inline-block;
 25 |         font-size: 16px;
 26 |         font-weight: bold;
 27 |         margin: 4px 2px;
 28 |         cursor: pointer;
 29 |         border-radius: 5px;
 30 |     }
 31 |     
 32 |     .buttonRed:hover {
 33 |          background-color: rgba(255, 115, 0, 0.767)}
 34 | 
 35 |     .buttonBlue 
 36 |     {
 37 |         background-color:rgb(0, 0, 255);
 38 |         border: none;
 39 |         color: white;
 40 |         padding: 8px 18px;
 41 |         text-align: center;
 42 |         text-decoration: none;
 43 |         display: inline-block;
 44 |         font-size: 16px;
 45 |         font-weight: bold;
 46 |         margin: 4px 2px;
 47 |         cursor: pointer;
 48 |         border-radius: 5px;
 49 |     }
 50 |     .buttonBlue:hover {
 51 |          background-color: rgba(38, 0, 255, 0.623)}
 52 |     
 53 |     { /* might create issues the brackets */
 54 |         .buttonBlue {background-color: #008CBA;} /* Blue */
 55 |         .buttonRed {background-color: #f44336;} /* Red */ 
 56 |         .buttonGray {background-color: #e7e7e7; color: black;} /* Gray */ 
 57 |         .buttonBlack {background-color: #555555;} /* Black */
 58 |     }
 59 |         /* Create four equal columns that floats next to each other */
 60 | 
 61 |         *  
 62 |             {
 63 |                 box-sizing: border-box;
 64 |             }
 65 | 
 66 |         /* Create four equal columns that floats next to each other */
 67 |         .column25 {
 68 |         float: left;
 69 |         font-weight: bold;
 70 |         width: 15%;
 71 |         padding: 10px;
 72 |         }
 73 |     
 74 | 
 75 |         /* Create two equal columns that floats next to each other */
 76 |         .column50 {
 77 |         float: left;
 78 |         width: 50%;
 79 |         padding: 10px;
 80 |         }
 81 | 
 82 |         /* Clear floats after the columns  50*/
 83 |         .row:after {
 84 |         content: "";
 85 |         display: table;
 86 |         clear: both;
 87 |         }
 88 |         /* Create columns 67% that floats next to each other */
 89 |         .column67 {
 90 |         float: left;
 91 |         width: 67%;
 92 |         padding: 10px;
 93 |         }
 94 | 
 95 |         /* Clear floats after the columns   67*/
 96 |         .row:after {
 97 |         content: "";
 98 |         display: table;
 99 |         clear: both;
100 |         }
101 | 
102 |         /* Create columns 33% that floats next to each other */
103 |         .column33 {
104 |         float: left;
105 |         width: 33%;
106 |         padding: 10px;
107 |         }
108 | 
109 |         /* Clear floats after the columns  33*/
110 |         .row:after {
111 |         content: "";
112 |         display: table;
113 |         clear: both;
114 |         }
115 |         /* Create columns 40% that floats next to each other */
116 |         .column40 {
117 |         float: left;
118 |         width: 40%;
119 |         padding: 10px;
120 |         }
121 | 
122 |         /* Clear floats after the columns  40*/
123 |         .row:after {
124 |         content: "";
125 |         display: table;
126 |         clear: both;
127 |         }
128 |         /* Create columns 60% that floats next to each other */
129 |         .column60 {
130 |         float: left;
131 |         width: 60%;
132 |         padding: 10px;
133 |         }
134 | 
135 |         /* Clear floats after the columns  60*/
136 |         .row:after {
137 |         content: "";
138 |         display: table;
139 |         clear: both;
140 |         }
141 |         /* Create columns 100% that floats next to each other */
142 |         .column100 {
143 |         float: left;
144 |         width: 100%;
145 |         padding: 10px;
146 |         }
147 | 
148 |         /* Clear floats after the columns  100*/
149 |         .row:after {
150 |         content: "";
151 |         display: table;
152 |         clear: both;
153 |         }
154 |         /* Create columns 75% that floats next to each other  */
155 |         .column75 {
156 |         float: left;
157 |         width: 85%;
158 |         padding: 10px;
159 |         }
160 | 
161 |         /* Clear floats after the columns   75*/
162 |         .row:after {
163 |         content: "";
164 |         display: table;
165 |         clear: both;
166 |         }
167 |    
168 | .type {
169 |     text-align: center;
170 |     color: #756bea;
171 |     font-size:29px;
172 | }
173 |     
174 |     p{
175 |         max-width: 500px;
176 |     }
177 |     
178 |     #column1{
179 |         background: #bfbfbf;
180 |         display: inline-block;
181 |         width: 76%;
182 |         float: left;
183 |     }
184 |     #column2{
185 |         background: #bfbfbf;
186 |         float: left;
187 |         width: 24%;
188 |     }
189 |   
190 |     #background{
191 |         border: 4px solid #5a5a5a;
192 |         background: #d8d8d8;
193 |         width: 730px;
194 |         
195 |         height: 740px;
196 |         display: inline-block;
197 |         border-radius: 65px;
198 |     }
199 |     #parent{
200 |         text-align: center;
201 |     }
202 |     
203 |     #signin{
204 |         background: #83d8ff;
205 |         margin-left: 210px;
206 |         margin-top: 25px;
207 |         width: 308px;
208 |         text-align: center;
209 |         align-content: center;
210 |         box-shadow: 0px 0px 0px 3px #5a5a5a inset;
211 |     }
212 |     #forgot{
213 |         display: table;
214 |         margin-left: 170px;
215 |         margin-top: -50px;
216 |         font-size: 18px;
217 |         color: darkgreen;
218 |         padding-bottom: 10px;
219 |     }
220 |     .userImage{
221 |         width:50px;
222 |         margin-top: 15px;
223 |         border: 2px solid #5a5a5a;
224 |         background: #9f9f9f;
225 |         align-content: center;
226 |         border-radius: 7px;
227 |         margin-left: -80px;
228 |         text-align: center;
229 |         display: inline-block;
230 |     }
231 |     .input{
232 |         width: 90px;
233 |         display: inline-block;
234 |         margin-left: 10px;
235 |         height: 50px;
236 |     }
237 |     textarea{
238 |         border: 2px solid #5a5a5a;
239 |         resize: none;
240 |         padding-left: 5px;
241 |         padding-top: 6px;
242 |         padding-bottom: 6px;
243 |         text-align: center;
244 |         font-size: 16px;
245 |     }
246 |     #regi{
247 |         width: 180px;
248 |         height: 50px;
249 |         color: #fff;
250 |         margin-left: 60px;
251 |         font-size: 22px;
252 |         background: #3096eb;
253 |         border: 2px solid #5a5a5a;
254 |         display: inline-block;
255 |         border-radius: 7px;
256 |     }
257 |     #container{
258 |         width: 100%;
259 |         background: #d8d8d8;
260 |         display: inline-block;
261 |     }
262 |     #back{
263 |         margin-left: 5px;
264 |         height: 50px;
265 |         color: #fff;
266 |         width: 180px;
267 |         font-size: 22px;
268 |         padding-left: 0px;
269 |         padding-right: 0px;
270 |         background: #ea3939;
271 |         border: 2px solid #5a5a5a;
272 |         display: inline-block;
273 |         border-radius: 7px;
274 |     }
275 |     #remember{
276 |         margin-left: -230px;
277 |         width: 17px;
278 |         height: 17px; 
279 |     }
280 |     #newUser{
281 |         margin-left: -42px;
282 |         color: #000;
283 |         margin-top: 40px;
284 |         font-size: 20px;
285 |     }
286 |     #reg{
287 |         margin-left: -45px;
288 |         color: #1660d6;
289 |         margin-top: -10px;
290 |         font-size: 21px;
291 |     }
292 |     .buttons{
293 |         margin-top: 30px;
294 |     }
295 |     #row1{
296 |         text-align: center;
297 |         float: left;
298 |     }
299 |    
300 |     .center{
301 |         text-align: center;
302 |     }
303 |     p{
304 |         color: black;
305 |         font-size: 18px;
306 |     }
307 |     .column{
308 |         float:left;
309 |         background: #d8d8d8;
310 |         width:50%;
311 |     }
312 |         /* Clear floats after the columns */
313 |     .row:after {
314 |         content: "";
315 |         display: table;
316 |         background: #d8d8d8;
317 |         clear: both;
318 |     }
319 | }    
320 | 
321 | </style>
322 |         
323 | <title>Register</title> 
324 | </head>
325 | 
326 | <body>
327 |     
328 |         <div id="1">
329 |                 <table align="center" border="0" cellpadding="0" cellspacing="0" style="background-color: #aacbff; width: 730px;">
330 |                         <tr>
331 |                             <td style="margin-left:5px">
332 |                                     <h2> Website Name</h2>
333 |                             </td>
334 |                             <td>
335 |                                     <h1>Registration Page</h1>
336 |                             </td>
337 |                             <td style="margin-top: 4px";>
338 |                                     <form action="/exit_icon.php">
339 |                                        <img style="margin-top: 10px; margin-left: 20px"  src="ExitGlyph_a2.png" alt="Exit!">
340 |                                       </form> 
341 |                             </td>
342 |                         </tr>
343 |                         <tr>
344 |                                 <td>
345 |                                         <p style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;border-radius: 5px ;color: rgb(102, 102, 102); line-height: 15px;  font-size: 16 px; margin-left: 5px;"  > <i> Slogan</i></p>
346 |                                 </td>
347 |                                 <td>  
348 |                                         <h1></h1>
349 |                                 </td>
350 |                                 
351 |                             </tr>
352 |                     </table>
353 |     
354 | 
355 |         </div>
356 |     <div id="parent">
357 |         <div id="background">
358 |             <div id="signin">
359 |                 <h2 style="font-size: 29px; text-align: center; padding-left: 15px; padding-top: 10px; display: table;
360 |      padding-bottom: 7px;">Create a New Account</h2>
361 | 
362 |             </div>
363 |             <div class = "center">
364 |                 <div id="container">
365 |                     <p style="width: 190px;display:inline-block; margin-left: 15px; ">First Name</p>
366 |                     <p style="width: 195px;display:inline-block; margin-left: 40px;">Last Name</p>
367 |                     <p style="width: 195px; margin-left: 10px; display:inline-block;">M.I.</p>
368 |                     <textarea rows="1" style="padding-top: -10px; display:inline-block; margin-left: 10px;"></textarea>
369 |                     <textarea rows="1" style="padding-top: -10px;display:inline-block; margin-left: 30px;"></textarea>
370 |                     <textarea rows="1" maxlength="1" style="width: 45px; margin-left: 30px; display:inline-block;"></textarea>
371 |                     <br>
372 |                     <p style="width: 190px;display:inline-block; margin-left: 10px; ">Email ID</p>
373 |                     <p style="width: 195px;display:inline-block; margin-left: 40px;">Password</p>
374 |                     <p style="width: 195px; margin-left: 10px; display:inline-block;"></p>
375 |                     <textarea rows="1" style="padding-top: -10px; display:inline-block; margin-left: 10px;"></textarea>
376 |                     <textarea rows="1" style="padding-top: -10px;display:inline-block; margin-left: 30px;"></textarea>
377 |                     <p style="padding-top: -10px;width: 45px; margin-left: 30px; display:inline-block;"></p>
378 |                     <br>
379 |                     <p style="width: 190px;display:inline-block; margin-left: 62px; ">Phone Number</p>
380 |                     <p style="width: 195px;display:inline-block; margin-left: 50px;">Confirm Password</p>
381 |                     <p style="width: 195px; margin-left: 10px; display:inline-block;"></p>
382 |                     <textarea rows="1" style="padding-top: -10px; display:inline-block; margin-left: 10px;"></textarea>
383 |                     <textarea rows="1" style="padding-top: -10px;display:inline-block; margin-left: 30px;"></textarea>
384 |                     <p style="padding-top: -10px;width: 45px; margin-left: 30px; display:inline-block;"></p>
385 |                     <br>
386 |                     <br>
387 |                 
388 |                 </div>
389 |             </div>
390 |             <div class="center" id ="questions">
391 |                 <div style="display: inline-block;background: #d8d8d8; width:100%"><h2>Challenge Questions</h2></div>
392 |                 <div class="row">
393 |                     <div class = "column">
394 |                         <p style="margin-top: 5px;">What is your mother's maiden name?</p>
395 |                     </div>
396 |                     
397 |                     <div class = "column">
398 |                         <textarea rows="1" style="width: 300px;"></textarea>
399 |                     </div>
400 |                 
401 |                 </div>
402 |                 <div class="row">
403 |                     <div class = "column">
404 |                         <p style="margin-top: 5px;">What make is your first car?</p>
405 |                     </div>
406 |                     
407 |                     <div class = "column">
408 |                         <textarea rows="1" style="width: 120px; display: inline-block"></textarea>
409 |                         <textarea rows="1" style="width: 160px; display: inline-block; margin-left: 20px;"></textarea>
410 |                     </div>
411 |                 
412 |                 </div>
413 |                 <div class="row">
414 |                     <div class = "column">
415 |                         <p style="margin-top: 5px;">What is your birthday (month and year)?</p>
416 |                     </div>
417 |                     
418 |                     <div class = "column">
419 |                         <textarea rows="1" style="width: 120px; display: inline-block"></textarea>
420 |                         <textarea rows="1" style="width: 60px; display: inline-block; margin-left: 20px;"></textarea>
421 |                         <textarea rows="1" style="width: 80px; display: inline-block; margin-left: 20px;"></textarea>
422 |                     </div>
423 |                 
424 |                 </div>
425 |                 
426 |             </div>
427 |             
428 |             <div>
429 |                 
430 |                 <div class = "column">
431 |                     <a href="http://127.0.0.1:55909/Login%20Page.html"><button class="buttons" id="regi">Register Me</button></a>
432 |                 </div>
433 |                 <div class = "column">
434 |                     <a href="http://127.0.0.1:55909/Login%20Page.html"><button class="buttons" id="back">Back to Login</button> </a>
435 |                 </div>
436 |                            
437 |             </div>
438 |             
439 |         </div>
440 |     </div>
441 |     
442 | 
443 | </body>
444 | </html>
445 | 


--------------------------------------------------------------------------------
/Login Page 2.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en-US">
  3 |         <!--Initial Web-page design attempt-->
  4 | 
  5 | 
  6 | <head>
  7 |     <style>
  8 |         @import url(https://fonts.googleapis.com/css?family=Sofia);
  9 |         @import url(https://fonts.googleapis.com/css?family=Raleway);
 10 |         @import url(https://fonts.googleapis.com/css?family=Comfortaa);
 11 |         @import url(https://fonts.googleapis.com/css?family=Nunito);
 12 | 
 13 |         h1 {
 14 |             color: blue;
 15 |             font-size: 48;
 16 |         }
 17 | 
 18 |         p {
 19 |             color: red;
 20 |         }
 21 | 
 22 |         div {
 23 |             background-color: whitesmoke
 24 |         }
 25 | 
 26 |         .row {
 27 |             font-size: 21px;
 28 |         }
 29 | 
 30 |         .buttonRed {
 31 |             background-color: red;
 32 |             /* Red*/
 33 |             border: none;
 34 |             color: white;
 35 |             padding: 8px 18px;
 36 |             text-align: center;
 37 |             text-decoration: none;
 38 |             display: inline-block;
 39 |             font-size: 16px;
 40 |             font-weight: bold;
 41 |             margin: 4px 2px;
 42 |             cursor: pointer;
 43 |             border-radius: 5px;
 44 |         }
 45 | 
 46 |         .buttonRed:hover {
 47 |             background-color: rgba(255, 115, 0, 0.767)
 48 |         }
 49 | 
 50 |         .buttonBlue {
 51 |             background-color: rgb(0, 0, 255);
 52 |             border: none;
 53 |             color: white;
 54 |             padding: 8px 18px;
 55 |             text-align: center;
 56 |             text-decoration: none;
 57 |             display: inline-block;
 58 |             font-size: 16px;
 59 |             font-weight: bold;
 60 |             margin: 4px 2px;
 61 |             cursor: pointer;
 62 |             border-radius: 5px;
 63 |         }
 64 | 
 65 |         .buttonBlue:hover {
 66 |             background-color: rgba(38, 0, 255, 0.623)
 67 |         }
 68 | 
 69 |             {
 70 | 
 71 |             /* might create issues the brackets */
 72 |             .buttonBlue {
 73 |                 background-color: #008CBA;
 74 |             }
 75 | 
 76 |             /* Blue */
 77 |             .buttonRed {
 78 |                 background-color: #f44336;
 79 |             }
 80 | 
 81 |             /* Red */
 82 |             .buttonGray {
 83 |                 background-color: #e7e7e7;
 84 |                 color: black;
 85 |             }
 86 | 
 87 |             /* Gray */
 88 |             .buttonBlack {
 89 |                 background-color: #555555;
 90 |             }
 91 | 
 92 |             /* Black */
 93 |         }
 94 | 
 95 |         /* Create four equal columns that floats next to each other */
 96 | 
 97 |         * {
 98 |             box-sizing: border-box;
 99 |         }
100 | 
101 |         /* Create four equal columns that floats next to each other */
102 |         .column25 {
103 |             float: left;
104 |             font-weight: bold;
105 |             width: 15%;
106 |             padding: 10px;
107 |         }
108 | 
109 |         /* Clear floats after the columns */
110 |         .row:after {
111 |             content: "";
112 |             display: table;
113 |             clear: both;
114 | 
115 |         }
116 | 
117 |         /* Create two equal columns that floats next to each other */
118 |         .column50 {
119 |             float: left;
120 |             width: 50%;
121 |             padding: 10px;
122 |         }
123 | 
124 |         /* Clear floats after the columns  50*/
125 |         .row:after {
126 |             content: "";
127 |             display: table;
128 |             clear: both;
129 |         }
130 | 
131 |         /* Create columns 67% that floats next to each other */
132 |         .column67 {
133 |             float: left;
134 |             width: 67%;
135 |             padding: 10px;
136 |         }
137 | 
138 |         /* Clear floats after the columns   67*/
139 |         .row:after {
140 |             content: "";
141 |             display: table;
142 |             clear: both;
143 |         }
144 | 
145 |         /* Create columns 33% that floats next to each other */
146 |         .column33 {
147 |             float: left;
148 |             width: 33%;
149 |             padding: 10px;
150 |         }
151 | 
152 |         /* Clear floats after the columns  33*/
153 |         .row:after {
154 |             content: "";
155 |             display: table;
156 |             clear: both;
157 |         }
158 | 
159 |         /* Create columns 40% that floats next to each other */
160 |         .column40 {
161 |             float: left;
162 |             width: 40%;
163 |             padding: 10px;
164 |         }
165 | 
166 |         /* Clear floats after the columns  40*/
167 |         .row:after {
168 |             content: "";
169 |             display: table;
170 |             clear: both;
171 |         }
172 | 
173 |         /* Create columns 60% that floats next to each other */
174 |         .column60 {
175 |             float: left;
176 |             width: 60%;
177 |             padding: 10px;
178 |         }
179 | 
180 |         /* Clear floats after the columns  60*/
181 |         .row:after {
182 |             content: "";
183 |             display: table;
184 |             clear: both;
185 |         }
186 | 
187 |         /* Create columns 100% that floats next to each other */
188 |         .column100 {
189 |             float: left;
190 |             width: 100%;
191 |             padding: 10px;
192 |         }
193 | 
194 |         /* Clear floats after the columns  100*/
195 |         .row:after {
196 |             content: "";
197 |             display: table;
198 |             clear: both;
199 |         }
200 | 
201 |         /* Create columns 75% that floats next to each other  */
202 |         .column75 {
203 |             float: left;
204 |             width: 85%;
205 |             padding: 10px;
206 |         }
207 | 
208 |         /* Clear floats after the columns   75*/
209 |         .row:after {
210 |             content: "";
211 |             display: table;
212 |             clear: both;
213 |         }
214 | 
215 |         .type {
216 |             text-align: center;
217 |             color: #756bea;
218 |             font-size: 29px;
219 |         }
220 | 
221 | 
222 | 
223 |         #column1 {
224 |             background: #bfbfbf;
225 |             display: inline-block;
226 |             width: 76%;
227 |             float: left;
228 |         }
229 | 
230 |         #column2 {
231 |             background: #bfbfbf;
232 |             float: left;
233 |             width: 24%;
234 |         }
235 | 
236 |         #background {
237 |             border: 4px solid #5a5a5a;
238 |             background: #bfbfbf;
239 |             width: 530px;
240 | 
241 |             height: 408px;
242 |             display: inline-block;
243 |             border-radius: 65px;
244 |         }
245 | 
246 |         #parent {
247 |             /*text-align: center;*/
248 |         }
249 | 
250 |         #signin {
251 |             background: #83d8ff;
252 |             width: 62%;
253 |             margin-left: 35px;
254 |             margin-top: 40px;
255 |             box-shadow: 0px 0px 0px 3px #5a5a5a inset;
256 |         }
257 | 
258 |         #forgot {
259 |             display: table;
260 |             margin-left: 170px;
261 |             margin-top: -50px;
262 |             font-size: 18px;
263 |             color: darkgreen;
264 |             padding-bottom: 10px;
265 |         }
266 | 
267 |         .userImage {
268 |             width: 50px;
269 |             margin-top: 15px;
270 |             border: 2px solid #5a5a5a;
271 |             background: #9f9f9f;
272 |             align-content: center;
273 |             border-radius: 7px;
274 |             margin-left: -80px;
275 |             text-align: center;
276 |             display: inline-block;
277 |         }
278 | 
279 |         .input {
280 |             width: 120px;
281 |             display: inline-block;
282 |             margin-left: 10px;
283 |             height: 50px;
284 |         }
285 | 
286 |         textarea {
287 |             border: 2px solid #5a5a5a;
288 |             resize: none;
289 |             padding-left: 5px;
290 |             font-size: 16px;
291 |             white-space: nowrap;
292 |             overflow: hidden;
293 |         }
294 | 
295 |         #login {
296 |             width: 70px;
297 |             height: 50px;
298 |             color: #fff;
299 |             margin-left: 60px;
300 |             font-size: 20px;
301 |             background: #179033;
302 |             border: 2px solid #5a5a5a;
303 |             display: inline-block;
304 |             border-radius: 7px;
305 |         }
306 | 
307 |         #container {
308 |             width: 100%;
309 |         }
310 | 
311 |         #google {
312 |             margin-left: 5px;
313 |             height: 50px;
314 |             color: #fff;
315 |             font-size: 20px;
316 |             padding-left: 10px;
317 |             padding-right: 10px;
318 |             background: #3096eb;
319 |             border: 2px solid #5a5a5a;
320 |             display: inline-block;
321 |             border-radius: 7px;
322 |         }
323 | 
324 |         #remember {
325 |             margin-left: 0px;
326 |             width: 17px;
327 |             height: 17px;
328 |         }
329 | 
330 |         input[type=checkbox] {
331 |             background-color: #a772ed;
332 |             background: #a7723d;
333 |             color: #ffffff;
334 |         }
335 | 
336 |         #newUser {
337 |             margin-left: -42px;
338 |             color: #000;
339 |             margin-top: 40px;
340 |             font-size: 20px;
341 |         }
342 | 
343 |         #reg {
344 |             margin-left: -45px;
345 |             color: #1660d6;
346 |             margin-top: -10px;
347 |             font-size: 21px;
348 |         }
349 | 
350 |         .buttons {
351 |             margin-top: 30px;
352 |         }
353 |         }
354 |     </style>
355 | 
356 |     <title>Login</title>
357 | </head>
358 | 
359 | <body>
360 | 
361 |     <div id="1">
362 |         <table align="center" border="0" cellpadding="0" cellspacing="0" style="background-image: linear-gradient(to bottom right, #aacbff , #1872ff);width:100%;">
363 |             <tr>
364 |                 <td style="margin-left:5px">
365 |                     <h2 style="font-family: cursive; margin-left: 25px;">Website Name</h2>
366 |                 </td>
367 |                 <td>
368 |                     <h1 style="margin-left: 10px; color: #06349b;font-family: sans-serif"><u>Login Page</u></h1>
369 |                 </td>
370 |                 <td style="margin-top: 4px" ;>
371 |                     <form action="/exit_icon.php">
372 |                         <img style="margin-top: 10px; margin-left: 90px">
373 |                     </form>
374 |                 </td>
375 |             </tr>
376 |             <tr>
377 |                 <td>
378 |                     <p style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;border-radius: 5px ;color: #073396; line-height: 15px;  font-size: 17 px; margin-left: 25px;"> <i> </i></p>
379 |                 </td>
380 |                 <td>
381 |                     <h1></h1>
382 |                 </td>
383 | 
384 |             </tr>
385 |         </table>
386 | 
387 | 
388 |     </div>
389 | 
390 |     <div id="parent">
391 |         <div id="left" style="float: left; width: 45.5%; height: 100%; background-image: url(background.jpg);color: ghostwhite; background-repeat: no-repeat; background-size: cover;">
392 |             <br><br><br><br><br><br><br>
393 |             <div style="width: 80%; float: left; background-color: transparent;">
394 |                 <div style="float:right; width:100%;text-align: right;background-color: transparent;">
395 |                     <h1 style="color: white; font-family:raleway;"><u>Hello there!</u></h1>
396 |                     <p style="color: #c8e4ff; font-size: 20px;font-family:raleway; margin-left: 140px;">"Welcome to the &lt;name of website&gt; site for ..."</p>
397 |                     <button style="background-color: #1862a2; border: 3px solid #fff; margin-right: 10px; color:azure;  font-size: 24px; padding-top: 6px; font-family: raleway; padding-bottom: 6px;padding-left: 40px;padding-right: 40px;">Sign Up</button>
398 |                 </div>
399 | 
400 |             </div>
401 |             <div style="width: 20%;background-color: transparent;">
402 |                 &nbsp;
403 |             </div>
404 |             <br><br><br><br><br><br><br><br><br><br>
405 | 
406 |         </div>
407 | 
408 |         <div id="right" style="float: left;width: 54.5%;background-color: #dfeaff;">
409 | 
410 |             <div style="background-color: transparent;width:80%; margin:auto;">
411 |                 <p style="background-color: transparent;color:#3688f8;font-size:30px;font-family: comfortaa;width:80%;line-height: 50px;"><b>I already have an account</b></p>
412 |                 <p style="margin-top: -20px;color:#727272;font-size: 19px; font-family: nunito;">Log in with your username and password below.</p>
413 | 
414 |                 <div style="border: 3px solid #6482b2; background: #c7e5ff;">
415 | 
416 |                     <div style="float: left; width: 14%;background-color: transparent;">
417 |                         <img width="71px;" height="71px;" src="user.png" alt="Username icon" style="margin-left: 5px; margin-top: 3px;" />
418 |                     </div>
419 |                     <div style="width:86%; background-color: transparent;">
420 |                         <p style="color: #21365d; margin-left: 88px; margin-top: 8px;font-size: 20px; font-family: raleway;"><b><u>Username</u></b></p>
421 |                         <textarea rows="1" columns="50" placeholder="Your username here" style=" margin-top: -16px; padding-top: 7px; background: #ffffff; font-family: raleway; padding-bottom: 7px; margin-left: 7px; width:400px;border 0px solid #fff; "></textarea>
422 |                     </div>
423 | 
424 |                 </div>
425 |                 <div style="margin-top: -8px; border-bottom: 3px solid #6482b2; border-right: 3px solid #6482b2; border-left: 3px solid #6482b2;background: #c7e5ff;">
426 | 
427 |                     <div style="float: left; width: 14%;background-color: transparent;">
428 |                         <img width="71px;" height="70px;" src="password.png" alt="Username icon" style="margin-left: 7px; margin-top: 1px;padding-top: 2px;" />
429 |                     </div>
430 |                     <div style="width:86%; background-color: transparent;">
431 |                         <p style="padding-top: 6px; color: #21365d; margin-left: 88px; margin-top: 8px;font-size: 20px; font-family: raleway;"><b><u>Password</u></b></p>
432 |                         <textarea rows="1" columns="50" placeholder="Your password here" style=" margin-top: -16px; padding-top: 7px; font-family: raleway;background: #ffffff; padding-bottom: 7px; margin-left: 7px; width:400px;border 0px solid #fff; "></textarea>
433 |                     </div>
434 | 
435 |                 </div>
436 | 
437 | 
438 |                 <input id="remember" type="checkbox">
439 |                 <p style="font-size: 21px; color: black; display:inline-block; margin-left: 4px; font-family: nunito">Remember me</p>
440 |                 <p style="display: inline-block; float:right;font-size: 21px; color:#3471f8; font-family: nunito; margin-right: 11px;"><u><i>Forgot your password?</i></u></p>
441 | 
442 |                 <br>
443 |                 <button style="background-image:linear-gradient(to bottom right, #c4d3fd, #5293cb); border: 3px solid #4a91ce; margin-right: 10px; color:azure;  font-size: 25px; padding-top: 6px; font-family: raleway; padding-bottom: 6px;padding-left: 40px;padding-right: 40px;margin-top: -10px;">Login</button>
444 | 
445 |                 <br>
446 |                 <p style="margin-left: 1px; color:#537bbc;font-size: 21px;font-family: nunito; display: inline-block;">Or you can log in with</p>
447 |                 <button style="background: #faff8a; border-top: 3px solid #31aa4d; border-bottom: 3px solid #31aa4d; border-right: 3px solid #fa5757;border-left: 3px solid #fa5757; margin-right: 10px; color:#3f82ff;  font-size: 25px; padding-top: 6px; margin-left: 10px;;font-family: raleway; padding-bottom: 6px;padding-left: 35px;padding-right: 35px;"><b>Google</b></button>
448 | 
449 |             </div>
450 | 
451 | 
452 | 
453 | 
454 |         </div>
455 | 
456 | 
457 |     </div>
458 | 
459 | 
460 | 
461 | </body></html>


--------------------------------------------------------------------------------
/Feedback Page.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en-US">
  3 |         <!--The code is messy, so feel free to modify it using better techniques and practices.-->
  4 | 
  5 | <head>
  6 |     <link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
  7 | 
  8 |     <style>
  9 |         * {
 10 |             font-family: "Playfair Display"
 11 |         }
 12 | 
 13 |         h1 {
 14 |             color: blue;
 15 |             font-size: 48;
 16 |         }
 17 | 
 18 |         p {
 19 |             color: red;
 20 |         }
 21 | 
 22 |         div {
 23 |             background-color: white
 24 |         }
 25 | 
 26 |         #1 {
 27 |             background-color: #aacbff;
 28 |         }
 29 | 
 30 |         .row {
 31 |             font-size: 21px;
 32 |         }
 33 | 
 34 |         #circle_text {
 35 |             display: inline-block;
 36 |             padding-left: 10px;
 37 |         }
 38 | 
 39 |         p {
 40 |             color: black;
 41 |         }
 42 | 
 43 |         #circle1 {
 44 |             width: 30px;
 45 |             height: 30px;
 46 |             background: red;
 47 |             -moz-border-radius: 50px;
 48 |             -webkit-border-radius: 20px;
 49 |             border-radius: 200px;
 50 |             border: 1px solid red;
 51 |             display: inline-block;
 52 |             padding: 0px;
 53 |             font-family: "Playfair Display":
 54 |         }
 55 | 
 56 |         #singleline {
 57 |             display: inline-block;
 58 |         }
 59 | 
 60 |         #circle2 {
 61 |             width: 30px;
 62 |             height: 30px;
 63 |             background: #328314;
 64 |             -moz-border-radius: 50px;
 65 |             -webkit-border-radius: 50px;
 66 |             border-radius: 200px;
 67 |             border: 1px solid #328314;
 68 |             display: inline-block;
 69 |             padding: 1px;
 70 |         }
 71 | 
 72 |         #circle3 {
 73 |             width: 30px;
 74 |             height: 30px;
 75 |             background: #0089ff;
 76 |             -moz-border-radius: 50px;
 77 |             -webkit-border-radius: 50px;
 78 |             border-radius: 200px;
 79 |             border: 1px solid #0089ff;
 80 |             display: inline-block;
 81 |             padding: 1px;
 82 |         }
 83 | 
 84 |         textarea {
 85 |             resize: none;
 86 |             border-radius: 7px;
 87 |             border: solid 2px #78a1cb;
 88 |             /*white-space: nowrap;*/
 89 |             font-size: 17px;
 90 |             height: 31px;
 91 |             padding-left: 4px;
 92 |             padding-right: 1px;
 93 |             width: 100%;
 94 |         }
 95 | 
 96 |         #game {
 97 |             padding-left: 6px;
 98 |             padding-right: 3px;
 99 |         }
100 | 
101 |         .buttonRed {
102 |             background-color: red;
103 |             /* Red*/
104 |             border: none;
105 |             color: white;
106 |             padding: 8px 18px;
107 |             text-align: center;
108 |             text-decoration: none;
109 |             display: inline-block;
110 |             font-size: 16px;
111 |             font-weight: bold;
112 |             margin: 4px 2px;
113 |             cursor: pointer;
114 |             border-radius: 5px;
115 |         }
116 | 
117 |         .buttonRed:hover {
118 |             background-color: rgba(255, 115, 0, 0.767)
119 |         }
120 | 
121 |         .buttonBlue {
122 |             background-color: rgb(0, 0, 255);
123 |             border: none;
124 |             color: white;
125 |             padding: 8px 18px;
126 |             text-align: center;
127 |             text-decoration: none;
128 |             display: inline-block;
129 |             font-size: 16px;
130 |             font-weight: bold;
131 |             margin: 4px 2px;
132 |             cursor: pointer;
133 |             border-radius: 5px;
134 |         }
135 | 
136 |         .buttonBlue:hover {
137 |             background-color: rgba(38, 0, 255, 0.623)
138 |         }
139 | 
140 |         /* Create four equal columns that floats next to each other */
141 | 
142 |         * {
143 |             box-sizing: border-box;
144 |         }
145 | 
146 |         /* Create four equal columns that floats next to each other */
147 | 
148 | 
149 |         #t1 {
150 |             margin-top: 50px;
151 |             text-align: left;
152 |         }
153 | 
154 |         .type {
155 |             text-align: center;
156 |             color: #756bea;
157 |             font-size: 29px;
158 |         }
159 | 
160 |         /* Responsive layout into 2 col - makes a two column-layout instead of four columns */
161 |         @media screen and (max-width: 900px) {
162 |             .column25 {
163 |                 width: 50%;
164 |             }
165 | 
166 |             .column50 {
167 |                 width: 50%;
168 |             }
169 | 
170 |             .column33 {
171 |                 width: 100%;
172 |             }
173 | 
174 |             .column67 {
175 |                 width: 100%;
176 |             }
177 |         }
178 | 
179 |         /* Responsive layout into 1 Col - makes the two columns stack on top of each other instead of next to each other */
180 |         @media screen and (max-width: 600px) {
181 |             .column25 {
182 |                 width: 100%;
183 |             }
184 | 
185 |             .column50 {
186 |                 width: 100%;
187 |             }
188 | 
189 |             .column33 {
190 |                 width: 100%;
191 |             }
192 | 
193 |             .column67 {
194 |                 width: 100%;
195 |             }
196 |         }
197 | 
198 |         #other {
199 |             text-align: center;
200 |         }
201 | 
202 | 
203 |         .ml00 {
204 |             margin-left: 0px;
205 |         }
206 | 
207 |         .ml10 {
208 |             margin-left: 10px;
209 |         }
210 | 
211 |         .ml30 {
212 |             margin-left: 30px;
213 |         }
214 | 
215 |         .ml50 {
216 |             margin-left: 50px;
217 |         }
218 | 
219 |         .ml75 {
220 |             margin-left: 75px;
221 |         }
222 | 
223 |         .ml90 {
224 |             margin-left: 90px;
225 |         }
226 | 
227 |         .ml100 {
228 |             margin-left: 100px;
229 |         }
230 | 
231 |         .cType {
232 |             color: black;
233 |         }
234 | 
235 |         .rButton {
236 |             margin-left: 15px;
237 |         }
238 | 
239 |         /*#c1,c2{
240 |         
241 |     }
242 |     
243 |     .clear{
244 |         clear: both;
245 |     }*/
246 | 
247 |         .Alldiv {
248 |             text-align: center;
249 |             font-size: 21px;
250 |             float: left;
251 |         }
252 | 
253 |         .mealType {
254 |             text-align: left;
255 |         }
256 | 
257 |         .box {
258 |             color: black;
259 |             padding: 5px;
260 |             margin: 10px;
261 |             border-style: groove;
262 |         }
263 | 
264 |         .grid {
265 |             text-align: center;
266 |             font-size: 20px;
267 |             margin: 1px;
268 |             float: left;
269 |         }
270 | 
271 |         .top2 {
272 |             margin-top: 12px;
273 |         }
274 | 
275 |         .right2 {
276 |             margin-left: 26px;
277 |         }
278 | 
279 |         .extra1 {
280 |             margin-top: 16px;
281 |         }
282 | 
283 |         .extra2 {
284 |             margin-top: 16px;
285 |         }
286 | 
287 |         .cuisine {
288 |             margin-top: -12px;
289 |         }
290 |         }
291 | 
292 |         .input-hidden {
293 |             position: absolute;
294 |             left: -9999px;
295 |         }
296 | 
297 |         input[type=radio]:checked+label>img {
298 |             border: 1px solid #fff;
299 |             box-shadow: 0 0 3px 3px #090;
300 |         }
301 | 
302 |         /* Stuff after this is only to make things more pretty */
303 |         input[type=radio]+label>img {
304 |             width: 20px;
305 |             height: 20px;
306 |             transition: 500ms all;
307 |         }
308 | 
309 |         input[type=radio]:checked+label>img {
310 |             transform:
311 |                 rotateZ(-10deg) rotateX(10deg);
312 |         }
313 | 
314 |         #divleft {
315 |             float: left;
316 |         }
317 | 
318 |         #divright {
319 |             float: right;
320 |         }
321 | 
322 |         #cardioType {
323 |             float: left;
324 |             width: 100%;
325 |         }
326 | 
327 |         .check {
328 |             margin-top: 20px;
329 |             margin-right: 10px;
330 |         }
331 | 
332 |         .check2 {
333 |             margin-top: 5px;
334 |             margin-left: 10px;
335 |             margin-right: 13px;
336 |         }
337 | 
338 |         .check3 {
339 |             margin-top: 20px;
340 |             margin-right: 23px;
341 |         }
342 | 
343 |         .check4 {
344 |             margin-top: 5px;
345 |             margin-left: 10px;
346 |             margin-right: 9px;
347 |         }
348 |     </style>
349 | 
350 |     <title>Feedback</title>
351 | </head>
352 | 
353 | <body>
354 | 
355 |     <div style="align-content: center; align-self: center;">
356 |         <h1 style="align-content: center; align-self: center; align-self: center;text-align: center;">
357 |             <u>Feedback Page</u></h1>
358 |     </div>
359 | 
360 |     <p style="text-align: center; margin-top: -10px; font-size: 17px;">Feedback Message</p>
361 | 
362 | 
363 |     <div style="width:10%; float:left;">
364 |         <br>
365 |     </div>
366 |     <div style="width:50%; float:left;">
367 |         <p style="text-align: center;">Question 1?</p>
368 |         <p style="text-align: center;">Question 2?</p>
369 |     </div>
370 |     <div style="width:20%; float: left;">
371 |         <div style="width: 100%; margin-top: 10px;">
372 |             <input style="align-content: center; text-align: center; align-content: center;" type="radio" class="1 input-hidden" id="ar112" name="q1" />
373 |             <label for="ar1"><img style="width:10; height:10;" src="red2.png" alt="No"></label>
374 |             <input type="radio" class="1 input-hidden" id="ar2" name="q1" checked />
375 |             <label for="ar2"><img style="width:10; height:10;" src="green2.png" alt="Yes"></label>
376 |         </div>
377 | 
378 |         <div style="width: 100%; margin-top: 13px;">
379 |             <input style="align-content: center; text-align: center; align-content: center;" type="radio" class="2 input-hidden" id="ar112" name="q2" />
380 |             <label for="ar1"><img style="width:10; height:10;" src="red2.png" alt="No"></label>
381 |             <input type="radio" class="2 input-hidden" id="ar2" name="q2" checked />
382 |             <label for="ar2"><img style="width:10; height:10;" src="green2.png" alt="Yes"></label>
383 |         </div>
384 |     </div>
385 |     <div style="width:20%; float:right;">
386 |         <br>
387 |     </div>
388 | 
389 |     <div style="margin-top: 170px;width: 100%;">
390 |         <p style="text-align: center; font-size: 18px;"><b>On a scale of 1 - 10, .....</b></p>
391 |     </div>
392 | 
393 |     <div style="width: 5%; float:left;"><br></div>
394 |     <div style="width: 17%; float:left;">
395 |         <textarea style="font-size: 15px; height: 50px;" placeholder=" Text 1"></textarea>
396 |     </div>
397 |     <div style="width: 7%;"></div>
398 |     <div style="width: 7%; float:left; margin-left: 40px;">
399 |         <input type="radio" name="gender" value="male" style="font-size: 18px;"><br>&nbsp; 1</div>
400 |     <div style="width: 7%; float:left;">
401 |         <input type="radio" name="gender" value="male" style="font-size: 18px;"><br>&nbsp; 2</div>
402 |     <div style="width: 7%; float:left;">
403 |         <input type="radio" name="gender" value="male" style="font-size: 18px;"><br>&nbsp; 3</div>
404 |     <div style="width: 7%; float:left;">
405 |         <input type="radio" name="gender" value="male" style="font-size: 18px;"><br>&nbsp; 4</div>
406 |     <div style="width: 7%; float:left;">
407 |         <input type="radio" name="gender" value="male" style="font-size: 18px;"><br>&nbsp; 5</div>
408 |     <div style="width: 7%; float:left;">
409 |         <input type="radio" name="gender" value="male" style="font-size: 18px;"><br>&nbsp; 6</div>
410 |     <div style="width: 7%; float:left;">
411 |         <input type="radio" name="gender" value="male" style="font-size: 18px;"><br>&nbsp; 7</div>
412 |     <div style="width: 7%; float:left;">
413 |         <input type="radio" name="gender" value="male" style="font-size: 18px;"><br>&nbsp; 8</div>
414 |     <div style="width: 7%; float:left;">
415 |         <input type="radio" name="gender" value="male" style="font-size: 18px;"><br>&nbsp; 9</div>
416 |     <div style="width: 7%; float:left;">
417 |         <input type="radio" name="gender" value="female" style="font-size: 18px;"><br>&nbsp; 10</div>
418 | 
419 |     <div style="margin-top: 95px;width: 100%;">
420 |         <p style="text-align: center; font-size: 18px;"><b>On a scale of 1 - 10, .....</b></p>
421 |     </div>
422 | 
423 |     <div style="width: 5%; float:left;"><br></div>
424 |     <div style="width: 17%; float:left;">
425 |         <textarea style="font-size: 15px; height: 50px;" placeholder=" Text 2"></textarea>
426 |     </div>
427 |     <div style="width: 7%;"></div>
428 |     <div style="width: 7%; float:left; margin-left: 40px;">
429 |         <input type="radio" name="q3" value="male" style="font-size: 18px;"><br>&nbsp; 1</div>
430 |     <div style="width: 7%; float:left;">
431 |         <input type="radio" name="q3" value="male" style="font-size: 18px;"><br>&nbsp; 2</div>
432 |     <div style="width: 7%; float:left;">
433 |         <input type="radio" name="q3" value="male" style="font-size: 18px;"><br>&nbsp; 3</div>
434 |     <div style="width: 7%; float:left;">
435 |         <input type="radio" name="q3" value="male" style="font-size: 18px;"><br>&nbsp; 4</div>
436 |     <div style="width: 7%; float:left;">
437 |         <input type="radio" name="q3" value="male" style="font-size: 18px;"><br>&nbsp; 5</div>
438 |     <div style="width: 7%; float:left;">
439 |         <input type="radio" name="q3" value="male" style="font-size: 18px;"><br>&nbsp; 6</div>
440 |     <div style="width: 7%; float:left;">
441 |         <input type="radio" name="q3" value="male" style="font-size: 18px;"><br>&nbsp; 7</div>
442 |     <div style="width: 7%; float:left;">
443 |         <input type="radio" name="q3" value="male" style="font-size: 18px;"><br>&nbsp; 8</div>
444 |     <div style="width: 7%; float:left;">
445 |         <input type="radio" name="q3" value="male" style="font-size: 18px;"><br>&nbsp; 9</div>
446 |     <div style="width: 7%; float:left;">
447 |         <input type="radio" name="gender" value="female" style="font-size: 18px;"><br>&nbsp; 10</div>
448 | 
449 | 
450 |     <div style="margin-top: 95px;width: 100%;">
451 |         <p style="text-align: center; font-size: 18px;"><b>On a scale of 1 - 10, .....</b></p>
452 |     </div>
453 | 
454 |     <div style="width: 5%; float:left;"><br></div>
455 |     <div style="width: 17%; float:left;">
456 |         <textarea style="font-size: 15px; height: 50px;" placeholder=" Text 3"></textarea>
457 |     </div>
458 |     <div style="width: 7%;"></div>
459 |     <div style="width: 7%; float:left; margin-left: 40px;">
460 |         <input type="radio" name="q4" value="male" style="font-size: 18px;"><br>&nbsp; 1</div>
461 |     <div style="width: 7%; float:left;">
462 |         <input type="radio" name="q4" value="male" style="font-size: 18px;"><br>&nbsp; 2</div>
463 |     <div style="width: 7%; float:left;">
464 |         <input type="radio" name="q4" value="male" style="font-size: 18px;"><br>&nbsp; 3</div>
465 |     <div style="width: 7%; float:left;">
466 |         <input type="radio" name="q4" value="male" style="font-size: 18px;"><br>&nbsp; 4</div>
467 |     <div style="width: 7%; float:left;">
468 |         <input type="radio" name="q4" value="male" style="font-size: 18px;"><br>&nbsp; 5</div>
469 |     <div style="width: 7%; float:left;">
470 |         <input type="radio" name="q4" value="male" style="font-size: 18px;"><br>&nbsp; 6</div>
471 |     <div style="width: 7%; float:left;">
472 |         <input type="radio" name="q4" value="male" style="font-size: 18px;"><br>&nbsp; 7</div>
473 |     <div style="width: 7%; float:left;">
474 |         <input type="radio" name="q4" value="male" style="font-size: 18px;"><br>&nbsp; 8</div>
475 |     <div style="width: 7%; float:left;">
476 |         <input type="radio" name="q4" value="male" style="font-size: 18px;"><br>&nbsp; 9</div>
477 |     <div style="width: 7%; float:left;">
478 |         <input type="radio" name="gender" value="female" style="font-size: 18px;"><br>&nbsp; 10</div>
479 | 
480 | 
481 | 
482 | 
483 |     <div id="wrapper" style="color: black; margin-top: 93px;">
484 |         <p style="text-align: center; font-size: 18px;">Please provide any details ... & give us feedback ...</p>
485 | 
486 |         <div style="width: 19%; float:left;">&nbsp;</div>
487 |         <div style="width: 61%; float:left; margin-top: -7px;"><textarea style="width: 100%; height:54px; font-size: 16px;"></textarea></div>
488 |         <div style="width: 20%; float:right;">&nbsp;</div>
489 | 
490 |         <div>&nbsp;</div>
491 |         <div>&nbsp;</div>
492 | 
493 | 
494 |         <div style="width: 100%; display: flex; justify-content: center; margin-top: 20px;">
495 |             <button id="submit" style="border-radius: 10px;; padding-left: 26px; padding-right: 26px; padding-bottom: 5px; padding-top: 5px; background: #4da6ff; color: white; font-size: 23px;">Submit</button>
496 |         </div>
497 | 
498 |     </div>
499 | 
500 | 
501 | 
502 | </body></html>
503 | 


--------------------------------------------------------------------------------
/Login Page 1.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en-US">
  3 |         <!--Initial Web-page design attempt-->
  4 | 
  5 | <head>
  6 |     <style>
  7 |         h1 {
  8 |             color: blue;
  9 |             font-size: 48;
 10 |         }
 11 | 
 12 |         p {
 13 |             color: red;
 14 |         }
 15 | 
 16 |         div {
 17 |             background-color: rgb(255, 255, 255, 0)
 18 |         }
 19 | 
 20 |         .row {
 21 |             font-size: 21px;
 22 |         }
 23 | 
 24 |         .buttonRed {
 25 |             background-color: red;
 26 |             /* Red*/
 27 |             border: none;
 28 |             color: white;
 29 |             padding: 8px 18px;
 30 |             text-align: center;
 31 |             text-decoration: none;
 32 |             display: inline-block;
 33 |             font-size: 16px;
 34 |             font-weight: bold;
 35 |             margin: 4px 2px;
 36 |             cursor: pointer;
 37 |             border-radius: 5px;
 38 |         }
 39 | 
 40 |         .buttonRed:hover {
 41 |             background-color: rgba(255, 115, 0, 0.767)
 42 |         }
 43 | 
 44 |         .buttonBlue {
 45 |             background-color: rgb(0, 0, 255);
 46 |             border: none;
 47 |             color: white;
 48 |             padding: 8px 18px;
 49 |             text-align: center;
 50 |             text-decoration: none;
 51 |             display: inline-block;
 52 |             font-size: 16px;
 53 |             font-weight: bold;
 54 |             margin: 4px 2px;
 55 |             cursor: pointer;
 56 |             border-radius: 5px;
 57 |         }
 58 | 
 59 |         .buttonBlue:hover {
 60 |             background-color: rgba(38, 0, 255, 0.623)
 61 |         }
 62 | 
 63 |             {
 64 | 
 65 |             /* might create issues the brackets */
 66 |             .buttonBlue {
 67 |                 background-color: #008CBA;
 68 |             }
 69 | 
 70 |             /* Blue */
 71 |             .buttonRed {
 72 |                 background-color: #f44336;
 73 |             }
 74 | 
 75 |             /* Red */
 76 |             .buttonGray {
 77 |                 background-color: #e7e7e7;
 78 |                 color: black;
 79 |             }
 80 | 
 81 |             /* Gray */
 82 |             .buttonBlack {
 83 |                 background-color: #555555;
 84 |             }
 85 | 
 86 |             /* Black */
 87 |         }
 88 | 
 89 |         /* Create four equal columns that floats next to each other */
 90 | 
 91 |         * {
 92 |             box-sizing: border-box;
 93 |         }
 94 | 
 95 |         /* Create four equal columns that floats next to each other */
 96 |         .column25 {
 97 |             float: left;
 98 |             font-weight: bold;
 99 |             width: 15%;
100 |             padding: 10px;
101 |         }
102 | 
103 |         /* Clear floats after the columns */
104 |         .row:after {
105 |             content: "";
106 |             display: table;
107 |             clear: both;
108 | 
109 |         }
110 | 
111 |         /* Create two equal columns that floats next to each other */
112 |         .column50 {
113 |             float: left;
114 |             width: 50%;
115 |             padding: 10px;
116 |         }
117 | 
118 |         /* Clear floats after the columns  50*/
119 |         .row:after {
120 |             content: "";
121 |             display: table;
122 |             clear: both;
123 |         }
124 | 
125 |         /* Create columns 67% that floats next to each other */
126 |         .column67 {
127 |             float: left;
128 |             width: 67%;
129 |             padding: 10px;
130 |         }
131 | 
132 |         /* Clear floats after the columns   67*/
133 |         .row:after {
134 |             content: "";
135 |             display: table;
136 |             clear: both;
137 |         }
138 | 
139 |         /* Create columns 33% that floats next to each other */
140 |         .column33 {
141 |             float: left;
142 |             width: 33%;
143 |             padding: 10px;
144 |         }
145 | 
146 |         /* Clear floats after the columns  33*/
147 |         .row:after {
148 |             content: "";
149 |             display: table;
150 |             clear: both;
151 |         }
152 | 
153 |         /* Create columns 40% that floats next to each other */
154 |         .column40 {
155 |             float: left;
156 |             width: 40%;
157 |             padding: 10px;
158 |         }
159 | 
160 |         /* Clear floats after the columns  40*/
161 |         .row:after {
162 |             content: "";
163 |             display: table;
164 |             clear: both;
165 |         }
166 | 
167 |         /* Create columns 60% that floats next to each other */
168 |         .column60 {
169 |             float: left;
170 |             width: 60%;
171 |             padding: 10px;
172 |         }
173 | 
174 |         /* Clear floats after the columns  60*/
175 |         .row:after {
176 |             content: "";
177 |             display: table;
178 |             clear: both;
179 |         }
180 | 
181 |         /* Create columns 100% that floats next to each other */
182 |         .column100 {
183 |             float: left;
184 |             width: 100%;
185 |             padding: 10px;
186 |         }
187 | 
188 |         /* Clear floats after the columns  100*/
189 |         .row:after {
190 |             content: "";
191 |             display: table;
192 |             clear: both;
193 |         }
194 | 
195 |         /* Create columns 75% that floats next to each other  */
196 |         .column75 {
197 |             float: left;
198 |             width: 85%;
199 |             padding: 10px;
200 |         }
201 | 
202 |         /* Clear floats after the columns   75*/
203 |         .row:after {
204 |             content: "";
205 |             display: table;
206 |             clear: both;
207 |         }
208 | 
209 |         .type {
210 |             text-align: center;
211 |             color: #756bea;
212 |             font-size: 29px;
213 |         }
214 | 
215 |         p {
216 |             max-width: 200px;
217 |         }
218 | 
219 |         #column1 {
220 |             background: #bfbfbf;
221 |             display: inline-block;
222 |             width: 76%;
223 |             float: left;
224 |         }
225 | 
226 |         #column2 {
227 |             background: #bfbfbf;
228 |             float: left;
229 |             width: 24%;
230 |         }
231 | 
232 |         #background {
233 |             border: 4px solid #5a5a5a;
234 |             background: #bfbfbf;
235 |             width: 530px;
236 | 
237 |             height: 408px;
238 |             display: inline-block;
239 |             border-radius: 65px;
240 |         }
241 | 
242 |         #parent {
243 |             text-align: center;
244 |         }
245 | 
246 |         #signin {
247 |             background: #83d8ff;
248 |             width: 62%;
249 |             margin-left: 35px;
250 |             margin-top: 40px;
251 |             box-shadow: 0px 0px 0px 3px #5a5a5a inset;
252 |         }
253 | 
254 |         #forgot {
255 |             display: table;
256 |             margin-left: 170px;
257 |             margin-top: -50px;
258 |             font-size: 18px;
259 |             color: darkgreen;
260 |             padding-bottom: 10px;
261 |         }
262 | 
263 |         .userImage {
264 |             width: 50px;
265 |             margin-top: 15px;
266 |             border: 2px solid #5a5a5a;
267 |             background: #9f9f9f;
268 |             align-content: center;
269 |             border-radius: 7px;
270 |             margin-left: -80px;
271 |             text-align: center;
272 |             display: inline-block;
273 |         }
274 | 
275 |         .input {
276 |             width: 120px;
277 |             display: inline-block;
278 |             margin-left: 10px;
279 |             height: 50px;
280 |         }
281 | 
282 |         textarea {
283 |             border: 2px solid #5a5a5a;
284 |             resize: none;
285 |             padding-left: 5px;
286 |             font-size: 16px;
287 |         }
288 | 
289 |         .login {
290 |             position: absolute;
291 |             top: 50%;
292 |             left: 50%;
293 |             margin: -150px 0 0 -150px;
294 |             width: 300px;
295 |             height: 300px;
296 |         }
297 | 
298 |         .login h1 {
299 |             color: #fff;
300 |             text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
301 |             letter-spacing: 1px;
302 |             text-align: center;
303 |         }
304 | 
305 |         #container {
306 |             width: 100%;
307 |         }
308 | 
309 |         #google {
310 |             margin-left: 5px;
311 |             height: 50px;
312 |             color: #fff;
313 |             font-size: 20px;
314 |             padding-left: 10px;
315 |             padding-right: 10px;
316 |             background: #3096eb;
317 |             border: 2px solid #5a5a5a;
318 |             display: inline-block;
319 |             border-radius: 7px;
320 |         }
321 | 
322 |         #remember {
323 |             margin-left: -230px;
324 |             width: 17px;
325 |             height: 17px;
326 |         }
327 | 
328 |         #newUser {
329 |             margin-left: -42px;
330 |             color: #000;
331 |             margin-top: 40px;
332 |             font-size: 20px;
333 |         }
334 | 
335 |         #reg {
336 |             margin-left: -45px;
337 |             color: #1660d6;
338 |             margin-top: -10px;
339 |             font-size: 21px;
340 |         }
341 | 
342 |         .buttons {
343 |             margin-top: 30px;
344 |         }
345 | 
346 |         @import url(https://fonts.googleapis.com/css?family=Open+Sans);
347 | 
348 |         .btn {
349 |             display: inline-block;
350 |             *display: inline;
351 |             *zoom: 1;
352 |             padding: 4px 10px 4px;
353 |             margin-bottom: 0;
354 |             font-size: 13px;
355 |             line-height: 18px;
356 |             color: #333333;
357 |             text-align: center;
358 |             text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
359 |             vertical-align: middle;
360 |             background-color: #f5f5f5;
361 |             background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
362 |             background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
363 |             background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
364 |             background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
365 |             background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
366 |             background-image: linear-gradient(top, #ffffff, #e6e6e6);
367 |             background-repeat: repeat-x;
368 |             filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0);
369 |             border-color: #e6e6e6 #e6e6e6 #e6e6e6;
370 |             border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
371 |             border: 1px solid #e6e6e6;
372 |             -webkit-border-radius: 4px;
373 |             -moz-border-radius: 4px;
374 |             border-radius: 4px;
375 |             -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
376 |             -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
377 |             box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
378 |             cursor: pointer;
379 |             *margin-left: .3em;
380 |         }
381 | 
382 |         .btn:hover,
383 |         .btn:active,
384 |         .btn.active,
385 |         .btn.disabled,
386 |         .btn[disabled] {
387 |             background-color: #e6e6e6;
388 |         }
389 | 
390 |         .btn-large {
391 |             padding: 9px 14px;
392 |             font-size: 15px;
393 |             line-height: normal;
394 |             -webkit-border-radius: 5px;
395 |             -moz-border-radius: 5px;
396 |             border-radius: 5px;
397 |         }
398 | 
399 |         .btn:hover {
400 |             color: #333333;
401 |             text-decoration: none;
402 |             background-color: #e6e6e6;
403 |             background-position: 0 -15px;
404 |             -webkit-transition: background-position 0.1s linear;
405 |             -moz-transition: background-position 0.1s linear;
406 |             -ms-transition: background-position 0.1s linear;
407 |             -o-transition: background-position 0.1s linear;
408 |             transition: background-position 0.1s linear;
409 |         }
410 | 
411 |         .btn-primary,
412 |         .btn-primary:hover {
413 |             text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
414 |             color: #ffffff;
415 |         }
416 | 
417 |         .btn-primary.active {
418 |             color: rgba(255, 255, 255, 0.75);
419 |         }
420 | 
421 |         .btn-primary {
422 |             background-color: #4a77d4;
423 |             background-image: -moz-linear-gradient(top, #6eb6de, #4a77d4);
424 |             background-image: -ms-linear-gradient(top, #6eb6de, #4a77d4);
425 |             background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#6eb6de), to(#4a77d4));
426 |             background-image: -webkit-linear-gradient(top, #6eb6de, #4a77d4);
427 |             background-image: -o-linear-gradient(top, #6eb6de, #4a77d4);
428 |             background-image: linear-gradient(top, #6eb6de, #4a77d4);
429 |             background-repeat: repeat-x;
430 |             filter: progid:dximagetransform.microsoft.gradient(startColorstr=#6eb6de, endColorstr=#4a77d4, GradientType=0);
431 |             border: 1px solid #3762bc;
432 |             text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
433 |             box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5);
434 |         }
435 | 
436 |         .btn-primary:hover,
437 |         .btn-primary:active,
438 |         .btn-primary.active,
439 |         .btn-primary.disabled,
440 |         .btn-primary[disabled] {
441 |             filter: none;
442 |             background-color: #4a77d4;
443 |         }
444 | 
445 |         .btn-block {
446 |             width: 100%;
447 |             display: block;
448 |         }
449 | 
450 |         * {
451 |             -webkit-box-sizing: border-box;
452 |             -moz-box-sizing: border-box;
453 |             -ms-box-sizing: border-box;
454 |             -o-box-sizing: border-box;
455 |             box-sizing: border-box;
456 |         }
457 | 
458 |         html {
459 |             width: 100%;
460 |             height: 100%;
461 |             overflow: hidden;
462 |         }
463 | 
464 |         body {
465 |             width: 100%;
466 |             height: 100%;
467 |             font-family: 'Open Sans', sans-serif;
468 |             background: #092756;
469 |             background: -moz-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, .4) 10%, rgba(138, 114, 76, 0) 40%), -moz-linear-gradient(top, rgba(57, 173, 219, .25) 0%, rgba(42, 60, 87, .4) 100%), -moz-linear-gradient(-45deg, #670d10 0%, #092756 100%);
470 |             background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, .4) 10%, rgba(138, 114, 76, 0) 40%), -webkit-linear-gradient(top, rgba(57, 173, 219, .25) 0%, rgba(42, 60, 87, .4) 100%), -webkit-linear-gradient(-45deg, #670d10 0%, #092756 100%);
471 |             background: -o-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, .4) 10%, rgba(138, 114, 76, 0) 40%), -o-linear-gradient(top, rgba(57, 173, 219, .25) 0%, rgba(42, 60, 87, .4) 100%), -o-linear-gradient(-45deg, #670d10 0%, #092756 100%);
472 |             background: -ms-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, .4) 10%, rgba(138, 114, 76, 0) 40%), -ms-linear-gradient(top, rgba(57, 173, 219, .25) 0%, rgba(42, 60, 87, .4) 100%), -ms-linear-gradient(-45deg, #670d10 0%, #092756 100%);
473 |             background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, .4) 10%, rgba(138, 114, 76, 0) 40%), linear-gradient(to bottom, rgba(57, 173, 219, .25) 0%, rgba(42, 60, 87, .4) 100%), linear-gradient(135deg, #670d10 0%, #092756 100%);
474 |             filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3E1D6D', endColorstr='#092756', GradientType=1);
475 |         }
476 | 
477 | 
478 |         input {
479 |             width: 100%;
480 |             margin-bottom: 10px;
481 |             background: rgba(0, 0, 0, 0.3);
482 |             border: none;
483 |             outline: none;
484 |             padding: 10px;
485 |             font-size: 13px;
486 |             color: #fff;
487 |             text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
488 |             border: 1px solid rgba(0, 0, 0, 0.3);
489 |             border-radius: 4px;
490 |             box-shadow: inset 0 -5px 45px rgba(100, 100, 100, 0.2), 0 1px 1px rgba(255, 255, 255, 0.2);
491 |             -webkit-transition: box-shadow .5s ease;
492 |             -moz-transition: box-shadow .5s ease;
493 |             -o-transition: box-shadow .5s ease;
494 |             -ms-transition: box-shadow .5s ease;
495 |             transition: box-shadow .5s ease;
496 |         }
497 | 
498 |         input:focus {
499 |             box-shadow: inset 0 -5px 45px rgba(100, 100, 100, 0.4), 0 1px 1px rgba(255, 255, 255, 0.2);
500 |         }
501 |         }
502 |     </style>
503 | 
504 |     <title>Login</title>
505 | </head>
506 | 
507 | <body>
508 | 
509 |     <div id="1">
510 |         <table align="center" border="0" cellpadding="0" cellspacing="0" style="border-radius: 22px; border: 2px solid #5d4f8b;width: 825px;">
511 |             <tr>
512 |                 <td style="margin-left:5px">
513 |                     <h2 style="margin-left: 15px; color:#d3a9a9; font-family: cursive;">Website Name</h2>
514 |                 </td>
515 |                 <td>
516 |                      <h1 style="margin-right:68px; color: #c9b0d4;font-family: sans-serif"><u>Login Page</u></h1>
517 |                 </td>
518 | 
519 |             </tr>
520 |             <tr>
521 |                 <td>
522 |                     <p style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;border-radius: 5px ;color: #adc6ff; line-height: 15px;  font-size: 17 px; margin-left: 15px;"> <i>Slogan </i></p>
523 |                 </td>
524 |                 <td>
525 |                     <h1></h1>
526 |                 </td>
527 | 
528 |             </tr>
529 |         </table>
530 | 
531 | 
532 |     </div>
533 | 
534 |     <div style="margin-top: -200px;" class="login">
535 |         <h1>Sign In</h1>
536 |         <form method="post">
537 |             <input type="text" name="u" placeholder="Username" required="required" />
538 |             <input type="password" name="p" placeholder="Password" required="required" />
539 |             <button type="submit" class="btn btn-primary btn-block btn-large">Login</button>
540 |         </form>
541 |     </div>
542 | 
543 | </body></html>
544 | 


--------------------------------------------------------------------------------