forked from keyboardTC/tata-awah-recipe-project
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
191 lines (176 loc) · 9.82 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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!DOCTYPE html>
<html lang="en">
<!-- head -->
<head>
<meta charset="utf-8">
<title>Project Recipe</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/fontawesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/brands.min.css">
</head>
<!-- body -->
<body>
<!-- article -->
<article class="recipe webpage">
<!-- header -->
<header class="head">
<!-- class bakinghigligh to style the word baking -->
<h2 class="bakinghighlight">Baking</h2>
<h1>Delicious No-Knead Baguettes</h1>
<p>Make three <b>fluffy and delicious baguettes</b> using a simple<br><u class="hl">folding technique</u>, instead of labour intensive kneading.</p>
<!-- class stretch to style time, cal, skill in large viewport -->
<ul class="stretch">
<li class="capitalize"><b>Active Time <span class = "sechighlight">40 <abbr title="Minutes">mins</abbr></span></b></li>
<li class="capitalize"><b>Total Time <span class = "sechighlight">3<abbr title="Hours"> hrs</abbr></span></b></li>
<li class="capitalize"><b>Calories <span class="sechighlight">1670</span></b></li>
<li class="capitalize"><b>Skill Level <span class="sechighlight">Medium</span></b></li>
</ul>
</header>
<!-- main class for grid -->
<main class="grid">
<!-- calss lower for styling the grid contents -->
<div class="lower">
<!-- navigation class -->
<nav class="secondblock">
<ul>
<li> <a href="#Story">Story</a></li>
<li> <a href="#Ingredients">Ingredients</a></li>
<li> <a href="#Equipment">Equipment</a></li>
<li> <a href="#Process">Process</a></li>
<li> <a href="#Schedule">Schedule</a></li>
<li> <a href="#Result">Result</a></li>
</ul>
</nav>
<!-- class rightgrid to style the contents on the right grid -->
<div class="rightgrid">
<section class="story">
<h1 id="Story">STORY</h1>
<p>Lorem ipsum,<u class="hl">delicious bread</u> amet consectetur, adipisicing elit. Ipsa totam fugiat culpa sint omnis similique quia est obcaecati nobis, eaque itaque rerum error aliquid, ea odio, magni eius fuga dolor.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus tenetur, asperiores pariatur ratione commodi odit consectetur eum aspernatur dolorum repellat, ad minima laborum odio nobis! Commodi architecto sit nobis inventore!</p>
<!-- class quotes to style quotes -->
<p class="quotes"><em>Poetry is an act of peace. Peace goes into the making of a poem as flour goes into the making of a bread.<br><br>
Pablo Neruda</em></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil eius laborum quisquam sit ex magnam, porro asperiores debitis aliquam consequatur in laboriosam temporibus quod excepturi repudiandae quae dignissimos sint obcaecati?</p>
<img src="../img/gallery-a.jpg" alt="gallery">
</section>
</div>
<!-- class leftrid to style the contents on leftgrid -->
<div class="leftgrid">
<!-- class leftgridcontent to stytle leftgridcontent -->
<div class="leftgridcontent">
<h1 id="Ingredients">INGREDIENTS</h1>
<p class = "weight"><b class = "gram">Grams</b><b> lb,oz</b></p>
<ul>
<li><strong>500 g</strong> bread flour</li>
<li><strong>400 g</strong> cool water</li>
<li><strong>10 g</strong> Salt</li>
<li><strong>7.5 g</strong> Yeast</li>
<li>Extra flour (for Dusting)</li>
</ul>
<h1 id="Equipment">Equipment</h1>
<ul>
<li>large bowl</li>
<li>Plastic Wrap</li>
<li>Baking Sheet or Stone</li>
<li>Bench Scraper</li>
<li>Thermometer</li>
</ul>
</div>
</div>
<!-- continuation of the class rightgrid, contents below this will be on the right grid -->
<div class="rightgrid">
<section class="process">
<h1 id="Process">PROCESS</h1>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere deserunt eos obcaecati et animi veritatis modi facilis molestias voluptas commodi, recusandae eius veniam inventore corrupti quibusdam temporibus nemo. Praesentium, dignissimos?
<ol>
<li><h3>Mixing</h3></li>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, excepturi provident deserunt tenetur, dolorem expedita dolores alias explicabo praesentium vitae pariatur labore a omnis. Rem at quae consequatur cupiditate voluptates.</p>
<img src="../img/mixing-ingredients-960w.jpg" alt="mixing">
<p>All ingredients mixed to form a shaggy dough</p>
<li><h3>Folding</h3></li>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, excepturi provident deserunt tenetur, dolorem expedita dolores alias explicabo praesentium vitae pariatur labore a omnis. Rem at quae consequatur cupiditate voluptates.</p>
<p>Be sure to <b class="sechighlight">let you doughsit for about 20-30 mins between folds</b>, to ensure the gluten structurehas a chance to develop before being disturbed again.</p>
<img src="../img/folding-dough-960w.jpg" alt="folding">
<p>Folding the dough, instead of kneading</p>
<li><h3>Proofing</h3></li>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, excepturi provident deserunt tenetur, dolorem expedita dolores alias explicabo praesentium vitae pariatur labore a omnis. Rem at quae consequatur cupiditate voluptates.</p>
<img src="../img/proofing-960w.jpg" alt="proofing">
<p>Dough dusted with flour, ready to sit and proof</p>
<li><h3>Baking</h3></li>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, excepturi provident deserunt tenetur, dolorem expedita dolores alias explicabo praesentium vitae pariatur labore a omnis. Rem at quae consequatur cupiditate voluptates.</p>
<img src="../img/baked-baguettes-960w.jpg" alt="baked">
<p>Delicious baked baguettes, cut and stacked</p>
</ol>
</section>
<section class="schedule">
<h1 id="Schedule">SCHEDULE</h1>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita accusamus voluptates debitis impedit voluptate ipsa error. Omnis fuga nisi libero aliquam non minus atque temporibus assumenda! Molestiae ut accusamus odio?
<!-- class for schedule table -->
<table class="table">
<thead>
<tr>
<td colspan="2">Time</td>
<td rowspan="2">Task</td>
</tr>
</thead>
<tbody>
<tr>
<td>Start</td>
<td>Duration</td>
<td></td>
</tr>
<tr>
<td>0:00</td>
<td>(20 mins)</td>
<td> Mix Ingredients</td>
</tr>
<tr>
<td>0:20</td>
<td>(100 mins)</td>
<td>Bulk rise</td>
</tr>
<tr>
<td>2:00</td>
<td>(30 mins)</td>
<td>Fold & rest</td>
</tr>
<tr>
<td>2:30</td>
<td>(30 mins)</td>
<td>Fold & Rest</td>
</tr>
<tr>
<td>3:00</td>
<td>(30 mins)</td>
<td>Proof</td>
</tr>
<tr>
<td>3:30</td>
<td>(30 mins)</td>
<td>Bake</td>
</tr>
</tbody>
</table>
<p>Sample baking Schedule</p>
</section>
<section class="result">
<h1 id="Result">RESULT</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum consequatur autem, cum quos debitis eos asperiores sit tempora, voluptatem beatae fuga quis, eius dolorem eveniet doloremque pariatur omnis dicta optio!</p>
<img src="../img/ready-to-eat-960w.jpg" alt="ready">
<p>Two baguettes, wrapped up and ready to share</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A officia et perspiciatis cum animi doloremque, repudiandae quam ab nam, sint unde perferendis at omnis enim nesciunt aliquid adipisci delectus doloribus.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facere quibusdam, suscipit vero necessitatibus vel consequatur veniam ab, provident cupiditate rem delectus repudiandae, non culpa dolorum. Impedit perspiciatis ullam unde ex.</p>
</section>
</div>
<!-- footer -->
<footer class="end">
Copyright©1970
<p class="hl"><u>Terms</u> | <u>Privacy.</u></p>
</footer>
</main>
</div>
</article>
</body>
</html>