Hugging Face's logo

Spaces:
vericudebuget
/
ok4231
Running

App Files Community
vericudebuget commited on
Commit
5620f7b
·
verified ·
1 Parent(s): 9824dbf

Upload sarmale.html

Browse files
Files changed (1) hide show
  1. sarmale.html +349 -0
sarmale.html ADDED
@@ -0,0 +1,349 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Homemade Chocolate Chip Cookies</title>
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ body {
15
+ font-family: 'Georgia', serif;
16
+ line-height: 1.6;
17
+ color: #333;
18
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
19
+ min-height: 100vh;
20
+ }
21
+
22
+ .container {
23
+ max-width: 1000px;
24
+ margin: 0 auto;
25
+ padding: 20px;
26
+ }
27
+
28
+ .recipe-header {
29
+ text-align: center;
30
+ background: white;
31
+ padding: 40px;
32
+ border-radius: 20px;
33
+ box-shadow: 0 10px 30px rgba(0,0,0,0.1);
34
+ margin-bottom: 30px;
35
+ }
36
+
37
+ .recipe-title {
38
+ font-size: 2.5em;
39
+ color: #2c3e50;
40
+ margin-bottom: 10px;
41
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
42
+ }
43
+
44
+ .recipe-subtitle {
45
+ font-size: 1.2em;
46
+ color: #7f8c8d;
47
+ font-style: italic;
48
+ }
49
+
50
+ .recipe-info {
51
+ display: flex;
52
+ justify-content: space-around;
53
+ background: white;
54
+ padding: 25px;
55
+ border-radius: 15px;
56
+ box-shadow: 0 8px 25px rgba(0,0,0,0.1);
57
+ margin-bottom: 30px;
58
+ }
59
+
60
+ .info-item {
61
+ text-align: center;
62
+ }
63
+
64
+ .info-label {
65
+ font-weight: bold;
66
+ color: #e74c3c;
67
+ font-size: 0.9em;
68
+ text-transform: uppercase;
69
+ letter-spacing: 1px;
70
+ }
71
+
72
+ .info-value {
73
+ font-size: 1.1em;
74
+ color: #2c3e50;
75
+ margin-top: 5px;
76
+ }
77
+
78
+ .ingredients-section {
79
+ background: white;
80
+ padding: 30px;
81
+ border-radius: 15px;
82
+ box-shadow: 0 8px 25px rgba(0,0,0,0.1);
83
+ margin-bottom: 30px;
84
+ }
85
+
86
+ .section-title {
87
+ font-size: 1.8em;
88
+ color: #2c3e50;
89
+ margin-bottom: 20px;
90
+ border-bottom: 3px solid #e74c3c;
91
+ padding-bottom: 10px;
92
+ }
93
+
94
+ .ingredients-list {
95
+ list-style: none;
96
+ padding: 0;
97
+ }
98
+
99
+ .ingredients-list li {
100
+ padding: 10px 0;
101
+ border-bottom: 1px solid #ecf0f1;
102
+ font-size: 1.1em;
103
+ position: relative;
104
+ padding-left: 30px;
105
+ }
106
+
107
+ .ingredients-list li:before {
108
+ content: "🍪";
109
+ position: absolute;
110
+ left: 0;
111
+ top: 10px;
112
+ }
113
+
114
+ .instructions-section {
115
+ background: white;
116
+ padding: 30px;
117
+ border-radius: 15px;
118
+ box-shadow: 0 8px 25px rgba(0,0,0,0.1);
119
+ }
120
+
121
+ .step {
122
+ display: flex;
123
+ align-items: flex-start;
124
+ margin-bottom: 30px;
125
+ padding: 20px;
126
+ background: #f8f9fa;
127
+ border-radius: 12px;
128
+ border-left: 5px solid #e74c3c;
129
+ transition: all 0.3s ease;
130
+ }
131
+
132
+ .step:hover {
133
+ transform: translateY(-2px);
134
+ box-shadow: 0 5px 15px rgba(0,0,0,0.1);
135
+ }
136
+
137
+ .step-image {
138
+ flex: 0 0 200px;
139
+ margin-right: 25px;
140
+ position: relative;
141
+ }
142
+
143
+ .image-placeholder {
144
+ width: 200px;
145
+ height: 150px;
146
+ background: linear-gradient(45deg, #ecf0f1, #bdc3c7);
147
+ border: 2px dashed #95a5a6;
148
+ border-radius: 8px;
149
+ display: flex;
150
+ flex-direction: column;
151
+ align-items: center;
152
+ justify-content: center;
153
+ cursor: pointer;
154
+ transition: all 0.3s ease;
155
+ position: relative;
156
+ overflow: hidden;
157
+ }
158
+
159
+ .image-placeholder:hover {
160
+ border-color: #e74c3c;
161
+ background: linear-gradient(45deg, #fadbd8, #f1c40f);
162
+ transform: scale(1.02);
163
+ }
164
+
165
+ .image-placeholder.has-image {
166
+ border: none;
167
+ background: none;
168
+ }
169
+
170
+ .uploaded-image {
171
+ width: 100%;
172
+ height: 100%;
173
+ object-fit: cover;
174
+ border-radius: 6px;
175
+ }
176
+
177
+ .upload-icon {
178
+ font-size: 2em;
179
+ color: #95a5a6;
180
+ margin-bottom: 8px;
181
+ }
182
+
183
+ .upload-text {
184
+ color: #7f8c8d;
185
+ font-size: 0.9em;
186
+ text-align: center;
187
+ font-weight: 500;
188
+ }
189
+
190
+ .step-content {
191
+ flex: 1;
192
+ }
193
+
194
+ .step-number {
195
+ background: linear-gradient(135deg, #e74c3c, #c0392b);
196
+ color: white;
197
+ width: 35px;
198
+ height: 35px;
199
+ border-radius: 50%;
200
+ display: flex;
201
+ align-items: center;
202
+ justify-content: center;
203
+ font-weight: bold;
204
+ margin-bottom: 15px;
205
+ font-size: 1.1em;
206
+ box-shadow: 0 3px 10px rgba(231, 76, 60, 0.3);
207
+ }
208
+
209
+ .step-text {
210
+ font-size: 1.1em;
211
+ color: #2c3e50;
212
+ line-height: 1.7;
213
+ }
214
+
215
+ .file-input {
216
+ display: none;
217
+ }
218
+
219
+ img {
220
+ max-width: 300px;
221
+ height: auto;
222
+ }
223
+
224
+ @media (max-width: 768px) {
225
+ .step {
226
+ flex-direction: column;
227
+ }
228
+
229
+ .step-image {
230
+ flex: none;
231
+ margin-right: 0;
232
+ margin-bottom: 20px;
233
+ align-self: center;
234
+ }
235
+
236
+ .recipe-info {
237
+ flex-direction: column;
238
+ gap: 15px;
239
+ }
240
+
241
+ .container {
242
+ padding: 10px;
243
+ }
244
+ }
245
+ </style>
246
+ </head>
247
+ <body>
248
+ <div class="container">
249
+ <div class="recipe-header">
250
+ <h1 class="recipe-title">How to make sarmale</h1>
251
+ <p class="recipe-subtitle">Absolutely delicious</p>
252
+ </div>
253
+
254
+
255
+
256
+ <div class="ingredients-section">
257
+ <h2 class="section-title">Ingredients</h2>
258
+ <ul class="ingredients-list">
259
+ <li>1kg of meat (chopped up)</li>
260
+ <li>200g of rice (washed)</li>
261
+ <li>Salt</li>
262
+ <li>Tomato sauce (NOT KETCHUP); if you can't find it, just use tomatoes.</li>
263
+ <li>Sauerkraut: 2 heads (for the leaves and for the bottom of the pot); If you can't find that, use vine leaves, or if you can't find that, use coltsfoot plant leafs</li>
264
+ <li>salt, pepper, paprika, thyme, dill</li>
265
+ <li>2 eggs</li>
266
+ <li>Oil</li>
267
+ <li>3 onions (chopped)</li>
268
+ <li>2 carrots (grated)</li>
269
+ <li>4-5 garlic cloves (chopped)</li>
270
+
271
+
272
+ </ul>
273
+ </div>
274
+
275
+ <div class="instructions-section">
276
+ <h2 class="section-title">Instructions</h2>
277
+
278
+ <div class="step">
279
+ <div class="step-image">
280
+ <img src="https://i.postimg.cc/NMKGbqn3/image.png" alt="Step 1 Image Placeholder" class="placeholder-image">
281
+ </div>
282
+ <div class="step-content">
283
+ <div class="step-number">1</div>
284
+ <div class="step-text">Add oil to a pan on medium heat and let it heat up.</div>
285
+ </div>
286
+ </div>
287
+
288
+ <div class="step">
289
+ <div class="step-image">
290
+ <img src="https://i.postimg.cc/T1Stmmb8/image.png" alt="Step 2 Image Placeholder" class="placeholder-image">
291
+ </div>
292
+ <div class="step-content">
293
+ <div class="step-number">2</div>
294
+ <div class="step-text">Add the onion and fry the onion in oil and add the washed rice, salt, pepper, paprika, thyme, dill, carrots, garlic and tomato paste, mix well (better than in the image). After you add all of that, add a litle bit of water, (120 ml). After the water evaporates a little, stop the heat. Let cool, then mix with the minced meat. </div>
295
+ </div>
296
+ </div>
297
+
298
+ <div class="step">
299
+
300
+ <div class="step-content">
301
+ <div class="step-number">3</div>
302
+ <div class="step-text">De-salt the leaves if they are too salty by leaving them in warm water. Cut the thick veins so that you can roll the sarmale easily. If the leaves are too big cut them in half.</div>
303
+ </div>
304
+ </div>
305
+
306
+ <div class="step">
307
+
308
+ <div class="step-content">
309
+ <div class="step-number">4</div>
310
+ <div class="step-text">Place a spoonful of filling on the cabbage leaf. Roll tightly and close the ends. Repeat for all the cabbage leaves.</div>
311
+ </div>
312
+ </div>
313
+
314
+ <div class="step">
315
+ <div class="step-image">
316
+ <img src="https://i.postimg.cc/x1H9X3m2/image.png" alt="Step 5 Image Placeholder" class="placeholder-image">
317
+ </div>
318
+ <div class="step-content">
319
+ <div class="step-number">5</div>
320
+ <div class="step-text">Place a layer of chopped cabbage at the bottom of the pot. Arrange the rolls in layers, add smoked meat and spices. Pour in enough water to slightly cover them. Cover with a lid and place on the stove.</div>
321
+ </div>
322
+ </div>
323
+
324
+ <div class="step">
325
+ <div class="step-image">
326
+ <img src="https://i.postimg.cc/MGpx924W/image.png" alt="Step 6 Image Placeholder" class="placeholder-image">
327
+ </div>
328
+ <div class="step-content">
329
+ <div class="step-number">6</div>
330
+ <div class="step-text">Boil on low heat for 2-3 hours. Check from time to time and add liquid if necessary. </div>
331
+ </div>
332
+ </div>
333
+
334
+ <div class="step">
335
+ <div class="step-image">
336
+ <img src="https://i.postimg.cc/7hYg6LtF/image.png" alt="Step 7 Image Placeholder" class="placeholder-image">
337
+ </div>
338
+ <div class="step-content">
339
+ <div class="step-number">7</div>
340
+ <div class="step-text">After they cool down, eat them with sour cream on top! </div>
341
+ </div>
342
+ </div>
343
+ </div>
344
+ </div>
345
+ </div>
346
+
347
+ </body>
348
+ </html>
349
+