-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
167 lines (164 loc) · 8.04 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Recipe Cards Project</title>
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Open+Sans&display=swap"
rel="stylesheet">
</head>
<body>
<header>
<img src="img/chef-hat.png" alt="chef hat">
<h1>Recipe Collection</h1>
</header>
<main>
<article id="cookies" class="card">
<div class="image"></div>
<div class="recipe">
<h2>Gluten-Free Sugar Cookies</h2>
<div class="time">
<div class="prep">
<img src="img/spoons.png" alt="prep time">
<p class="time-details"><strong>Prep Time:</strong> 10 Min</p>
</div>
<div class="cook">
<img src="img/steam.png" alt="cook time">
<p class="time-details"><strong>Cook Time:</strong> 10 Min</p>
</div>
<div class="total">
<img src="img/clock.png" alt="total time">
<p class="time-details"><strong>Total Time:</strong> 20 Min</p>
</div>
</div>
<p class="description">These buttery cookies have a tender texture and crispy exterior that you’re
sure to love!</p>
<div class="columns">
<section class="ingredients">
<h3>Ingredients</h3>
<ul>
<li>2 1/2 cups gluten-free flour</li>
<li>1 cup almond flour</li>
<li>1/4 teaspoon salt</li>
<li>1/2 teaspoon baking powder</li>
<li>1/4 teaspoon baking soda</li>
<li>1/2 cup softened, unsalted butter</li>
<li>1 cup sugar</li>
<li>2 teaspoons vanilla extract</li>
<li>1 egg</li>
</ul>
</section>
<section class="directions">
<h3>Directions</h3>
<ol>
<li>Preheat oven to 350° F. Line baking sheets with parchment paper.</li>
<li>Add flour, salt, baking soda, and baking powder to a bowl and stir.</li>
<li>In another bowl, beat butter and sugar together.</li>
<li>Add egg and vanilla extract to the butter and sugar mixture.</li>
<li>Combine the wet and dry ingredients in a bowl. Stir until fully combined.</li>
<li>Drop teaspoon-sized dough onto the parchment paper. Keep dough 1 to 2 inches apart.
Bake for 10 to 12 minutes.</li>
</ol>
</section>
</div>
</div>
</article>
<article id="pesto" class="card">
<div class="image"></div>
<div class="recipe">
<h2>Nut-Free Basil Pesto</h2>
<div class="time">
<div class="prep">
<img src="img/spoons.png" alt="prep time">
<p class="time-details"><strong>Prep Time:</strong> 5 Min</p>
</div>
<div class="cook">
<img src="img/steam.png" alt="cook time">
<p class="time-details"><strong>Cook Time:</strong> None</p>
</div>
<div class="total">
<img src="img/clock.png" alt="total time">
<p class="time-details"><strong>Total Time:</strong> 5 Min</p>
</div>
</div>
<p class="description">This gorgeous pesto is full of color and flavor! Serve on your favorite pasta
or crackers for a delicious, healthy meal.</p>
<div class="columns">
<section class="ingredients">
<h3>Ingredients</h3>
<ul>
<li>1 cup packed basil leaves</li>
<li>1 chopped garlic clove</li>
<li>1/4 cup grated parmesan cheese</li>
<li>1/2 tablespoon lemon juice</li>
<li>Pinch of salt</li>
<li>1/4 cup olive oil</li>
</ul>
</section>
<section class="directions">
<h3>Directions</h3>
<ol>
<li>In a food processor, pulse garlic and basil together.</li>
<li>Add parmesan cheese, lemon juice, and salt. Pulse again.</li>
<li>Add olive oil and blend. If the mixture is too thick, add more oil or hot water to
thin.</li>
</ol>
</section>
</div>
</div>
</article>
<article id="salad" class="card">
<div class="image"></div>
<div class="recipe">
<h2>Watermelon Salad</h2>
<div class="time">
<div class="prep">
<img src="img/spoons.png" alt="prep time">
<p class="time-details"><strong>Prep Time:</strong> 15 Min</p>
</div>
<div class="cook">
<img src="img/steam.png" alt="cook time">
<p class="time-details"><strong>Cook Time:</strong> None</p>
</div>
<div class="total">
<img src="img/clock.png" alt="total time">
<p class="time-details"><strong>Total Time:</strong> 15 Min</p>
</div>
</div>
<p class="description">This salad combines juicy watermelon, tangy lemon juice, savory feta cheese,
and sweet honey into one delicious bowl. Serve right away on a hot summer day for a cooling
treat!</p>
<div class="columns">
<section class="ingredients">
<h3>Ingredients</h3>
<ul>
<li>1 seedless watermelon</li>
<li>1/3 cup extra virgin olive oil</li>
<li>2 tablespoons fresh lemon juice</li>
<li>1 tablespoon honey</li>
<li>2 teaspoons salt</li>
<li>2 cups feta cheese, crumbled</li>
<li>1 cup red onion, sliced</li>
<li>1/4 cup basil leaves, chopped</li>
</ul>
</section>
<section class="directions">
<h3>Directions</h3>
<ol>
<li>Cube watermelon, or use a melon baller to scoop chunks of watermelon. Place in a
large bowl.</li>
<li>In a separate bowl, combine the olive oil, lemon juice, honey, and salt.</li>
<li>Add feta cheese, basil, and red onions to the mixture.</li>
<li>Pour the mixture over the watermelon.</li>
<li>Toss watermelon with the mixture and serve immediately!</li>
</ol>
</section>
</div>
</div>
</article>
</main>
</body>
</html>