diff options
| -rw-r--r-- | en.html | 19 | ||||
| -rw-r--r-- | index.html | 15 | ||||
| -rw-r--r-- | stylesheet.css | 41 |
3 files changed, 59 insertions, 16 deletions
@@ -5,7 +5,7 @@ <META CHARSET="utf-8"> <META NAME="viewport" CONTENT="width=device-width, initial-scale=1"> - <META NAME="theme-color" CONTENT="#4e3246"> + <META NAME="theme-color" CONTENT="#f1e9df"> <META NAME="color-scheme" CONTENT="only light"> <LINK REL="stylesheet" HREF="reset.css"> @@ -14,8 +14,19 @@ <LINK REL="author licence" HREF="#about"> </HEAD> <BODY> - <H1>Max</H1> - <P>Welcome to Deez Nuts!</P> - <A LANG="fr" CLASS="button" HREF="index.html">Go back to La France! <-</A> + <HEADER> + <H1>Max</H1> + <nav> + <aside> + <A LANG="fr" HREF="index.html">Go back to La France!</A> + </aside> + <ul> + <li>Foo + <li>Bar + <li>Baz + </ul> + </nav> + </HEADER> + <P>Welcome to Deez Nuts!</P> </BODY> </HTML> @@ -14,8 +14,19 @@ <LINK REL="author licence" HREF="#about"> </HEAD> <BODY> - <H1>Max</H1> + <HEADER> + <H1>Max</H1> + <nav> + <aside> + <A LANG="en" CLASS="button" HREF="en.html">For the English document</A> + </aside> + <ul> + <li>Foo + <li>Bar + <li>Baz + </ul> + </nav> + </HEADER> <P>Pain, beurre et confiture</P> - <A LANG="en" CLASS="button" HREF="en.html">-> For the English document</A> </BODY> </HTML> diff --git a/stylesheet.css b/stylesheet.css index 269ad1c..2ee2f51 100644 --- a/stylesheet.css +++ b/stylesheet.css @@ -1,23 +1,44 @@ body { - background-color: #4e3246; - color: #9b8816; + background-color: #f1e9df; + color: #89a06b; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; font-family: 'comic_monobold', ui-monospace, monospace; font-size: 1.4rem; } +header { + margin: 30px; + padding: 0 18%; + border-bottom: 1px solid #a89a8e; +} h1 { - font-size: 4rem; + text-align: center; + font-size: 3.2rem; + letter-spacing: 0.5rem; +} +nav { + margin: 10px; } -.button { - position: absolute; - top: 20px; - right: 40px; +nav aside { + zoom: 60%; +} +nav aside a { + text-align: center; font-family: 'comic_monobold', ui-monospace, monospace; font-size: 1.2rem; display: inline-block; padding: 10px 20px; - background-color: #5d3a00; - color: #f9ea9a; + background-color: #a89a8e; + color: black; text-decoration: none; - border: 1px solid #f98948; + border: none; border-radius: 5px; } +nav ul { + margin-top: 10px; + display: flex; + justify-content: space-around; + font-size: 1rem; +} |