diff options
| -rw-r--r-- | index.html | 7 | ||||
| -rw-r--r-- | static/about.html | 7 | ||||
| -rw-r--r-- | static/recipes/omurice.html | 8 | ||||
| -rw-r--r-- | static/recipes/overview.html | 29 | ||||
| -rw-r--r-- | static/recipes/oyakodon.html | 8 | ||||
| -rw-r--r-- | static/recipes/pizza.html | 8 | ||||
| -rw-r--r-- | static/style.css | 38 |
7 files changed, 73 insertions, 32 deletions
@@ -26,12 +26,15 @@ </ul> </nav> + </header> + + <div id="headerwrapper"> <h1>Hello, World!</h1> <p>... and everyone in it.</p> <a href="https://wiby.me/surprise">Link to a random website</a> - </header> + </div> - <main> + <main id="wrapper-center"> <div id="lists"> <h3>favourite foods:</h3> <ul> diff --git a/static/about.html b/static/about.html index c5750c7..5608c25 100644 --- a/static/about.html +++ b/static/about.html @@ -24,14 +24,17 @@ </li> </ul> </nav> + </header> + + <div id="headerwrapper"> <h1>About this Website</h1> + </div> + <main id="wrapper-center"> <p> This website will contain all projects related to The Odin Project online course. </p> - </header> - <main> </main> </body> <script src=""></script> diff --git a/static/recipes/omurice.html b/static/recipes/omurice.html index 73d983c..35eace2 100644 --- a/static/recipes/omurice.html +++ b/static/recipes/omurice.html @@ -25,9 +25,13 @@ </ul> </nav> - <h1>My Omurice Recipe</h1> </header> - <main> + + <div id="headerwrapper"> + <h1>My Omurice Recipe</h1> + </div> + + <main id="wrapper-center"> <div id="lists"> <h2>Description</h2> <p> diff --git a/static/recipes/overview.html b/static/recipes/overview.html index d28bf84..33b0fb2 100644 --- a/static/recipes/overview.html +++ b/static/recipes/overview.html @@ -25,21 +25,26 @@ </ul> </nav> - <h1>My Top Recipes!</h1> </header> + <div id="headerwrapper"> + <h1>My Top Recipes!</h1> + </div> + <main> - <ul id="recipe-list"> - <li id="recipe-item"> - <a href="./pizza.html">Pizza</a> - </li> - <li id="recipe-item"> - <a href="./oyakodon.html">Oyakodon</a> - </li> - <li id="recipe-item"> - <a href="./omurice.html">Omurice</a> - </li> - </ul> + <div> + <ul id="recipe-list"> + <li id="recipe-item"> + <a href="./pizza.html">Pizza</a> + </li> + <li id="recipe-item"> + <a href="./oyakodon.html">Oyakodon</a> + </li> + <li id="recipe-item"> + <a href="./omurice.html">Omurice</a> + </li> + </ul> + </div> </main> </body> <script src=""></script> diff --git a/static/recipes/oyakodon.html b/static/recipes/oyakodon.html index f041473..08d0a61 100644 --- a/static/recipes/oyakodon.html +++ b/static/recipes/oyakodon.html @@ -25,9 +25,13 @@ </ul> </nav> - <h1>My Oyakodon Recipe</h1> </header> - <main> + + <div id="headerwrapper"> + <h1>My Oyakodon Recipe</h1> + </div> + + <main id="wrapper-center"> <div id="lists"> <h2>Description</h2> <p> diff --git a/static/recipes/pizza.html b/static/recipes/pizza.html index 3141a6f..b64afca 100644 --- a/static/recipes/pizza.html +++ b/static/recipes/pizza.html @@ -25,9 +25,13 @@ </ul> </nav> - <h1>My Pizza Recipe</h1> </header> - <main> + + <div id="headerwrapper"> + <h1>My Pizza Recipe</h1> + </div> + + <main id="wrapper-center"> <div id="lists"> <h2>Description</h2> <p> diff --git a/static/style.css b/static/style.css index f0c3d2a..a20a529 100644 --- a/static/style.css +++ b/static/style.css @@ -1,23 +1,39 @@ html { background: black; font-family: 'Open Sans', sans-serif; + height: 100%; } body { - color: white; + margin-left: 10%; + max-width: 80%; + min-width: 70%; + height: 100%; } header { text-align: center; + color: white; } main { - padding-top: 2%; + min-height: 100%; } -nav ul li a { - color: #f1f3f3; - font-size: smaller; +#wrapper-center { + display: flex; + justify-content: center; +} + +main, #headerwrapper { + background-color: #fafafa; + color: black; +} + +#headerwrapper { + text-align: center; + padding-top: 0.1%; + padding-bottom: 2%; } nav ul { @@ -34,19 +50,20 @@ nav a { text-decoration: none; display: block; padding: 5px 6px 5px 6px; - color: black; + color: white; } #lists { float: left; - padding-left: 5%; + margin-right: 5%; max-width: 45%; } #img-wrapper { float: right; - padding-right: 5%; - max-width: 40%; + padding-top: 2%; + margin-left: 8%; + max-width: 30%; } img { @@ -55,7 +72,8 @@ img { } #recipe-list { - padding-left: 30%; + float: left; + padding-left: 38%; list-style-type: none; } |