-
Notifications
You must be signed in to change notification settings - Fork 0
/
making-memories.html
527 lines (408 loc) · 23.5 KB
/
making-memories.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
517
518
519
520
521
522
523
524
525
526
527
<!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/05-making-memories/5-thumb.jpg">
<meta property="og:title" content="The Cuddlies | Making Memories"/>
<meta property="og:description" content="Illustrated love story in a messaging app format"/>
<title>The Cuddlies | Making Memories</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/trenutci-za-pamcenje.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">MAKING MEMORIES</h2>
<div class="right">
<p>Sounds interesting, what’s this story about?</p>
</div>
<div class="left">
<p>About occasions that become special memories 🙂</p>
</div>
<div class="right">
<p>Oooh... show it, show it</p>
</div>
<div class="left chat-img">
<a class="lightbox" href="./img/05-making-memories/1.jpg"><p><img class="img-thumb" src="./img/05-making-memories-thumbs/1.jpg" loading="lazy" alt="The ''Cuddlies'' smelling a rose" title="The ''Cuddlies'' smelling a rose"></p></a>
</div>
<div class="left">
<p>This one is the from the beginning of their story. When Ante came to visit Aliya the first
time, they were walking around the city and he went and got her a rose from a near by garden.
And so it became one of the first memories.</p>
</div>
<div class="right">
<p>Did he steal the rose?</p>
</div>
<div class="left">
<p>Technically he just took something nobody cared about. But his words were “Anybody could buy a
rose, but stealing one is not for everybody”.</p>
</div>
<div class="right">
<p>😄</p>
</div>
<div class="left chat-img">
<a class="lightbox" href="./img/05-making-memories/2.jpg"><p><img class="img-thumb" src="./img/05-making-memories-thumbs/2.jpg" loading="lazy" alt="The ''Cuddlies'' hugging" title="The ''Cuddlies'' hugging"></p></a>
</div>
<div class="left">
<p>This one is about how they were missing hugging each other, while they were apart</p>
</div>
<div class="right">
<p>Cuddlies 😊</p>
</div>
<div class="left">
<p>They cuddle a lot, you just have to get used to it 😄</p>
</div>
<div class="right">
<p>Bring it on!</p>
</div>
<div class="left chat-img">
<a class="lightbox" href="./img/05-making-memories/3.jpg"><p><img class="img-thumb" src="./img/05-making-memories-thumbs/3.jpg" loading="lazy" alt="Ante is getting Aliya a star from the sky" title="Ante is getting Aliya a star from the sky"></p></a>
</div>
<div class="right">
<p>He got her a star from the sky!</p>
</div>
<div class="left">
<p>He took a ladder and climbed all the way up to get a star</p>
</div>
<div class="right">
<p>So romantic 😍</p>
</div>
<div class="left chat-img">
<a class="lightbox" href="./img/05-making-memories/4.jpg"><p><img class="img-thumb" src="./img/05-making-memories-thumbs/4.jpg" loading="lazy" alt="The ''Cuddlies'' on a date" title="The ''Cuddlies'' on a date"></p></a>
</div>
<div class="left">
<p>On this one they are having a date</p>
</div>
<div class="right">
<p>So simple</p>
</div>
<div class="left">
<p>And yet when you’re apart, it’s something you miss so much</p>
</div>
<div class="right">
<p>That’s true</p>
</div>
<div class="left chat-img">
<a class="lightbox" href="./img/05-making-memories/5.jpg"><p><img class="img-thumb" src="./img/05-making-memories-thumbs/5.jpg" loading="lazy" alt="The ''Cuddlies'' cuddling in front of a fireplace" title="The ''Cuddlies'' cuddling in front of a fireplace"></p></a>
</div>
<div class="left">
<p>And this one is a cold winter day and Ante and Aliya warming up near the fireplace</p>
</div>
<div class="right">
<p>Fireplace... with crackling wood and burning fire... real cosy 😊</p>
</div>
<div class="left">
<p>It is. Especially when it’s cold outside</p>
</div>
<div class="left">
<p>And of course some things that are very very special</p>
</div>
<div class="left chat-img">
<a class="lightbox" href="./img/05-making-memories/6.jpg"><p><img class="img-thumb" src="./img/05-making-memories-thumbs/6.jpg" loading="lazy" alt="The ''Cuddlies'' are expecting a baby" title="The ''Cuddlies'' are expecting a baby"></p></a>
</div>
<div class="right">
<p>Oooh, they are expecting a baby!</p>
</div>
<div class="left">
<p>Their first one 🙂</p>
</div>
<div class="right">
<p>Do they know if it’s a boy or a girl?</p>
</div>
<div class="left">
<p>Judging by the color of the knitting, I’d say they do 😃</p>
</div>
<div class="right">
<p>Oh, yes, I see now!</p>
</div>
<div class="left">
<p>And after some time...</p>
</div>
<div class="left chat-img">
<a class="lightbox" href="./img/05-making-memories/7.jpg"><p><img class="img-thumb" src="./img/05-making-memories-thumbs/7.jpg" loading="lazy" alt="The ''Cuddlies'' + one" title="The ''Cuddlies'' + one"></p></a>
</div>
<div class="right">
<p>There are three of them!</p>
</div>
<div class="left">
<p>😊</p>
</div>
<div class="right">
<p>So is it going to be the tree of them from now on?</p>
</div>
<div class="left">
<p>Not necessarily... Since the stories are not entirely chronological, there are many stories
about just the two of them</p>
</div>
<div class="left chat-img">
<a class="lightbox" href="./img/05-making-memories/8.jpg"><p><img class="img-thumb" src="./img/05-making-memories-thumbs/8.jpg" loading="lazy" alt="The ''Cuddlies'' enjoying a starry sky" title="The ''Cuddlies'' enjoying a starry sky"></p></a>
</div>
<div class="left">
<p>This one, for example, is about the two of them enjoying the starry sky</p>
</div>
<div class="right">
<p>I like how the stories could jump or be connected to one another - never gets boring 😄</p>
</div>
<div class="left">
<p>It’s pretty hard to make one long story. And since Aliya was drawing what she felt like at a
particular moment, it was never the aim to make one long story 🙂</p>
</div>
<div class="right">
<p>Show me more!</p>
</div>
<div class="left">
<p>😄</p>
</div>
<div class="left">
<p>Here. A romantic dance one</p>
</div>
<div class="left chat-img">
<a class="lightbox" href="./img/05-making-memories/9.jpg"><p><img class="img-thumb" src="./img/05-making-memories-thumbs/9.jpg" loading="lazy" alt="The ''Cuddlies'' are dancing" title="The ''Cuddlies'' are dancing"></p></a>
</div>
<div class="right">
<p>They are so pretty!</p>
</div>
<div class="right">
<p>Is it some special occasion?</p>
</div>
<div class="left">
<p>A romantic dinner and some nice music</p>
</div>
<div class="right">
<p>I see... very nice...</p>
</div>
<div class="left chat-img">
<a class="lightbox" href="./img/05-making-memories/10.jpg"><p><img class="img-thumb" src="./img/05-making-memories-thumbs/10.jpg" loading="lazy" alt="The ''Cuddlies'' cuddling in their sleep" title="The ''Cuddlies'' cuddling in their sleep"></p></a>
</div>
<div class="left">
<p>Although it might seem usual, still, cuddling in a sleep would also be one of the things the
Cuddlies would keep as a dear memory. Because even the most usual things sometimes are the
most important </p>
</div>
<div class="right">
<p>And since the’re Cuddlies, they never get bored with it 😄</p>
</div>
<div class="left">
<p>We’ve warned you that you have to simply get used to the cuddling 😇</p>
</div>
<div class="left chat-img">
<a class="lightbox" href="./img/05-making-memories/11.jpg"><p><img class="img-thumb" src="./img/05-making-memories-thumbs/11.jpg" loading="lazy" alt="The ''Cuddlies'' at the wedding" title="The ''Cuddlies'' at the wedding"></p></a>
</div>
<div class="left">
<p>This one is about cuddling, dancing and romance 😇</p>
</div>
<div class="right">
<p>Is it their wedding?</p>
</div>
<div class="left">
<p>Not theirs, but a wedding they were invited to</p>
</div>
<div class="right">
<p>They look pretty 🙂</p>
</div>
<div class="left chat-img">
<a class="lightbox" href="./img/05-making-memories/12.jpg"><p><img class="img-thumb" src="./img/05-making-memories-thumbs/12.jpg" loading="lazy" alt="The ''Cuddlies'' looking at the sunset at the sea" title="The ''Cuddlies'' looking at the sunset at the sea"></p></a>
</div>
<div class="left">
<p>They also dream together, looking at the sunset at the sea</p>
</div>
<div class="right">
<p>What do they dream about?</p>
</div>
<div class="left">
<p>Many different things... where they want to travel, what to do, how to build their life together...</p>
</div>
<div class="left">
<p>Have a look at some of them...</p>
</div>
<div class="left chat-img">
<a class="lightbox" href="./img/05-making-memories/13.jpg"><p><img class="img-thumb" src="./img/05-making-memories-thumbs/13.jpg" loading="lazy" alt="The ''Cuddlies'' + one expecting one more" title="The ''Cuddlies'' + one expecting one more"></p></a>
</div>
<div class="left">
<p>How their family grows bigger</p>
</div>
<div class="right">
<p>Ooohhh...a girl and one more baby to come</p>
</div>
<div class="left">
<p>Yes, yes 🙂</p>
</div>
<div class="left">
<p>And how they grow older</p>
</div>
<div class="left chat-img">
<a class="lightbox" href="./img/05-making-memories/14.jpg"><p><img class="img-thumb" src="./img/05-making-memories-thumbs/14.jpg" loading="lazy" alt="Wrinkled ''Cuddlies''" title="Wrinkled ''Cuddlies''"></p></a>
</div>
<div class="right">
<p>Wrinkles, but still cuddling 🙂</p>
</div>
<div class="left">
<p>Here they sit at their terrace, watch the sunset and happily dream more...</p>
</div>
<div class="left chat-img">
<a class="lightbox" href="./img/05-making-memories/15.jpg"><p><img class="img-thumb" src="./img/05-making-memories-thumbs/15.jpg" loading="lazy" alt="The ''Cuddlies'' watching the sunset from their terrace" title="The ''Cuddlies'' watching the sunset from their terrace"></p></a>
</div>
<div class="right">
<p>How beautiful... and what do they dream about here?</p>
</div>
<div class="left">
<p>About growing old together and still holding each other’s hand</p>
</div>
<div class="left chat-img">
<a class="lightbox" href="./img/05-making-memories/16.jpg"><p><img class="img-thumb" src="./img/05-making-memories-thumbs/16.jpg" loading="lazy" alt="Very old ''Cuddlies''" title="Very old ''Cuddlies''"></p></a>
</div>
<div class="right">
<p>How cute! Very old Cuddlies!</p>
</div>
<div class="right">
<p>What about dreams of travelling and other dreams?</p>
</div>
<div class="left">
<p>The travelling dreams are in the next story and more dreams to see in other stories </p>
</div>
<div class="right">
<p>I’ll go have a look, can’t wait to see!</p>
</div>
<div class="left">
<p>Enjoy! 🙂</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>