-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathrecipe-single.html
243 lines (231 loc) · 12.2 KB
/
recipe-single.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
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
<!doctype html>
<html lang="en">
<head>
<title>Talas - Recipe List</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="assets/images/favicon.svg" type="image/svg+xml" />
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Jost:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/custom.css">
<script src="https://kit.fontawesome.com/60cb1c2f84.js" crossorigin="anonymous"></script>
</head>
<body style="background-color: white;">
<!-- Navbar Section -->
<nav class="navbar fixed-top sticky-top navbar-expand-lg navbar-light blur px-md-8 px-lg-20 px-xl-5">
<a class="navbar-brand px-lg-5 px-xl-5" href="./index.html">
<img src="assets/images/logo.png" width="auto" height="52" class="d-inline-block align-top" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav mr-5 my-2 my-lg-0 navbar-nav-scroll">
<li class="nav-item">
<a class="nav-link font-talas-head" href="./index.html">Home</a>
</li>
<li class="nav-item ">
<a class="nav-link font-talas-head" href="./product.html">Product</a>
</li>
<li class="nav-item ">
<a class="nav-link font-talas-head" href="./recipes.html">Recipes</a>
</li>
<li class="nav-item">
<a class="nav-link font-talas-head" href="./blog.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link font-talas-head" href="./about.html">About Us</a>
</li>
</ul>
</div>
</nav>
<!-- Head Section -->
<section class="main d-flex bg-light py-5 page-head-image">
<div class="container justify-content-center">
<div class="section-title">
<h1 class="display-3 font-weight-bold font-talas-head text-color-talas text-center">
Taro Recipes
</h1>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-transparent d-flex justify-content-center">
<li class="breadcrumb-item font-talas-head"><a class="text-dark" href="./index.html">Home</a></li>
<li class="breadcrumb-item font-talas-head"><a class="text-dark" href="./recipes.html">Recipes</a></li>
<li class="breadcrumb-item active font-talas-head" aria-current="page">Cake Taro</li>
</ol>
</nav>
</div>
</div>
</section>
<!-- Recipes Section -->
<section class="main py-4 px-lg-5">
<div class="container-fluid px-lg-5">
<!-- Recipes Title -->
<div class="section-title">
<h1 class="display-5 font-talas-head font-weight-bold">
Taro Cake
</h2>
<p class="lead text-black font-talas-body">
Let’s cook together!, you can do this!
</p>
</div>
<!-- Recipes Items -->
<div class="row no-gutters py-lg-4 py-md-4">
<!-- article cover -->
<div class="col-12 col-md-4 col-lg-4 py-3">
<img class="img article-cover rounded-lg" src="assets/images/taro-cake.png">
</div>
<!-- article content -->
<div class="col-12 col-md-8 col-lg-8 py-3 px-md-5 px-lg-5 px-xl-5">
<h2>Ingredients</h2>
<ul>
<li>
100 gr taro flour
</li>
<li>
100 gr wheat flour
</li>
<li>
150 gr sugar
</li>
<li>
1 tsp SP
</li>
<li>
3 eggs
</li>
<li>
2 tbsp milk powder
</li>
<li>
tsp baking powder
</li>
<li>
125 gr ROYAL PALMIA BUTTER MARGARINE (melt)
</li>
<li>
Sufficient yellow and purple coloring
</li>
</ul>
</div>
</div>
<div class="row no-gutters py-lg-4 py-md-4 flex-column-reverse flex-row flex-md-row flex-lg-row">
<!-- article content -->
<div class="col-12 col-md-8 col-lg-8 py-3 px-md-5 px-lg-5 px-xl-5">
<h2>How To Cook</h2>
<ul style="list-style-type: decimal;" class="text-justify">
<li>
Mix taro flour, flour, baking powder and milk powder. Stir well. Set aside.
</li>
<li>
Mix eggs, sugar, SP until thick. Lower the speed, add the flour little by little, mix well again. Add ROYAL PALMIA BUTTER MARGARINE, then stir back with a spatula until evenly distributed.
</li>
<li>
Divide the dough into 2, each given yellow and purple coloring. Heat the steamer, pour the yellow mixture into a baking sheet that has been lined with baking paper / spread ROYAL PALMIA BUTTER MARGARINE. Steam 15 minutes. Then pour the purple mixture. Steam again for 20 minutes. Remove the pan from the steamer. Wait until cool, remove from the tin.
</li>
<li>
Grease the surface of the cake with buttercream and grated cheese. Then cut according to taste.
</li>
</ul>
</div>
<!-- article cover -->
<div class="col-12 col-md-4 col-lg-4 py-3">
<img class="img article-cover rounded-lg" src="assets/images/taro-cake.png">
</div>
</div>
</div>
</section>
<!-- Footer Section -->
<section class="main bg-talas py-5">
<div class="container-fluid">
<div class="row px-lg-5 px-xl-5 mx-lg-5 mx-xl-5">
<div class="col-sm-12 col-md-12 col-lg-3 col-xl-3 py-3 py-md-3">
<h2 class="display-5 font-weight-bold text-white font-talas-head">
About Us
</h2>
<!-- always visible on any screen -->
<p class="my-2 text-white font-talas-head font-weight-light" style="line-height: 2rem;">
We help you to get high quality of taro, we care, we growth together, in fertil soil Indonesia.
</p>
<button type="button" class="btn btn-circle blur" href="#">
<i class="fa-brands fa-instagram text-white"></i>
</button>
<button type="button" class="btn btn-circle blur" href="#">
<i class="fa-brands fa-twitter text-white"></i>
</button>
<button type="button" class="btn btn-circle blur" href="#">
<i class="fa-brands fa-youtube text-white"></i>
</button>
</div>
<div class="col-sm-12 col-md-12 col-lg-3 col-xl-3 py-3 py-md-3">
<h2 class="display-5 font-weight-bold text-white font-talas-head">
Quick Link
</h2>
<!-- List -->
<ul class="list-unstyled list-py-1 mb-0">
<li><a class="link-sm link-secondary text-white font-talas-head" href="./index.html">Home <i class="bi-box-arrow-up-right small ms-1"></i></a></li>
<li><a class="link-sm link-secondary text-white font-talas-head" href="./products.html">Product</a></li>
<li><a class="link-sm link-secondary text-white font-talas-head" href="./recipes.html">Recipes</a></li>
<li><a class="link-sm link-secondary text-white font-talas-head" href="./blog.html">Blog</a></li>
<li><a class="link-sm link-secondary text-white font-talas-head" href="./about.html">About Us</a></li>
</ul>
<!-- End List -->
</div>
<div class="col-sm-12 col-md-12 col-lg-3 col-xl-3 py-3 py-md-3">
<h2 class="display-5 font-weight-bold text-white font-talas-head">
Product
</h2>
<!-- List -->
<ul class="list-unstyled list-py-1 mb-0">
<li><a class="link-sm link-secondary text-white font-talas-head" href="./product-single.html">Paratama Taro <i class="bi-box-arrow-up-right small ms-1"></i></a></li>
<li><a class="link-sm link-secondary text-white font-talas-head" href="./product-single.html">Taro Flour</a></li>
<li><a class="link-sm link-secondary text-white font-talas-head" href="./product-single.html">Purple Taro</a></li>
</ul>
<!-- End List -->
</div>
<div class="col-sm-12 col-md-12 col-lg-3 col-xl-3 py-3 py-md-3">
<h2 class="display-5 font-weight-bold text-white font-talas-head">
Reach Us
</h2>
<!-- List -->
<ul class="list-unstyled list-py-1 mb-5">
<li>
<a class="link text-white font-talas-head" href="#">
<i class="fa-solid fa-envelope mr-2"></i> [email protected]
</a>
</li>
<li>
<p class="text-white font-talas-head" href="#">
<i class="fa-solid fa-phone mr-2"></i>+62 81320382637
</p>
</li>
<li>
<p class="text-white font-talas-head" href="#">
<i class="fa-solid fa-location-dot mr-2"></i> Jl. Pembanguann III No.13, RT 12 RW 1, Petojo Utara, Kecamatan Gambir, Kota Jakarta Pusat, DKI Jakarta 10130
</p>
</li>
</ul>
<!-- End List -->
</div>
</div>
<!-- End Row -->
<!-- Copyright -->
<div class="row">
<div class="col-12">
<div class="w-md-85 text-lg-center mx-lg-auto">
<p class="text-white font-talas-body text-center">© 2022 Universal Taro Indonesia.</p>
</div>
</div>
</div>
<!-- End Copyright -->
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
</body>
</html>