-
Notifications
You must be signed in to change notification settings - Fork 0
/
everyday-life.html
516 lines (400 loc) · 23.1 KB
/
everyday-life.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
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
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-FD9ZQ1J37N"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-FD9ZQ1J37N');
</script>
<!-- Meta -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Illustrated love story in a messaging app format">
<meta name="keywords" content="cuddlies, love story, Aliya Budimir, Ante Budimir, illustrations, messaging">
<meta name="theme-color" content="#4c7972">
<meta name="author" content="Ante Budimir">
<!-- Img preview for sharing -->
<meta property="og:image" content="./img/02-everyday-life/1-thumb.jpg">
<meta property="og:title" content="The Cuddlies | Everyday Life"/>
<meta property="og:description" content="Illustrated love story in a messaging app format"/>
<title>The Cuddlies | Everyday Life</title>
<!-- PWA -->
<link rel="manifest" href="./manifest.json">
<!-- Stylesheet -->
<link rel="preload" href="./css/main.css" as="style">
<link rel="stylesheet" href="./css/main.css">
<!-- Lightbox styles -->
<link rel="preload" href="./css/tobii.min.css" as="style">
<link rel="stylesheet" href="./css/tobii.min.css">
<!-- Browser tab icon -->
<link rel="shortcut icon" href="img/icons/icon.png" type="image/x-icon" />
<!-- Apple touch icons -->
<link rel="apple-touch-icon" href="./img/icons/apple-touch-icon-iphone-60x60.png">
<link rel="apple-touch-icon" href="./img/icons/apple-touch-icon-ipad-76x76.png">
<link rel="apple-touch-icon" href="./img/icons/apple-touch-icon-iphone-retina-120x120.png">
<link rel="apple-touch-icon" href="./img/icons/apple-touch-icon-ipad-retina-152x152.png">
</head>
<body id="home">
<!-- HEADER -->
<header id="header">
<div class="container">
<!-- img circle -->
<a class="profile-link" href="about-us.html" title="Read about the real people behind the ''Cuddlies''"><img class="profile-img" src="./img/profile.jpg" alt="Aliya & Ante profile photo"></a>
<a class="logo" href="index.html" title="Home of the Cuddle"><h1>THE CUDDLIES</h1></a>
<nav id="nav">
<!-- Menu -->
<div id="dots-menu">
<i id="menu-icon" class="icon-dots-three-vertical" aria-hidden="true"></i>
</div>
<ul class="menu">
<li class="item-group">
<img class="item-img" src="./img/menu-thumbs/1-menu-thumb.jpg" alt="The ''Cuddlies'' hugging on the pillow" title="The ''Cuddlies'' hugging on the pillow">
<a class="item-link" href="index.html" title="How the ''Cuddlies'' came to be">Cuddlies. The Story.</a>
</li>
<li class="item-group">
<img class="item-img" src="./img/menu-thumbs/2-menu-thumb.jpg" alt="The ''Cuddlies'' lying around surrounded by cats" title="The ''Cuddlies'' lying around surrounded by cats">
<a class="item-link" href="everyday-life.html" title="Take a look at the ''Cuddlies'' daily routine">Everyday Life</a>
</li>
<li class="item-group">
<img class="item-img" src="./img/menu-thumbs/3-menu-thumb.jpg" alt="The ''Cuddlies'' in the kitchen" title="The ''Cuddlies'' in the kitchen">
<a class="item-link" href="yummy.html" title="The ''Cuddlies'' cooking & eating their favorite meals">Yummy</a>
</li>
<li class="item-group">
<img class="item-img" src="./img/menu-thumbs/4-menu-thumb.jpg" alt="A cat & a bear sleeping in a bed" title="A cat & a bear sleeping in bed">
<a class="item-link" href="not-just-cuddlies.html" title="The ''Cuddlies'' in a somewhat different rendition">Not Just the "Cuddlies"</a>
</li>
<li class="item-group">
<img class="item-img" src="./img/menu-thumbs/5-menu-thumb.jpg" alt="The ''Cuddlies'' cuddling in front of the fireplace" title="The ''Cuddlies'' cuddling in front of the fireplace">
<a class="item-link" href="making-memories.html" title="Occasions that became very fond memories">Making Memories</a>
</li>
<li class="item-group">
<img class="item-img" src="./img/menu-thumbs/6-menu-thumb.jpg" alt="The ''Cuddlies'' in a hot air ballon" title="The ''Cuddlies'' in a hot air ballon">
<a class="item-link" href="around-the-world.html" title="The ''Cuddlies'' traveling the world">Around the World</a>
</li>
<li class="item-group">
<img class="item-img" src="./img/menu-thumbs/7-menu-thumb.jpg" alt="The ''Cuddlies'' on the Moon" title="The ''Cuddlies'' on the Moon">
<a class="item-link" href="somewhere-over-the-rainbow.html" title="Find out how the ''Cuddlies'' are having fun over the rainbow and beneath it">Somewhere Over the Rainbow</a>
</li>
<li class="item-group">
<img class="item-img" src="./img/menu-thumbs/8-menu-thumb.jpg" alt="The ''Cuddlies'' playing and singing" title="The ''Cuddlies'' playing and singing">
<a class="item-link" href="talent-show.html" title="Discover numerous talents that the ''Cuddlies'' have">Talent Show</a>
</li>
<li class="item-group">
<img class="item-img" src="./img/menu-thumbs/9-menu-thumb.jpg" alt="The ''Cuddlies'' in traditional clothes" title="The ''Cuddlies'' in traditional clothes">
<a class="item-link" href="celebrations.html" title="The ''Cuddlies'' celebrating & having fun">Celebrations</a>
</li>
<li class="item-group">
<img class="item-img" src="./img/menu-thumbs/10-menu-thumb.jpg" alt="The ''Cuddlies'' touching with their noses through a smartphone" title="The ''Cuddlies'' touching with their noses through a smartphone">
<a class="item-link" href="apart-but-together.html" title="Find out how the ''Cuddlies'' dealt with thousands of kilometers that often separated them">Apart But Together</a>
</li>
<li class="item-group">
<img class="item-img" src="./img/menu-thumbs/11-menu-thumb.jpg" alt="The ''Cuddlies'' cuddling in their bear pijamas" title="The ''Cuddlies'' cuddling in their bear pijamas">
<a class="item-link" href="unexpected-cuddlies.html" title="The ''Cuddlies'' in unusual genres">Unexpected "Cuddlies"</a>
</li>
<li class="item-group">
<img class="item-img" src="./img/menu-thumbs/12-menu-subscribe.jpg" alt="Subscribe icon" title="Subscribe">
<a class="item-link" id="modalLink" href="#modal" title="Subscribe for New Cuddly Stories">Subscribe for New Stories</a>
</li>
</ul>
</nav>
<!-- Subscribe Modal -->
<section id="subscribe-modal">
<div class="modal-content">
<i class="close-btn icon-x" title="Close the window"></i>
<form id="subscribe-form" action="subscribe-handler.php" method="post">
<h2 class="subscribe-title">Join the Cuddlies' mailing list:</h2>
<div class="form-group">
<input type="text" name="name" id="name" placeholder="Your Name" title="Enter your name" required minlength="3">
</div>
<div class="form-group">
<input type="email" name="email" id="email" placeholder="Your Email" title="Enter your email address" required>
</div>
<button type="submit" class="subscribe-btn" title="Subscribe to the ''Cuddlies'' and receive info about new stories">Subscribe</button>
</form>
</div>
</section>
<!-- Language selector -->
<div id="language-selector">
<a href="./hr/svakodnevica.html" title="Hrvatski jezik"><i class="croatian"></i></a>
</div>
</div>
</header>
<!-- STORY -->
<main id="story" class="scroll">
<article id="chat">
<h2 class="chat-title">EVERYDAY LIFE</h2>
<div class="left">
<p>Hi! What’s new?</p>
</div>
<div class="right">
<p>Hey! Nothing special. What about you?</p>
</div>
<div class="left">
<p>Looking through our album.</p>
</div>
<div class="right">
<p>What album?</p>
</div>
<div class="left">
<p>Things that Aliya drew the Cuddlies would do in everyday life.</p>
</div>
<div class="right">
<p>Show it, show it!</p>
</div>
<div class="left chat-img">
<a class="lightbox" href="./img/02-everyday-life/1.jpg"><p><img class="img-thumb" src="./img/02-everyday-life-thumbs/1.jpg" loading="lazy" alt="The ''Cuddlies'' surrounded by cats" title="The ''Cuddlies'' surrounded by cats"></p></a>
</div>
<div class="right">
<p>Oh, that one is from the profile picture!</p>
</div>
<div class="left">
<p>Yes. Since they were missing each other, Aliya would often draw them cuddling.</p>
</div>
<div class="right">
<p>Are those two cats?</p>
</div>
<div class="left">
<p>Yep. They both love cats and these two were living with Aliya and later with
both of them for some time</p>
</div>
<div class="right">
<p>Nice. 😊 Are there any more stories you can show?</p>
</div>
<div class="left">
<p>Sure, many more. Here you go... </p>
</div>
<div class="left chat-img">
<a class="lightbox" href="./img/02-everyday-life/2.jpg"><p><img class="img-thumb" src="./img/02-everyday-life-thumbs/2.jpg" loading="lazy" alt="The ''Cuddlies'' cuddling on a sofa" title="The ''Cuddlies'' cuddling on a sofa"></p></a>
</div>
<div class="right">
<p>Cuddlies cuddling on a sofa. 😄</p>
</div>
<div class="left">
<p>The story is about one lazy cuddly Sunday afternoon with some desert and
a yummy tea.</p>
</div>
<div class="right">
<p>Sounds real cozy.</p>
</div>
<div class="left">
<p>🙂</p>
</div>
<div class="left">
<p>This one is about Cuddlies when they get sick.</p>
</div>
<div class="left chat-img">
<a class="lightbox" href="./img/02-everyday-life/3.jpg"><p><img class="img-thumb" src="./img/02-everyday-life-thumbs/3.jpg" loading="lazy" alt="The ''Cuddlies'' sick in bed" title="The ''Cuddlies'' sick in bed"></p></a>
</div>
<div class="right">
<p>How did they come with that story?</p>
</div>
<div class="left">
<p>Ante was feeling sick one day and told about it to Aliya, so she was imagining
how it would be like if they had a flu together.</p>
</div>
<div class="right">
<p>That’s so sweet.</p>
</div>
<div class="left">
<p>Actually, Ante said that it’s not a good idea to be sick together at the same time,
because no one would be able to take care of them.</p>
</div>
<div class="right">
<p>Well, he’s right, actually. 😄</p>
</div>
<div class="right">
<p>I want to see more. Are there any more stories?</p>
</div>
<div class="left">
<p>Sure!</p>
</div>
<div class="left chat-img">
<a class="lightbox" href="./img/02-everyday-life/4.jpg"><p><img class="img-thumb" src="./img/02-everyday-life-thumbs/4.jpg" loading="lazy" alt="Ante is painting the walls while Aliya is washing the windows" title="Ante is painting the walls while Aliya is washing the windows"></p></a>
</div>
<div class="right">
<p>Are they renovating some place?</p>
</div>
<div class="left">
<p>It’s about how they move to their own place and make some cleaning and renovating
for more comfort.</p>
</div>
<div class="right">
<p>And how would that work out?</p>
</div>
<div class="left">
<p>Pretty well. But they would get very tired and decide to have some rest. Ante would
be reading and Aliya would be lying on his shoulder.</p>
</div>
<div class="left chat-img">
<a class="lightbox" href="./img/02-everyday-life/5.jpg"><p><img class="img-thumb" src="./img/02-everyday-life-thumbs/5.jpg" loading="lazy" alt="Ante is reading and Aliya is resting on his shoulder" title="Ante is reading and Aliya is resting on his shoulder"></p></a>
</div>
<div class="right">
<p>Aaaagh... so peaceful... and the cats are here too.</p>
</div>
<div class="left">
<p>Next day they would go shopping to get some groceries.</p>
</div>
<div class="left chat-img">
<a class="lightbox" href="./img/02-everyday-life/6.jpg"><p><img class="img-thumb" src="./img/02-everyday-life-thumbs/6.jpg" loading="lazy" alt="The ''Cuddlies'' are grocery shopping" title="The ''Cuddlies'' are grocery shopping"></p></a>
</div>
<div class="right">
<p>Are they going to cook something yummy?</p>
</div>
<div class="left">
<p>Yes, but that would be a different story. 🙂</p>
</div>
<div class="left">
<p>To make their home cosier they would plant some flowers.</p>
</div>
<div class="left chat-img">
<a class="lightbox" href="./img/02-everyday-life/7.jpg"><p><img class="img-thumb" src="./img/02-everyday-life-thumbs/7.jpg" loading="lazy" alt="The ''Cuddlies'' are planting flowers" title="The ''Cuddlies'' are planting flowers"></p></a>
</div>
<div class="right">
<p>Ante likes planting flowers?</p>
</div>
<div class="left">
<p>Not really. 😅 But he would help.</p>
</div>
<div class="right">
<p>That’s nice. 🙂</p>
</div>
<div class="left">
<p>And when they would go to sleep, Aliya would kiss Ante good night.</p>
</div>
<div class="left chat-img">
<a class="lightbox" href="./img/02-everyday-life/8.jpg"><p><img class="img-thumb" src="./img/02-everyday-life-thumbs/8.jpg" loading="lazy" alt="Aliya kissing Ante good night" title="Aliya kissing Ante good night"></p></a>
</div>
<div class="right">
<p>😍</p>
</div>
<div class="left">
<p>When Ante was coming to Almaty he told Aliya, that he needs new glasses, so she drew
how they would be shopping for some glasses for him.</p>
</div>
<div class="left chat-img">
<a class="lightbox" href="./img/02-everyday-life/9.jpg"><p><img class="img-thumb" src="./img/02-everyday-life-thumbs/9.jpg" loading="lazy" alt="The ''Cuddlies'' shopping for some glasses" title="The ''Cuddlies'' shopping for some glasses"></p></a>
</div>
<div class="right">
<p>Nice idea! Did they buy theglasses?</p>
</div>
<div class="left">
<p>No. They were shopping for the glasses for three days, but didn’t find anything Ante would like.</p>
</div>
<div class="left">
<p>On this one Ante was giving a shoulder massage, because Aliya’s shoulders were tense and sore.</p>
</div>
<div class="left chat-img">
<a class="lightbox" href="./img/02-everyday-life/10.jpg"><p><img class="img-thumb" src="./img/02-everyday-life-thumbs/10.jpg" loading="lazy" alt="Ante giving Aliya a shoulder massage" title="Ante giving Aliya a shoulder massage"></p></a>
</div>
<div class="right">
<p>Oh, so nice!</p>
</div>
<div class="left">
<p>And here Aliya was drawing how she’s tying Ante’s tie on his first day at a new office.</p>
</div>
<div class="left chat-img">
<a class="lightbox" href="./img/02-everyday-life/11.jpg"><p><img class="img-thumb" src="./img/02-everyday-life-thumbs/11.jpg" loading="lazy" alt="Aliya tying Ante's tie" title="Aliya tying Ante's tie"></p></a>
</div>
<div class="right">
<p>It’s so nice how they care about each other.</p>
</div>
<div class="left">
<p>Well of course! Little everyday things are very important, because they show how much
you care and there for someone you love.</p>
</div>
<div class="right">
<p>I will keep that in mind. I like how you said it. 😊</p>
</div>
<div class="left">
<p>🙂</p>
</div>
<div class="left">
<p>That’s how they get ready together. Ante is shaving his head and Aliya is applying mascara.</p>
</div>
<div class="left chat-img">
<a class="lightbox" href="./img/02-everyday-life/12.jpg"><p><img class="img-thumb" src="./img/02-everyday-life-thumbs/12.jpg" loading="lazy" alt="Aliya is applying mascara while Ante is shaving" title="Aliya is applying mascara while Ante is shaving"></p></a>
</div>
<div class="right">
<p>That one is funny.</p>
</div>
<div class="right">
<p>😀</p>
</div>
<div class="left">
<p>And this one is about how tired they both are after a day’s work, and how they have a quiet and cosy evening.</p>
</div>
<div class="left chat-img">
<a class="lightbox" href="./img/02-everyday-life/13.jpg"><p><img class="img-thumb" src="./img/02-everyday-life-thumbs/13.jpg" loading="lazy" alt="The ''Cuddlies'' having a quiet evening" title="The ''Cuddlies'' having a quiet evening"></p></a>
</div>
<div class="right">
<p>Aaaah... cuddling :)</p>
</div>
<div class="left">
<p>The next one is one of our favorites, how Cuddlies decide where to go next.</p>
</div>
<div class="left chat-img">
<a class="lightbox" href="./img/02-everyday-life/14.jpg"><p><img class="img-thumb" src="./img/02-everyday-life-thumbs/14.jpg" loading="lazy" alt="The ''Cuddlies'' are picking their next travel destination" title="The ''Cuddlies'' are picking their next travel destination"></p></a>
</div>
<div class="right">
<p>And where did they go?</p>
</div>
<div class="left">
<p>Oh they had many great adventures, and went to lots of different places.</p>
</div>
<div class="right">
<p>Will you show them all?</p>
</div>
<div class="left">
<p>Sure! You can see all the travelling adventures in the “Around the World” album.</p>
</div>
<div class="right">
<p>Ok, great! What about other stories?</p>
</div>
<div class="left">
<p>Have a look in the menu section. All the stories are there, according to different topics.</p>
</div>
<div class="right">
<p>Oh, ok. And here?</p>
</div>
<div class="left">
<p>This album is finished, we’ve went through all the stories from Cuddlies’ everyday life.</p>
</div>
<div class="right">
<p>I didn’t even realize... Thanks for showing all of them! Will go have a look at the other albums!</p>
</div>
<div class="left">
<p>We’re glad you’ve enjoyed it! See you soon in other stories!</p>
</div>
<div class="right">
<p>See you!</p>
</div>
</article>
</main>
<!-- Scroll back to top button EN -->
<div id="scroll-to-top">
<button class="scrollButton" title="Back to Top"><i class="icon-arrow-up2" aria-hidden="true"></i></button>
</div>
<!-- Sharing links EN -->
<section id="sharing-links">
<h2 class="hidden-visually">Share buttons</h2>
<button class="sharing-link toggle" title="Share">
<i class="icon-share2" title="Share"></i>
<i class="icon-x" title="Close"></i>
</button>
<a class="sharing-link facebook" href="https://web.facebook.com/sharer.php?u=www.aliyabudimir.com" target="_blank" rel="noopener" title="Share on Facebook"><i class="icon-facebook" aria-hidden="true"></i></a>
<a class="sharing-link whatsapp" href="whatsapp://send?text=https://www.aliyabudimir.com" target="_blank" rel="noopener" title="Share on WhatsApp"><i class="icon-whatsapp" aria-hidden="true"></i></a>
</section>
<!-- FOOTER -->
<footer id="footer">
<a href="https://www.aliyabudimir.com"><img class="footer-icon" src="./img/icons/icon.png" alt="Aliya Budimir Portfolio" title="Aliya Budimir Portfolio" loading="lazy"></a>
<p>COPYRIGHT © 2020 - <span id="currentYear"></span> ALIYA BUDIMIR</p>
</footer>
<!-- JS -->
<script src="./js/tobii.min.js" defer></script>
<script src="./js/iTooltip.js" defer></script>
<script src="./js/main.js" defer></script>
</body>
</html>