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 and edit link structure

Browse source
This commit is contained in:
lolabird 2023-08-18 18:59:24 -06:00
commit debfc9bc03
6 changed files with 78 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

@ -7,4 +7,6 @@ In this particular project, I will showcase some HTML skills I've learned:
- lists
- links and images
This is going to be a very bare bones project, at least to start, until I get further along. Apparently, some CSS will be added later down the road, so stay tuned!
This is going to be a very bare bones project, at least to start, until I get further along.
Alright! CSS has been added!

4
index.html
View file

@ -4,10 +4,12 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recipes</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Odin Recipes</h1>
<ul>
<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>

19
recipes/avocado-toast.html
View file

@ -4,13 +4,22 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recipes - Avocado Toast</title>
<link rel="stylesheet" href="../style.css" />
</head>
<body>
<h1>Avocado Toast</h1>
<p><a href="../index.html">Return Home</a></p>
<h1>Odin Recipes</h1>
<h2>Avocado Toast</h2>
<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>
<img src="../images/avocado-toast.jpg" alt="Avocado Toast">
<h2>Description</h2>
<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
@ -26,7 +35,7 @@
</p>
<p>And with that in mind, let's get to it!</p>
<h2>Ingredients</h2>
<h3>Ingredients</h3>
<ul>
<li>One medium to large avocado</li>
<li>A couple slices of nice quality bread</li>
@ -34,7 +43,7 @@
<li>Optional toppings and condiments of your choosing</li>
</ul>
<h2>Steps</h2>
<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>

19
recipes/greenbean-casserole.html
View file

@ -4,13 +4,22 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recipes - Green Bean Casserole</title>
<link rel="stylesheet" href="../style.css" />
</head>
<body>
<h1>Green Bean Casserole</h1>
<p><a href="../index.html">Return Home</a></p>
<h1>Odin Recipes</h1>
<h2>Green Bean Casserole</h2>
<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>
<img src="../images/GreenBeanCasserole.jpg" alt="Green Bean Casserole">
<h2>Description</h2>
<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!
@ -19,7 +28,7 @@
</p>
<p>So without further ado, let's dive in to the recipe!</p>
<h2>Ingredients</h2>
<h3>Ingredients</h3>
<ul>
<li>One large can of cream of mushroom soup</li>
<li>Four small cans of green beans</li>
@ -27,7 +36,7 @@
<li>Cheddar cheese</li>
</ul>
<h2>Steps</h2>
<h3>Steps</h3>
<ol>
<li>Preheat your oven to 350 degrees.</li>
<li>Carefully open all the cans</li>

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

@ -4,13 +4,23 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recipes - Stove Popped Popcorn</title>
<link rel="stylesheet" href="../style.css" />
</head>
<body>
<h1>Stove Popped Popcorn</h1>
<p><a href="../index.html">Return Home</a></p>
<h1>Odin Recipes</h1>
<h2>Stove Popped Popcorn</h2>
<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>
<img src="../images/popcorn.jpg" alt="Stove Popped Popcorn">
<h2>Description</h2>
<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
@ -21,14 +31,14 @@
</p>
<p>So let's dive in!</p>
<h2>Ingredients</h2>
<h3>Ingredients</h3>
<ul>
<li>Popcorn kernals</li>
<li>Vegetable oil</li>
<li>Salt and/or other preferred seasonings</li>
</ul>
<h2>Steps</h2>
<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>

29
style.css Normal file
View file

@ -0,0 +1,29 @@
body{
max-width: 60%;
margin: auto;
background-color: rgb(203, 247, 203);
}
img{
width:100%;
height: auto;
}
ul{
list-style-type: none;
}
a{
text-decoration: none;
}
.recipe-menu{
padding: 0;
border: 5px solid green;
text-align: center;
}
.recipe-menu li{
margin: 8px;
display: inline-block;
}