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

Add styles

Browse source
This commit is contained in:
lolabird 2023-12-31 21:01:39 -07:00
commit b425212fcf
5 changed files with 251 additions and 214 deletions
Download patch file Download diff file Expand all files Collapse all files

52
index.html
View file

@ -9,31 +9,33 @@
<link href='https://fonts.googleapis.com/css?family=Assistant' rel='stylesheet'>
</head>
<body>
<h1>Odin Recipes</h1>
<ul class="recipe-menu">
<li><a href="index.html">Home</a></li>
<li><a href="./recipes/greenbean-casserole.html"> Green Bean Casserole</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>
</ul>
<div class="content">
<p>
Welcome to my first Odin project! The purpose of this site is to
simply showcase what I have learned in the course thus far. So far, that includes
HTML and some basic CSS mainly around margins, padding, borders, fonts,
two dimensions, display types, and probably some others I'm forgetting at the moment.
</p>
<p>
This is currently the second iteration of the site, where we showcase some of the
aforementioned CSS skills we learned. I'm not sure yet if we'll be revisiting this
project or not. If we don't, I may come back to it when I have more interesting
ideas for a design for the site.
</p>
<p>
In the mean time, make yourself at home and have a look around! And then check black
at a later date to see if anything's changed. See you then!
</p>
</div>
<main>
<h1>Odin Recipes</h1>
<ul class="recipe-menu">
<li><a href="index.html">Home</a></li>
<li><a href="./recipes/greenbean-casserole.html"> Green Bean Casserole</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>
</ul>
<div class="content">
<p>
Welcome to my first Odin project! The purpose of this site is to
simply showcase what I have learned in the course thus far. So far, that includes
HTML and some basic CSS mainly around margins, padding, borders, fonts,
two dimensions, display types, and probably some others I'm forgetting at the moment.
</p>
<p>
This is currently the second iteration of the site, where we showcase some of the
aforementioned CSS skills we learned. I'm not sure yet if we'll be revisiting this
project or not. If we don't, I may come back to it when I have more interesting
ideas for a design for the site.
</p>
<p>
In the mean time, make yourself at home and have a look around! And then check black
at a later date to see if anything's changed. See you then!
</p>
</div>
</main>
<footer>
Created by <a href="https://andrindie.com" target="_blank" rel="noreferrer">Octavia Nichols</a>

128
recipes/avocado-toast.html
View file

@ -9,73 +9,75 @@
<link href='https://fonts.googleapis.com/css?family=Assistant' rel='stylesheet'>
</head>
<body>
<h1>Odin Recipes</h1>
<main>
<h1>Odin Recipes</h1>
<ul class="recipe-menu">
<li><a href="../index.html">Home</a></li>
<li><a href="./greenbean-casserole.html"> Green Bean Casserole</a></li>
<li><a href="./avocado-toast.html">Avocado Toast</a></li>
<li><a href="./stove-popped-popcorn.html">Stove Popped Popcorn</a></li>
</ul>
<div class="content">
<h2>Avocado Toast</h2>
<img src="../images/avocado-toast.jpg" alt="Avocado Toast">
<h3>Description</h3>
<p>
Yes, I'm a millenial and yes I love me some avocado toast.
Bite me. :p What I love even more, though, is just how versatile
this dish is.
</p>
<p>
Avocado toast can be as simple or as complex as you want it to be.
Sometimes, I just want just the bread and avacado. Other times, I'm
gormet it up, taking as much as a half hour to get my toast ready!
</p>
<p>This recipe will focus on the basics, but you can do up your avocado
toast however you want to.
</p>
<p>And with that in mind, let's get to it!</p>
<h3>Ingredients</h3>
<ul>
<li>One medium to large avocado</li>
<li>A couple slices of nice quality bread</li>
<li>Butter or olive oil</li>
<li>Optional toppings and condiments of your choosing</li>
<ul class="recipe-menu">
<li><a href="../index.html">Home</a></li>
<li><a href="./greenbean-casserole.html"> Green Bean Casserole</a></li>
<li><a href="./avocado-toast.html">Avocado Toast</a></li>
<li><a href="./stove-popped-popcorn.html">Stove Popped Popcorn</a></li>
</ul>
<h3>Steps</h3>
<ol>
<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>Toast it. Now you have a few options here:
<ul>
<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>
</ul>
Personally, I prefer letting my bread toast on the stove on medium heat.
</li>
<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, 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. ;)
Also, <strong>keep an eye your toast!</strong> Toasty bread has a
way of sneaking up on you.
</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.
I personally enjoy fresh greens, roasted tomato, cheese, mustard,
and sometimes the occasional fried egg and hot sauce - but that's
getting into sandwich territory lol.
</li>
</ol>
<div class="content">
<h2>Avocado Toast</h2>
<img src="../images/avocado-toast.jpg" alt="Avocado Toast">
<h3>Description</h3>
<p>
Yes, I'm a millenial and yes I love me some avocado toast.
Bite me. :p What I love even more, though, is just how versatile
this dish is.
</p>
<p>
Avocado toast can be as simple or as complex as you want it to be.
Sometimes, I just want just the bread and avacado. Other times, I'm
gormet it up, taking as much as a half hour to get my toast ready!
</p>
<p>This recipe will focus on the basics, but you can do up your avocado
toast however you want to.
</p>
<p>And with that in mind, let's get to it!</p>
<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!
</p>
</div>
<h3>Ingredients</h3>
<ul>
<li>One medium to large avocado</li>
<li>A couple slices of nice quality bread</li>
<li>Butter or olive oil</li>
<li>Optional toppings and condiments of your choosing</li>
</ul>
<h3>Steps</h3>
<ol>
<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>Toast it. Now you have a few options here:
<ul>
<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>
</ul>
Personally, I prefer letting my bread toast on the stove on medium heat.
</li>
<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, 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. ;)
Also, <strong>keep an eye your toast!</strong> Toasty bread has a
way of sneaking up on you.
</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.
I personally enjoy fresh greens, roasted tomato, cheese, mustard,
and sometimes the occasional fried egg and hot sauce - but that's
getting into sandwich territory lol.
</li>
</ol>
<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!
</p>
</div>
</main>
<footer>
Created by <a href="https://andrindie.com" target="_blank" rel="noreferrer">Octavia Nichols</a>

112
recipes/greenbean-casserole.html
View file

@ -9,65 +9,67 @@
<link href='https://fonts.googleapis.com/css?family=Assistant' rel='stylesheet'>
</head>
<body>
<h1>Odin Recipes</h1>
<main>
<h1>Odin Recipes</h1>
<ul class="recipe-menu">
<li><a href="../index.html">Home</a></li>
<li><a href="./greenbean-casserole.html"> Green Bean Casserole</a></li>
<li><a href="./avocado-toast.html">Avocado Toast</a></li>
<li><a href="./stove-popped-popcorn.html">Stove Popped Popcorn</a></li>
</ul>
<div class="content">
<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>
<ul>
<li>One large can of cream of mushroom soup</li>
<li>Four small cans of green beans</li>
<li>Two to four packages of crispy french onions</li>
<li>Cheddar cheese</li>
<ul class="recipe-menu">
<li><a href="../index.html">Home</a></li>
<li><a href="./greenbean-casserole.html"> Green Bean Casserole</a></li>
<li><a href="./avocado-toast.html">Avocado Toast</a></li>
<li><a href="./stove-popped-popcorn.html">Stove Popped Popcorn</a></li>
</ul>
<h3>Steps</h3>
<ol>
<li>Preheat your oven to 350 degrees.</li>
<li>Carefully open all the cans</li>
<li>Drain three all the canned green beans, keeping 1-2 cans of the
water from the green beans in reserve.
</li>
<li>In a large baking pan or oven safe skillet, add the cream of
mushroom soup and green beans. Mix evenly.
</li>
<li>Take half of the french onions and mix them in with green beans.</li>
<li>Take the reserved water and <em>gradually</em> mix it in with
the ingredients in the pan to your desired thickness. However,
be careful not to make it too runny or you run the risk of the
casserole not holding together well.
</li>
<li>Place the dish in the oven for 15-20 minutes.</li>
<li>Shred the cheese.</li>
<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>
<div class="content">
<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>
<ul>
<li>One large can of cream of mushroom soup</li>
<li>Four small cans of green beans</li>
<li>Two to four packages of crispy french onions</li>
<li>Cheddar cheese</li>
</ul>
<h3>Steps</h3>
<ol>
<li>Preheat your oven to 350 degrees.</li>
<li>Carefully open all the cans</li>
<li>Drain three all the canned green beans, keeping 1-2 cans of the
water from the green beans in reserve.
</li>
<li>In a large baking pan or oven safe skillet, add the cream of
mushroom soup and green beans. Mix evenly.
</li>
<li>Take half of the french onions and mix them in with green beans.</li>
<li>Take the reserved water and <em>gradually</em> mix it in with
the ingredients in the pan to your desired thickness. However,
be careful not to make it too runny or you run the risk of the
casserole not holding together well.
</li>
<li>Place the dish in the oven for 15-20 minutes.</li>
<li>Shred the cheese.</li>
<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>
</main>
<footer>
Created by <a href="https://andrindie.com" target="_blank" rel="noreferrer">Octavia Nichols</a>
for <a href="https://www.theodinproject.com/lessons/foundations-rock-paper-scissors" target="_blank" rel="noreferrer">The Odin Project</a>.

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

@ -9,59 +9,61 @@
<link href='https://fonts.googleapis.com/css?family=Assistant' rel='stylesheet'>
</head>
<body>
<h1>Odin Recipes</h1>
<main>
<h1>Odin Recipes</h1>
<ul class="recipe-menu">
<li><a href="../index.html">Home</a></li>
<li><a href="./greenbean-casserole.html"> Green Bean Casserole</a></li>
<li><a href="./avocado-toast.html">Avocado Toast</a></li>
<li><a href="./stove-popped-popcorn.html">Stove Popped Popcorn</a></li>
</ul>
<div class="content">
<h2>Stove Popped Popcorn</h2>
<img src="../images/popcorn.jpg" alt="Stove Popped Popcorn">
<ul class="recipe-menu">
<li><a href="../index.html">Home</a></li>
<li><a href="./greenbean-casserole.html"> Green Bean Casserole</a></li>
<li><a href="./avocado-toast.html">Avocado Toast</a></li>
<li><a href="./stove-popped-popcorn.html">Stove Popped Popcorn</a></li>
</ul>
<div class="content">
<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>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>
<ul>
<li>Popcorn kernals</li>
<li>Vegetable oil</li>
<li>Salt and/or other preferred seasonings</li>
</ul>
<h3>Ingredients</h3>
<ul>
<li>Popcorn kernals</li>
<li>Vegetable oil</li>
<li>Salt and/or other preferred seasonings</li>
</ul>
<h3>Steps</h3>
<ol>
<li>Cover the bottom of a small pot generously with vegetable oil.</li>
<li>Put the oil on medium heat and add 3-4 kernals to the pan.</li>
<li>Puts some kernals in 1/4 to 1/2 measuring cup, depending on the size
of the pot and the amount of oil in the pot for easy acacess.
</li>
<li>Chill or catch up on some stuff and listen out for the sound of a
kernal popping.
</li>
<li>Once you hear a kernal pop, return to the stove and pour a
<em>single layer</em> of kernals in the pot. The kernals should be
<em>barely</em> emmersed in the oil.
</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 off 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>
<h3>Steps</h3>
<ol>
<li>Cover the bottom of a small pot generously with vegetable oil.</li>
<li>Put the oil on medium heat and add 3-4 kernals to the pan.</li>
<li>Puts some kernals in 1/4 to 1/2 measuring cup, depending on the size
of the pot and the amount of oil in the pot for easy acacess.
</li>
<li>Chill or catch up on some stuff and listen out for the sound of a
kernal popping.
</li>
<li>Once you hear a kernal pop, return to the stove and pour a
<em>single layer</em> of kernals in the pot. The kernals should be
<em>barely</em> emmersed in the oil.
</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 off 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>
</main>
<footer>
Created by <a href="https://andrindie.com" target="_blank" rel="noreferrer">Octavia Nichols</a>

83
style.css
View file

@ -3,49 +3,31 @@ html {
}
body{
margin: 0;
display: flex;
flex-direction: column;
}
main {
max-width: 66%;
margin: 0 auto;
padding: 10px 85px;
min-height: 100vh;
background-color: rgb(220, 248, 220, .85);
flex: 1
}
img{
img {
width:100%;
height: auto;
}
a{
text-decoration: none;
color: green;
}
.recipe-menu a {
font-weight: bold;
}
h1, h2, h3, h4, h5, h6, .recipe-menu{
font-family: 'Alegreya Sans SC', sans-serif;
}
/* h3, h4, h5, h6 {
color: green;
} */
h1{
font-size: 50px;
}
h2{
font-size: 40px;
}
h3{
font-size: 30px;
}
.recipe-menu{
padding: 0;
border: 5px solid green;
text-align: center;
list-style-type: none;
margin: auto;
background-color: rgba(224, 205, 191, 0.5);
}
.recipe-menu li{
@ -54,7 +36,54 @@ h3{
font-size: 20px;
}
.recipe-menu a {
text-decoration: none;
font-weight: bold;
color: green;
}
.recipe-menu a:hover, .recipe-menu a:focus {
color: #39291c;
text-decoration: underline;
}
h1, h2, h3, h4, h5, h6, .recipe-menu {
font-family: 'Alegreya Sans SC', sans-serif;
color: #39291c;
}
h1 {
font-size: 50px;
}
h2 {
font-size: 40px;
}
h3 {
font-size: 30px;
}
.content{
font-family: 'Assistant', sans-serif;
font-size: 20px;
}
footer {
color: #eee;
text-align: center;
position: relative;
bottom: 0;
left: 0;
background-color: rgba(17, 17, 17, 0.85);
flex: 0 0 auto;
margin: 0;
width: 100%;
padding: 10px 0;
}
footer a {
color: #e0cdbf;
}
footer a:hover, footer a:focus {
text-decoration: none;
}