diff options
| author | pryazha <pryadeiniv@mail.ru> | 2025-01-02 01:42:01 +0500 |
|---|---|---|
| committer | pryazha <pryadeiniv@mail.ru> | 2025-01-02 01:42:01 +0500 |
| commit | 1b1976a337c8e2923b998e8cb9764818251ab563 (patch) | |
| tree | 7fce507343ecf69e38d2e5c6efb2070805e13f61 | |
| parent | 132c4d7bc3e3238cfdf8401a75963e0a58bb9420 (diff) | |
change layout and navigation
| -rw-r--r-- | index.html | 29 | ||||
| -rw-r--r-- | links.html | 27 | ||||
| -rw-r--r-- | style.css | 12 |
3 files changed, 58 insertions, 10 deletions
@@ -7,15 +7,24 @@ <meta charset="utf-8"> </head> <body> - <header> - <h1>Hello, this is <em>my</em> website.</h1> - Thanks for stopping by! - </header> - <h2>Well...</h2> - <p>nya~</p> - <img src="images/maxwell.gif" /> - <footer> - <a href="https://git.pwyazha.ru">git</a> - </footer> + <div id="flex"> + <main> + <header> + <h1>Hello, this is my website.</h1> + Thanks for stopping by! + </header> + <h2>Well...</h2> + <p>nya~</p> + <img src="images/maxwell.gif"/> + <footer> + <p>This is a footer.<p> + </footer> + </main> + <nav> + <ul> + <li><h3><a href="links.html">links</a></h3></li> + </ul> + </nav> + </div> </body> </html> diff --git a/links.html b/links.html new file mode 100644 index 0000000..b83ba1c --- /dev/null +++ b/links.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>pwyazha</title> + <link rel="icon" type="image/gif" href="images/maxwell.gif"> + <link rel="stylesheet" type="text/css" href="style.css"> + <meta charset="utf-8"> + </head> + <body> + <div id="flex"> + <main> + <header> + <h1>Some useful links</h1> + </header> + <h2><a href="https://git.pwyazha.ru">git</a></h2> + <footer> + <p>This is a footer.</p> + </footer> + </main> + <nav> + <ul> + <li><h3><a href="index.html">Home</a></h3></li> + </ul> + </nav> + </div> + </body> +</html> @@ -11,6 +11,14 @@ h1, h2, h3 { line-height: 1.2; } +#flex { + display: flex; +} + +main { + order: 1; +} + img { width: 100%; } @@ -19,3 +27,7 @@ footer { text-align: center; padding: 30px 0; } + +nav { + order: 2; +} |