Skip to content

Commit

Permalink
Basic HTML framework set up
Browse files Browse the repository at this point in the history
  • Loading branch information
@clodo980
clodo980 committed Oct 17, 2023
0 parents commit 8d1694c
Show file tree
Hide file tree
Showing 11 changed files with 408 additions and 0 deletions.
19 changes: 19 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" id="fontlink" href="https://fonts.googleapis.com/css?family=Gabarito">
<title>La ricetta del successo!</title>
</head>
<body>
<h1>Odin Recipes</h1>
<ul>
<li><a href="recipes/Dumplingsoup.html">Beef and Mushroom Dumplings in Broth</a></li>
<li><a href="recipes/Gambas_al_Ajillo.html">Gambas al Ajillo (Spanish Garlic Shrimp)</a></li>
<li><a href="recipes/Jambalaya.html">Sausage & Shrimp Jambalaya</a></li>
<li><a href="recipes/Tostadas.html">Shredded Beef Tostadas</a></li>
</ul>
</body>
</html>
95 changes: 95 additions & 0 deletions recipes/Dumplingsoup.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="recipestyles.css">
<link rel="stylesheet" id="fontlink" href="https://fonts.googleapis.com/css?family=Gabarito">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beef and Mushroom Dumplings in Broth | Sourced from allrecipes.com</title>
</head>
<body>
<main id="recipe_container">
<h1>Beef and Mushroom Dumplings in Broth</h1>
<p class="description">Get ready to dive into a bowl of comfort with our Beef and Mushroom Dumplings in Broth! These flavor-packed dumplings float on a zesty ginger-based stock, ready to take you on a gastronomical adventure. With a sprinkle of soy sauce and a garnish of fresh green onions, this dish reaches the heights of culinary bliss – and yields nearly 40 dumplings for you to enjoy!</p>
<!--ChatGPT wrote the copy, but I wrote this code. Part of the prompt: “Make puns more suitable to a yuppie millennial audience”.-->
<img id="recipe_image" src="Dumplingsoup.jpg" alt="a photo of Beef and Mushroom Dumplings in Broth">
<div class="image_description">
<p>Photo by <a href="https://www.allrecipes.com/cook/proportionalplate">Candice Walker</a> on allrecipes</p>
</div>

<div class="eggtimer">
<div class="eggtimer_const">
<p>Prep Time:
<br>45 mins
</p>
</div>
<div class="eggtimer_const">
<p>Cook Time:
<br>10 mins
</p>
</div>
<div class="eggtimer_const">
<p>Total Time:
<br>55 mins
</p>
</div>
<div class="eggtimer_const">
<p>Servings:
<br>4 servings
</p>
</div>
<div class="eggtimer_const">
<p>Yield:
<br>36 to 40 dumplings
</p>
</div>
</div>


<h2>Ingredients</h2>
<h3>Dumplings:</h3>
<ul>
<li>2 tablespoons olive oil</li>
<li>8 ounces crimini mushrooms, minced</li>
<li>2 garlic cloves, minced</li>
<li>1 pound ground beef</li>
<li>2 tablespoons grated fresh ginger</li>
<li>1 tablespoon low-sodium soy sauce</li>
<li>1/2 teaspoon freshly ground black pepper</li>
<li>4 green onions, chopped</li>
<li>36 wonton wrappers, or more as needed</li>
</ul>

<h3>Broth:</h3>
<ul>
<li>2 tablespoons olive oil, or more as needed</li>
<li>2 shallots, sliced</li>
<li>2 garlic cloves, minced</li>
<li>1 tablespoon grated fresh ginger</li>
<li>4 cups vegetable broth</li>
<li>1/4 cup soy sauce</li>
<li>1/4 teaspoon red pepper flakes (optional)</li>
</ul>
<h3>Toppings:</h3>
<ul>
<li>2 teaspoons sesame oil, or as needed</li>
<li>2 green onions, chopped, or as needed</li>
<li>1 teaspoon sesame seeds, or as needed</li>
</ul>

<h2>Directions</h2>
<ol>
<li>Heat 2 tablespoons olive oil in a large skillet over medium heat. Add mushrooms and sauté until most of the water from the mushrooms has evaporated and mushrooms are slightly golden, 8 to 10 minutes. Add garlic and cook for 1 minute, stirring frequently. Set aside to cool.</li>
<li>To make the dumpling filling, combine ground beef, ginger, soy sauce, black pepper, green onions, and the cooled mushroom mixture in a large mixing bowl. Stir to combine; set aside.</li>
<li>To make the broth, heat 2 tablespoons olive oil in a pot over medium heat. Add shallots and cook until softened and beginning to brown, about 3-4 minutes. Add ginger and garlic and cook for 1 minute, stirring frequently. Add the vegetable broth, soy sauce, and red pepper flakes, and bring to a boil, scraping the bottom of the pan as you stir. Reduce heat to low and simmer uncovered for at least 10 minutes while you shape the dumplings.</li>
<li>To assemble dumplings, place 1 tablespoon filling in the center of each wrapper. Brush the edges of wrapper with water (a spray bottle also works well to spray the edges) and fold to shape. Seal each dumpling fully, leaving no open holes. Repeat until all dumplings are filled.</li>
<li>Heat 2 tablespoons olive oil in a large skillet over medium heat. Working in batches, add dumplings to the pan in one even layer and cook uncovered until bottoms are golden, 2 to 3 minutes. Reduce heat to medium-low. Carefully add ¼ cup water and immediately cover, letting the dumplings steam until golden brown on the bottom and filling is no longer pink at the center, 5 to 7 minutes. An instant-read thermometer inserted near the center should read at least 160 degrees F (70 degrees C). Use more olive oil If the dumplings are sticking to the pan.</li>
<li>Transfer cooked dumplings to a plate; keep warm. Repeat to cook remaining dumplings.</li>
<li>To serve, place several dumplings in a shallow bowl, then pour over with a spoonful of broth</li>
</ol>

<aside> Cook's Note: There are many different ways to shape dumplings and you can use either dumpling or wonton wrappers. Be careful not to overfill the dumplings as that may cause them to burst while cooking. You can either brush the edges of the wrapper with water, or use a spray bottle to lightly spray the wrapper edges to help seal the dumpling in your chosen shape. For this recipe, I used square wonton wrappers and pinched all four corners together in the center, then sealed the seams on each side. It's an easy shape to make! </aside>
<a href="https://www.allrecipes.com/beef-and-mushroom-dumplings-in-broth-recipe-7369568">Original recipe by Jessica Vogl</a> (Updated on September 21, 2023)
</main>
</body>
</html>
Binary file added recipes/Dumplingsoup.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
66 changes: 66 additions & 0 deletions recipes/Gambas_al_Ajillo.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="recipestyles.css">
<link rel="stylesheet" id="fontlink" href="https://fonts.googleapis.com/css?family=Gabarito">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gambas al Ajillo | Sourced from allrecipes.com</title>
</head>
<body>
<main id="recipe_container">
<h1>Gambas al Ajillo</h1>
<p class="description">Any meal will be <em>en fuego</em> with this sizzling recipe for Spanish Garlic Shrimp, or as we say in Spain, <strong>Gambas al Ajillo</strong>. These flavor bombs will have your taste buds doing the flamenco, as plump shrimp dive into a pool of garlic, olive oil, and fiery smoked paprika. You'll shout <em>¡Olé!</em> with every delicious bite, and your friends will be begging for the recipe faster than they can say <em>“mas, por flavor!”</em></p>
<p class="description">So, what are you waiting for? Put on your apron and <em>¡Vamos a cocinar!</em></p>
<!--ChatGPT wrote the copy, but I wrote this code. What's that joke about turning tables?-->
<img id="recipe_image" src="Gambas_al_Ajillo.jpg" alt="a photo of Gambas al Ajillo, or Spanish Garlic Shrimp">
<div class="image_description">
<p>Photo by <a href="https://unsplash.com/@ferhadd">Farhad Ibrahimzade</a> on <a href="https://unsplash.com/photos/zZoanntnBWY">Unsplash</a></p>
</div>

<div class="eggtimer">
<div class="eggtimer_const">
<p>Prep Time:
<br>15 mins
</p>
</div>
<div class="eggtimer_const">
<p>Cook Time:
<br>5 mins
</p>
</div>
<div class="eggtimer_const">
<p>Total Time:
<br>20 mins
</p>
</div>
<div class="eggtimer_const">
<p>Servings:
<br>4
</p>
</div>
</div>


<h2>Ingredients</h2>
<ul>
<li>1 pound frozen large shrimp (21-25 count) - thawed, peeled, and deveined</li>
<li>1 teaspoon hot smoked paprika (Optional)</li>
<li>kosher salt to taste</li>
<li>4 cloves garlic</li>
<li>¼ cup extra-virgin olive oil</li>
<li>2 tablespoons dry sherry</li>
<li>1 tablespoon chopped Italian flat-leaf parsley</li>
</ul>

<h2>Directions</h2>
<ol>
<li>Place shrimp in a large bowl and season with paprika and kosher salt; mix well to coat.</li>
<li>Slice garlic into thin slices. Heat oil in a skillet over medium heat; add garlic and cook until golden, about 2 minutes. Add shrimp and increase heat to high. Toss and turn shrimp with tongs until starting to curl but still undercooked, about 2 minutes.</li>
<li>Pour in sherry. Cook, stirring continuously, until sauce comes up to a boil and shrimp is cooked through, about 1 minute more. Remove from heat. Stir in parsley.</li>
</ol>
<a href="https://www.allrecipes.com/recipe/266085/spanish-garlic-shrimp-gambas-al-ajillo/">Original recipe by Chef John</a> (Updated on July 31, 2023)

</main>
</body>
</html>
Binary file added recipes/Gambas_al_Ajillo.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
75 changes: 75 additions & 0 deletions recipes/Jambalaya.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="recipestyles.css">
<link rel="stylesheet" id="fontlink" href="https://fonts.googleapis.com/css?family=Gabarito">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sausage & Shrimp Jambalaya | Sourced from allrecipes.com</title>
</head>
<body>
<main id="recipe_container">
<h1>Sausage & Shrimp Jambalaya</h1>
<p class="description">Get ready to spice up your kitchen with our Sausage and Shrimp Jambalaya! This stew is a flavor-packed symphony of spices, succulent shrimp, and zesty sausage that'll have your taste buds dance like nobody's watching.</p>
<!--ChatGPT wrote the copy, but I wrote this code. The bot added lots of confusing historical references, and about 5 “y‘alls”.-->
<img id="recipe_image" src="Jambalaya.jpg" alt="a photo of Sausage and Shrimp Jambalaya">
<div class="image_description">
<p>Photo by <a href="https://www.istockphoto.com/portfolio/bhofack2">bhofack2</a> on <a href="https://www.istockphoto.com/photo/spicy-homemade-cajun-jambalaya-gm537314539-57774488">iStockphoto</a></p>
</div>

<div class="eggtimer">
<div class="eggtimer_const">
<p>Prep Time:
<br>15 mins
</p>
</div>
<div class="eggtimer_const">
<p>Cook Time:
<br>1 hr
</p>
</div>
<div class="eggtimer_const">
<p>Total Time:
<br>1 hr 15 mins
</p>
</div>
<div class="eggtimer_const">
<p>Servings:
<br>4
</p>
</div>
</div>


<h2>Ingredients</h2>
<ul>
<li>2 tablespoons butter</li>
<li>8 ounces andouille sausage, cut into 1/4-inch slices</li>
<li>2 tablespoons ground paprika</li>
<li>1 tablespoon ground cumin</li>
<li>½ teaspoon cayenne pepper</li>
<li>½ cup diced tomatoes</li>
<li>2 stalks celery, sliced 1/4 inch thick</li>
<li>1 large green bell pepper, diced</li>
<li>4 green onions, thinly sliced</li>
<li>1 teaspoon salt</li>
<li>1 bay leaf</li>
<li>1 cup uncooked brown rice</li>
<li>3 cups chicken stock</li>
<li>1 pound large shrimp, peeled and deveined</li>
<li>salt and ground black pepper to taste</li>
</ul>

<h2>Directions</h2>
<ol>
<li>Place butter and sausage in a large stockpot over medium heat; cook and stir until sausage begins to brown, 5 to 6 minutes.</li>
<li>Stir in paprika, cumin, and cayenne; cook for 1 minute.</li>
<li>Stir tomatoes, celery, green pepper, green onions, salt, and bay leaf into the sausage mixture.</li>
<li>Add brown rice and stir to combine. Stir in chicken stock, bring it to a simmer, then turn heat to low. Cover and cook until rice is just tender, about 45 minutes.</li>
<li>Stir in shrimp, replace lid and cook until shrimp are cooked through, about 5 minutes. Season with salt and black pepper.</li>
</ol>
<a href="https://www.allrecipes.com/recipe/220126/chef-johns-sausage-shrimp-jambalaya/">Original recipe by Chef John</a> (Updated on August 24, 2023)

</main>
</body>
</html>
Binary file added recipes/Jambalaya.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
102 changes: 102 additions & 0 deletions recipes/Tostadas.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="recipestyles.css">
<link rel="stylesheet" id="fontlink" href="https://fonts.googleapis.com/css?family=Gabarito">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shredded Beef Tostadas | Sourced from allrecipes.com</title>
</head>
<body>
<main id="recipe_container">
<h1>Shredded Beef Tostadas</h1>
<p class="description">Get ready to “taco ‘bout” our Shredded Beef Tostadas! This feast for the senses has everything: tender, seasoned beef, tasty garlic and onions, and fresh, juicy tomatoes... everything! Pile on your favorite toppings, and have a <em>fiesta</em> at any time of day!</p>
<!--ChatGPT wrote the copy, but I wrote this code. The bot previously included a “holy guacamole” and “sombrero” pun, but even I won't do that...-->
<img id="recipe_image" src="Tostadas.jpg" alt="a photo of Shredded Beef Tostadas">
<div class="image_description">
<p>Photo by <a href="https://www.istockphoto.com/portfolio/bhofack2">bhofack2</a> on <a href="https://www.istockphoto.com/photo/homemade-beef-and-cheese-tostadas-gm933856112-255768687">iStockphoto</a></p>
</div>

<div class="eggtimer">
<div class="eggtimer_const">
<p>Prep Time:
<br>20 mins
</p>
</div>
<div class="eggtimer_const">
<p>Cook Time:
<br>2 hrs 20 mins
</p>
</div>
<div class="eggtimer_const">
<p>Total Time:
<br>2 hrs 40 mins
</p>
</div>
<div class="eggtimer_const">
<p>Servings:
<br>6
</p>
</div>
<div class="eggtimer_const">
<p>Yield:
<br>6 tostadas
</p>
</div>
</div>


<h2>Ingredients</h2>
<h3>Spice Rub:</h3>
<ul>
<li>2 teaspoons chipotle chili powder, or to taste</li>
<li>1 teaspoon smoked paprika</li>
<li>1 teaspoon dried Mexican oregano</li>
<li>1 teaspoon garlic powder</li>
<li>1 teaspoon onion powder</li>
<li>½ teaspoon ground coriander</li>
<li>½ teaspoon ground cumin</li>
<li>½ teaspoon salt, or to taste</li>
<li>½ teaspoon ground black pepper, or to taste</li>
</ul>
<h3>Beef:</h3>
<ul>
<li>1 (2 pound) boneless beef chuck roast</li>
<li>1 tablespoon extra-virgin olive oil</li>
<li>½ cup chopped onion</li>
<li>1 ½ teaspoons minced fresh garlic</li>
<li>1 cup beef stock</li>
<li>1 ½ cups chopped tomatoes, divided</li>
<li>1 medium orange, juiced</li>
<li>½ medium lime, juiced</li>
</ul>
<h3>Tostadas:</h3>
<ul>
<li>6 crispy tostada shells</li>
<li>2 cups refried beans, warmed</li>
<li>2 cups shredded lettuce</li>
<li>1 ½ cups shredded Cheddar cheese</li>
<li>3 tablespoons salsa, or to taste</li>
<li>3 tablespoons sour cream, or to taste</li>
<li>3 tablespoons guacamole, or to taste</li>
<li>¼ cup chopped fresh cilantro</li>
<li>6 wedges lime</li>
</ul>
<h2>Directions</h2>
<ol>
<li>Prepare spice rub: Combine chili powder, paprika, oregano, garlic powder, onion powder, coriander, cumin, salt, and pepper in a bowl.</li>
<li>Rub 1 tablespoon of the spice rub on each side of the chuck roast. Set remaining spice rub aside for later.</li>
<li>Heat oil in a skillet over medium heat. Place seasoned roast in the hot oil and brown for 2 to 3 minutes per side. Remove to a plate and keep warm.</li>
<li>Cook onions in the same skillet, stirring frequently, until they begin to turn clear, 2 to 3 minutes. Add garlic and cook until fragrant, about 1 minute. Stir in beef stock, 1/2 cup chopped tomato, orange juice, lime juice, and remaining spice rub.</li>
<li>Return the roast back to the skillet and bring to a boil. Cover, reduce heat, and simmer gently until meat is tender and cooked through, about 2 hours. Remove meat from the skillet and transfer to a cutting board.</li>
<li>Carefully pour the skillet contents into a blender or food processor. Pulse several times, until sauce is smooth.</li>
<li>Remove the visible fat from the meat and discard. Shred the meat with two forks. Place shredded beef back into the skillet with about 3/4 cup of the pureed tomato sauce. Add more, if desired, to adjust the consistency. Refrigerate any unused tomato sauce in a sealed container for another use, if desired.</li>
<li>To assemble tostadas, spread about 1/3 cup refried beans on each tostada shell. Top with layers of shredded beef mixture, lettuce, Cheddar cheese, and reserved chopped tomatoes. Drizzle with salsa and add a dollop of sour cream and guacamole. Garnish with cilantro and serve with lime wedges.</li>
</ol>

<aside>Cook's Notes: I've included a recipe for the shredded beef, but you can use leftover roast beef that has been shredded if you prefer. You can use a shortcut from the grocery store for the refried beans, or you can make your own.</aside>
<a href="https://www.allrecipes.com/recipe/284663/shredded-beef-tostadas/">Original recipe by Bibi</a> (Updated on September 17, 2023)

</main>
</body>
</html>
Binary file added recipes/Tostadas.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 8d1694c

Please sign in to comment.