TEMPLATE.html – web-page-template

`TEMPLATE.html`

1.8 kB
View raw
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5  <meta charset="utf-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
7
8  <script src="app.js"></script>
9
10  <link href="style.css" rel="stylesheet">
11
12  <style>
13    :root {
14      --header-background-color: LightSkyBlue;
15      --footer-background-color: LightSkyBlue;
16
17      --max-width: 34rem;
18      --padding:   1em;
19    }
20
21    header { background: var(--header-background-color); }
22    footer { background: var(--footer-background-color); }
23
24    body {
25      margin:  0;
26      padding: 0;
27
28      min-height:     100vh;
29      display:        flex;
30      flex-direction: column;
31    }
32
33    main {
34      flex: 1;
35      max-width: 100%;
36    }
37
38    header > *, main, footer > * {
39      max-width: var(--max-width);
40      margin:    0 auto;
41
42      padding-top:    calc(var(--padding) + env(safe-area-inset-top));
43      padding-right:  calc(var(--padding) + env(safe-area-inset-right));
44      padding-bottom: calc(var(--padding) + env(safe-area-inset-bottom));
45      padding-left:   calc(var(--padding) + env(safe-area-inset-left));
46    }
47  </style>
48</head>
49
50<body>
51  <header>
52    <h1>
53      This is my web page
54    </h1>
55  </header>
56
57  <main>
58    <p>
59      <!--
60        These repeated alphabets are here to help me judge line lengths
61        once I've selected fonts -- I typically aim for between 2½ to 3½
62        alphabets on a line.
63      -->
64      abcdefghijklm nopqrstuvwxyz
65      abcdefghijklm nopqrstuvwxyz
66      abcdefghijklm nopqrstuvwxyz
67      abcdefghijklm nopqrstuvwxyz
68      abcdefghijklm nopqrstuvwxyz
69      abcdefghijklm nopqrstuvwxyz
70    </p>
71  </main>
72
73  <footer>
74    <p>
75      This is information about my web page
76    </p>
77  </footer>
78</body>
79
80</html>