Octavia/odin-recipes
Watch
1
0
Fork
You've already forked odin-recipes
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Change fonts

Browse source
This commit is contained in:
lolabird 2023-08-18 21:15:01 -06:00
commit a80987c091
5 changed files with 172 additions and 155 deletions
Download patch file Download diff file Expand all files Collapse all files

33
index.html
View file

@ -6,6 +6,7 @@
<title>Recipes</title> <title>Recipes</title>
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
<link href='https://fonts.googleapis.com/css?family=Alegreya Sans SC' rel='stylesheet'> <link href='https://fonts.googleapis.com/css?family=Alegreya Sans SC' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Assistant' rel='stylesheet'>
</head> </head>
<body> <body>
<h1>Odin Recipes</h1> <h1>Odin Recipes</h1>
@ -15,20 +16,22 @@
<li><a href="./recipes/avocado-toast.html">Avocado Toast</a></li> <li><a href="./recipes/avocado-toast.html">Avocado Toast</a></li>
<li><a href="./recipes/stove-popped-popcorn.html">Stove Popped Popcorn</a></li> <li><a href="./recipes/stove-popped-popcorn.html">Stove Popped Popcorn</a></li>
</ul> </ul>
<p> <div class="content">
Welcome to my first Odin project! The purpose of this site is to <p>
simply showcase what I have learned in the course thus far. Which is just Welcome to my first Odin project! The purpose of this site is to
some HTML stuff. So at the moment it looks a bit of a hot mess. Please excuse it lol. simply showcase what I have learned in the course thus far. Which is just
</p> some HTML stuff. So at the moment it looks a bit of a hot mess. Please excuse it lol.
<p> </p>
Accoring to the site, we should be revisiting this bare bones site <p>
after learning more CSS, so it won't look like this forever. Unless, of Accoring to the site, we should be revisiting this bare bones site
course I get shiny object syndrome, which has been known to happen, more after learning more CSS, so it won't look like this forever. Unless, of
often than I care to admit. course I get shiny object syndrome, which has been known to happen, more
</p> often than I care to admit.
<p> </p>
At any rate, make yourself at home and have a look around! And then we'll see <p>
if in few weeks' or months' time if I've continued with the project. At any rate, make yourself at home and have a look around! And then we'll see
</p> if in few weeks' or months' time if I've continued with the project.
</p>
</div>
</body> </body>
</html> </html>

109
recipes/avocado-toast.html
View file

@ -6,6 +6,7 @@
<title>Recipes - Avocado Toast</title> <title>Recipes - Avocado Toast</title>
<link rel="stylesheet" href="../style.css" /> <link rel="stylesheet" href="../style.css" />
<link href='https://fonts.googleapis.com/css?family=Alegreya Sans SC' rel='stylesheet'> <link href='https://fonts.googleapis.com/css?family=Alegreya Sans SC' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Assistant' rel='stylesheet'>
</head> </head>
<body> <body>
<h1>Odin Recipes</h1> <h1>Odin Recipes</h1>
@ -17,61 +18,63 @@
<li><a href="./stove-popped-popcorn.html">Stove Popped Popcorn</a></li> <li><a href="./stove-popped-popcorn.html">Stove Popped Popcorn</a></li>
</ul> </ul>
<h2>Avocado Toast</h2> <div class="content">
<img src="../images/avocado-toast.jpg" alt="Avocado Toast"> <h2>Avocado Toast</h2>
<img src="../images/avocado-toast.jpg" alt="Avocado Toast">
<h3>Description</h3>
<p> <h3>Description</h3>
Yes, I'm a millenial and yes I love me some avocado toast. <p>
Bite me. :p What I love even more, though, is just how versatile Yes, I'm a millenial and yes I love me some avocado toast.
this dish is. Bite me. :p What I love even more, though, is just how versatile
</p> this dish is.
<p> </p>
Avocado toast can be as simple or as complex as you want it to be. <p>
Sometimes, I just want just the bread and avacado. Other times, I'm Avocado toast can be as simple or as complex as you want it to be.
gormet it up, taking as much as a half hour to get my toast ready! Sometimes, I just want just the bread and avacado. Other times, I'm
</p> gormet it up, taking as much as a half hour to get my toast ready!
<p>This recipe will focus on the basics, but you can do up your avocado </p>
toast however you want to. <p>This recipe will focus on the basics, but you can do up your avocado
</p> toast however you want to.
<p>And with that in mind, let's get to it!</p> </p>
<p>And with that in mind, let's get to it!</p>
<h3>Ingredients</h3> <h3>Ingredients</h3>
<ul> <ul>
<li>One medium to large avocado</li> <li>One medium to large avocado</li>
<li>A couple slices of nice quality bread</li> <li>A couple slices of nice quality bread</li>
<li>Butter or olive oil</li> <li>Butter or olive oil</li>
<li>Optional toppings and condiments of your choosing</li> <li>Optional toppings and condiments of your choosing</li>
</ul> </ul>
<h3>Steps</h3> <h3>Steps</h3>
<ol> <ol>
<li>Heat up some butter or olive oil in a pan.</li> <li>Heat up some butter or olive oil in a pan.</li>
<li>Soak up that melted butter or oil with the bread.</li> <li>Soak up that melted butter or oil with the bread.</li>
<li>Toast it. Now you have a few options here: <li>Toast it. Now you have a few options here:
<ul> <ul>
<li>You can leave it in the pan and let it toast that way, or/li> <li>You can leave it in the pan and let it toast that way, or/li>
<li>You can remove the bread and toast in an oven or toaster.</li> <li>You can remove the bread and toast in an oven or toaster.</li>
</ul> </ul>
Personally, I prefer letting my bread toast on the stove on medium heat. Personally, I prefer letting my bread toast on the stove on medium heat.
</li> </li>
<li>While your bread toasts, slice up your avocado. I know some <li>While your bread toasts, slice up your avocado. I know some
people like to smush the avocado to hell. If you're one of those people like to smush the avocado to hell. If you're one of those
people, more power to you, but I'm not about that life. If I people, more power to you, but I'm not about that life. If I
wanted guacamole, then I'd make that... properly --- but you do you. ;) wanted guacamole, then I'd make that... properly --- but you do you. ;)
Also, <strong>keep an eye your toast!</strong> Toasty bread has a Also, <strong>keep an eye your toast!</strong> Toasty bread has a
way of sneaking up on you. way of sneaking up on you.
</li> </li>
<li>Add the avocado to your toasty bread and enjoy! <em>Ooorr...</em></li> <li>Add the avocado to your toasty bread and enjoy! <em>Ooorr...</em></li>
<li>Gourmet it up and add some of your favorite toppings to it. <li>Gourmet it up and add some of your favorite toppings to it.
I personally enjoy fresh greens, roasted tomato, cheese, mustard, I personally enjoy fresh greens, roasted tomato, cheese, mustard,
and sometimes the occasional fried egg and hot sauce - but that's and sometimes the occasional fried egg and hot sauce - but that's
getting into sandwich territory lol. getting into sandwich territory lol.
</li> </li>
</ol> </ol>
<p>Anyway, I have blabbed enough. Go off and enjoy your avocado toast my <p>Anyway, I have blabbed enough. Go off and enjoy your avocado toast my
fellow "entitled" millenial! I know I'm going to enjoy mine! fellow "entitled" millenial! I know I'm going to enjoy mine!
</p> </p>
</div>
</body> </body>
</html> </html>

96
recipes/greenbean-casserole.html
View file

@ -5,7 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recipes - Green Bean Casserole</title> <title>Recipes - Green Bean Casserole</title>
<link rel="stylesheet" href="../style.css" /> <link rel="stylesheet" href="../style.css" />
<link href='https://fonts.googleapis.com/css?family=Alegreya Sans SC' rel='stylesheet'> <link href='https://fonts.googleapis.com/css?family=Alegreya Sans SC' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Assistant' rel='stylesheet'>
</head> </head>
<body> <body>
<h1>Odin Recipes</h1> <h1>Odin Recipes</h1>
@ -16,52 +17,55 @@
<li><a href="./avocado-toast.html">Avocado Toast</a></li> <li><a href="./avocado-toast.html">Avocado Toast</a></li>
<li><a href="./stove-popped-popcorn.html">Stove Popped Popcorn</a></li> <li><a href="./stove-popped-popcorn.html">Stove Popped Popcorn</a></li>
</ul> </ul>
<h2>Green Bean Casserole</h2>
<img src="../images/GreenBeanCasserole.jpg" alt="Green Bean Casserole">
<h3>Description</h3>
<p>
Green bean casserole has been a favorite of mine since childhood.
It's creamy, cheesy, crunchy, fresh and <em>super</em> easy to make!
It only takes a few minutes of prep and about 30 minutes of cook time ---
depending on your oven of course.
</p>
<p>So without further ado, let's dive in to the recipe!</p>
<h3>Ingredients</h3> <div class="content">
<ul> <h2>Green Bean Casserole</h2>
<li>One large can of cream of mushroom soup</li> <img src="../images/GreenBeanCasserole.jpg" alt="Green Bean Casserole">
<li>Four small cans of green beans</li>
<li>Two to four packages of crispy french onions</li> <h3>Description</h3>
<li>Cheddar cheese</li> <p>
</ul> Green bean casserole has been a favorite of mine since childhood.
It's creamy, cheesy, crunchy, fresh and <em>super</em> easy to make!
It only takes a few minutes of prep and about 30 minutes of cook time ---
depending on your oven of course.
</p>
<p>So without further ado, let's dive in to the recipe!</p>
<h3>Steps</h3> <h3>Ingredients</h3>
<ol> <ul>
<li>Preheat your oven to 350 degrees.</li> <li>One large can of cream of mushroom soup</li>
<li>Carefully open all the cans</li> <li>Four small cans of green beans</li>
<li>Drain three all the canned green beans, keeping 1-2 cans of the <li>Two to four packages of crispy french onions</li>
water from the green beans in reserve. <li>Cheddar cheese</li>
</li> </ul>
<li>In a large baking pan or oven safe skillet, add the cream of
mushroom soup and green beans. Mix evenly. <h3>Steps</h3>
</li> <ol>
<li>Take half of the french onions and mix them in with green beans.</li> <li>Preheat your oven to 350 degrees.</li>
<li>Take the reserved water and <em>gradually</em> mix it in with <li>Carefully open all the cans</li>
the ingredients in the pan to your desired thickness. However, <li>Drain three all the canned green beans, keeping 1-2 cans of the
be careful not to make it too runny or you run the risk of the water from the green beans in reserve.
casserole not holding together well. </li>
</li> <li>In a large baking pan or oven safe skillet, add the cream of
<li>Place the dish in the oven for 15-20 minutes.</li> mushroom soup and green beans. Mix evenly.
<li>Shred the cheese.</li> </li>
<li>After the initial bake time, add the remainder of the french onions <li>Take half of the french onions and mix them in with green beans.</li>
to the top of the dish and place it back in the oven for another 5-10 <li>Take the reserved water and <em>gradually</em> mix it in with
minutes. Watch it carefully so as not to burn the top layer of onions. the ingredients in the pan to your desired thickness. However,
</li> be careful not to make it too runny or you run the risk of the
<li>Once the bake time is over, take the casserole out of the oven and let casserole not holding together well.
it rest for about 2-5 minutes. </li>
</li> <li>Place the dish in the oven for 15-20 minutes.</li>
<li>Serve it up on a plate add cheese and enjoy!</li> <li>Shred the cheese.</li>
</ol> <li>After the initial bake time, add the remainder of the french onions
to the top of the dish and place it back in the oven for another 5-10
minutes. Watch it carefully so as not to burn the top layer of onions.
</li>
<li>Once the bake time is over, take the casserole out of the oven and let
it rest for about 2-5 minutes.
</li>
<li>Serve it up on a plate add cheese and enjoy!</li>
</ol>
</div>
</body> </body>
</html> </html>

83
recipes/stove-popped-popcorn.html
View file

@ -6,6 +6,7 @@
<title>Recipes - Stove Popped Popcorn</title> <title>Recipes - Stove Popped Popcorn</title>
<link rel="stylesheet" href="../style.css" /> <link rel="stylesheet" href="../style.css" />
<link href='https://fonts.googleapis.com/css?family=Alegreya Sans SC' rel='stylesheet'> <link href='https://fonts.googleapis.com/css?family=Alegreya Sans SC' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Assistant' rel='stylesheet'>
</head> </head>
<body> <body>
<h1>Odin Recipes</h1> <h1>Odin Recipes</h1>
@ -17,47 +18,49 @@
<li><a href="./stove-popped-popcorn.html">Stove Popped Popcorn</a></li> <li><a href="./stove-popped-popcorn.html">Stove Popped Popcorn</a></li>
</ul> </ul>
<h2>Stove Popped Popcorn</h2> <div class="content">
<img src="../images/popcorn.jpg" alt="Stove Popped Popcorn"> <h2>Stove Popped Popcorn</h2>
<img src="../images/popcorn.jpg" alt="Stove Popped Popcorn">
<h3>Description</h3>
<p>
This one is <em>extremely</em> easy! All you need is vegetable oil,
salt, and popcorn kernals. That's it! Of course if you <i>want</i> to
get fancy and add black pepper, replace the salt entirely with
your choice of popcorn seasoning, or even get extra fancy and make
caramel popcorn, that is entirely up to you. But if you're just looking
for a simple delicious popcorn, three ingredients is all you need
</p>
<p>So let's dive in!</p>
<h3>Ingredients</h3> <h3>Description</h3>
<ul> <p>
<li>Popcorn kernals</li> This one is <em>extremely</em> easy! All you need is vegetable oil,
<li>Vegetable oil</li> salt, and popcorn kernals. That's it! Of course if you <i>want</i> to
<li>Salt and/or other preferred seasonings</li> get fancy and add black pepper, replace the salt entirely with
</ul> your choice of popcorn seasoning, or even get extra fancy and make
caramel popcorn, that is entirely up to you. But if you're just looking
for a simple delicious popcorn, three ingredients is all you need
</p>
<p>So let's dive in!</p>
<h3>Steps</h3> <h3>Ingredients</h3>
<ol> <ul>
<li>Cover the bottom of a small pot generously with vegetable oil.</li> <li>Popcorn kernals</li>
<li>Put the oil on medium heat and add 3-4 kernals to the pan.</li> <li>Vegetable oil</li>
<li>Puts some kernals in 1/4 to 1/2 measuring cup, depending on the size <li>Salt and/or other preferred seasonings</li>
of the pot and the amount of oil in the pot for easy acacess. </ul>
</li>
<li>Chill or catch up on some stuff and listen out for the sound of a <h3>Steps</h3>
kernal popping. <ol>
</li> <li>Cover the bottom of a small pot generously with vegetable oil.</li>
<li>Once you hear a kernal pop, return to the stove and pour a <li>Put the oil on medium heat and add 3-4 kernals to the pan.</li>
<em>single layer</em> of kernals in the pot. The kernals should be <li>Puts some kernals in 1/4 to 1/2 measuring cup, depending on the size
<em>barely</em> emmersed in the oil. of the pot and the amount of oil in the pot for easy acacess.
</li> </li>
<li>Let the kernals pop and shake the pan regularly as they do.</li> <li>Chill or catch up on some stuff and listen out for the sound of a
<li>Once the popping starts to slow down, immediately turn of the stove, kernal popping.
remove the popcorn from the heat and carefully pour it into a </li>
serving bowl. <li>Once you hear a kernal pop, return to the stove and pour a
</li> <em>single layer</em> of kernals in the pot. The kernals should be
<li>Add your desired amount of salt and/or seasonings and enjoy!</li> <em>barely</em> emmersed in the oil.
</ol> </li>
<li>Let the kernals pop and shake the pan regularly as they do.</li>
<li>Once the popping starts to slow down, immediately turn of the stove,
remove the popcorn from the heat and carefully pour it into a
serving bowl.
</li>
<li>Add your desired amount of salt and/or seasonings and enjoy!</li>
</ol>
</div>
</body> </body>
</html> </html>

6
style.css
View file

@ -31,7 +31,6 @@ h3{
border: 5px solid green; border: 5px solid green;
text-align: center; text-align: center;
list-style-type: none; list-style-type: none;
width: fit-content;
margin: auto; margin: auto;
} }
@ -39,4 +38,9 @@ h3{
margin: 8px; margin: 8px;
display: inline-block; display: inline-block;
font-size: 20px; font-size: 20px;
}
.content{
font-family: 'Assistant', sans-serif;
font-size: 20px;
} }