dan/TOP-Recipes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add css

Browse Source 
Make html prettier
This commit is contained in:
Dan
2024-09-25 13:54:50 -04:00
parent 596834adcb
commit 8a284ccd7d
6 changed files with 228 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@@ -3,14 +3,19 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Odin Recipes</title> <title>Odin Recipes</title>
</head> </head>
<body> <body>
<div class="title">
<h1>Odin Recipes</h1> <h1>Odin Recipes</h1>
</div>
<div class="recipe-list">
<ul> <ul>
<li><a href="./odin-recipes/italian-sausage-peppers-and-onions.html">Italian Sausage Peppers and Sausage</a></li> <li><a href="./odin-recipes/italian-sausage-peppers-and-onions.html">Italian Sausage Peppers and Sausage</a></li>
<li><a href="./odin-recipes/congee.html">Congee</a></li> <li><a href="./odin-recipes/congee.html">Congee</a></li>
<li><a href="./odin-recipes/mulled-wine.html">Mulled Wine</a></li> <li><a href="./odin-recipes/mulled-wine.html">Mulled Wine</a></li>
</ul> </ul>
</div>
</body> </body>
</html> </html>

18
odin-recipes/congee.html
View File

@@ -3,15 +3,24 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../style.css">
<title>Congee</title> <title>Congee</title>
</head> </head>
<body> <body>
<div class="title">
<h1>Congee</h1> <h1>Congee</h1>
<img src="../images/congee.webp"> </div>
<img class="mainphoto" src="../images/congee.webp">
<br> <br>
<div class="desc">
Congee (粥 or 稀飯) is a classic Chinese breakfast dish. It is also a staple in many other countries, including Burma, Indonesia, Japan, and even parts of Europe. Congee (粥 or 稀飯) is a classic Chinese breakfast dish. It is also a staple in many other countries, including Burma, Indonesia, Japan, and even parts of Europe.
Congee is essentially a rice porridge made by boiling rice in a great deal of water until it breaks down into a pudding-like consistency. Congee is essentially a rice porridge made by boiling rice in a great deal of water until it breaks down into a pudding-like consistency.
<br>
</div>
<hr>
<div class="ingredients">
<h2>Ingredients</h2> <h2>Ingredients</h2>
<ul> <ul>
<li>3/4 cup long-grain rice</li> <li>3/4 cup long-grain rice</li>
@@ -28,8 +37,10 @@
<li>Soft-boiled egg, optional</li> <li>Soft-boiled egg, optional</li>
<li>Chopped peanuts, optional</li> <li>Chopped peanuts, optional</li>
</ul> </ul>
</div>
<br> <br>
<h2>Steps</h2> <div class="steps">
<h2 class="notes">Steps</h2>
<h3>Method 1</h3> <h3>Method 1</h3>
<ol> <ol>
<li>Rinse and wash the rice and soak it in water for 30 minutes; then drain the water.</li> <li>Rinse and wash the rice and soak it in water for 30 minutes; then drain the water.</li>
@@ -54,5 +65,6 @@
<li>Bring it to a boil again, lower the heat to medium, and cook for 15 minutes.</li> <li>Bring it to a boil again, lower the heat to medium, and cook for 15 minutes.</li>
<li>Turn off the heat and cover with the lid; let sit for 15 minutes before seasoning and adding your choice of toppings.</li> <li>Turn off the heat and cover with the lid; let sit for 15 minutes before seasoning and adding your choice of toppings.</li>
</ol> </ol>
</div>
</body> </body>
</html> </html>

13
odin-recipes/italian-sausage-peppers-and-onions.html
View File

@@ -3,14 +3,20 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../style.css">
<title>Italian Sausage Peppers and Onions</title> <title>Italian Sausage Peppers and Onions</title>
</head> </head>
<body> <body>
<div class="title">
<h1>Italian Sausage Peppers and Onions</h1> <h1>Italian Sausage Peppers and Onions</h1>
<img src="../images/italian-sausage-peppers-and-onions.webp"> </div>
<img class="mainphoto" src="../images/italian-sausage-peppers-and-onions.webp">
<br> <br>
<div class="desc">
This simple and delicious one-pan sausage and peppers recipe has been used in our family for years and years now. Serve in a roll, or use as a topping for pizza or pasta. For an extra kick, try using 1/2 sweet Italian sausage and 1/2 hot sausage! This simple and delicious one-pan sausage and peppers recipe has been used in our family for years and years now. Serve in a roll, or use as a topping for pizza or pasta. For an extra kick, try using 1/2 sweet Italian sausage and 1/2 hot sausage!
<br> </div>
<hr>
<div class="ingredients">
<h2>Ingredients</h2> <h2>Ingredients</h2>
<ul> <ul>
<li><b>Italian Sausage:</b> Sweet Italian sausage is perfect for this top-rated recipe. To turn up the heat a bit, try using half hot Italian sausage.</li> <li><b>Italian Sausage:</b> Sweet Italian sausage is perfect for this top-rated recipe. To turn up the heat a bit, try using half hot Italian sausage.</li>
@@ -21,12 +27,15 @@
<li><b>Spices and Seasonings:</b> This sausage and peppers recipe is simply seasoned with dried basil and dried oregano.</li> <li><b>Spices and Seasonings:</b> This sausage and peppers recipe is simply seasoned with dried basil and dried oregano.</li>
<li><b>Wine:</b> Opt for a dry white wine such as pinot grigio or sauvignon blanc. If you don't have any wine on hand, reviewers say they've had success substituting with chicken broth or beer.</li> <li><b>Wine:</b> Opt for a dry white wine such as pinot grigio or sauvignon blanc. If you don't have any wine on hand, reviewers say they've had success substituting with chicken broth or beer.</li>
</ul> </ul>
</div>
<br> <br>
<div class="steps">
<h2>Steps</h2> <h2>Steps</h2>
<ol> <ol>
<li>Cook sausage in a large skillet over medium heat until brown on all sides, 5 to 7 minutes. Remove from skillet, and slice.</li> <li>Cook sausage in a large skillet over medium heat until brown on all sides, 5 to 7 minutes. Remove from skillet, and slice.</li>
<li>Melt butter in the same skillet. Stir in onions and garlic, and cook 2 to 3 minutes. Mix in bell peppers, season with basil and oregano, and stir in 1/4 cup wine. Continue to cook and stir until peppers and onions are tender, 5 to 7 minutes.</li> <li>Melt butter in the same skillet. Stir in onions and garlic, and cook 2 to 3 minutes. Mix in bell peppers, season with basil and oregano, and stir in 1/4 cup wine. Continue to cook and stir until peppers and onions are tender, 5 to 7 minutes.</li>
<li>Return sausage slices to the skillet. Reduce heat to low, cover, and simmer 15 minutes, or until sausage is heated through, adding more wine if needed.</li> <li>Return sausage slices to the skillet. Reduce heat to low, cover, and simmer 15 minutes, or until sausage is heated through, adding more wine if needed.</li>
</ol> </ol>
</div>
</body> </body>
</html> </html>

26
odin-recipes/mulled-wine.html
View File

@@ -3,23 +3,27 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../style.css">
<title>Mulled Wine</title> <title>Mulled Wine</title>
</head> </head>
<body> <body>
<div class="title">
<h1>Mulled Wine</h1> <h1>Mulled Wine</h1>
<img src="../images/mulledwine.avif" width="350"> </div>
<img class="mainphoto" src="../images/mulledwine.avif" width="350">
<br> <br>
<div class="desc">
A classic holiday drink, mulled wine is the warming, boozy beverage we love to cozy up to as soon as the weather starts to grow cold. Our classic recipe uses red wine, A classic holiday drink, mulled wine is the warming, boozy beverage we love to cozy up to as soon as the weather starts to grow cold. Our classic recipe uses red wine,
traditional warming spices, and brandy to create the perfect holiday drink to serve a crowd (or just yourself, no judgment here!). With very little effort and less than 30 minutes, traditional warming spices, and brandy to create the perfect holiday drink to serve a crowd (or just yourself, no judgment here!). With very little effort and less than 30 minutes,
you'll have the coziest winter drink on your hands—here's how to perfect it: you'll have the coziest winter drink on your hands—here's how to perfect it:
<br> </div>
<hr>
<div class="notes">
<h3>What is mulled wine?</h3> <h3>What is mulled wine?</h3>
Mulled wine is created by simmering red wine with a variety of warming spices, orange slices, brandy, and honey for around 10 minutes, until warm and combined. This long-standing drink originally dates back to ancient Roman times, where they would heat their wine with spices to keep them warm in the winter cold. Heated and spiced wine has now evolved throughout time to include different medleys of flavoring, including ginger, pepper, cardamom, and even herbs. Mulled wine is created by simmering red wine with a variety of warming spices, orange slices, brandy, and honey for around 10 minutes, until warm and combined. This long-standing drink originally dates back to ancient Roman times, where they would heat their wine with spices to keep them warm in the winter cold. Heated and spiced wine has now evolved throughout time to include different medleys of flavoring, including ginger, pepper, cardamom, and even herbs.
<br>
<h3>The best wine for mulled wine:</h3> <h3>The best wine for mulled wine:</h3>
Personally, we like using dry varieties of red wine like Merlot, Malbec, or Cabernet Sauvignon. These will prevent your mulled wine from being too sweet, and will balance well with all of our added spices. No need to splurge on an expensive bottle here—choose one of your favorites that you enjoy drinking, or check out our article on all of the major types of red wines to learn more. Personally, we like using dry varieties of red wine like Merlot, Malbec, or Cabernet Sauvignon. These will prevent your mulled wine from being too sweet, and will balance well with all of our added spices. No need to splurge on an expensive bottle here—choose one of your favorites that you enjoy drinking, or check out our article on all of the major types of red wines to learn more. <h3>The ingredients for mulled wine:</h3>
<br>
<h3>The ingredients for mulled wine:</h3>
Once you’ve got your red wine ready to go, it’s time to spice things up. Here’s everything you need: Once you’ve got your red wine ready to go, it’s time to spice things up. Here’s everything you need:
<ul> <ul>
<li> <li>
@@ -33,10 +37,12 @@
will be lending plenty of boozy, spiced flavor to every sip. will be lending plenty of boozy, spiced flavor to every sip.
</li> </li>
</ul> </ul>
<br>
<h3>Storage:</h3> <h3>Storage:</h3>
This drink is best enjoyed the day of, but if you have any leftover mulled wine, let it cool completely before storing for a day in an airtight container in the refrigerator. Reheat on the stovetop when ready to enjoy. This drink is best enjoyed the day of, but if you have any leftover mulled wine, let it cool completely before storing for a day in an airtight container in the refrigerator. Reheat on the stovetop when ready to enjoy.
<br> </div>
<hr>
<div class="ingredients">
<h2>Ingredients</h2> <h2>Ingredients</h2>
<ul> <ul>
<li>1 (750-ml.) bottle red wine</li> <li>1 (750-ml.) bottle red wine</li>
@@ -47,11 +53,15 @@
<li>1/4 c. honey</li> <li>1/4 c. honey</li>
<li>1/2 c. brandy</li> <li>1/2 c. brandy</li>
</ul> </ul>
</div>
<br> <br>
<div class="steps">
<h2>Steps</h2> <h2>Steps</h2>
<ol> <ol>
<li>In a medium saucepan over medium heat, combine all ingredients. Bring to a simmer not a boil, then reduce heat to medium-low. Simmer gently over low heat for 10 minutes.</li> <li>In a medium saucepan over medium heat, combine all ingredients. Bring to a simmer not a boil, then reduce heat to medium-low. Simmer gently over low heat for 10 minutes.</li>
<li>Serve warm and garnish with more citrus slices and cinnamon sticks.</li> <li>Serve warm and garnish with more citrus slices and cinnamon sticks.</li>
</ol> </ol>
</div>
</body> </body>
</html> </html>

3
odin-recipes/template.html
View File

@@ -3,10 +3,13 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../style.css">
<title>Title</title> <title>Title</title>
</head> </head>
<body> <body>
<div class="title">
<h1>Recipe Name/h1> <h1>Recipe Name/h1>
</div>
<img src="url"> <img src="url">
<br> <br>
Description Description

73
style.css Normal file
View File

@@ -0,0 +1,73 @@
* {
font-family: sans-serif;
margin-left: 25px;
margin-right: 25px;
}
hr {
margin-top: 50px;
margin-bottom: 50px;
}
.title {
text-align: center;
}
.recipe-list {
}
.recipe-list ul {
list-style-type: none;
}
.recipe-list ul li {
padding-bottom: 10px;
}
.desc {
font-style: italic;
text-align: center;
}
.ingredients h2 {
font-weight: bold;
text-decoration: underline;
margin-left: 0px;
}
.ingredients li {
padding-bottom: 10px;
margin-left: -50px;
margin-right: 0px;
}
.steps h2 {
font-weight: bold;
text-decoration: underline;
margin-left: 0px;
}
.steps li {
padding-bottom: 10px;
margin-left: -50px;
}
.ingredients li b {
margin-right: 0px;
margin-left: 0px;
}
.mainphoto {
display: block;
margin-left: auto;
margin-right: auto;
}
.notes h2, h3 {
margin-left: 0px;
}
.notes li {
margin-left: -50px;
}