generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
315 lines (315 loc) · 16.3 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
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
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Little Ones Manual"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.2/css/all.css">
<link rel="stylesheet" href="assets/css/style.css">
<title>Little Ones Manual</title>
</head>
<body data-spy="scroll" data-target="#home" data-offset="140">
<header>
<nav id ="home" class="navbar navbar-expand-md navbar-light bg-light navbar fixed-top">
<a href="#" aria-label="logo" class="navbar-brand logo">
<i class="fad fa-books logo"></i> Little Ones Manual</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarDropdown" aria-controls="navbarDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarDropdown">
<ul class="navbar-nav nav nav-pills mx-auto mt-2 mt-lg-0">
<li class="nav-item">
<a href="#" aria-label="Home" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#skincare" aria-label="Skincare" class="nav-link">Skincare</a>
</li>
<li class="nav-item dropdown">
<a href="#" aria-label="Diet" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="navbarDropdown2">
Diet
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown2">
<a class="dropdown-item" href="#safefoods" aria-label="safe foods">Safe Foods</a>
<a class="dropdown-item" href="#mealplans" aria-label="meal plans">Meal Plans</a>
</div>
</li>
<li class="nav-item">
<a href="#routine" aria-label="routine" class="nav-link">Routine</a>
</li>
</ul>
</div>
</nav>
</header>
<section class="main-body container-fluid" id="#">
<h1>Quick Guide</h1>
<h3>Looking after the little one...</h3>
<div class="row">
<div class="card bg-transparent text-white col-sm-12 col-md-4">
<img class="card-img" src="assets/images/skincare-card-3.png" alt="Skincare" >
<div class="card-img-overlay">
<h3 class="card-title main-body-title">SKINCARE</h3>
<p class="card-text">Maintenance and </p>
<p class="card-text">managing flare ups</p>
<a class="btn btn-outline-light skin-btn" href="#skincare" aria-label=" go to skincare section" role="button">Let's Go!</a>
</div>
</div>
<div class="card bg-transparent text-white col-sm-12 col-md-4">
<img class="card-img" src="assets/images/diet-card.png" alt="Diet">
<div class="card-img-overlay">
<h3 class="card-title main-body-title">SAFE FOODS</h3>
<p class="card-text"> What to feed and what not to?</p>
<a class="btn btn-outline-light foods-btn" href="#safefoods" aria-label=" go to safe foods section" role="button">Let's Go!</a>
</div>
</div>
<div class="card bg-transparent text-white col-sm-12 col-md-4">
<img class="card-img" src="assets/images/routine-card.png" alt="Routine">
<div class="card-img-overlay">
<h3 class="card-title main-body-title">ROUTINE</h3>
<p class="card-text"> A typical daily routine</p>
<a class="btn btn-outline-light routine-btn" href="#routine" aria-label=" go to routine section" role="button">Let's Go!</a>
</div>
</div>
</div>
</section>
<section class="jumbotron jumbotron-fluid skincare-background" id= "skincare">
<div class="container-fluid">
<h2 class="text-center"> SKINCARE</h2>
<div class="row problem-areas">
<div class="col-sm-12 col-md-4">
<h5>PROBLEM AREAS</h5>
<ul>
<li>Neck</li>
<li>Belly and lower back</li>
<li>Wrists</li>
<li>Knees (front & back)</li>
<li>Ankles</li>
</ul>
</div>
<div class="col-sm-12 col-md-4">
<h5 >STEROIDS</h5>
<ul>
<li>EMOVATE Ointment (for the body)</li>
</ul>
<p>Once a day for 14 days
Alternate days for 14 days (or longer)
</p>
<ul>
<li>PROTOPIC 0.03% Ointment (for the face)</li>
</ul>
<p>Once a day for 14 days
Alternate days for 14 days
Twice weekly as maintenance
</p>
</div>
<div class="col-sm-12 col-md-4">
<h5 >OTHER HYDRATION</h5>
<ul>
<li>Keep Hydrated by drinking lots of water, fresh juices, ice lollies etc</li>
<li>Use cool wet wraps during extreme discomfort</li>
</ul>
</div>
</div>
<div class="row problem-areas">
<div class="col-sm-12 col-md-6">
<h5>MOISTURISER</h5>
<ul>
<li>EPADERM CREAM</li>
</ul>
<p>x4 a day</p>
</div>
<div class="col-sm-12 col-md-6">
<h5>SOAP SUBSTITUTE</h5>
<ul>
<li>QV Gentle Wash</li>
</ul>
<p>for bathtime at night</p>
</div>
</div>
</div>
</section>
<section class="diet container-fluid">
<h2 id ="safefoods" class="text-center">SAFE FOODS</h2>
<div class="row">
<div class="col-sm-12 col-md-4" >
<h4>VEGETABLES</h4>
<ul class="list-group">
<li class="list-group-item list-group-item-action veg-group">Asparagus</li>
<li class="list-group-item list-group-item-action veg-group">Aubergine</li>
<li class="list-group-item list-group-item-action veg-group">Beetroot</li>
<li class="list-group-item list-group-item-action veg-group">Brocolli</li>
<li class="list-group-item list-group-item-action veg-group">Brussel Sprouts</li>
<li class="list-group-item list-group-item-action veg-group">Carrots</li>
<li class="list-group-item list-group-item-action veg-group">Cauliflower</li>
<li class="list-group-item list-group-item-action veg-group">Celery</li>
<li class="list-group-item list-group-item-action veg-group">Cooked tomatoes</li>
<li class="list-group-item list-group-item-action veg-group">Cucumber</li>
<li class="list-group-item list-group-item-action veg-group">Green Beans</li>
<li class="list-group-item list-group-item-action veg-group">Iceberg/Romaine Lettuce</li>
<li class="list-group-item list-group-item-action veg-group">Kale</li>
<li class="list-group-item list-group-item-action veg-group">Okra</li>
<li class="list-group-item list-group-item-action veg-group">Pak Choi</li>
<li class="list-group-item list-group-item-action veg-group">Parsnips</li>
<li class="list-group-item list-group-item-action veg-group">Peppers</li>
<li class="list-group-item list-group-item-action veg-group">Potatoes</li>
<li class="list-group-item list-group-item-action veg-group">Spinach</li>
<li class="list-group-item list-group-item-action veg-group">Squash</li>
<li class="list-group-item list-group-item-action veg-group">Swede</li>
<li class="list-group-item list-group-item-action veg-group">Sweet Potatoes</li>
<li class="list-group-item list-group-item-action veg-group">Zucchini</li>
</ul>
</div>
<div class="col-sm-12 col-md-4">
<h4>FRUITS</h4>
<ul class="list-group">
<li class="list-group-item list-group-item-action fruit-group">Apples</li>
<li class="list-group-item list-group-item-action fruit-group">Banana</li>
<li class="list-group-item list-group-item-action fruit-group">Blackberries</li>
<li class="list-group-item list-group-item-action fruit-group">Blueberries</li>
<li class="list-group-item list-group-item-action fruit-group">Dried dates</li>
<li class="list-group-item list-group-item-action fruit-group">Pears</li>
<li class="list-group-item list-group-item-action fruit-group">Strawberries</li>
</ul>
<h4>SNACKS</h4>
<ul class="list-group">
<li class="list-group-item list-group-item-action snack-group">Organix - Oat & banana flapjacks (not more than 1 packet a day)</li>
<li class="list-group-item list-group-item-action snack-group">Nairns Gluten free - Plain Oat biscuit (he likes with mashed banana & drop of honey)</li>
<li class="list-group-item list-group-item-action snack-group">Dairy free ice-cream (be careful which type)</li>
<li class="list-group-item list-group-item-action snack-group">Homemade ice lollies</li>
<li class="list-group-item list-group-item-action snack-group">Raisins (small amt)</li>
<li class="list-group-item list-group-item-action snack-group">Kiddylicious- Smoothie Melts Blackcurrant,Apple & Banana ](not more than 1 packet a day)s</li>
<li class="list-group-item list-group-item-action snack-group">Kiddylicious- Apple Fruit Wriggles (not more than 1 packet a day)</li>
<li class="list-group-item list-group-item-action snack-group">Bear Paws- Strawberry & Apple (not more than 1 packet a day)</li>
</ul>
</div>
<div class="col-sm-12 col-md-4">
<h4>MEAT/FISH</h4>
<ul class="list-group">
<li class="list-group-item list-group-item-action meat-group">Plain beef from the counter only (ask if allergy free)</li>
<li class="list-group-item list-group-item-action meat-group">Fresh salmon from the counter only (ask if allergy free)</li>
<li class="list-group-item list-group-item-action meat-group">Eggs (not more than 1 per week)</li>
</ul>
<h4>SUGARS/SWEETNERS</h4>
<ul class="list-group">
<li class="list-group-item list-group-item-action sugars-group">Coconut sugar</li>
<li class="list-group-item list-group-item-action sugars-group">Honey</li>
<li class="list-group-item list-group-item-action sugars-group">Agave</li>
</ul>
<h4>OILS</h4>
<ul class="list-group">
<li class="list-group-item list-group-item-action">Sunflower oil (tiniest amount)</li>
</ul>
<h4>HERBS & SPICES</h4>
<ul class="list-group">
<li class="list-group-item list-group-item-action herbs-group">Spring Onion</li>
<li class="list-group-item list-group-item-action herbs-group">Pinch of garlic</li>
<li class="list-group-item list-group-item-action herbs-group">Pinch of ginger</li>
<li class="list-group-item list-group-item-action herbs-group">Pinch of black pepper</li>
<li class="list-group-item list-group-item-action herbs-group">Salt</li>
</ul>
<h4>MILK</h4>
<ul class="list-group">
<li class="list-group-item list-group-item-action">Oatly Milk</li>
</ul>
<h4>CEREALS</h4>
<ul class="list-group">
<li class="list-group-item list-group-item-action cereals-group">Gluten-free porridge (please check manufacturers label)</li>
<li class="list-group-item list-group-item-action cereals-group">Gluten-free rice porridge flakes (please check manufacturers label)</li>
</ul>
<h4>GRAINS</h4>
<ul class="list-group">
<li class="list-group-item list-group-item-action grains-group">White Rice</li>
</ul>
</div>
</div>
<div class="row">
<div id="mealplans" class="col-sm-12">
<h2 class="text-center">SAMPLE MEAL PLAN</h2>
<div class="d-flex flex-row justify-content-around text-center plain-bg">
<div class="p-2 flex-fill"></div>
<div class="p-2 flex-fill plain-bg">Mon</div>
<div class="p-2 flex-fill plain-bg">Tues</div>
<div class="p-2 flex-fill plain-bg">Wed</div>
<div class="p-2 flex-fill plain-bg">Thurs</div>
<div class="p-2 flex-fill plain-bg">Fri</div>
<div class="p-2 flex-fill plain-bg">Sat</div>
<div class="p-2 flex-fill plain-bg">Sun</div>
</div>
<div class="d-flex brown-bg text-center">
<div class="p-2 brown-bg text-uppercase font-weight-bold">
<h5>Breakfast</h5>
</div>
<div class="p-2 flex-grow-1 brown-bg">Allergy and gluten free porridge with honey and pinch of salt</div>
</div>
<div class="d-flex plain-bg text-center">
<div class="p-2 plain-bg text-uppercase font-weight-bold">
<h5>Snack</h5>
</div>
<div class="p-2 flex-grow-1 plain-bg">Oat biscuit with mashed banana & drop of honey | Cucumber sticks | with oat milk or blended fruit/veg of choice</div>
</div>
<div class="d-flex brown-bg text-center">
<div class="p-2 brown-bg text-uppercase font-weight-bold">
<h5>Lunchbox</h5>
</div>
<div class="p-2 flex-grow-1 brown-bg">celery, carrot, cucumber and pepper sticks | cored apple & pear | Banana | One packet snack</div>
</div>
<div class="d-lg-flex flex-lg-row plain-bg text-center">
<div class="p-2 plain-bg text-uppercase font-weight-bold">
<h5>Supper</h5>
</div>
<div class="p-2 plain-bg">Stir fry rice with Peppers, Spring Onions and Carrots</div>
<div class="p-2 plain-bg">Steak, Mashed Potato & Asparagus</div>
<div class="p-2 plain-bg">Stir fry rice noodles with spinach, spring onions and peppers. Salmon</div>
<div class="p-2 plain-bg">Boiled potatoes with zucchini and radishes</div>
<div class="p-2 plain-bg">Tuna stew with boiled rice & ve</div>
<div class="p-2 plain-bg">Tomato risotto or Veggie risotto</div>
<div class="p-2 plain-bg">Potato and veggie stir fry</div>
</div>
<div class="d-flex brown-bg text-center">
<div class="p-2 brown-bg text-uppercase font-weight-bold">
<h5>Snack/Drink</h5>
</div>
<div class="p-2 flex-grow-1 brown-bg">Blended fruit and veg juice or smoothies | Banana at bedtime if requested.</div>
</div>
</div>
</div>
</section>
<section id="routine" class="container-fluid">
<h2 class="text-center">SAMPLE ROUTINE</h2>
<div class="row justify-content-center">
<div class="col-md-3">
<h4>Morning</h4>
<ul class="routine-lists">
<li>Drink water & toilet</li>
<li>Get dressed and creamed up</li>
<li>Breakfast & vitamins</li>
<li>Off to school</li>
</ul>
</div>
<div class="col-md-3">
<h4>Afternoon</h4>
<ul class="routine-lists">
<li>Lunch & oat milk/ water</li>
<li>Story time / Nature walk or cycling</li>
<li>Craft/painting/free plays</li>
</ul>
</div>
<div class="col-md-3">
<h4>Evening</h4>
<ul class="routine-lists">
<li>Supper & homemade juice</li>
<li>Bathtime and creamed up</li>
<li>Story time & snack</li>
<li>Drink water & toilet</li>
<li>lights out - sleepy paws</li>
</ul>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="assets/js/app.js"></script>
</body>
</html>