Add some additional demo content to webkit.org
[WebKit-https.git] / Websites / webkit.org / demos / extrazoom / login / index.html
1 <!DOCTYPE html>
2 <meta name="viewport" content="width=device-width, initial-scale=1">
3 <meta charset="utf8">
4 <meta property="og:title" content="Generic login example">
5 <html>
6 <head>
7     <style>
8     body {
9         width: 100%;
10         margin: 0;
11         padding-top: 1em;
12         text-align: center;
13         font-family: system-ui;
14     }
15
16     #logo {
17         width: calc(min(80px, 20vw));
18     }
19
20     h1 {
21         margin-top: 0;
22         font-weight: 350;
23         font-size: 1.5em;
24     }
25
26     input {
27         width: calc(min(90%, 320px));
28         background-color: #EEE;
29         height: 2.4em;
30         margin: 0.5em auto;
31         font-size: 1.2em;
32         border: none;
33         border-radius: 1.2em;
34         -webkit-appearance: none;
35         box-sizing: border-box;
36         padding: 0 1em;
37         outline: none;
38         display: block;
39     }
40
41     input[type="submit"] {
42         color: white;
43         background-color: rgb(90, 200, 250);
44     }
45
46     input + input {
47         margin-top: 1em;
48     }
49
50     a {
51         font-size: 0.8em;
52     }
53
54     #links {
55         margin-top: 1em;
56     }
57
58     #links > a {
59         color: rgb(0, 122, 255);
60         text-decoration: none;
61     }
62     </style>
63 </head>
64 <body>
65     <img id="logo" src="webkit.svg"></img>
66     <form action="index.html" method="post">
67         <input aria-label="Email Address" type="email" placeholder="Email"></input>
68         <input aria-label="Password" type="password" placeholder="Password"></input>
69         <input type="submit" value="Log in"></input>
70     </form>
71     <div id="links">
72         <a href="#">Sign up</a>
73         <span>&nbsp;•&nbsp;</span>
74         <a href="#">Forgot your password?</a>
75     </div>
76 </body>
77 </html>