Skip to content

Commit

Permalink
add css styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@listiclehub1
listiclehub1 committed Sep 1, 2024
1 parent bf28277 commit 2df80de
Show file tree
Hide file tree
Showing 5 changed files with 156 additions and 86 deletions.
50 changes: 32 additions & 18 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,36 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Odin Recipes</title>
</head>

<body>
<h1>Odin Recipes</h1>
<ul>
<li><a href="./recipes/air-fryer-french-fries.html" rel="noopener noreferrer">Air Fryer French
Fries</a></li>
<li><a href="./recipes/pasta-with-fresh-tomato-sauce.html" rel="noopener noreferrer">Pasta with
Fresh Tomato Sauce</a></li>
<li><a href="./recipes/nacho-cheese-sauce.html" rel="noopener noreferrer">Nacho Cheese
Sauce</a></li>
</ul>
</body>
<link rel="stylesheet" href="styles.css" />
</head>

</html>
<body>
<div class="recipe">
<h1>Odin Recipes</h1>
<ul>
<li>
<a
href="./recipes/air-fryer-french-fries.html"
rel="noopener noreferrer"
>Air Fryer French Fries</a
>
</li>
<li>
<a
href="./recipes/pasta-with-fresh-tomato-sauce.html"
rel="noopener noreferrer"
>Pasta with Fresh Tomato Sauce</a
>
</li>
<li>
<a href="./recipes/nacho-cheese-sauce.html" rel="noopener noreferrer"
>Nacho Cheese Sauce</a
>
</li>
</ul>
</div>
</body>
</html>
61 changes: 35 additions & 26 deletions recipes/air-fryer-french-fries.html
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,50 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Air Fryer French Fries</title>
</head>
<link rel="stylesheet" href="../styles.css" />
</head>

<body>
<h1>Air Fryer French Fries</h1>
<img src="../images/air-fryer-french-fries.png" width=600 alt="Air Fryer French Fries with a dip">
<body>
<div class="recipe">
<h1>Air Fryer French Fries</h1>
<div class="recipe-img">
<img
src="../images/air-fryer-french-fries.png"
width="600"
alt="Air Fryer French Fries with a dip"
/>
</div>

<h2>Description</h2>
<p>This air fryer French fries recipe includes a cold water-hot water soaking trick that produces super crispy
French fries.
<br>
Made with just four ingredients, these fries rival traditional fries but use a fraction of the
oil.
</p>
<h2>Description</h2>
<p>
This air fryer French fries recipe includes a cold water-hot water
soaking trick that produces super crispy French fries. Made with just
four ingredients, these fries rival traditional fries but use a fraction
of the oil.
</p>

<h2>Ingredients</h2>
<ul>
<h2>Ingredients</h2>
<ul>
<li>Potatoes</li>
<li>Oil</li>
<li>Pepper</li>
<li>Salt</li>
</ul>
</ul>

<h2>Steps</h2>
<ol>
<h2>Steps</h2>
<ol>
<li>Cut the Potatoes into sticks</li>
<li>Soak in cold water for 5 minutes, Boil in water for 10 minutes, Drain and Cool the Potatoes</li>
<li>
Soak in cold water for 5 minutes, Boil in water for 10 minutes, Drain
and Cool the Potatoes
</li>
<li>Season the French Fries with oil and pepper</li>
<li>Cook in Air Fryer for 15 minutes</li>
<li>Season with salt</li>
</ol>

</body>

</html>
</ol>
</div>
</body>
</html>
51 changes: 30 additions & 21 deletions recipes/nacho-cheese-sauce.html
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,45 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nacho Cheese Sauce</title>
</head>
<link rel="stylesheet" href="../styles.css" />
</head>

<body>
<h1>Nacho Cheese Sauce</h1>
<img src="../images/nacho-cheese-sauce.png" width="600" alt="Nacho with Cheese Sauce">
<body>
<div class="recipe">
<h1>Nacho Cheese Sauce</h1>
<div class="recipe-img">
<img
src="../images/nacho-cheese-sauce.png"
width="600"
alt="Nacho with Cheese Sauce"
/>
</div>

<h2>Description</h2>
<p>This nacho cheese sauce recipe makes a simple sauce that's delicious spread over tortilla chips. Add some sliced
jalapeños to spice things up a bit.</p>
<h2>Description</h2>
<p>
This nacho cheese sauce recipe makes a simple sauce that's delicious
spread over tortilla chips. Add some sliced jalapeños to spice things up
a bit.
</p>

<h2>Ingredients</h2>
<ul>
<h2>Ingredients</h2>
<ul>
<li>2 tablespoons butter</li>
<li>2 tablespoons all-purpose flour</li>
<li>1 cup milk</li>
<li>7 slices processed American cheese</li>
<li>½ teaspoon salt</li>
</ul>
</ul>

<h2>Steps</h2>
<ol>
<h2>Steps</h2>
<ol>
<li>Make the roux with butter and flour.</li>
<li>Pour in the milk and whisk until thick.</li>
<li>Add cheese and salt, then cook until the cheese is melted.</li>
</ol>

</body>

</html>
</ol>
</div>
</body>
</html>
54 changes: 33 additions & 21 deletions recipes/pasta-with-fresh-tomato-sauce.html
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,48 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pasta with Fresh Tomato Sauce</title>
</head>
<link rel="stylesheet" href="../styles.css" />
</head>

<body>
<h1>Pasta with Fresh Tomato Sauce</h1>
<img src="../images/pasta-with-fresh-tomato-sauce.png" width="600" alt="Pasta with Fresh Tomato Sauce in a bowl">
<body>
<div class="recipe">
<h1>Pasta with Fresh Tomato Sauce</h1>
<div class="recipe-img">
<img
src="../images/pasta-with-fresh-tomato-sauce.png"
width="600"
alt="Pasta with Fresh Tomato Sauce in a bowl"
/>
</div>

<h2>Description</h2>
<p>This pasta dish with a fresh tomato sauce and fragrant basil is wonderful served with a green salad.</p>
<h2>Description</h2>
<p>
This pasta dish with a fresh tomato sauce and fragrant basil is
wonderful served with a green salad.
</p>

<h2>Ingredients</h2>
<ul>
<h2>Ingredients</h2>
<ul>
<li>1 (16 ounce) package dry penne pasta</li>
<li>8 Roma (plum) tomatoes, diced</li>
<li>½ cup Italian dressing, or to taste</li>
<li>¼ cup finely chopped fresh basil</li>
<li>¼ cup diced red onion</li>
<li>¼ cup grated Parmesan cheese</li>
</ul>
</ul>

<h2>Steps</h2>
<ol>
<h2>Steps</h2>
<ol>
<li>Add penne to lightly salted water and boil for 8-10 minutes</li>
<li>Drain pasta and transfer to large bowl</li>
<li>Add tomatoes, Italian dressing, basil, red onion, and Parmesan cheese; toss until well coated.</li>
</ol>

</body>

</html>
<li>
Add tomatoes, Italian dressing, basil, red onion, and Parmesan cheese;
toss until well coated.
</li>
</ol>
</div>
</body>
</html>
26 changes: 26 additions & 0 deletions styles.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
body {
background-color: lightblue;
font-family: Arial, Helvetica, sans-serif;
}

.recipe {
background-color: aliceblue;
border: 5px solid rgb(0, 115, 255);
border-radius: 20px;
padding: 10px 20px;
margin: 20px auto;
width: 800px;
}

.recipe h1 {
text-transform: uppercase;
text-align: center;
background-color: lightblue;
border: 2px outset;
border-radius: 10px;
padding: 5px;
}

.recipe-img {
text-align: center;
}

0 comments on commit 2df80de

Please sign in to comment.