Skip to content

Commit c678e65

Browse files
warrenabayonwarrenabayon
committed
updated recipes pages layout
1 parent 58b3c17 commit c678e65

File tree

5 files changed

+124
-106
lines changed

5 files changed

+124
-106
lines changed

‎css/style.css

+5
Original file line numberDiff line numberDiff line change
@@ -40,4 +40,9 @@ h1 {
4040

4141
.recipe-item {
4242
text-align: center;
43+
}
44+
45+
.container {
46+
max-width: 800px;
47+
margin: 0 auto;
4348
}

‎index.html

+17-4
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,29 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="css/style.css">
67
<title>Project: Recipes</title>
78
</head>
89
<body>
910

1011
<h1>Odin Recipes</h1>
1112

12-
<ul>
13-
<li><a href="recipes/bacon.html">Bacon</a></li>
14-
<li><a href="recipes/lasagna.html">Lasagna</a></li>
15-
<li><a href="recipes/pancake.html">Pancake</a></li>
13+
<ul id="recipes">
14+
<li>
15+
<a href="recipes/bacon.html" class="recipe-item">
16+
<img src="recipes/images/bacon-egg.jpg" alt="">
17+
<h3>Bacon</h3>
18+
</a></li>
19+
<li>
20+
<a href="recipes/lasagna.html" class="recipe-item">
21+
<img src="recipes/images/lasagna.jpg" alt="">
22+
<h3>Lasagna</h3>
23+
</a></li>
24+
<li>
25+
<a href="recipes/pancake.html" class="recipe-item">
26+
<img src="recipes/images/pancake.jpg" alt="">
27+
<h3>Pancake</h3>
28+
</a></li>
1629
</ul>
1730

1831
</body>

‎recipes/bacon.html

+34-34
Original file line numberDiff line numberDiff line change
@@ -3,43 +3,43 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="../css/style.css">
67
<title>Bacon</title>
78
</head>
89
<body>
9-
<h1>Bacon Air-Fried Italian Stuffed</h1>
10-
<img src="images/bacon-egg.jpg" alt="">
11-
<p>Garlic, Parmesan cheese, fresh basil, and toasted nuts turn brown rice into a superstar stuffing in this Italian-inspired stuffed tomato side dish that's cooked in the air fryer.</p>
12-
13-
14-
<h3>Ingredients</h3>
15-
<ul>
16-
<li>4 medium tomatoes</li>
17-
<li>olive oil, as needed</li>
18-
<li>1 cup cooked brown rice</li>
19-
<li>⅓ cup freshly grated Parmesan cheese</li>
20-
<li>¼ cup crumbled goat cheese</li>
21-
<li>¼ cup chopped toasted walnuts</li>
22-
<li>2 tablespoons chopped fresh basil, divided, or more to taste</li>
23-
<li>2 cloves garlic, minced</li>
24-
<li>¼ cup Italian-seasoned bread crumbs, divided</li>
25-
<li>1 tablespoon olive oil</li>
26-
</ul>
27-
28-
<h3>Directions</h3>
29-
<h4>Step 1</h4>
30-
<p>Cut tops off tomatoes and scoop out flesh with a melon baller, leaving 1/4- to 1/2-inch thick sides and bottoms. Discard tomato tops and flesh.</p>
31-
32-
<h4>Step 2</h4>
33-
<p>Brush the bottom of an air fryer basket with olive oil.</p>
34-
35-
<h4>Step 3</h4>
36-
<p>Combine cooked rice, Parmesan cheese, goat cheese, walnuts, 1 tablespoon basil, and garlic in a medium bowl. Combine bread crumbs, and 1 tablespoon olive oil in a small bowl. Fill tomatoes with rice mixture, then sprinkle with bread crumb mixture. Place stuffed tomatoes into the prepared air fryer basket.</p>
37-
38-
<h4>Step 4</h4>
39-
<p>Cook in the air fryer at 370 degrees F (188 degrees C) until tomatoes are tender, filling is heated through, and topping is golden brown, about 15 minutes. Garnish with remaining basil.</p>
40-
41-
<h3>Cook's Note:</h3>
42-
You can substitute shredded mozzarella cheese for goat cheese, if preferred.
10+
<div class="container">
11+
<h1>Bacon Air-Fried Italian Stuffed</h1>
12+
<img src="images/bacon-egg.jpg" alt="">
13+
<p>Garlic, Parmesan cheese, fresh basil, and toasted nuts turn brown rice into a superstar stuffing in this Italian-inspired stuffed tomato side dish that's cooked in the air fryer.</p>
14+
<h3>Ingredients</h3>
15+
<ul>
16+
<li>4 medium tomatoes</li>
17+
<li>olive oil, as needed</li>
18+
<li>1 cup cooked brown rice</li>
19+
<li>⅓ cup freshly grated Parmesan cheese</li>
20+
<li>¼ cup crumbled goat cheese</li>
21+
<li>¼ cup chopped toasted walnuts</li>
22+
<li>2 tablespoons chopped fresh basil, divided, or more to taste</li>
23+
<li>2 cloves garlic, minced</li>
24+
<li>¼ cup Italian-seasoned bread crumbs, divided</li>
25+
<li>1 tablespoon olive oil</li>
26+
</ul>
27+
<h3>Directions</h3>
28+
<h4>Step 1</h4>
29+
<p>Cut tops off tomatoes and scoop out flesh with a melon baller, leaving 1/4- to 1/2-inch thick sides and bottoms. Discard tomato tops and flesh.</p>
30+
31+
<h4>Step 2</h4>
32+
<p>Brush the bottom of an air fryer basket with olive oil.</p>
33+
34+
<h4>Step 3</h4>
35+
<p>Combine cooked rice, Parmesan cheese, goat cheese, walnuts, 1 tablespoon basil, and garlic in a medium bowl. Combine bread crumbs, and 1 tablespoon olive oil in a small bowl. Fill tomatoes with rice mixture, then sprinkle with bread crumb mixture. Place stuffed tomatoes into the prepared air fryer basket.</p>
36+
37+
<h4>Step 4</h4>
38+
<p>Cook in the air fryer at 370 degrees F (188 degrees C) until tomatoes are tender, filling is heated through, and topping is golden brown, about 15 minutes. Garnish with remaining basil.</p>
39+
40+
<h3>Cook's Note:</h3>
41+
You can substitute shredded mozzarella cheese for goat cheese, if preferred.
42+
</div>
4343

4444
</body>
4545
</html>

‎recipes/lasagna.html

+34-34
Original file line numberDiff line numberDiff line change
@@ -3,43 +3,43 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="../css/style.css">
67
<title>Lasagna</title>
78
</head>
89
<body>
910

10-
<h1>Lasagna Air-Fried Italian Stuffed</h1>
11-
<img src="images/lasagna.jpg" alt="">
12-
<p>Garlic, Parmesan cheese, fresh basil, and toasted nuts turn brown rice into a superstar stuffing in this Italian-inspired stuffed tomato side dish that's cooked in the air fryer.</p>
13-
14-
15-
<h3>Ingredients</h3>
16-
<ul>
17-
<li>4 medium tomatoes</li>
18-
<li>olive oil, as needed</li>
19-
<li>1 cup cooked brown rice</li>
20-
<li>⅓ cup freshly grated Parmesan cheese</li>
21-
<li>¼ cup crumbled goat cheese</li>
22-
<li>¼ cup chopped toasted walnuts</li>
23-
<li>2 tablespoons chopped fresh basil, divided, or more to taste</li>
24-
<li>2 cloves garlic, minced</li>
25-
<li>¼ cup Italian-seasoned bread crumbs, divided</li>
26-
<li>1 tablespoon olive oil</li>
27-
</ul>
28-
29-
<h3>Directions</h3>
30-
<h4>Step 1</h4>
31-
<p>Cut tops off tomatoes and scoop out flesh with a melon baller, leaving 1/4- to 1/2-inch thick sides and bottoms. Discard tomato tops and flesh.</p>
32-
33-
<h4>Step 2</h4>
34-
<p>Brush the bottom of an air fryer basket with olive oil.</p>
35-
36-
<h4>Step 3</h4>
37-
<p>Combine cooked rice, Parmesan cheese, goat cheese, walnuts, 1 tablespoon basil, and garlic in a medium bowl. Combine bread crumbs, and 1 tablespoon olive oil in a small bowl. Fill tomatoes with rice mixture, then sprinkle with bread crumb mixture. Place stuffed tomatoes into the prepared air fryer basket.</p>
38-
39-
<h4>Step 4</h4>
40-
<p>Cook in the air fryer at 370 degrees F (188 degrees C) until tomatoes are tender, filling is heated through, and topping is golden brown, about 15 minutes. Garnish with remaining basil.</p>
41-
42-
<h3>Cook's Note:</h3>
43-
You can substitute shredded mozzarella cheese for goat cheese, if preferred.
11+
<div class="container">
12+
<h1>Lasagna Air-Fried Italian Stuffed</h1>
13+
<img src="images/lasagna.jpg" alt="">
14+
<p>Garlic, Parmesan cheese, fresh basil, and toasted nuts turn brown rice into a superstar stuffing in this Italian-inspired stuffed tomato side dish that's cooked in the air fryer.</p>
15+
<h3>Ingredients</h3>
16+
<ul>
17+
<li>4 medium tomatoes</li>
18+
<li>olive oil, as needed</li>
19+
<li>1 cup cooked brown rice</li>
20+
<li>⅓ cup freshly grated Parmesan cheese</li>
21+
<li>¼ cup crumbled goat cheese</li>
22+
<li>¼ cup chopped toasted walnuts</li>
23+
<li>2 tablespoons chopped fresh basil, divided, or more to taste</li>
24+
<li>2 cloves garlic, minced</li>
25+
<li>¼ cup Italian-seasoned bread crumbs, divided</li>
26+
<li>1 tablespoon olive oil</li>
27+
</ul>
28+
<h3>Directions</h3>
29+
<h4>Step 1</h4>
30+
<p>Cut tops off tomatoes and scoop out flesh with a melon baller, leaving 1/4- to 1/2-inch thick sides and bottoms. Discard tomato tops and flesh.</p>
31+
32+
<h4>Step 2</h4>
33+
<p>Brush the bottom of an air fryer basket with olive oil.</p>
34+
35+
<h4>Step 3</h4>
36+
<p>Combine cooked rice, Parmesan cheese, goat cheese, walnuts, 1 tablespoon basil, and garlic in a medium bowl. Combine bread crumbs, and 1 tablespoon olive oil in a small bowl. Fill tomatoes with rice mixture, then sprinkle with bread crumb mixture. Place stuffed tomatoes into the prepared air fryer basket.</p>
37+
38+
<h4>Step 4</h4>
39+
<p>Cook in the air fryer at 370 degrees F (188 degrees C) until tomatoes are tender, filling is heated through, and topping is golden brown, about 15 minutes. Garnish with remaining basil.</p>
40+
41+
<h3>Cook's Note:</h3>
42+
You can substitute shredded mozzarella cheese for goat cheese, if preferred.
43+
</div>
4444
</body>
4545
</html>

‎recipes/pancake.html

+34-34
Original file line numberDiff line numberDiff line change
@@ -3,44 +3,44 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="../css/style.css">
67
<title>Pancake</title>
78
</head>
89
<body>
910

1011

11-
<h1>PancakeAir-Fried Italian Stuffed</h1>
12-
<img src="images/pancake.jpg" alt="">
13-
<p>Garlic, Parmesan cheese, fresh basil, and toasted nuts turn brown rice into a superstar stuffing in this Italian-inspired stuffed tomato side dish that's cooked in the air fryer.</p>
14-
15-
16-
<h3>Ingredients</h3>
17-
<ul>
18-
<li>4 medium tomatoes</li>
19-
<li>olive oil, as needed</li>
20-
<li>1 cup cooked brown rice</li>
21-
<li>⅓ cup freshly grated Parmesan cheese</li>
22-
<li>¼ cup crumbled goat cheese</li>
23-
<li>¼ cup chopped toasted walnuts</li>
24-
<li>2 tablespoons chopped fresh basil, divided, or more to taste</li>
25-
<li>2 cloves garlic, minced</li>
26-
<li>¼ cup Italian-seasoned bread crumbs, divided</li>
27-
<li>1 tablespoon olive oil</li>
28-
</ul>
29-
30-
<h3>Directions</h3>
31-
<h4>Step 1</h4>
32-
<p>Cut tops off tomatoes and scoop out flesh with a melon baller, leaving 1/4- to 1/2-inch thick sides and bottoms. Discard tomato tops and flesh.</p>
33-
34-
<h4>Step 2</h4>
35-
<p>Brush the bottom of an air fryer basket with olive oil.</p>
36-
37-
<h4>Step 3</h4>
38-
<p>Combine cooked rice, Parmesan cheese, goat cheese, walnuts, 1 tablespoon basil, and garlic in a medium bowl. Combine bread crumbs, and 1 tablespoon olive oil in a small bowl. Fill tomatoes with rice mixture, then sprinkle with bread crumb mixture. Place stuffed tomatoes into the prepared air fryer basket.</p>
39-
40-
<h4>Step 4</h4>
41-
<p>Cook in the air fryer at 370 degrees F (188 degrees C) until tomatoes are tender, filling is heated through, and topping is golden brown, about 15 minutes. Garnish with remaining basil.</p>
42-
43-
<h3>Cook's Note:</h3>
44-
You can substitute shredded mozzarella cheese for goat cheese, if preferred.
12+
<div class="container">
13+
<h1>PancakeAir-Fried Italian Stuffed</h1>
14+
<img src="images/pancake.jpg" alt="">
15+
<p>Garlic, Parmesan cheese, fresh basil, and toasted nuts turn brown rice into a superstar stuffing in this Italian-inspired stuffed tomato side dish that's cooked in the air fryer.</p>
16+
<h3>Ingredients</h3>
17+
<ul>
18+
<li>4 medium tomatoes</li>
19+
<li>olive oil, as needed</li>
20+
<li>1 cup cooked brown rice</li>
21+
<li>⅓ cup freshly grated Parmesan cheese</li>
22+
<li>¼ cup crumbled goat cheese</li>
23+
<li>¼ cup chopped toasted walnuts</li>
24+
<li>2 tablespoons chopped fresh basil, divided, or more to taste</li>
25+
<li>2 cloves garlic, minced</li>
26+
<li>¼ cup Italian-seasoned bread crumbs, divided</li>
27+
<li>1 tablespoon olive oil</li>
28+
</ul>
29+
<h3>Directions</h3>
30+
<h4>Step 1</h4>
31+
<p>Cut tops off tomatoes and scoop out flesh with a melon baller, leaving 1/4- to 1/2-inch thick sides and bottoms. Discard tomato tops and flesh.</p>
32+
33+
<h4>Step 2</h4>
34+
<p>Brush the bottom of an air fryer basket with olive oil.</p>
35+
36+
<h4>Step 3</h4>
37+
<p>Combine cooked rice, Parmesan cheese, goat cheese, walnuts, 1 tablespoon basil, and garlic in a medium bowl. Combine bread crumbs, and 1 tablespoon olive oil in a small bowl. Fill tomatoes with rice mixture, then sprinkle with bread crumb mixture. Place stuffed tomatoes into the prepared air fryer basket.</p>
38+
39+
<h4>Step 4</h4>
40+
<p>Cook in the air fryer at 370 degrees F (188 degrees C) until tomatoes are tender, filling is heated through, and topping is golden brown, about 15 minutes. Garnish with remaining basil.</p>
41+
42+
<h3>Cook's Note:</h3>
43+
You can substitute shredded mozzarella cheese for goat cheese, if preferred.
44+
</div>
4545
</body>
4646
</html>

0 commit comments

Comments
 (0)