diff options
| -rw-r--r-- | index.html | 31 | ||||
| -rw-r--r-- | links.html | 27 | ||||
| -rw-r--r-- | style.css | 21 |
3 files changed, 41 insertions, 38 deletions
@@ -7,24 +7,25 @@ <meta charset="utf-8"> </head> <body> - <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> + <div class="flex-container"> + <div> + <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> + </footer> + </main> + </div> + <div> <ul> <li><h3><a href="links.html">links</a></h3></li> </ul> - </nav> + </div> </div> </body> </html> @@ -7,21 +7,24 @@ <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> + <div class="flex-container"> + <div> + <main> + <header> + <h1>Some useful links</h1> + </header> + + <h2><a href="https://git.pwyazha.ru">git</a></h2> + + <footer> + </footer> + </main> + </div> + <div> <ul> <li><h3><a href="index.html">Home</a></h3></li> </ul> - </nav> + </div> </div> </body> </html> @@ -3,7 +3,7 @@ body { max-width: 650px; line-height: 1.6; font-size: 18px; - padding: 0 10px; + padding: 0; color: #404040; } @@ -11,14 +11,6 @@ h1, h2, h3 { line-height: 1.2; } -#flex { - display: flex; -} - -main { - order: 1; -} - img { width: 100%; } @@ -28,6 +20,13 @@ footer { padding: 30px 0; } -nav { - order: 2; +ul { + list-style-type: none; + margin: 0; + padding: 0; +} + +.flex-container { + display: flex; + justify-content: space-evenly; } |