diff options
Diffstat (limited to 'static')
| -rw-r--r-- | static/about.html | 18 | ||||
| -rw-r--r-- | static/recipes/omurice.html | 12 | ||||
| -rw-r--r-- | static/recipes/overview.html | 30 | ||||
| -rw-r--r-- | static/recipes/oyakodon.html | 140 | ||||
| -rw-r--r-- | static/recipes/pizza.html | 160 | ||||
| -rw-r--r-- | static/style.css | 62 |
6 files changed, 248 insertions, 174 deletions
diff --git a/static/about.html b/static/about.html index 6e0fc82..aa8ed48 100644 --- a/static/about.html +++ b/static/about.html @@ -30,12 +30,20 @@ <h1>About this Website</h1> </div> - <main id="wrapper-center"> - <span> - This website will contain all projects related to The - Odin Project online course. - </span> + <main> + <div class="wrapper-centered"> + <span> + This website will contain all projects related to The + Odin Project online course. + </span> + </div> </main> + + <footer> + <div class="wrapper-centered"> + <p>Bottom Text</p> + </div> + </footer> </body> <script src=""></script> diff --git a/static/recipes/omurice.html b/static/recipes/omurice.html index 170c00d..2f00c83 100644 --- a/static/recipes/omurice.html +++ b/static/recipes/omurice.html @@ -31,8 +31,8 @@ <h1>My Omurice Recipe</h1> </div> - <main id="wrapper-center"> - <div id="lists"> + <main class="wrapper-space"> + <div class="lists"> <h2>Description</h2> <p> This is my take on Omurice, a popular japanese chicken fried rice dish with an omelette on top. @@ -103,11 +103,17 @@ </ol> </div> - <div id="img-wrapper"> + <div class="img-wrapper img-right"> <img src="../../images/omurice.jpg" alt="An image of oyakodon."> </div> </main> + + <footer> + <div class="wrapper-centered"> + <p>Bottom Text</p> + </div> + </footer> </body> <script src=""></script> diff --git a/static/recipes/overview.html b/static/recipes/overview.html index 33b0fb2..6ccf1c7 100644 --- a/static/recipes/overview.html +++ b/static/recipes/overview.html @@ -32,20 +32,24 @@ </div> <main> - <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> + <ul class="recipe-list"> + <li class="recipe-item"> + <a href="./pizza.html">Pizza</a> + </li> + <li class="recipe-item"> + <a href="./oyakodon.html">Oyakodon</a> + </li> + <li class="recipe-item"> + <a href="./omurice.html">Omurice</a> + </li> + </ul> </main> + + <footer> + <div class="wrapper-centered"> + <p>Bottom Text</p> + </div> + </footer> </body> <script src=""></script> diff --git a/static/recipes/oyakodon.html b/static/recipes/oyakodon.html index b8a24c0..a3e3ba4 100644 --- a/static/recipes/oyakodon.html +++ b/static/recipes/oyakodon.html @@ -31,75 +31,83 @@ <h1>My Oyakodon Recipe</h1> </div> - <main id="wrapper-center"> - <div id="lists"> - <h2>Description</h2> - <p> - This is my take on Oyakodon, a japanese chicken and egg rice bowl. - </p> - - <h2>Ingredients</h2> - <ul> - <li>100g Chicken Thigh</li> - <li>30g Soy Sauce</li> - <li>30g Mirin</li> - <li>30g Sake</li> - <li>100g Dashi Stock</li> - <li>Half an Onion</li> - <li>1 Spring Onion</li> - <li>Half a Bowl of Rice</li> - <li>1 Whole Egg</li> - <li>Optional: 1 Egg Yolk</li> - </ul> - - <h2>Instructions</h2> - <ol> - <li> - <p> - Cut half an onion from tip to root into strips. - Cut the chicken thigh into bite-sized pieces. - Thinly cut the spring onion as garnish for later. - </p> - </li> - <li> - <p> - Fry the chicken over medium heat until the outside is beginning to brown. - </p> - </li> - <li> - <p> - Add the soy sauce, mirin, sake and dashi stock into the pan. - At this point, also add the cut onion. - Cover with a lid and let it simmer for 5 minutes. - </p> - </li> - <li> - <p> - Lightly mix the egg in a bowl. - Add half of the egg into the pan, cover and let it simmer for half a minute. - </p> - </li> - <li> - <p> - After half a minute, add the rest of the egg and some of the spring onion.<br> - Let it simmer for an additional minute. - </p> - </li> - <li> - <p> - Pour everything in the pan over the bowl of rice. - Add the rest of the spring onion on top. - If raw eggs are safe to eat where you live, you can add an egg yolk on top. - </p> - </li> - </ol> - </div> - - <div id="img-wrapper"> - <img src="../../images/oyakodon.jpg" alt="An image of oyakodon."> + <main> + <div class="wrapper-space"> + <div class="lists"> + <h2>Description</h2> + <p> + This is my take on Oyakodon, a japanese chicken and egg rice bowl. + </p> + + <h2>Ingredients</h2> + <ul> + <li>100g Chicken Thigh</li> + <li>30g Soy Sauce</li> + <li>30g Mirin</li> + <li>30g Sake</li> + <li>100g Dashi Stock</li> + <li>Half an Onion</li> + <li>1 Spring Onion</li> + <li>Half a Bowl of Rice</li> + <li>1 Whole Egg</li> + <li>Optional: 1 Egg Yolk</li> + </ul> + + <h2>Instructions</h2> + <ol> + <li> + <p> + Cut half an onion from tip to root into strips. + Cut the chicken thigh into bite-sized pieces. + Thinly cut the spring onion as garnish for later. + </p> + </li> + <li> + <p> + Fry the chicken over medium heat until the outside is beginning to brown. + </p> + </li> + <li> + <p> + Add the soy sauce, mirin, sake and dashi stock into the pan. + At this point, also add the cut onion. + Cover with a lid and let it simmer for 5 minutes. + </p> + </li> + <li> + <p> + Lightly mix the egg in a bowl. + Add half of the egg into the pan, cover and let it simmer for half a minute. + </p> + </li> + <li> + <p> + After half a minute, add the rest of the egg and some of the spring onion.<br> + Let it simmer for an additional minute. + </p> + </li> + <li> + <p> + Pour everything in the pan over the bowl of rice. + Add the rest of the spring onion on top. + If raw eggs are safe to eat where you live, you can add an egg yolk on top. + </p> + </li> + </ol> + </div> + + <div class="img-wrapper img-right"> + <img src="../../images/oyakodon.jpg" alt="An image of oyakodon."> + </div> </div> </main> + + <footer> + <div class="wrapper-centered"> + <p>Bottom Text</p> + </div> + </footer> </body> <script src=""></script> diff --git a/static/recipes/pizza.html b/static/recipes/pizza.html index 663ecd2..b503959 100644 --- a/static/recipes/pizza.html +++ b/static/recipes/pizza.html @@ -31,85 +31,93 @@ <h1>My Pizza Recipe</h1> </div> - <main id="wrapper-center"> - <div id="lists"> - <h2>Description</h2> - <p> - This is my take on a classic margherita pizza.<br> - We will make our own pizza dough and sauce! - </p> - - <h2>Ingredients</h2> - <ul> - <li>500g Flour</li> - <li>325g Water</li> - <li>10g Salt</li> - <li>7g Active Dry Yeast</li> - <li>400g Canned Tomatoes (~1 Can)</li> - <li>100g Mozzarella</li> - </ul> - - <h2>Instructions</h2> - <ol> - <li> - <p> - Mix all dry ingredients in a bowl. - </p> - </li> - <li> - <p> - Add the water and knead the dough until no dry flour is left. - </p> - </li> - <li> - <p> - Cover the bowl and let it rest a couple hours, until doubled in size. - You can also let it rest overnight. - </p> - </li> - <li> - <p> - Once the dough has finished resting, take it out of the bowl onto your working surface - and knead it a bit more, about 2-3 minutes. - </p> - </li> - <li> - <p> - Divide the dough into four equally sized portions. Take one portion and lightly cover it - with a damp towel to let it rest for an additional hour. - You can put the other portions into the fridge or freezer. - While the dough is resting one final time, preheat your oven as high as it can go.<br> - </p> - </li> - <li> - <p> - Meanwhile, it's time to make the pizza sauce. - For this, I usually just use canned tomatoes. You can use - your hands to crush them or puree it with a stick blender. - Add some salt and pepper to your liking. - If you're feeling fancy, you can add oregano and thyme, - or any other additional seasonings you like.<br> - This makes enough sauce for multiple pizzas. You can also use it for pasta. - </p> - </li> - <li> - <p> - Stretch out the dough as big as you can. - Put the sauce and mozzarella on top. I like to rip the mozzarella by hand. - Then the pizza goes into the oven for about 7-10 minutes, - depending how hot you oven can go. - Once the mozzarella starts bubbling and is a nice golden - brown it's done! - </p> - </li> - </ol> - </div> - - <div id="img-wrapper"> - <img src="../../images/pizza.jpg" alt="An image of a classic margherita pizza."> + <main> + <div class="wrapper-space"> + <div class="lists"> + <h2>Description</h2> + <p> + This is my take on a classic margherita pizza.<br> + We will make our own pizza dough and sauce! + </p> + + <h2>Ingredients</h2> + <ul> + <li>500g Flour</li> + <li>325g Water</li> + <li>10g Salt</li> + <li>7g Active Dry Yeast</li> + <li>400g Canned Tomatoes (~1 Can)</li> + <li>100g Mozzarella</li> + </ul> + + <h2>Instructions</h2> + <ol> + <li> + <p> + Mix all dry ingredients in a bowl. + </p> + </li> + <li> + <p> + Add the water and knead the dough until no dry flour is left. + </p> + </li> + <li> + <p> + Cover the bowl and let it rest a couple hours, until doubled in size. + You can also let it rest overnight. + </p> + </li> + <li> + <p> + Once the dough has finished resting, take it out of the bowl onto your working surface + and knead it a bit more, about 2-3 minutes. + </p> + </li> + <li> + <p> + Divide the dough into four equally sized portions. Take one portion and lightly cover it + with a damp towel to let it rest for an additional hour. + You can put the other portions into the fridge or freezer. + While the dough is resting one final time, preheat your oven as high as it can go.<br> + </p> + </li> + <li> + <p> + Meanwhile, it's time to make the pizza sauce. + For this, I usually just use canned tomatoes. You can use + your hands to crush them or puree it with a stick blender. + Add some salt and pepper to your liking. + If you're feeling fancy, you can add oregano and thyme, + or any other additional seasonings you like.<br> + This makes enough sauce for multiple pizzas. You can also use it for pasta. + </p> + </li> + <li> + <p> + Stretch out the dough as big as you can. + Put the sauce and mozzarella on top. I like to rip the mozzarella by hand. + Then the pizza goes into the oven for about 7-10 minutes, + depending how hot you oven can go. + Once the mozzarella starts bubbling and is a nice golden + brown it's done! + </p> + </li> + </ol> + </div> + + <div class="img-wrapper img-right"> + <img src="../../images/pizza.jpg" alt="An image of a classic margherita pizza."> + </div> </div> </main> + + <footer> + <div class="wrapper-centered"> + <p>Bottom Text</p> + </div> + </footer> </body> <script src=""></script> diff --git a/static/style.css b/static/style.css index 9824d4c..2b3aef9 100644 --- a/static/style.css +++ b/static/style.css @@ -13,18 +13,42 @@ body { header { text-align: center; - color: white; } main { min-height: 100%; } -#wrapper-center { +.top-gap { + padding-top: 3%; +} + +.bottom-gap { + padding-bottom: 3%; +} + +.wrapper-space, +.wrapper-centered, +.flex-stack { display: flex; +} + +.wrapper-space { + justify-content: space-between; +} + +.wrapper-centered { justify-content: center; } +.align-center { + align-items: center; +} + +.flex-stack { + flex-direction: column; +} + main, #headerwrapper { background-color: #fafafa; color: black; @@ -36,6 +60,10 @@ main, #headerwrapper { padding-bottom: 2%; } +.text-centered { + text-align: center; +} + nav ul { margin: 0; padding: 0; @@ -53,31 +81,43 @@ nav a { color: white; } -#lists { +footer p { + display: block; + color: white; + margin: 7px; +} + +.lists { margin-left: 2%; flex: 1; } -#img-wrapper { - text-align: right; +img { + max-width: 100%; +} + +.img-wrapper { margin-right: 2%; margin-left: 2%; - flex: 1; + flex: 0.5; } -img { - max-height: 400px; - max-width: 400px; +.img-right { + text-align: right; } -#recipe-list { +.recipe-list { float: left; padding-left: 38%; list-style-type: none; } -#recipe-item { +.recipe-item { padding: 5px; font-size: 26px; } + +div.flex-stack.top-gap { + background-color: #a0a0a0; +} |