diff options
| -rw-r--r-- | images/img1.jpg | bin | 0 -> 485785 bytes | |||
| -rw-r--r-- | images/img2.jpg | bin | 0 -> 424396 bytes | |||
| -rw-r--r-- | images/img3.png | bin | 0 -> 248959 bytes | |||
| -rw-r--r-- | images/img4.jpg | bin | 0 -> 103290 bytes | |||
| -rw-r--r-- | index.html | 128 | ||||
| -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 |
11 files changed, 332 insertions, 218 deletions
diff --git a/images/img1.jpg b/images/img1.jpg Binary files differnew file mode 100644 index 0000000..67d267f --- /dev/null +++ b/images/img1.jpg diff --git a/images/img2.jpg b/images/img2.jpg Binary files differnew file mode 100644 index 0000000..a467266 --- /dev/null +++ b/images/img2.jpg diff --git a/images/img3.png b/images/img3.png Binary files differnew file mode 100644 index 0000000..6d7dc68 --- /dev/null +++ b/images/img3.png diff --git a/images/img4.jpg b/images/img4.jpg Binary files differnew file mode 100644 index 0000000..3488709 --- /dev/null +++ b/images/img4.jpg @@ -34,54 +34,94 @@ <a href="https://wiby.me/surprise" target="_blank">Link to a random website (opens in new tab)</a> </div> - <main id="wrapper-center"> - <div id="lists"> - <h3>favourite foods:</h3> - <ul> - <li>steak</li> - <li>mapo tofu</li> - <li>jägerschnitzel</li> - <li>schweinshaxe</li> - <li>teriyaki salmon</li> - </ul> - - <br> - - <h3>favourite video games:</h3> - <ol> - <li>Monster Hunter 4 Ultimate</li> - <li>Fallout: New Vegas</li> - <li>The Legend of Zelda: Majora's Mask</li> - <li>Devil May Cry 3</li> - <li>Final Fantasy X</li> - </ol> - - <br> - - <h3>favourite anime:</h3> - <ol> - <li>Serial Experiments: Lain</li> - <li>Detective Conan</li> - <li>Ergo Proxy</li> - <li>Monogatari Series</li> - <li>Tengen Toppa Gurren Lagann</li> - </ol> + <main> + <div class="wrapper-space"> + <div class="lists"> + <h3>favourite foods:</h3> + <ul> + <li>steak</li> + <li>mapo tofu</li> + <li>jägerschnitzel</li> + <li>schweinshaxe</li> + <li>teriyaki salmon</li> + </ul> + + <br> + + <h3>favourite video games:</h3> + <ol> + <li>Monster Hunter 4 Ultimate</li> + <li>Fallout: New Vegas</li> + <li>The Legend of Zelda: Majora's Mask</li> + <li>Devil May Cry 3</li> + <li>Final Fantasy X</li> + </ol> + </div> + + <div class="lists"> + <h3>favourite anime:</h3> + <ol> + <li>Serial Experiments: Lain</li> + <li>Detective Conan</li> + <li>Ergo Proxy</li> + <li>Monogatari Series</li> + <li>Tengen Toppa Gurren Lagann</li> + </ol> + + <br> + + <h3>favourite manga:</h3> + <ol> + <li>Yu Yu Hakusho</li> + <li>Detective Conan</li> + <li>Baki</li> + <li>Killing Stalking</li> + <li>Jojo's Bizzare Adventure</li> + </ol> + </div> + + <div class="img-wrapper img-right"> + <img src="./images/big-dick.jpg" alt="This is a picture of Konata from Lucky Star with a hoodie that says 'big dick is back in town'"> + </div> + </div> - <br> + <div class="flex-stack top-gap bottom-gap"> + + <div class="wrapper-centered"> + <h2> + Some super cool pictures. + </h2> + </div> - <h3>favourite manga:</h3> - <ol> - <li>Yu Yu Hakusho</li> - <li>Detective Conan</li> - <li>Baki</li> - <li>Killing Stalking</li> - <li>Jojo's Bizzare Adventure</li> - </ol> - </div> - <div id="img-wrapper"> - <img src="./images/big-dick.jpg" alt="This is a picture of Konata from Lucky Star with a hoodie that says 'big dick is back in town'"> + <div class="wrapper-space top-gap align-center"> + <div class="img-wrapper flex-stack"> + <img src="./images/img1.jpg" alt="Picture of Johnny Silverhand"> + <span class="text-centered">Johnny</span> + </div> + + <div class="img-wrapper flex-stack"> + <img src="./images/img2.jpg" alt="Picture of a tired Konata, together with Kagami and Tsukihi"> + <span class="text-centered">Sleepyhead</span> + </div> + + <div class="img-wrapper flex-stack"> + <img src="./images/img3.png" alt="Picture of Kaiki Deishu from Monogatari Series"> + <span class="text-centered">His smile and optimism: GONE</span> + </div> + + <div class="img-wrapper flex-stack"> + <img src="./images/img4.jpg" alt="Picture of Araragi Koyomi and Oshino Shinobu from Monogatari Series"> + <span class="text-centered">Donuts</span> + </div> + </div> </div> </main> + + <footer> + <div class="wrapper-centered"> + <p>Bottom Text</p> + </div> + </footer> </body> <script src=""></script> 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; +} |
