diff options
| -rw-r--r-- | index.html | 20 | ||||
| -rw-r--r-- | recipes/cheesyCreamyRamen.html | 84 | ||||
| -rw-r--r-- | recipes/eggTomatoRice.html | 68 | ||||
| -rw-r--r-- | recipes/pesto.html | 95 | ||||
| -rw-r--r-- | styles.css | 36 |
5 files changed, 177 insertions, 126 deletions
@@ -7,13 +7,17 @@ <title>Document</title> </head> <body> - <h1> - Odin Recipes - </h1> - <ul> - <li><a href="recipes/cheesyCreamyRamen.html">Cheesy Creamy Ramen</a></li> - <li><a href="recipes/pesto.html">Pesto</a></li> - <li><a href="recipes/eggTomatoRice.html">Egg Tomato Rice</a></li> - </ul> + <div id="container"> + <h1 class="title"> + Odin Recipes + </h1> + <div class="content"> + <ul> + <li><a href="recipes/cheesyCreamyRamen.html">Cheesy Creamy Ramen</a></li> + <li><a href="recipes/pesto.html">Pesto</a></li> + <li><a href="recipes/eggTomatoRice.html">Egg Tomato Rice</a></li> + </ul> + </div> + </div> </body> </html>
\ No newline at end of file diff --git a/recipes/cheesyCreamyRamen.html b/recipes/cheesyCreamyRamen.html index 6a8e337..96f00ab 100644 --- a/recipes/cheesyCreamyRamen.html +++ b/recipes/cheesyCreamyRamen.html @@ -7,44 +7,50 @@ <title>Document</title> </head> <body> - <h1> - Cheesy Creamy Ramen - </h1> - <img src="cheesyCreamyRamen.png"> - <h3> - Ramen cooked with milk, cheese, and butter to create a very rich, creamy meal. - </h3> - <p> - Package ramen cooked with butter, milk, ramen sauce pack, creates a rich sauce. - Folding cheese into the cooked noodles creates a cheese furnace - Chili oil, scallions, and egg and different flavors and depth. - </p> - <h3>Ingredients</h3> - <ul> - <li>Ramen noodles</li> - <li>Ramen sauce pack</li> - <li>Butter</li> - <li>Milk</li> - <li>Melty Cheese</li> - <li>Chili oil</li> - <li>Scallions</li> - <li>Soft boiled egg</li> - </ul> - <h3>Instructions</h3> - <ol> - <li>Boil noodles for a minute then drain</li> - <li>Hunk of butter in a pan on medium</li> - <li>Add some milk (no more than half a cup)</li> - <li>Throw in the sauce pack</li> - <li>Throw in those noodles (don't throw them too hard)</li> - <li>Add the noodles back and and cook until thicc</li> - <li>Put into bowl</li> - <li>Add melty cheese and fold over into cheese furnace</li> - <li>Add chili oil (oil squeezed from a bowl of beef chili)</li> - <li>Add rapscallions</li> - <li>Add egg</li> - <li>Injure mouth with spiky chopsticks</li> - </ol> - <a href="../index.html">Home</a> + <div id="container"> + <h1 class="title"> + Cheesy Creamy Ramen + </h1> + <div class="content"> + <img src="cheesyCreamyRamen.png"> + <h3 class="header"> + Ramen cooked with milk, cheese, and butter to create a very rich, creamy meal. + </h3> + <p> + Package ramen cooked with butter, milk, ramen sauce pack, creates a rich sauce. + Folding cheese into the cooked noodles creates a cheese furnace + Chili oil, scallions, and egg and different flavors and depth. + </p> + <h3 class="header">Ingredients</h3> + <ul> + <li>Ramen noodles</li> + <li>Ramen sauce pack</li> + <li>Butter</li> + <li>Milk</li> + <li>Melty Cheese</li> + <li>Chili oil</li> + <li>Scallions</li> + <li>Soft boiled egg</li> + </ul> + <h3 class="header">Instructions</h3> + <ol> + <li>Boil noodles for a minute then drain</li> + <li>Hunk of butter in a pan on medium</li> + <li>Add some milk (no more than half a cup)</li> + <li>Throw in the sauce pack</li> + <li>Throw in those noodles (don't throw them too hard)</li> + <li>Add the noodles back and and cook until thicc</li> + <li>Put into bowl</li> + <li>Add melty cheese and fold over into cheese furnace</li> + <li>Add chili oil (oil squeezed from a bowl of beef chili)</li> + <li>Add rapscallions</li> + <li>Add egg</li> + <li>Injure mouth with spiky chopsticks</li> + </ol> + </div> + <footer> + <a href="../index.html">Home</a> + </footer> + </div> </body> </html>
\ No newline at end of file diff --git a/recipes/eggTomatoRice.html b/recipes/eggTomatoRice.html index ea4162a..1400693 100644 --- a/recipes/eggTomatoRice.html +++ b/recipes/eggTomatoRice.html @@ -7,36 +7,42 @@ <title>Document</title> </head> <body> - <h1> - Egg Tomato Rice - </h1> - <img src="eggTomatoRice.jpg"> - <h3> - Fried rice with egg and Tomato - </h3> - <p> - Freshly cooked rice stir fried with an egg and some cherry - tomatoes, a delicious meal with some sweet and sour from - the tomatoes. - </p> - <h3>Ingredients</h3> - <ul> - <li>Butter</li> - <li>1 cup Rice</li> - <li>1 Egg</li> - <li>1 cup Cherry tomatoes</li> - </ul> - <h3>Instructions</h3> - <ol> - <li>Cook rice (Rice cooker or pot)</li> - <li>Hunk of butter in a pan on medium</li> - <li>Add rice</li> - <li>Stir until hot</li> - <li>Throw in egg (don't throw it too hard)</li> - <li>Cook until egg is almost done</li> - <li>Add tomatoes and bury them (want them to sweat and wrinkle)</li> - <li>Serve</li> - </ol> - <a href="../index.html">Home</a> + <div id="container"> + <h1> + Egg Tomato Rice + </h1> + <div class="content"> + <img src="eggTomatoRice.jpg"> + <h3> + Fried rice with egg and Tomato + </h3> + <p> + Freshly cooked rice stir fried with an egg and some cherry + tomatoes, a delicious meal with some sweet and sour from + the tomatoes. + </p> + <h3>Ingredients</h3> + <ul> + <li>Butter</li> + <li>1 cup Rice</li> + <li>1 Egg</li> + <li>1 cup Cherry tomatoes</li> + </ul> + <h3>Instructions</h3> + <ol> + <li>Cook rice (Rice cooker or pot)</li> + <li>Hunk of butter in a pan on medium</li> + <li>Add rice</li> + <li>Stir until hot</li> + <li>Throw in egg (don't throw it too hard)</li> + <li>Cook until egg is almost done</li> + <li>Add tomatoes and bury them (want them to sweat and wrinkle)</li> + <li>Serve</li> + </ol> + </div> + <footer> + <a href="../index.html">Home</a> + </footer> + </div> </body> </html>
\ No newline at end of file diff --git a/recipes/pesto.html b/recipes/pesto.html index 791f528..6734a50 100644 --- a/recipes/pesto.html +++ b/recipes/pesto.html @@ -7,50 +7,55 @@ <title>Document</title> </head> <body> - <h1> - Pesto - </h1> - <img src="pesto.jpg"> - <h3> - Pesto is one of my favorite condiments to keep on hand. Try - these easy, fun pesto recipe variations to brighten pasta, - salads, roasted veggies & more! - </h3> - <p> - One of my favorite things about summer is the bounty of fresh - herbs that are just outside my doorstep. Fresh herbs make any - meal instantly more flavorful and beautiful. My favorite thing - to do with all of those fresh herbs (aside from sprinkle them - on everything) is to make pesto! It’s especially great for lazy - summertime cooking. I like to dollop it on grilled vegetables, - pasta, spaghetti squash, salads, eggs, toasted bread, pizza, - sandwiches… you get the idea. With just a few easy steps, it - makes anything an instant tasty meal, whether you feel like - cooking or not. - </p> - <h3>Ingredients</h3> - <ul> - <li>½ cup toasted pine nuts</li> - <li>2 tablespoons fresh lemon juice</li> - <li>1 small garlic clove</li> - <li>¼ teaspoon sea salt</li> - <li>freshly ground black pepper</li> - <li>2 cups basil leaves</li> - <li>¼ cup extra-virgin olive oil, plus more for a smoother - pesto</li> - <li>¼ cup freshly grated Parmesan cheese, optional</li> - </ul> - <h3>Instructions</h3> - <ol> - <li>In a food processor, combine the pine nuts, lemon juice, - garlic, salt, and pepper and pulse until well chopped. - <li>Add the basil and pulse until combined. - <li>With the food processor running, drizzle in the olive - oil and pulse until combined. Add the Parmesan cheese, - if using, and pulse to briefly combine. For a smoother - pesto, add more olive oil.</li> - </ol> - - <a href="../index.html">Home</a> + <div id="container"> + <h1> + Pesto + </h1> + <div class="content"> + <img src="pesto.jpg"> + <h3> + Pesto is one of my favorite condiments to keep on hand. Try + these easy, fun pesto recipe variations to brighten pasta, + salads, roasted veggies & more! + </h3> + <p> + One of my favorite things about summer is the bounty of fresh + herbs that are just outside my doorstep. Fresh herbs make any + meal instantly more flavorful and beautiful. My favorite thing + to do with all of those fresh herbs (aside from sprinkle them + on everything) is to make pesto! It’s especially great for lazy + summertime cooking. I like to dollop it on grilled vegetables, + pasta, spaghetti squash, salads, eggs, toasted bread, pizza, + sandwiches… you get the idea. With just a few easy steps, it + makes anything an instant tasty meal, whether you feel like + cooking or not. + </p> + <h3>Ingredients</h3> + <ul> + <li>½ cup toasted pine nuts</li> + <li>2 tablespoons fresh lemon juice</li> + <li>1 small garlic clove</li> + <li>¼ teaspoon sea salt</li> + <li>freshly ground black pepper</li> + <li>2 cups basil leaves</li> + <li>¼ cup extra-virgin olive oil, plus more for a smoother + pesto</li> + <li>¼ cup freshly grated Parmesan cheese, optional</li> + </ul> + <h3>Instructions</h3> + <ol> + <li>In a food processor, combine the pine nuts, lemon juice, + garlic, salt, and pepper and pulse until well chopped. + <li>Add the basil and pulse until combined. + <li>With the food processor running, drizzle in the olive + oil and pulse until combined. Add the Parmesan cheese, + if using, and pulse to briefly combine. For a smoother + pesto, add more olive oil.</li> + </ol> + </div> + <footer> + <a href="../index.html">Home</a> + </footer> + </div> </body> </html>
\ No newline at end of file @@ -16,7 +16,7 @@ --text-color: white; --border: 2px solid rgb(34, 34, 34); --arrows: url('arrow.png'); - --img-size: 150px; + --img-size: 250px; } html, @@ -32,13 +32,43 @@ body { background-attachment: fixed; } -h3, p, ul, ol { +#container, +.topbar img { + max-width: 850px; + margin: 0 auto; +} + +h1, +.title { + margin: 50px; +} + +h3, +.header { + margin-top: 50px; +} + +.content { background-color: var(--background); + border: var(--border); + margin: 40px; + padding: 10px; + width: 600px; + height: auto; } img { - width: 500px; + width: var(--img-size); height: auto; + margin-left: 175px; +} + +footer { + border: var(--border); + height: 25px; + margin-top: var(--content-spacing); + background-color: var(--background); + text-align: center; } a { |