-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
795 lines (771 loc) · 53.1 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
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
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="Come along on the journey as we extend and rennovate a 1960's terraced house">
<meta name="keywords" content="Extend,Extension,Renovate,Renovation,Downsize,Small Spaces,Home Decor,Interior Design,Kitchen Remodel,Home Accessories">
<meta name="author" content="coderbeez">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<link rel="stylesheet" href="assets/css/style.css" type="text/css" />
<link rel="shortcut icon" href="favicon.ico">
<title>Old House New Home</title>
</head>
<body>
<!--NAVBAR-->
<div class="container-fluid" id="home">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-md fixed-top justify-content-center">
<!-- WHY: Bootstrap margins used to vary margins for smaller screens.-->
<a class="navbar-brand ml-1" href="#home"><i class="fas fa-home" aria-hidden="true"></i><span class="sr-only">home link</span></a>
<a class="navbar-brand" href="#contact"><i class="fas fa-envelope" aria-hidden="true"></i><span class="sr-only">contact link</span></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav text-center">
<a class="nav-item nav-link" href="#extend">Extension</a>
<a class="nav-item nav-link" href="#space">Small Spaces</a>
<a class="nav-item nav-link" href="#kitchen">Kitchen</a>
<a class="nav-item nav-link" href="#fav">Favourites</a>
</div>
</div>
<span class="pr-1 mt-3 mb-3 m-md-0"><a class="navbar-brand pin-style" href="https://www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" aria-hidden="true"><span class="sr-only">pinterest save link</span></a>
</span>
<!-- WHY: Bootstrap padding and margins in wrapping span as pinterset button not responding to sizing.-->
</nav>
</div>
</div>
</div>
<!--HEADER-->
<header class="container-fluid">
<div class="row justify-content-center">
<div class="col-md-10 col-lg-8 wrap background--ivy background--hero d-flex justify-content-end">
<!--WHY: Less than 12 cols set for md and lg screens to center content. Approach repeated throughout site.-->
<!--WHY: Wrap class used to fill 100% container overwriting Bootstrap margins and padding. Approach repeated throughout site.-->
<!-- WHY: Bootstrap flex used to allow text to be centered vertically over hero image.-->
<div class="align-self-center">
<h1 class="d-block d-md-none color--light shadow--dark">Old<br>House<br>New<br>Home</h1>
<h1 class="d-none d-md-block color--light shadow--dark">Old House<br>New Home</h1>
<!-- WHY: Bootstrap display used to control text position on smaller screens.-->
<p class="d-none d-md-block tagline text-right color--light shadow--dark">Renovating a 1960's terraced house</p>
<!-- WHY: Bootstrap display used to change text position on smaller screens.-->
</div>
</div>
</div>
</header>
<main>
<!--INTRO-->
<div class="container-fluid">
<!--WHY: Div used rather than section as no header element.-->
<div class="row justify-content-center">
<div class="col-md-10 col-lg-8 wrap background--stone">
<div class="row justify-content-center mt-5 mb-5">
<div class="col-md-8">
<p class="d-block d-md-none tagline">Renovating a 1960's terrace</p>
<!--WHY: Bootstrap display used to allow both text and text position to change on smaller screens.-->
<p>After watching too many episodes of Tiny House Nation, we decided to sell up, downsize and move from the countryside to town. A serious shortage of properties meant anything within our budget was somewhat haunted and in need
of tlc. After securing our dream 1960's terrace, the Pinterest trawl really began. This site documents what we learn as we extend and renovate. Why not come along on the journey!</p>
</div>
</div>
</div>
</div>
</div>
<!--EXTEND-->
<section class="container-fluid" id="extend">
<!--WHY: Used section for extend as division within page containing h2 element. Approach repeated throughout site.-->
<div class="row justify-content-center">
<div class="col-md-10 col-lg-8 wrap background--light">
<div class="row">
<div class="col">
<h2 class="mb-0">extension</h2>
<!--WHY: Bootstrap margin used to remove bottom margin as image beneath has a large white area at the top.-->
</div>
</div>
<div class="row">
<div class="col-md-6">
<figure class="mb-3 mb-md-0">
<!-- WHY: Bootrstrap margin used to create gap between images on small screens.-->
<img src="assets/images/drawside4.jpg" alt="side elevation" class="img-fluid">
<figcaption>side elevation</figcaption>
</figure>
</div>
<div class="col-md-6">
<figure>
<img src="assets/images/drawfloor5p.jpg" alt="floor plan" class="d-md-none img-fluid">
<img src="assets/images/drawfloor5.jpg" alt="floor plan" class="d-none d-md-block img-fluid">
<!-- WHY: Bootstrap display used to swap landscape image for portait on smaller screens.-->
<figcaption>floor plan</figcaption>
</figure>
</div>
</div>
<div class="row mt-4">
<div class="col-md-6">
<h3>Design Dilemas</h3>
<hr class="divider">
<dl>
<dt><i class="fas fa-users"></i>Neighbours</dt>
<dd>A raft foundation and mono-pitch design minimised ground and light disturbance for our neighbours. The larch cladding will mellow with age and won’t need access through neighbours for upkeep.</dd>
<dt><i class="fas fa-sun"></i>Light</dt>
<dd>To maximise light, we sacrificed space for a small courtyard, added an oversized roof light and installed oversized glazing in the south facing wall. All internal doors are also glazed.</dd>
<dt><i class="fas fa-superscript"> </i>Size</dt>
<dd>A feeling of space comes not just from floor area, but also height. We’ve used the extra height in the hallway for storage, in the office for a loft bed and in the sitting room to make the space feel bigger.</dd>
<dt><i class="fas fa-euro-sign"> </i>Budget</dt>
<dd>To keep within budget, we’ve used a simple mono-pitch design with a metal roof solution and installed resin flooring throughout.</dd>
</dl>
<!-- WHY: FontAwesome icons used to improve readibility. No aria used as dt explains icon.-->
</div>
<aside class="d-none d-md-block col-md-6 text-center pl-md-4 pr-md-4">
<div class="background--stonebox">
<h3>Resources</h3>
<hr class="divider">
<a href="http://www.munsterjoinery.ie/" target=”_blank” class="a-style">munster joinery:<br><span>triple glazed joinery</span></a>
<a href="https://www.velux.ie/products/flat-roof-windows" target=”_blank” class="a-style">velux:<br><span>flat roof windows</span></a>
<a href="https://corell.ie/siberian-larch-cladding/" target=”_blank” class="a-style">correll timber:<br><span>siberian larch cladding</span></a>
<a href="https://www.irishrollforming.ie/" target=”_blank” class="a-style">cork roofing:<br><span>metal roofing</span></a>
<a href="http://www.resicrete.ie/" target=”_blank” class="a-style">resicrete:<br><span>resin flooring</span></a>
<a class="btn button-style" href="assets/drawings/ohnhdraw.pdf" target="_blank" role="button">download drawings</a>
</div>
<!-- WHY: Wrapped in div to apply Bootstrap padding to reduce stone background.-->
<!-- WHY: Span used to allow change in formatting.-->
<!-- WHY: Bootstrap display used to change position of aside on smaller screens.-->
</aside>
</div>
<div class="row mt-5">
<div class="col-12">
<p>Click on an image, then use arrows to navigate.</p>
</div>
</div>
<div class="row justify-content-center">
<div class="col-6 col-md-4 col-lg-2 text-center mb-5">
<a href="assets/images/reelcorner7lg.jpg" data-fancybox="gallery" data-caption="Larch Cladding">
<img src="assets/images/reelcorner7sm.jpg" alt="extension" class="img-fluid border-secondary img-thumbnail"></a>
</div>
<div class="col-6 col-md-4 col-lg-2 text-center mb-5">
<a href="assets/images/reelbuild5lg.jpg" data-fancybox="gallery" data-caption="South Facing Glazing">
<img src="assets/images/reelbuild5sm.jpg" alt="extension" class="img-fluid border-secondary img-thumbnail"></a>
</div>
<div class="col-6 col-md-4 col-lg-2 text-center mb-5">
<a href="assets/images/reelcoach7lg.jpg" data-fancybox="gallery" data-caption="View From Outside In">
<img src="assets/images/reelcoach7sm.jpg" alt="extension" class="img-fluid border-secondary img-thumbnail"></a>
</div>
<div class="col-6 col-md-4 col-lg-2 text-center mb-5">
<a href="assets/images/reellight2lg.jpg" data-fancybox="gallery" data-caption="Tom Raffield Light Fitting">
<img src="assets/images/reellight2sm.jpg" alt="extension" class="img-fluid border-secondary img-thumbnail"></a>
</div>
<div class="col-6 col-md-4 col-lg-2 text-center mb-5">
<a href="assets/images/reelcourt2lg.jpg" data-fancybox="gallery" data-caption="Courtyard Lightwell">
<img src="assets/images/reelcourt2sm.jpg" alt="extension" class="img-fluid border-secondary img-thumbnail"></a>
</div>
<div class="col-6 col-md-4 col-lg-2 text-center mb-5">
<a href="assets/images/reelchairs2lg.jpg" data-fancybox="gallery" data-caption="Ceiling Storage">
<img src="assets/images/reelchairs2sm.jpg" alt="extension" class="img-fluid border-secondary img-thumbnail"></a>
</div>
</div>
<!-- WHERE: Fancybox used for gallery https://fancyapps.com/fancybox/3/-->
<aside class="d-block d-md-none col-md-6 text-center pl-2 pr-2 mb-5">
<div class="background--stonebox">
<h3>Resources</h3>
<hr class="divider">
<a href="http://www.munsterjoinery.ie/" target=”_blank” class="a-style">munster joinery:<br><span>triple glazed joinery</span></a>
<a href="https://www.velux.ie/products/flat-roof-windows" target=”_blank” class="a-style">velux:<br><span>flat roof windows</span></a>
<a href="https://corell.ie/siberian-larch-cladding/" target=”_blank” class="a-style">correll timber:<br><span>siberian larch cladding</span></a>
<a href="https://corell.ie/siberian-larch-cladding/" target=”_blank” class="a-style">cork roofing:<br><span>metal roofing</span></a>
<a href="https://corell.ie/siberian-larch-cladding/" target=”_blank” class="a-style">resicrete:<br><span>resin flooring</span></a>
<a class="btn button-style" href="assets/drawings/ohnhdraw.pdf" target="_blank" role="button">download drawings</a>
</div>
<!--Bootstrap display used to change position of aside on smaller screens.-->
</aside>
</div>
</div>
</section>
<!--SMALL SPACES-->
<section class="container-fluid" id="space">
<div class="row justify-content-center">
<div class="col-md-10 col-lg-8 wrap background--dark">
<h2 class="text-right color--light">small spaces</h2>
<div class="pl-2 pr-2">
<!-- WHY: Added wrapping div with Bootstrap to ensure consistent gap around images.-->
<section class="row mb-5">
<div class="col-12 col-lg-4 text-center">
<h3 class="color--light mt-lg-0">Sleeping Loft</h3>
<!-- WHY: Removed top margin using Bootstrap on large screens to position heading above images on lg screens.-->
<hr class="divider--light">
<p class="color--light">A loft kit from Spanish manufacturer Tecrostar allowed us to install a double bed over our office desks. Easy to put together, the kit resembles giant Meccano.</p>
<a class="btn button-style--light" href="https://tecrostar.com/en/" target="_blank" role="button">source</a>
</div>
<div class="col-md-6 col-lg-4 p-2">
<img src="assets/images/spaceloft5.jpg" alt="sleeping loft" class="img-fluid border--light">
</div>
<div class="col-md-6 col-lg-4 p-2">
<div class="embed-responsive embed-responsive-16by9 border--light">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/hixU05vre2s" allowfullscreen title="sleeping loft construction video"></iframe>
</div>
</div>
</section>
<section class="row mb-5">
<div class="col-12 col-lg-4 text-center">
<h3 class="color--light mt-lg-0">Soaking Tub</h3>
<hr class="divider--light">
<p class="color--light">Measuring just 750 by 1050cm, the Omnitub deep soaking tub was nicknamed 'the cowboy bath' by our builder. When plumbed up it will also serve as a shower tray.</p>
<a class="btn button-style--light" href="https://www.omnitub.co.uk/" target="_blank" role="button">source</a>
</div>
<div class="col-md-6 col-lg-4 p-2">
<img src="assets/images/spacebath3.jpg" alt="soaking tub" class="img-fluid border--light">
</div>
<div class="col-md-6 col-lg-4 p-2">
<img src="assets/images/spacebath6.jpg" alt="soaking tub" class="img-fluid border--light">
</div>
</section>
<section class="row mb-5">
<div class="col-12 col-lg-4 text-center">
<h3 class="color--light mt-lg-0">Folding Doors</h3>
<hr class="divider--light">
<p class="color--light">Three sets of folding door kits from PC Henderson give us huge flexibility on the ground floor. We’ve used kits with and without bottom channels (Pacer and Roomflex).</p>
<a class="btn button-style--light" href="https://www.pchenderson.ie/?lang=en" target="_blank" role="button">source</a>
</div>
<div class="col-md-6 col-lg-4 p-2">
<img src="assets/images/spacedoors3.jpg" alt="folding door" class="img-fluid border--light">
</div>
<div class="col-md-6 col-lg-4 p-2">
<img src="assets/images/spacedoors4.jpg" alt="folding door" class="img-fluid border--light">
</div>
</section>
<section class="row mb-5">
<div class="col-12 col-lg-4 text-center">
<h3 class="color--light mt-lg-0">Pantry</h3>
<hr class="divider--light">
<p class="color--light">As one door gets closed up another opens… or maybe your carpenter shelves it out for a pantry. A bulk order of jars from Alpack and a Dymo label maker from Amazon complete the look.</p>
<a class="btn button-style--light" href="https://www.alpack.ie/" target="_blank" role="button">source</a>
</div>
<div class="col-md-6 col-lg-4 p-2">
<img src="assets/images/spacepantry7.jpg" alt="pantry" class="img-fluid border--light">
</div>
<div class="col-md-6 col-lg-4 p-2">
<img src="assets/images/spacepantry2.jpg" alt="utility" class="img-fluid border--light">
</div>
</section>
</div>
</div>
</div>
</section>
<!--KITCHEN-->
<section class="container-fluid" id="kitchen">
<!--WHY: Used section for kitchen as would not make sense on it own.-->
<div class="row justify-content-center">
<div class="col-md-10 col-lg-8 wrap background--light">
<h2 class="text-right">kitchen</h2>
<div class="row justify-content-center">
<div class="col-md-9">
<!--WHERE: Carousel from Bootstrap.-->
<div id="carousel-kitchen" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="assets/images/kitch1b.jpg" alt="kitchen image 1">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/images/kitchmicro6.jpg" alt="kitchen image 2">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/images/kitch4.jpg" alt="kitchen image 3">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/images/kitch3.jpg" alt="kitchen image 4">
</div>
</div>
<a class="carousel-control-prev" href="#carousel-kitchen" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-kitchen" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-9">
<p class="mt-5 mb-5">Minimal but super-efficient, the kitchen is definitely the old cliché - hub of our home. Tulip wood was used for the cabinets, shelf and pantry, with a simple clear matt varnish. Awkward changes in ceiling height meant we opted
for no upper cabinets. The quartz worktop was a complete splurge but it’s both beautiful and practical. Check out our review of the worktop and other key kitchen items below.
</p>
</div>
</div>
<div class="row justify-content-center border-color--transparent">
<!-- WHY: Border color transparent used to overwrite Bootstraps default formatting.-->
<!-- WHY: Could not use Bootstrap card decks as cards across columns. Used both header and footer and not body as resulted in best alignment when card decks were not an option. This approach caused gap in Internet Explorer where bosy should be.-->
<!--CARD1-->
<div class="card col-6 col-md-4 col-lg-2 p-1">
<!-- WHY: Bootstrap padding used to overwrite default padding to keep text on single line on ipads in landscape.-->
<div class="card-header">
<figure> <img src="assets/images/kworktop2.jpg" alt="worktop" class="img-fluid">
<figcaption>silestone<br>worktop</figcaption>
</figure>
</div>
<div class="card-body">
</div>
<div class="card-footer">
<i class="far fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i><br>
<button type="button" class="btn button-style" data-toggle="modal" data-target="#r-worktop">review</button>
</div>
</div>
<!--CARD2-->
<div class="card col-6 col-md-4 col-lg-2 p-1">
<div class="card-header">
<figure> <img src="assets/images/kwater2.jpg" alt="carbonator" class="img-fluid">
<figcaption>aarke<br>carbonator</figcaption>
</figure>
</div>
<div class="card-body">
</div>
<div class="card-footer">
<i class="far fa-star"></i><br>
<button type="button" class="btn button-style" data-toggle="modal" data-target="#r-water">review</button>
</div>
</div>
<!--CARD3-->
<div class="card col-6 col-md-4 col-lg-2 p-1">
<div class="card-header">
<figure> <img src="assets/images/kfridge2.jpg" alt="fridge" class="img-fluid">
<figcaption>fisher paykal<br>fridge</figcaption>
</figure>
</div>
<div class="card-body">
</div>
<div class="card-footer">
<i class="far fa-star"></i> <i class="far fa-star"></i> <i class="far fa-star"></i> <i class="far fa-star"></i><br>
<button type="button" class="btn button-style" data-toggle="modal" data-target="#r-fridge">review</button>
</div>
</div>
<!--CARD4-->
<div class="card col-6 col-md-4 col-lg-2 p-1">
<div class="card-header">
<figure> <img src="assets/images/ksmeg2.jpg" alt="cooker" class="img-fluid">
<figcaption>smeg<br>cooker</figcaption>
</figure>
</div>
<div class="card-body">
</div>
<div class="card-footer">
<i class="far fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i><br>
<button type="button" class="btn button-style" data-toggle="modal" data-target="#r-cooker">review</button>
</div>
</div>
<!--CARD5-->
<div class="card col-6 col-md-4 col-lg-2 p-1">
<div class="card-header">
<figure> <img src="assets/images/kmicro2.jpg" alt="microwave" class="img-fluid">
<figcaption>bosch<br>microwave</figcaption>
</figure>
</div>
<div class="card-body">
</div>
<div class="card-footer">
<i class="far fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i><br>
<button type="button" class="btn button-style" data-toggle="modal" data-target="#r-micro">review</button>
</div>
</div>
<!--CARD6-->
<div class="card col-6 col-md-4 col-lg-2 p-1">
<div class="card-header">
<figure> <img src="assets/images/ksink2.jpg" alt="sink" class="img-fluid">
<figcaption>ikea<br>sink</figcaption>
</figure>
</div>
<div class="card-body">
</div>
<div class="card-footer">
<i class="far fa-star"></i><i class="far fa-star"></i><br>
<button type="button" class="btn button-style" data-toggle="modal" data-target="#r-sink">review</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!--FAVOURITES-->
<section class="container-fluid" id="fav">
<div class="row justify-content-center">
<div class="col-md-10 col-lg-8 wrap background--stone">
<div class="row justify-content-end">
<div class="col-md-6">
<h2>favourites</h2>
<p class="mb-5">During the renovation every free moment was spent online searching for light fittings or shelf brackets. Here are a few of the online retailers and brands that made our favourites list.
</p>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 card-deck">
<!--WHY: Used 2 Bootstrap card decks in 2 separate rows to show 3 cards stacked over 3 cards on md and lg screens.-->
<!--CARD1-->
<div class="card">
<div class="card-header">
<h3 class="card-title">prints</h3>
<hr>
</div>
<div class="card-body">
<img src="assets/images/favbee2.jpg" alt="art" class="rounded-circle img-fluid shadow" height=140 width=140>
<p class="card-text">Affordable art and independent artists from RedBubble. You can loose hours trawling through this site but beware of colour differences between screen and actual print.</p>
</div>
<div class="card-footer">
<a class="btn button-style" href="https://www.redbubble.com/" target="_blank" role="button">source</a>
</div>
</div>
<!--CARD2-->
<div class="card">
<div class="card-header">
<h3 class="card-title">handles & knobs</h3>
<hr>
</div>
<div class="card-body">
<img src="assets/images/favknob.jpg" alt="handles" class="rounded-circle img-fluid shadow" height=140 width=140>
<p class="card-text">Exceptional quality and design from Swedish supplier All Handles & Pulls. If you’re looking for something a little different, this site stocks a lot of Nordic brands.</p>
</div>
<div class="card-footer">
<a class="btn button-style" href="https://allhandlesandpulls.co.uk/" target="_blank" role="button">source</a>
</div>
</div>
<!--CARD3-->
<div class="card">
<div class="card-header">
<h3 class="card-title">accessories</h3>
<hr>
</div>
<div class="card-body">
<img src="assets/images/favshelf.jpg" alt="shelf bracket" class="rounded-circle img-fluid shadow" height=140 width=140>
<p class="card-text">Modern Danish brand House Doctor, produces a huge range of home accessories with a huge amount of style. Royal Design is the best online outlet we’ve found.</p>
</div>
<div class="card-footer">
<a class="btn button-style" href="https://royaldesign.com/" target="_blank" role="button">source</a>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 card-deck">
<!--CARD1-->
<div class="card">
<div class="card-header">
<h3 class="card-title">lighting</h3>
<hr>
</div>
<div class="card-body">
<img src="assets/images/favlight.jpg" alt="light" class="rounded-circle img-fluid shadow" height=140 width=140>
<p class="card-text">As well as Vita Copenhagen’s Acorn lights in the kitchen, we have their goose feather EOS in a bedroom. Watch out for their pendant fittings which are sold separately, some are very plastic.</p>
</div>
<div class="card-footer">
<a class="btn button-style" href="https://www.d40studio.com/" target="_blank" role="button">source</a>
</div>
</div>
<!--CARD2-->
<div class="card">
<div class="card-header">
<h3 class="card-title">tiles</h3>
<hr>
</div>
<div class="card-body">
<img src="assets/images/favtile.jpg" alt="tile" class="rounded-circle img-fluid shadow" height=140 width=140>
<p class="card-text">Best Tile stock a great selection of tiles, including Moroccan cement, which can be purchased online and in small quantities.</p>
</div>
<div class="card-footer">
<a class="btn button-style" href="https://www.besttile.ie/" target="_blank" role="button">source</a>
</div>
</div>
<!--CARD3-->
<div class="card">
<div class="card-header">
<h3 class="card-title">everything else</h3>
<hr>
</div>
<div class="card-body">
<img src="assets/images/favikea3.jpg" alt="shelf" class="rounded-circle img-fluid shadow" height=140 width=140>
<p class="card-text">Whether you love it or loath it, where else can you get a hook that looks like a dogs tail? Ikea is a must!</p>
</div>
<div class="card-footer">
<a class="btn button-style" href="https://www.ikea.com/ie/en/" target="_blank" role="button">source</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--CONTACT-->
<section class="container-fluid" id="contact">
<div class="row justify-content-center">
<div class="col-md-10 col-lg-8 wrap">
<div class="row">
<div class="col-md-6 background--ivy text-right">
<h2 class="color--light shadow--dark">contact us</h2>
<p class="tagline color--light shadow--dark">Have a design dilema?<br>Just drop us a line!</p>
</div>
<div class="col-md-6 background--light">
<form>
<div class="form-group mt-3">
<label for="name1">name</label>
<input type="text" class="form-control" id="name1" required>
</div>
<div class="form-group">
<label for="email1">email</label>
<input type="email" class="form-control" id="email1" aria-describedby="emailHelp" required>
<small id="emailHelp" class="form-text text-muted">We'll never share your email.</small>
</div>
<div class="form-group">
<label for="text1">query</label>
<textarea class="form-control" id="text1" rows="5" required></textarea>
</div>
<button type="submit" class="btn button-style">submit</button>
</form>
<!--WHERE: Bootstrap form.-->
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="container-fluid">
<div class="row justify-content-center">
<div class="col-md-10 col-lg-8 wrap background--stone pt-3 pb-3">
<div class="row">
<div class="col-12 text-center">
<a href="https://www.pinterest.ie/" target="_blank">
<i class="fab fa-pinterest" aria-hidden="true"></i>
<span class="sr-only">facebook link</span>
</a>
<a href="https://www.instagram.com/" target="_blank">
<i class="fab fa-instagram" aria-hidden="true"></i>
<span class="sr-only">facebook link</span>
</a>
<a href="https://www.facebook.com/" target="_blank">
<i class="fab fa-facebook" aria-hidden="true"></i>
<span class="sr-only">facebook link</span>
</a>
</div>
<div class="col-12 text-center mt-3">
<a href="https://github.com/coderbeez" target="_blank" class="a-style mb-1">site designed by coderbeez</a>
<!-- WHY: Used Bootstrap margin bottom to overwrite owm margin in css a-style.-->
</div>
<div class="col-12 text-center">
<span>always play nice :)</span>
</div>
<!-- WHY: Used just 1 Bootstrap row but used 3 col-12s to split content over 3 rows.-->
</div>
</div>
</div>
</footer>
<!-- Modal1 -->
<div class="modal fade" id="r-worktop" tabindex="-1" role="dialog" aria-labelledby="reviewWorktop" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="reviewWorktop">Silestone Worktop</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body background--stone">
<span class="text-center d-block"><i class="far fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i></span>
<!-- Progress -->
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="5" aria-valuemin="0" aria-valuemax="5">Look & Feel</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="5" aria-valuemin="0" aria-valuemax="5">Function</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="3" aria-valuemin="0" aria-valuemax="5">Value For Money</div>
</div>
<!-- /Progress -->
<p>The Sileston Et Calacatta Gold quartz worktop is a showstopper, but quartz is not the most affordable option. You get the look of marble without the upkeep or worry. A tin left on a wet counter did leave a yellow ring but it faded,
thankfully, before the other half noticed.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal">close</button>
<a class="btn" href="https://www.silestone.com/ie/" target="_blank" role="button">source</a>
</div>
</div>
</div>
</div>
<!-- WHERE: Bootstrap modal.-->
<!-- Modal2 -->
<div class="modal fade" id="r-water" tabindex="-1" role="dialog" aria-labelledby="reviewCarbonator" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="reviewCarbonator">Aarke Carbonator</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body background--stone">
<span class="text-center d-block"><i class="far fa-star"></i></span>
<!-- Progress -->
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 40%" aria-valuenow="2" aria-valuemin="0" aria-valuemax="5">Look & Feel</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 20%" aria-valuenow="1" aria-valuemin="0" aria-valuemax="5">Function</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 20%" aria-valuenow="1" aria-valuemin="0" aria-valuemax="5">Value For Money</div>
</div>
<!-- /Progress -->
<p>From the minute we opened the box we were disappointed – the look and feel just didn’t live up to the photos online. All would be forgiven if it functioned well. Although it’s super easy to use, the bottle doesn’t keep the water carbonated
for any length of time. Soda Stream all the way!
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal">close</button>
<a class="btn" href="https://www.aarke.com/" target="_blank" role="button">source</a>
</div>
</div>
</div>
</div>
<!-- Modal3 -->
<div class="modal fade" id="r-fridge" tabindex="-1" role="dialog" aria-labelledby="reviewFridge" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="reviewFridge">Fisher Paykal Fridge</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body background--stone">
<span class="text-center d-block"><i class="far fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i></span>
<!-- Progress -->
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="5" aria-valuemin="0" aria-valuemax="5">Look & Feel</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 80%" aria-valuenow="4" aria-valuemin="0" aria-valuemax="5">Function</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="3" aria-valuemin="0" aria-valuemax="5">Value For Money</div>
</div>
<!-- /Progress -->
<p>The RX628DW1 fridge freezer from Fisher & Paykal measures 91cm wide and has a capacity of 579L. If any fridge could be described as beautiful, I think this is it! It functions as well as it looks, so no regrets here. Price wise, you
are paying for the look, but nothing feels flimsy or plastic.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal">close</button>
<a class="btn" href="https://www.fisherpaykel.com/ie/" target="_blank" role="button">source</a>
</div>
</div>
</div>
</div>
<!-- Modal4 -->
<div class="modal fade" id="r-cooker" tabindex="-1" role="dialog" aria-labelledby="reviewCooker" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="reviewCooker">Smeg Cooker</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body background--stone">
<span class="text-center d-block"><i class="far fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i></span>
<!-- Progress -->
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="3" aria-valuemin="0" aria-valuemax="5">Look & Feel</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="3" aria-valuemin="0" aria-valuemax="5">Function</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="3" aria-valuemin="0" aria-valuemax="5">Value For Money</div>
</div>
<!-- /Progress -->
<p>The Smeg Symphony is a dual fuel cooker with electric oven and gas hob. The layout of the burners on the 70cm model means it’s difficult to fit large pots on the two medium burners. While the oven is a joy, the grill is disappointing.
Keeping the “finger friendly” stainless steel smudge free is a struggle.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal">close</button>
<a class="btn" href="https://www.smeg.ie/" target="_blank" role="button">source</a>
</div>
</div>
</div>
</div>
<!-- Modal5 -->
<div class="modal fade" id="r-micro" tabindex="-1" role="dialog" aria-labelledby="reviewMicrowave" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="reviewMicrowave">Bosch Microwave</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body background--stone">
<span class="text-center d-block"><i class="far fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i></span>
<!-- Progress -->
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="5" aria-valuemin="0" aria-valuemax="5">Look & Feel</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="5" aria-valuemin="0" aria-valuemax="5">Function</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 40%" aria-valuenow="2" aria-valuemin="0" aria-valuemax="5">Value For Money</div>
</div>
<!-- /Progress -->
<p>The Bosch built-in microwave is simply a joy. Its intuitive to use and easy to clean. The only drawback is the price, built-in microwaves are ridiculously expensive. If we had a utility or more counter space, this is not something
I would have purchased.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal">close</button>
<a class="btn" href="https://www.bosch-home.ie/" target="_blank" role="button">source</a>
</div>
</div>
</div>
</div>
<!-- Modal6 -->
<div class="modal fade" id="r-sink" tabindex="-1" role="dialog" aria-labelledby="reviewSink" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="reviewSink">Ikea Sink</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body background--stone">
<span class="text-center d-block"><i class="far fa-star"></i><i class="far fa-star"></i></span>
<!-- Progress -->
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="3" aria-valuemin="0" aria-valuemax="5">Look & Feel</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 20%" aria-valuenow="1" aria-valuemin="0" aria-valuemax="5">Function</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 20%" aria-valuenow="1" aria-valuemin="0" aria-valuemax="5">Value For Money</div>
</div>
<!-- /Progress -->
<p>The Havsen ceramic inset sink from IKEA retails for €140. Although it looks well, we've already noticed a few dents. We're purchasing a second one in case Ikea discontinues this sink.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal">close</button>
<a class="btn" href="https://www.ikea.com/ie/en/" target="_blank" role="button">source</a>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<!-- WHERE: Fancybox-->
<script async defer src="//assets.pinterest.com/js/pinit.js"></script>
<!-- WHERE: Pinterest-->
</body>
</html>