-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
446 lines (425 loc) · 26.9 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
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
<!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.0">
<title>Sm4rty</title>
<link rel="stylesheet" media="screen and (min-width: 990px)" href="style.css">
<link rel="stylesheet" media="screen and (max-width: 989px)" href="styleMobile.css">
<script src="app.js" defer></script> <!-- Defer -->
<link rel="" type="image/jpg" href=""/>
<meta name="description" content="Reproduction of the Smarty.co.uk landing page."/>
</head>
<body>
<!-- Navbar ------------------------------------------------------------------------------------------------ -->
<nav id="navbar_container" class="section">
<div id="navbar_inner" class="content_width">
<a href="" class="logo" id="navbar_logo_link">
<div id="logo_top">SM4RTY</div>
<div id="logo_bottom">Simple, honest mobile</div>
</a>
<!-- <button class="burger_menu"></button> -->
<div id="sub_nav">
<div id="nav_links">
<a href="" id="about_link">About</a>
<a href="" id="free_month_link">Get a free month</a>
<a href="" id="group_plan_link">Group plans</a>
</div>
<div id="user_links">
<a href="" id="login_link"><img src="assets/smiley.svg" alt="" id="login_smiley">Log in</a>
<a href="" id="activate_link">Activate SIM</a>
</div>
</div>
</div>
</nav>
<!-- Main content --------------------------------------------------------------------------------------------- -->
<main id="main_container">
<!-- Simple plans section ------------------------------------------------------------------------------- -->
<div id="simple_plans_section" class="section">
<div id="hero_banner" class="content_width">
<div id="hero_left">
<h3>Get more for your money</h3>
<div id="more_items">
<p><img src="assets/why04.svg" alt="" class="more_item_img"> Great coverage</p>
<p><img src="assets/why04.svg" alt="" class="more_item_img"> 1 month contract</p>
<p><img src="assets/why04.svg" alt="" class="more_item_img"> Unlimited calls and texts</p>
</div>
<div id="hero_view_all">
<p id="hero_view_all_p">View all plans</p>
<div id="hero_view_all_img"><img src="assets/right-arrow.png" alt=""></div>
</div>
</div>
<img src="assets/more-all-plans.png" alt="" id="more_img">
</div>
<!-- App ribbon -------------------------------------------------------- -->
<div id="app_ribbon" class="content_width">
<div id="our_app">
<img src="assets/smiley.svg" alt="">
<p>Our app is coming soon</p>
<img src="assets/smartphone_blue.svg" alt="">
</div>
<a>Find out more</a>
</div>
<!-- Plans -------------------------------------------------------------------- -->
<div id="plans" class="content_width">
<!-- Plans cards ------------------------------------------------------------ -->
<div id="plans_heading">
<h3 id="plans_title">All the data you need for less</h3>
<p id="coverage_checker" class="mobile_hidden"><a href="" class="mobile_hidden">Check your coverage, </a><span class="mobile_hidden">powered by</span> <img src="assets/threeLogoUrl.svg" alt="" class="mobile_hidden"></p>
</div>
<div id="plans_cards">
<div class="plan_card">
<div class="card_top" id="c4gb">
<h2>4<span>GB</span></h2>
<h3>£6</h3>
</div>
<div class="card_bottom">
<button id="b4gb">View plan</button>
</div>
</div>
<div class="plan_card">
<div class="card_top" id="c8gb">
<h2>8<span>GB</span></h2>
<h3>£7</h3>
</div>
<div class="card_bottom">
<button id="b8gb">View plan</button>
</div>
</div>
<div class="plan_card">
<div class="card_top" id="c12gb">
<h2>12<span>GB</span></h2>
<h3>£8</h3>
</div>
<div class="card_bottom">
<button id="b12gb">View plan</button>
</div>
</div>
<div class="plan_card">
<div class="card_top" id="c30gb">
<h2>30<span>GB</span></h2>
<h3>£10</h3>
</div>
<div class="card_bottom">
<button id="b30gb">View plan</button>
</div>
</div>
<div class="plan_card">
<div class="card_top" id="c50gb">
<h2>50<span>GB</span></h2>
<h3>£15</h3>
</div>
<div class="card_bottom">
<button id="b50gb">View plan</button>
</div>
</div>
<div class="plan_card">
<div class="card_top" id="cunlimited">
<h2>Unlimited</h2>
<h3>£20</h3>
</div>
<div class="card_bottom">
<button id="bunlimited">View plan</button>
</div>
</div>
</div>
<p id="coverage_checker" class="desktop_hidden"><a href="" class="desktop_hidden">Check your coverage, </a><span class="desktop_hidden">powered by</span> <img src="assets/threeLogoUrl.svg" alt="" class="desktop_hidden"></p>
<!-- All plans ------------------------------------------------------------- -->
<div id="all_plans" class="content_width">
<h3 id="all_plans_heading">All plans include</h3>
<div id="all_plans_content">
<div id="include_list">
<p class="include_list_item"><img src="assets/why04.svg" alt="">1 month plan, cancel anytime</p>
<p class="include_list_item"><img src="assets/why04.svg" alt="">Unlimited calls & texts</p>
<p class="include_list_item"><img src="assets/why04.svg" alt="">Unrestricted tethering in the UK</p>
<p class="include_list_item"><img src="assets/why04.svg" alt="">No credit check</p>
<p class="include_list_item"><img src="assets/why04.svg" alt="">Fast 4G & 3G data</p>
<p class="include_list_item"><img src="assets/why04.svg" alt="">No speed cap</p>
</div>
<div id="wifi_banner">
<div id="wifi_all_plans">
<img src="assets/wifi.svg" alt=""><p>All plans include WiFi Calling to supercharge your signal</p><img src="assets/wifi.svg" alt="" class="desktop_hidden">
</div>
<div id="wifi_learn_more"><a href="">Learn more</a></div>
</div>
</div>
</div>
</div>
</div>
<!-- Trustpilot section --------------------------------------------------------------------------------- -->
<div id="trustpilot_section" class="section">
<div id="trustpilot" class="content_width">
<div id="trust_left">
<h4 id="trust_h">Great</h4>
<img src="assets/trustpilot/stars-4.svg" alt="" id="trust_img">
<p>Based on <a href="">18606 reviews</a></p>
<img src="assets/trustpilot/logo-white.svg" alt="" id="trust_logo">
</div>
<div id="trust_right" class="mobile_hidden">
<div id="trust_reviews_container">
<img src="assets/left-grey.svg" alt="previous_arrow" class="review_arrows">
<div id="reviews">
<div class="review">
<div class="review_content">
<img src="assets/trustpilot/stars-5.svg" alt="" class="trust_review_img">
<p class="review_title">Very good service</p>
<p class="review_text">Very good service</p>
<p class="review_name">Helene Arkell</p>
</div>
<p class="review_date">3 October</p>
</div>
<div class="review">
<div class="review_content">
<img src="assets/trustpilot/stars-5.svg" alt="" class="trust_review_img">
<p class="review_title">verry good</p>
<p class="review_text">verry good i do it well</p>
<p class="review_name">lynn sanderson</p>
</div>
<p class="review_date">3 October</p>
</div>
</div>
<img src="assets/right-grey.svg" alt="next_arrow" class="review_arrows">
</div>
<p id="trust_favorites">Showing our favorite reviews</p>
</div>
</div>
</div>
<!-- Why choose Sm4rty section --------------------------------------------------------------------------------- -->
<div id="why_choose_sm4rty_section" class="section">
<div id="why_choose_content" class="content_width">
<div id="why_choose_heading">
<h2>Why choose SM4RTY?</h2>
<p>Let's keep it simple</p>
</div>
<div id="why_choose_cards">
<div class="why_choose_card">
<img src="assets/why01.svg" alt="">
<h4 class="why_card_title">Commitment- free SIM plans</h4>
<p class="why_card_text">1 month plans. No contracts, no credit checks and no surprises at the end of the month. Cancel or change plans anytime. Pay in advance and enjoy the flexibility.</p>
</div>
<div class="why_choose_card">
<img src="assets/why02.svg" alt="">
<h4 class="why_card_title">Add-ons that never expire</h4>
<p class="why_card_text">If you run out of data, add-ons are £1 per GB - the same as it costs on our Data discount plans. Buy them from your dashboard and keep them until you use every MB.</p>
</div>
<div class="why_choose_card">
<img src="assets/why03.svg" alt="">
<h4 class="why_card_title">Truly unlimited calls & texts</h4>
<p class="why_card_text">To standard UK landlines and mobiles, and roaming within EU countries. Call and text your friends and family as much as you want. No catch.</p>
</div>
<div class="why_choose_card">
<img src="assets/why04.svg" alt="">
<h4 class="why_card_title">Keep your number</h4>
<p class="why_card_text">Simply text 'PAC' to 65075 to get a code valid for 30 days. We’ll walk you through steps to enter this code to transfer the phone number you want to keep.</p>
</div>
</div>
</div>
</div>
<!-- Group plan section --------------------------------------------------------------------------------- -->
<div id="group_plan_section" class="section">
<div id="group_plan_content" class="content_width mobile_hidden"> <!-- Desktop -->
<div id="group_plan_left">
<img src="assets/party.svg" alt="">
<button>Learn more</button>
</div>
<div id="group_plan_right">
<h2>Save 10% on every SIM with a Group plan</h2>
<div id="group_right_content">
<p id="group_right_text">Whether you’re bringing your family accounts together or adding an extra SIM for your tablet, get a SM4RTY Group plan and start saving.</p>
<p class="group_right_text"><img src="assets/why04.svg" alt="">Manage usage and payments for just 2 plans or up to a total of 8.</p>
<p class="group_right_text"><img src="assets/why04.svg" alt="">Save money, time, and stay flexible.</p>
</div>
</div>
</div>
<div id="group_plan_content" class="content_width desktop_hidden"> <!-- Mobile -->
<div id="group_plan_left">
<h2>Save 10% on every SIM with a Group plan</h2>
<img src="assets/party.svg" alt="">
</div>
<div id="group_plan_right">
<div id="group_right_content">
<p id="group_right_text">Whether you’re bringing your family accounts together or adding an extra SIM for your tablet, get a SM4RTY Group plan and start saving.</p>
<p class="group_right_text"><img src="assets/why04.svg" alt="">Manage usage and payments for just 2 plans or up to a total of 8.</p>
<p class="group_right_text"><img src="assets/why04.svg" alt="">Save money, time, and stay flexible.</p>
</div>
<button id="group_plan_button">Learn more</button>
</div>
</div>
</div>
<!-- Get money back section ----------------------------------------------------------------------------- -->
<div id="get_money_back_section" class="section">
<div id="money_back_content" class="content_width">
<div id="money_back_left">
<h2>Get money back with our data discount plans</h2>
<img src="assets/money_back.png" alt="" id="money_back_img" class="desktop_hidden">
<h4 id="money_left_text">Check out our exclusive <span id="text_blue">data discount plans</span> and get money back for unused data at the end of <span id="text_yellow">every</span> month.</h4>
</div>
<div id="money_back_right">
<img src="assets/money_back.png" alt="" id="money_back_img" class="mobile_hidden">
<button id="money_back_button">View our data discount plans</button>
</div>
</div>
</div>
<!-- FAQ section -------------------------------------------------------------------------------------- -->
<div id="faq_section" class="section">
<div id="faq_content" class="content_width">
<h2>FAQs</h2>
<div id="questions_container">
<div id="questions_left">
<div class="question" >
<button onclick="toggleVisibility(event)"><h4>How's the coverage?</h4> <img src="assets/down-chevron-green.svg" alt="chevron" class="question_arrow"></button>
<div class="answer">
<span class="span">SM4RTY connects to 4G and 3G network wherever it can. SM4RTY is not compatible with 2G handsets. </span>
<span class="span"><a href="" class="answer_link">Check our coverage</a></span>
</div>
<hr>
</div>
<div class="question">
<button onclick="toggleVisibility(event)"><h4>How can I keep my number?</h4> <img src="assets/down-chevron-green.svg" alt="question_arrow" class="question_arrow"></button>
<div class="answer">
<span class="span">Simply contact your previous network provider or text 'PAC' to 65075 to get a code valid for 30 days. This won’t disrupt your service. We’ll walk you through steps to enter this code to transfer the phone number you want to keep.</span>
<span class="span"><a href="" class="answer_link">Read more about switching</a></span>
</div>
<hr>
</div>
<div class="question">
<button onclick="toggleVisibility(event)"><h4>How much do add-ons cost?</h4> <img src="assets/down-chevron-green.svg" alt="chevron" class="question_arrow"></button>
<div class="answer">
<span class="span">If you run out of data, data add-ons are £1 per GB - the same as it costs on our Data discount plans. To call an 084 or 087 number you can add an "Out of plan" add-on in £5 increments. Add-ons don’t expire.</span>
<span class="span"><a href="" class="answer_link">Read more about add-ons</a></span>
</div>
<hr>
</div>
<div class="question">
<button onclick="toggleVisibility(event)"><h4>Can I tether while roaming?</h4> <img src="assets/down-chevron-green.svg" alt="chevron" class="question_arrow"></button>
<div class="answer">
<span class="span">Yes. If you’re travelling in the EU, everything works like home. Data comes out of your monthly allowance or data add-ons. Please see our price guide for information on our Fair Use Policy.</span>
<span class="span"><a href="" class="answer_link">Outside the EU, you need to add an “Out of plan” add-on. See the prices where you’re going.</a></span>
</div>
<hr>
</div>
<div class="question">
<button onclick="toggleVisibility(event)"><h4>Do all plans get money back?</h4> <img src="assets/down-chevron-green.svg" alt="chevron" class="question_arrow"></button>
<div class="answer">
<span class="span">No. Only Data Discount plans get money back for unused data. Look for the “Money back” icon on Data Discount plans.</span>
</div>
<hr>
</div>
</div>
<div id="questions_right">
<div class="question">
<button onclick="toggleVisibility(event)"><h4>How can I contact you?</h4> <img src="assets/down-chevron-green.svg" alt="chevron" class="question_arrow"></button>
<div class="answer">
<span class="span"><a href="" class="answer_link">Check out our contact us page</a> for further information.</span>
</div>
<hr>
</div>
<div class="question">
<button onclick="toggleVisibility(event)"><h4>How does calling abroad work?</h4> <img src="assets/down-chevron-green.svg" alt="chevron" class="question_arrow"></button>
<div class="answer">
<span class="span">You can now use SM4RTY to make calls to other countries from the UK. International calls and texts are taken from your “Out of plan” add-ons.</span>
<span class="span"><a href="" class="answer_link">See the prices where you want to call</a></span>
</div>
<hr>
</div>
<div class="question">
<button onclick="toggleVisibility(event)"><h4>Can I use my plan when I travel?</h4> <img src="assets/down-chevron-green.svg" alt="chevron" class="question_arrow"></button>
<div class="answer">
<span class="span">You can now use your SM4RTY plan abroad. In the EU it works like normal up to 20GB. Outside the EU, or to call internationally, you need to add an “Out of plan” add-on.</span>
<span class="span"><a href="" class="answer_link">See the prices where you're going</a></span>
</div>
<hr>
</div>
<div class="question">
<button onclick="toggleVisibility(event)"><h4>How can I leave SM4RTY?</h4> <img src="assets/down-chevron-green.svg" alt="chevron" class="question_arrow"></button>
<div class="answer">
<span class="span">Don’t forget, you can always <a href="" class="answer_link">pause your plan temporarily</a> if you’re unsure about leaving. Here are details on <a href="" class="answer_link">how to leave SM4RTY</a> . We’re sad to see you go. If there’s anything we can do to help or learn from, please don’t hesitate to contact our customer support team.</span>
</div>
<hr>
</div>
<div class="question">
<button onclick="toggleVisibility(event)"><h4>Can I read more on pricing?</h4> <img src="assets/down-chevron-green.svg" alt="chevron" class="question_arrow"></button>
<div class="answer">
<span class="span">Everything you need to know about our: prices, discounts, offers and add-ons if you’re a customer of ours.</span>
<span class="span"><a href="" class="answer_link">See our price guide</a></span>
</div>
<hr>
</div>
</div>
</div>
<a id="more_questions">Have more questions?</a>
</div>
</div>
<!-- Awards section --------------------------------------------------------------------------------- -->
<div id="awards_section" class="section">
<div id="awards_content" class="content_width">
<h2>Awards</h2>
<div id="awards_container">
<img src="assets/uswitchBestValue2021.svg" alt="">
<img src="assets/uswitchBestValue2020.png" alt="" class="mobile_hidden">
<img src="assets/uswitch-mobile-awards-best-value-sim-only.png" alt="" class="mobile_hidden">
<img src="assets/uswitch-mobile-award-best-payg-network.png" alt="" class="mobile_hidden">
</div>
<h2>Featured in</h2>
<ul id="featured_in_container">
<li><img src="assets/financial times.svg" alt="" class="featured_img" id="img_1"></li>
<li><img src="assets/techradar.svg" alt="" class="featured_img" id="img_2"></li>
<li><img src="assets/uswitch.svg" alt="" class="featured_img" id="img_3"></li>
<li><img src="assets/huffingtonPost.svg" alt="" class="featured_img" id="img_4"></li>
<li><img src="assets/shortlist.svg" alt="" class="featured_img" id="img_5"></li>
</ul>
</div>
</div>
</main>
<!-- Footer ---------------------------------------------------------------------------------------------------- -->
<footer id="footer_container" class="section">
<div id="footer_inner" class="content_width">
<div class="inner_column">
<a href="">Terms and conditions</a>
<a href="">Privacy policy <span class="pdf">(PDF)</span></a>
<a href="">Accessibility</a>
<a href="">Vulnerable situations policy <span class="pdf">(PDF)</span></a>
<a href="">Cookies policy <span class="pdf">(PDF)</span></a>
<a href="">Complaints</a>
</div>
<div class="inner_column">
<a href="">SIM only</a>
<a href="">Pay as you go</a>
<a href="">Data SIM</a>
<a href="">No credit check</a>
<a href="">Unlimited SIM</a>
<a href="">Student SIM</a>
<a href="">Data Rollover</a>
<a href="">5G</a>
</div>
<div class="inner_column">
<a href="">Support</a>
<a href="">Contact us</a>
<a href="">App</a>
<a href="">Price guide <span class="pdf">(PDF)</span></a>
<a href="">Roaming & International</a>
<a href="">Blog</a>
<a href="">three.co.uk</a>
</div>
<div id="inner_button">
<button>Activate SIM</button>
</div>
</div>
<div id="footer_social" class="content_width">
<p class="social_item">Follow SM4RTY</p>
<a class="social_item"><img src="assets/facebook-white.svg" alt="facebook link"></a>
<a class="social_item"><img src="assets/twitter-white.svg" alt="twitter link"></a>
</div>
<div id="footer_terms" class="content_width">
<p>© 2021 All rights reserved. SM4RTY.</p>
<p><a>sm4rty.co.uk</a></p>
<p>SM4RTY is a service that’s just for consumers and is only intended for personal use.</p>
<p>SM4RTY is a trading name of Hutchison 3G UK Limited</p>
<p>Registered office: Hutchison 3G UK Limited, Great Brighams Mead, Vastern Road, Reading, Berkshire, RG1 8DJ</p>
<p>Registered in England & Wales Number 03885486</p>
<p>VAT Registration Number 760 7292 22</p>
</div>
</footer>
</body>
</html>