-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
354 lines (325 loc) · 20.7 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Wonderbly personalised kids' books ingnite imagination.">
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Wonderbly Christmas Lookbook UK</title>
</head>
<body>
<section class="section-front">
<div class="row">
<img src="resources/pages/front/front_title.png" alt="More ways to give stupendous superpowers" class="front-last__title">
</div>
</section>
<section class="section-intro">
<div class="row">
<div class="col span-1-of-2">
<img src="resources/pages/intro/intro_title.png" alt="Hello there title" class="intro-last-page_img-title--left">
<!-- The class above is relevant to desktop-->
</div>
<div class="col span-1-of-2 intro-last-page_p--long white-copy">
<p class="p--spacing">
We believe our personalised books can give kids superpowers. Maybe not yeti strength or X-ray vision (we’re working on those), but the things that really matter: courage, creativity and belonging.
</p>
<p class="p--spacing">In 2014 we embarked on a mission to inspire little readers with boundless self-belief. Our first book, Lost My Name, made millions of children smile across the world.
</p>
<p class="p--spacing">
Ever since, we’ve been busy creating a number of just-as-mind-blowingly-personalised books and gifts. You’ll find them all right here.
</p>
</div>
</div>
</section>
<section class="section-lmn">
<div class="row">
<div class="col">
<img src="resources/pages/lmn/lmn_title.png" alt="I am unique title" class="product-page__title">
<div class="product-page_description--right white-copy">
<h5 class="heading-product">The Little Boy/Girl Who Lost Their Name</h5>
<h6 class="heading-age">(Ages 0–8)</h6>
<div class="separator"></div>
<p class="product-body--right">
Lost My Name books do so much more than add a child’s name. The letters of their name determine the characters they meet and the experiences they have, creating a unique quest of self-discovery. Our international best-seller.</p>
</div>
</div>
</div>
</section>
<section class="section-lmn-personalisation">
<div class="row">
<div class="col span-1-of-2">
<div class="row">
<img src="resources/pages/lmn-personalised/lmn-personalised-keepsake.png" alt="Lost My Name Keepsake book" class="product__personalisation-image--vertical-left">
<!-- The class above is relevant to desktop-->
</div>
<div class="row product__personalisation-copy--vertical-left white-copy">
<h5 class="heading-product--small">Lost My Name Softcover Keepsake </h5>
<p class="">
<!-- The class above is relevant to desktop-->
Features our softcover book, safely tucked away in a glorious sunshine box.
</p>
<h5 class="pricing">$37.99/£24.99</h5>
</div>
</div>
<div class="col span-1-of-2">
<div class="row">
<img src="resources/pages/lmn-personalised/lmn-personalised-deluxe.png" alt="Lost My Name Deluxe book" class="product__personalisation-image--vertical-right">
<!-- The class above is relevant to desktop-->
</div>
<div class="row product__personalisation-copy--vertical-right white-copy">
<h5 class="heading-product--small">Lost My Name Deluxe</h5>
<p class="">
<!-- The class above is relevant to desktop-->
Comes in hardcover with a clothbound spine, and arrives in a keep-for-life presentation case.
</p>
<h5 class="pricing">$49.99/£34.99</h5>
</div>
</div>
</div>
</section>
<section class="section-jhome">
<div class="row">
<div class="col">
<img src="resources/pages/jhome/jhome_title.png" alt="I am adventorous" class="product-page__title">
<div class="product-page_description--right white-copy">
<h5 class="heading-product">The Incredible Intergalactic Journey Home </h5>
<h6 class="heading-age">(Ages 3-10)</h6>
<div class="separator"></div>
<p class="product-body--right">
Take your child on a journey through space. Watch their face light up when they see their name in the stars and zoom over their real-life neighbourhood.
</p>
<h5 class="pricing">$24.99/£16.99</h5>
</div>
</div>
</div>
</section>
<section class="section-jhome-personalisation">
<div class="row">
<div class="col span-1-of-2">
<img src="resources/pages/jhome-personalised/jhome-personalised-landmark.png" alt="Jhome landmark spread" class="product__personalisation-image--horizontal-left">
<!--The class above is relevant to desktop: or perhaos you should include it in div class? Like so <div class="col span-1-of-2 child-image---left"> -->
</div>
<div class="col span-1-of-2 product__personalisation-copy--horizontal-right white-copy">
<h5 class="heading-product--small">Based on their actual address</h5>
<p class>Features a gasp-inducing satellite image of the child’s city and street (with the help of some nifty technology).</p>
</div>
</div>
<div class="row">
<div class="col span-1-of-2">
<img src="resources/pages/jhome-personalised/jhome-personalised-namepage.png" alt="Jhome name in the galaxy" class="product__personalisation-image--horizontal-right">
<!--The class above is relevant to desktop: or perhaos you should include it in div class? Like so <div class="col span-1-of-2 child-image---left"> -->
</div>
<div class="col span-1-of-2 product__personalisation-copy--horizontal-left white-copy">
<h5 class="heading-product--small">Show them their name in the stars</h5>
<p>We turn the child’s name into a beautiful constellation, making them the stars of the show.</p>
</div>
</div>
</section>
<section class="section-bt">
<div class="row">
<div class="col">
<img src="resources/pages/bt/bt_title.png" alt="I am determined" class="product-page__title">
<div class="product-page_description--left red-copy">
<h5 class="heading-product">The Birthday Thief</h5>
<h6 class="heading-age">(Ages 0–8)</h6>
<div class="separator"></div>
<p class="product-body--left">
Put a child in a spellbinding adventure based on when they were born, and show them that the days between birthdays matter just as much.
</p>
<h5 class="pricing">$49.99/£34.99</h5>
</div>
</div>
</div>
</section>
<section class="section-bt-personalisation">
<div class="row">
<div class="col span-1-of-2">
<img src="resources/pages/bt-personalised/bt-personalised-birthday-spread.png" alt="BT birthday spread" class="product__personalisation-image--horizontal-left--small-margin">
<!--The class above is relevant to desktop: or perhaos you should include it in div class? Like so <div class="col span-1-of-2 child-image---left"> -->
</div>
<div class="col span-1-of-2 product__personalisation-copy--horizontal-right--small-margin">
<h5 class="heading-product--small">A story as big as their big day</h5>
<p>Finished with a uniquely personalised page that will blow their socks off (and blow the candles out).</p>
</div>
</div>
<div class="row">
<div class="col span-1-of-2">
<img src="resources/pages/bt-personalised/bt-personalised-candle-spread.png" alt="BT candle spread" class="product__personalisation-image--horizontal-right--small-margin">
<!--The class above is relevant to desktop: or perhaos you should include it in div class? Like so <div class="col span-1-of-2 child-image---left"> -->
</div>
<div class="col span-1-of-2 product__personalisation-copy--horizontal-left--small-margin">
<h5 class="heading-product--small">Based on their birth date</h5>
<p>The child meets a cast of quirky characters based on the day, month and year they were born.</p>
</div>
</div>
</section>
<section class="section-koy">
<div class="row">
<div class="col">
<img src="resources/pages/koy/koy_title.png" alt="I am wise" class="product-page__title">
<div class="product-page_description--right purple-copy">
<h5 class="heading-product">Kingdom of You</h5>
<h6 class="heading-age">(Ages 0–8)</h6>
<div class="separator"></div>
<p class="product-body--right">
Create a kingdom full of a child’s favourite things. Animals and ice cream? Superheroes and pizza? You choose!
</p>
<h5 class="pricing">$49.99/£34.99</h5>
</div>
</div>
</div>
</section>
<section class="section-koy-personalisation">
<div class="row">
<div class="col span-1-of-2">
<img src="resources/pages/koy-personalised/koy-personalised-kingdom.png" alt="KOY kingdom spread" class="product__personalisation-image--horizontal-left">
<!--The class above is relevant to desktop: or perhaos you should include it in div class? Like so <div class="col span-1-of-2 child-image---left"> -->
</div>
<div class="col span-1-of-2 product__personalisation-copy--horizontal-right">
<h5 class="heading-product--small">More personalised than you could imagine</h5>
<p>In this double-page spread alone, the child’s name appears a staggering 14 times.</p>
</div>
</div>
<div class="row">
<div class="col span-1-of-2">
<img src="resources/pages/koy-personalised/koy-personalised-pasta.png" alt="KOY monster spread" class="product__personalisation-image--horizontal-right">
</div>
<div class="col span-1-of-2 product__personalisation-copy--horizontal-left">
<h5 class="heading-product--small">Bursting with their favourite things</h5>
<p>Such as a gigantic portion of their yummiest food (which, uh-oh, turns into a food monster).</p>
</div>
</div>
</section>
<section class="section-snowflake">
<div class="row">
<div class="col">
<img src="resources/pages/snowflake/snowflake_title.png" alt="I belong" class="product-page__title">
<div class="product-page_description--left--bottom white-copy">
<h5 class="heading-product">The Christmas Snowflake</h5>
<h6 class="heading-age">For all the family</h6>
<div class="separator"></div>
<p class="product-body--left">
Weave the names of your loved ones through this charming festive tale, and show a child there’s really no place like home.
</p>
<h5 class="pricing">$28.99/£19.99</h5>
</div>
</div>
</div>
</section>
<section class="section-snowflake-personalisation">
<div class="row">
<div class="col span-1-of-2">
<img src="resources/pages/snowflake-personalised/snowflake-personalised-flying.png" alt="Snowflake flying spread" class="product__personalisation-image--horizontal-left--small-margin">
</div>
<div class="col span-1-of-2 product__personalisation-copy--horizontal-right--small-margin white-copy">
<h5 class="heading-product--small">Personalised to your family</h5>
<p>See their names appear on Snowflake’s crystals, on Christmas stockings, even floating magically on the winter breeze...</p>
</div>
</div>
<div class="row">
<div class="col span-1-of-2">
<img src="resources/pages/snowflake-personalised/snowflake-personalised-snowflake.png" alt="Ornament spread" class="product__personalisation-image--horizontal-right--small-margin">
</div>
<div class="col span-1-of-2 product__personalisation-copy--horizontal-left--small-margin white-copy">
<h5 class="heading-product--small">A very special keepsake</h5>
<p>On the final page: a beautiful pull-out-and-keep ornament, which leaves your family's names perfectly framed beneath.</p>
</div>
</div>
</section>
<section class="section-mgt">
<div class="row">
<div class="col">
<img src="resources/pages/mgt/mgt_title.png" alt="I am creative" class="product-page__title">
<div class="product-page_description--right--bottom purple-copy">
<h5 class="heading-product">My Golden Ticket</h5>
<h6 class="heading-age">(Ages 5–12)</h6>
<div class="separator"></div>
<p class="product-body--right">
Sound the trumpets...Willy Wonka’s factory is now open to all! Every child gets their own Oompa Loompa song, Wonka bar, and oodles more in this truly wondrous adventure.
</p>
<h5 class="pricing">$49.99/£34.99</h5>
</div>
</div>
</div>
</section>
<section class="section-mgt-personalisation">
<div class="row">
<div class="col span-1-of-2">
<img src="resources/pages/mgt-personalised/mgt-personalised-candy.png" alt="MGT candy spread" class="product__personalisation-image--horizontal-left--small-margin">
<!--The class above is relevant to desktop: or perhaps you should include it in div class? Like so <div class="col span-1-of-2 child-image---left"> -->
</div>
<div class="col span-1-of-2 product__personalisation-copy--horizontal-right">
<h5 class="heading-product--small">Their very own Wonka bar design</h5>
<p>Something scrumptious for your reader: a one-of-a-kind Wonka bar inspired by their name. Good enough to eat right off the page!</p>
</div>
</div>
<div class="row">
<div class="col span-1-of-2">
<img src="resources/pages/mgt-personalised/mgt-personalised-song.png" alt="MGT Oompa Loompa spread" class="product__personalisation-image--horizontal-right--small-margin">
<!--The class above is relevant to desktop: or perhaos you should include it in div class? Like so <div class="col span-1-of-2 child-image---left"> -->
</div>
<div class="col span-1-of-2 product__personalisation-copy--horizontal-left">
<h5 class="heading-product--small">Personalised Oompa Loompa song</h5>
<p>Your child won't believe their ears when they realise they’re the star of this marvellously melodious moment.</p>
</div>
</div>
</section>
<section class="section-lb">
<div class="row">
<div class="col">
<img src="resources/pages/lb/lb_title.png" alt="I am brand new" class="product-page__title">
<div class="product-page_description--right purple-copy">
<h5 class="heading-product">A Letter for the Littlest Bear</h5>
<h6 class="heading-age">(Ages 0–2)</h6>
<div class="separator"></div>
<p class="product-body--right">
Welcome a child to the world. In this charming tale, every family member has an important part to play as a special letter makes its way to a new arrival, bear by bear.
</p>
<h5 class="pricing">$24.99/£16.99</h5>
</div>
</div>
</div>
</section>
<section class="section-lb-personalisation">
<div class="row">
<div class="col span-1-of-2">
<img src="resources/pages/lb-personalised/lb-personalisation-family.png" alt="Family spread" class="product__personalisation-image--horizontal-left">
<!--The class above is relevant to desktop: or perhaos you should include it in div class? Like so <div class="col span-1-of-2 child-image---left"> -->
</div>
<div class="col span-1-of-2 product__personalisation-copy--horizontal-right">
<h5 class="heading-product--small">Feature the whole (furry) family</h5>
<p>Add and name up to nine different bears - friends, family, loved ones of all kinds - to star in your story.</p>
</div>
</div>
<div class="row">
<div class="col span-1-of-2">
<img src="resources/pages/lb-personalised/lb-personalised-letter.png" alt="Letter spread" class="product__personalisation-image--horizontal-right">
<!--The class above is relevant to desktop: or perhaos you should include it in div class? Like so <div class="col span-1-of-2 child-image---left"> -->
</div>
<div class="col span-1-of-2 product__personalisation-copy--horizontal-left">
<h5 class="heading-product--small">Special delivery!</h5>
<p>Near the end of the book, your little one will discover a fold-out letter with your personal dedication inside.</p>
</div>
</div>
</section>
<section class="section-last">
<div class="row">
<div class="col span-1-of-2">
<img src="resources/pages/last-page/last_page_title.png" alt="Want to find out more title" class="intro-last-page_img-title--left">
<!-- The class above is relevant to desktop-->
</div>
<div class="col span-1-of-2 intro-last-page_p--long white-copy">
<p class="p--spacing">
There’s so much more we could tell you about the wonderful things we make.If you’d like to learn more, please get in touch.</p>
<p class="p--spacing">Email:<br>[email protected]</p>
<p class="p--spacing">
From the US: 011 44 7983635010<br>From the UK: 07983 635 010
</p>
</div>
</div>
</section>
</body>
</html>