-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcare.html
More file actions
370 lines (335 loc) · 14.4 KB
/
care.html
File metadata and controls
370 lines (335 loc) · 14.4 KB
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
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aromagic Candle Care Page</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="./src/assets/css/care.css">
<link rel ='stylesheet' href="./src/assets/css/style.css">
<style>
/* include nav bar and footers, and any shared styling accross all pages. */
/* .card-img-top{
width: 20em;
} */
:root{
--primary-color: #F9F5E7;
--secondary-color: #795757;
--tertiary-color: #664343;
--quadra-color: #3B3030;
--main-font:var(--main-font);
--heading-font: ;
--text-font: ;
}
body{
margin:0;
background-color: #F9F5E7;
}
.navbar{
background-color: var(--quadra-color);
}
.navbar a{
color:var(--primary-color);
}
.navbar-brand{
color: var(--primary-color);
}
.item-search-btn{
color: var(--primary-color);
border-color: var(--primary-color);
}
.footer{
background-color: #3B3030;
color:#F9F5E7
}
</style>
</head>
<body>
<!-- TODO: Add navigation header -->
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand" href="#">Aromagic</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./care.html">Candle Care</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-person-circle"></i>
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="./checkout.html">View Cart</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a id = "signOutbtn" class="dropdown-item">Sign Out</a></li>
</ul>
</li>
<li class="nav-item">
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn item-search-btn" type="submit">Search</button>
</form>
</li>
<li class="nav-item justify-content-end" >
<a class = "nav-link" href="checkout.html">Cart</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="p-3 text-primary-emphasis border border-primary-subtle">
<div class="container text-center">
<div class="row">
<div class="col">
<br>
<h1>Candle Care</h1>
<p>To ensure you are giving your candle the best life you possibly can, <br>follow these instructions before use:</p>
<br>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">
<img src="./src/assets/imgs/candle1.gif" class="img-fluid" alt="Aromagic Candle" width="200%">
</div>
</div>
</div>
<div class="container text-center">
<div class="row">
<div class="col">
<br>
<h1>1. Let the candle create a wax layer</h1>
<p>In order to give the candle future opportunites to burn evenly and economically, it is reccomended that users allow for a "wet" layer of wax to accumulate before putting out the flame. This should take roughly four hours after it is first lit.</p>
<br>
</div>
</div>
</div>
<div class="container text-center">
<div class="row">
<div class="col">
<img src="./src/assets/imgs/candle2.gif" class="img-fluid" alt="Aromagic Candle" width="200%">
</div>
</div>
</div>
<div class="container text-center">
<div class="row">
<div class="col">
<br>
<h1>2. Use a snuffer to remove the flame</h1>
<p>To prevent the candle from producing any more wase after use, place a snuffer on top of the wick for about 5 seconds. Once the flame is out, allow it to cool.</p>
<br>
</div>
</div>
</div>
<div class="container text-center">
<div class="row">
<div class="col">
<img src="./src/assets/imgs/candle3.gif" class="img-fluid" alt="Aromagic Candle" width="200%">
</div>
</div>
</div>
<div class="container text-center">
<div class="row">
<div class="col">
<br>
<h1>3. Keep your candle clean and use a lid</h1>
<p>Remove any dust or dirt present on the candle after usage. Once clean, use a lid, if provided, to seal the contents of the candle for greater preservation.</p>
<br>
</div>
</div>
</div>
<div class="container text-center">
<div class="row">
<div class="col">
<img src="./src/assets/imgs/candle4.gif" class="img-fluid" alt="Aromagic Candle" width="200%">
</div>
</div>
</div>
<div class="container text-center">
<div class="row">
<div class="col">
<br>
<h1>4. Remove excess wax before using again</h1>
<p>Wax residue will build up with each subsequent, and it is important to manage to stop it from spreading or burning yourself.</p>
<br>
</div>
</div>
</div>
<div class="container text-center">
<div class="row">
<div class="col">
<img src="./src/assets/imgs/candle5.gif" class="img-fluid" alt="Aromagic Candle" width="200%">
</div>
</div>
</div>
<div class="container text-center">
<div class="row">
<div class="col">
<br>
<h1>5. Remove any excess of the wick</h1>
<p>Once burnt, the wick of a candle can no longer be used, and it will soon fall into the pit of wax below it. It is important to trim the wick regularly to ensure this doesn't happen, keeping it at roughly 6mm.</p>
<hr>
</div>
</div>
</div>
<div class="container text-center">
<div class="row">
<div class="col">
<br>
<h1>Why should I care?:</h1>
<p>(and more frequently asked questions)</p>
<br>
</div>
</div>
</div>
<div class="container text-center">
<div class="row">
<div class="col">
<br>
<h4>Why should I take care of my candle?:</h4>
<p>Caring for your candle will guarantee a much longer, richer burn and more use from your purchase!</p>
<br>
</div>
<div class="col">
<br>
<h4>When should I stop using my candle?:</h4>
<p>Don't attempt to use all of the wax the candle has, as the wick requires a solid foundation to burn properly. Once your wax measures at only 5mm, it's time to put it away.</p>
<br>
</div>
</div>
</div>
<div class="container text-center">
<div class="row">
<div class="col">
<br>
<h4>How should I dispose of my candle?:</h4>
<p>Was it in a glass jar? Remove any of the contents inside and use it as a jar for, anything else! Any removed contents can be disposed of in the garbage, but you should ensure they aren't dry in order to prevent a possible fire hazard.</p>
<br>
</div>
<div class="col">
<br>
<h4>Are scented candles safe for everyone to breath?:</h4>
<p>While every candle is different, any candle provided by an official retailer or service is unlikely to cause any health disturbances or allergic reactions, unless otherwise specified.</p>
<br>
</div>
</div>
</div>
<div class="container text-center">
<div class="row">
<div class="col">
<br>
<h4>How long can I leave my candle alone?:</h4>
<p>While it is generally not encouraged to leave any open flames going alone, candles should not be left out any longer than 4 hours and should be structurally ensured not to spill or fall over.</p>
<br>
</div>
<div class="col">
<br>
<h4>Can I leave my candle alone around children or pets?:</h4>
<p>No.</p>
<br>
</div>
</div>
</div>
</div>
<!-- TODO: Add navigation footer -->
<div class="p-3 footer border border-primary-subtle">
<div class="row">
<div class="col">
<br>
<br>
</div>
<div class="col">
<br>
<br>
</div>
<div class="col">
<br>
<br>
<img src="./src/assets/imgs/candlelogoWHITE.png" width="200px">
<br>
</div>
<div class="col">
<br>
<br>
<br>
<p>Information: 210-555-5555</p>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
<path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-twitter-x" viewBox="0 0 16 16">
<path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"></path>
</svg>
<br>
</div>
<div class="col">
<br>
<br>
</div>
<div class="col" style="width: 101px">
<div class="d-flex" style="height: 220px; width: 100px;">
<div class="vr"></div>
</div>
</div>
<div class="col">
<br>
<nav class="nav flex-column">
<a class="nav-link" href="#">Home</a>
<hr>
<a class="nav-link" href="#">Shop</a>
<hr>
<a class="nav-link" href="#">Cart</a>
</nav>
<br>
</div>
<div class="col">
<br>
<nav class="nav flex-column">
<a class="nav-link active" aria-current="page" href="#">Candle Care</a>
<hr>
<a class="nav-link" href="#">FAQ</a>
<hr>
<a class="nav-link" href="#">Logout</a>
</nav>
<br>
</div>
<div class="col">
<br>
<br>
</div>
<div class="col">
<br>
<br>
</div>
</div>
</div>
<div class="p-3 footer border border-warning-subtle">
<div class="row">
<div class="col" align="center">
Aromagic
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-c-circle" viewBox="0 0 16 16">
<path d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.146 4.992c-1.212 0-1.927.92-1.927 2.502v1.06c0 1.571.703 2.462 1.927 2.462.979 0 1.641-.586 1.729-1.418h1.295v.093c-.1 1.448-1.354 2.467-3.03 2.467-2.091 0-3.269-1.336-3.269-3.603V7.482c0-2.261 1.201-3.638 3.27-3.638 1.681 0 2.935 1.054 3.029 2.572v.088H9.875c-.088-.879-.768- 1.512-1.729-1.512"></path>
</svg> -->
2024
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>