xxxxxxxxxx
1
<!-- Navigation -->
2
<header>
3
4
<!-- Navbar -->
5
<nav class="navbar navbar-expand-lg navbar-dark scrolling-navbar fixed-top">
6
7
<!-- Navbar brand -->
8
<a class="navbar-brand font-weight-bold text-uppercase" href="#">Navbar</a>
9
10
<!-- Collapse button -->
11
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
12
aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
13
<span class="navbar-toggler-icon"></span>
14
</button>
15
16
<!-- Collapsible content -->
17
<div class="collapse navbar-collapse smooth-scroll" id="basicExampleNav">
18
19
<!-- Links -->
20
<ul class="navbar-nav mr-auto">
21
<li class="nav-item active">
22
<a class="nav-link" href="#carousel-example-1">Home
23
<span class="sr-only">(current)</span>
24
</a>
25
</li>
26
<li class="nav-item">
27
<a class="nav-link" href="#about" data-offset="50">About us</a>
28
</li>
29
<li class="nav-item">
30
<a class="nav-link" href="#collections" data-offset="50">Collections</a>
31
</li>
32
<li class="nav-item">
33
<a class="nav-link" href="#contact" data-offset="70">Contact us</a>
34
</li>
35
<li class="nav-item">
36
<a class="nav-link" href="#video" data-offset="70">Video</a>
37
</li>
38
</ul>
39
<!-- Links -->
40
41
<form class="form-inline">
42
<div class="md-form my-0">
43
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
44
</div>
45
</form>
46
</div>
47
<!-- Collapsible content -->
48
49
</nav>
50
<!-- Navbar -->
51
52
<!-- Carousel Wrapper -->
53
<div id="carousel-example-1" class="carousel slide carousel-fade" data-ride="carousel" data-interval="false">
54
55
<!-- Indicators -->
56
<ol class="carousel-indicators">
57
<li data-target="#carousel-example-1" data-slide-to="0" class="active"></li>
58
<li data-target="#carousel-example-1" data-slide-to="1"></li>
59
<li data-target="#carousel-example-1" data-slide-to="2"></li>
60
</ol>
61
<!-- Indicators -->
62
63
<!-- Slides -->
64
<div class="carousel-inner smooth-scroll" role="listbox">
65
66
<!-- First slide -->
67
<div class="carousel-item active">
68
<!-- Mask -->
69
<div class="view">
70
<div class="flex-center">
71
<div class="container">
72
<div class="row">
73
<div class="col-lg-6 d-none d-lg-block">
74
<img src="https://mdbootstrap.com/img/Photos/Others/image(21).jpg"
75
class="img-fluid z-depth-2 rounded" alt="1">
76
</div>
77
<div class="col-lg-6">
78
<div class="ml-xl-5">
79
<h2 class="display-4 font-weight-bold text-uppercase mb-4">Stunning furniture</h2>
80
<a href="#collections" data-offset="50" type="button" class="btn btn-wood btn-lg-font mx-0 mb-3 mb-md-5 mb-lg-0">View our catalog</a>
81
<div class="card card-bottom w-75 z-depth-2">
82
<div class="card-body py-md-5">
83
<h2 class="font-weight-bold mt-4">Autumn sales are <br>comming soon</h2>
84
<p class="text-muted mb-md-5">*Subscribe to get latest news</p>
85
<form action="" class="mb-4">
86
<div class="md-form input-group mb-3">
87
<input type="email" class="form-control pl-0" placeholder="Your email address"
88
aria-label="Your email address" aria-describedby="MaterialButton-addon2">
89
<div class="input-group-append">
90
<button class="btn btn-md btn-wood m-0 px-3" type="button"
91
id="MaterialButton-addon2">Subscribe</button>
92
</div>
93
</div>
94
</form>
95
</div>
96
</div>
97
</div>
98
</div>
99
</div>
100
</div>
101
</div>
102
</div>
103
<!-- Mask -->
104
</div>
105
<!-- First slide -->
106
107
<!-- Second slide -->
108
<div class="carousel-item">
109
<!-- Mask -->
110
<div class="view">
111
<div class="flex-center">
112
<div class="container text-center">
113
<h2 class="display-4 font-weight-bold text-uppercase mb-4 white-text">We offer custom-made furniture</h2>
114
<a href="#video" data-offset="50" type="button" class="btn btn-wood btn-lg-font mx-0">See the video</a>
115
<div class="row d-flex justify-content-center mt-5">
116
<div class="col-lg-6 col-xl-9 d-none d-md-block">
117
<img src="https://mdbootstrap.com/img/Photos/Others/image(1).jpg"
118
class="img-fluid z-depth-2 rounded" alt="1">
119
</div>
120
</div>
121
</div>
122
</div>
123
</div>
124
<!-- Mask -->
125
</div>
126
<!-- Second slide -->
127
128
<!-- Third slide -->
129
<div class="carousel-item">
130
<!-- Mask -->
131
<div class="view">
132
<div class="flex-center">
133
<div class="container">
134
<div class="row">
135
<div class="col-lg-6 text-white">
136
<h2 class="display-4 font-weight-bold text-uppercase mt-5 mb-4">We have plenty of beautiful
137
accessories</h2>
138
<p class="lead mb-4">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem
139
dolorum aliquam cumque numquam, ipsum ut, pariatur repudiandae et eos repellendus explicabo ea
140
libero. Maxime quod omnis, doloremque quos quae vel!</p>
141
<p class="lead d-none d-md-block">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis molestiae
142
aspernatur, fugiat incidunt doloribus exercitationem fugit, laborum quaerat pariatur eaque alias,
143
beatae reiciendis veritatis culpa autem.</p>
144
<a href="#collections" data-offset="50" type="button" class="btn btn-grey btn-lg-font mx-0 mt-4">View our gallery</a>
145
</div>
146
<div class="col-lg-6 mt-lg-5 pt-lg-5 mt-xl-0 pt-lg-0 d-none d-lg-block">
147
<img src="https://mdbootstrap.com/img/Photos/Others/image(14).jpg"
148
class="img-fluid z-depth-2 rounded ml-xl-5" alt="1">
149
</div>
150
</div>
151
</div>
152
</div>
153
</div>
154
<!-- Mask -->
155
</div>
156
<!-- Third slide -->
157
158
</div>
159
<!-- Slides -->
160
161
<!-- Controls -->
162
<a class="carousel-control-prev" href="#carousel-example-1" role="button" data-slide="prev">
163
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
164
<span class="sr-only">Previous</span>
165
</a>
166
<a class="carousel-control-next" href="#carousel-example-1" role="button" data-slide="next">
167
<span class="carousel-control-next-icon" aria-hidden="true"></span>
168
<span class="sr-only">Next</span>
169
</a>
170
<!-- Controls -->
171
172
</div>
173
<!-- Carousel Wrapper -->
174
175
</header>
176
<!-- Navigation -->
177
178
<!-- Main layout -->
179
<main>
180
181
<!-- Section: About -->
182
<section id="about" class="my-5 pt-5">
183
184
<div class="container">
185
186
<div class="row">
187
188
<div class="col-lg-5">
189
190
<h2 class="h1 font-weight-bold text-uppercase mb-4">About</h2>
191
<p align="justify" class="lead font-weight-normal mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. In magni itaque ratione? Ex praesentium modi amet illum, repellendus dicta corporis obcaecati eos a commodi aliquid eveniet porro maiores ipsa at. Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium ea qui vitae impedit ipsum rerum reprehenderit debitis tenetur? Ipsa quas officia quam. Eum quos numquam debitis eaque magnam architecto, consequatur ipsum rerum reprehenderit eius.</p>
192
<button type="button" class="btn btn-wood btn-lg-font mx-0 mb-5 mb-lg-0">View our catalog</button>
193
194
</div>
195
196
<div class="col-lg-7">
197
198
<img src="https://mdbootstrap.com/img/Photos/Others/image(22).jpg"
199
class="img-fluid z-depth-2 rounded" alt="1">
200
201
</div>
202
203
</div>
204
205
</div>
206
207
</section>
208
<!-- Section: About -->
209
210
<!-- Section: -->
211
<section id="collections" class="my-5 pt-5">
212
213
<div class="container">
214
215
<div class="row">
216
217
<div class="col-md-12">
218
219
<h2 class="h1 font-weight-bold text-uppercase mb-5">Collections</h2>
220
221
</div>
222
223
</div>
224
225
</div>
226
227
<div class="container">
228
229
<div class="grid">
230
<div class="grid-sizer col-md-6 col-lg-4"></div>
231
<div class="grid-item col-md-6 col-lg-4 mb-4">
232
<div class="card">
233
<div class="view overlay">
234
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/image(3).jpg" alt="Card image cap">
235
</div>
236
<div class="card-body">
237
<h5 class="card-title mb-1">$ 250</h5>
238
<h4 class="card-title font-weight-bold">Furniture</h4>
239
<p class="card-text mb-1">Dimension: 60 cm x 100 cm x 42 cm</p>
240
<p class="card-text mb-1">Material: wood</p>
241
<button type="button" class="btn btn-wood z-depth-0 mx-0">Buy now</button>
242
</div>
243
</div>
244
</div>
245
<div class="grid-item col-md-6 col-lg-4 mb-4">
246
<div class="card">
247
<div class="view overlay">
248
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/image(7).jpg" alt="Card image cap">
249
</div>
250
<div class="card-body">
251
<h5 class="card-title mb-1">$ 130</h5>
252
<h4 class="card-title font-weight-bold">Accessories</h4>
253
<p class="card-text mb-1">Dimension: 40 cm x 70 cm x 21 cm</p>
254
<p class="card-text mb-1">Material: cotton</p>
255
<button type="button" class="btn btn-wood z-depth-0 mx-0">Buy now</button>
256
</div>
257
</div>
258
</div>
259
<div class="grid-item col-md-6 col-lg-4 mb-4">
260
<div class="card">
261
<div class="view overlay">
262
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/image(16).jpg" alt="Card image cap">
263
</div>
264
<div class="card-body">
265
<h5 class="card-title mb-1">$ 250</h5>
266
<h4 class="card-title font-weight-bold">Furniture</h4>
267
<p class="card-text mb-1">Dimension: 60 cm x 100 cm x 42 cm</p>
268
<p class="card-text mb-1">Material: wood</p>
269
<button type="button" class="btn btn-wood z-depth-0 mx-0">Buy now</button>
270
</div>
271
</div>
272
</div>
273
<div class="grid-item col-md-6 col-lg-4 mb-4">
274
<div class="card">
275
<div class="view overlay">
276
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/image(8).jpg" alt="Card image cap">
277
</div>
278
<div class="card-body">
279
<h5 class="card-title mb-1">$ 130</h5>
280
<h4 class="card-title font-weight-bold">Accessories</h4>
281
<p class="card-text mb-1">Dimension: 40 cm x 70 cm x 21 cm</p>
282
<p class="card-text mb-1">Material: cotton</p>
283
<button type="button" class="btn btn-wood z-depth-0 mx-0">Buy now</button>
284
</div>
285
</div>
286
</div>
287
<div class="grid-item col-md-6 col-lg-4 mb-4">
288
<div class="card">
289
<div class="view overlay">
290
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/image(11).jpg" alt="Card image cap">
291
</div>
292
<div class="card-body">
293
<h5 class="card-title mb-1">$ 130</h5>
294
<h4 class="card-title font-weight-bold">Accessories</h4>
295
<p class="card-text mb-1">Dimension: 40 cm x 70 cm x 21 cm</p>
296
<p class="card-text mb-1">Material: cotton</p>
297
<button type="button" class="btn btn-wood z-depth-0 mx-0">Buy now</button>
298
</div>
299
</div>
300
</div>
301
<div class="grid-item col-md-6 col-lg-4 mb-4">
302
<div class="card">
303
<div class="view overlay">
304
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/image(4).jpg" alt="Card image cap">
305
</div>
306
<div class="card-body">
307
<h5 class="card-title mb-1">$ 250</h5>
308
<h4 class="card-title font-weight-bold">Furniture</h4>
309
<p class="card-text mb-1">Dimension: 60 cm x 100 cm x 42 cm</p>
310
<p class="card-text mb-1">Material: wood</p>
311
<button type="button" class="btn btn-wood z-depth-0 mx-0">Buy now</button>
312
</div>
313
</div>
314
</div>
315
<div class="grid-item col-md-6 col-lg-4 mb-4">
316
<div class="card">
317
<div class="view overlay">
318
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/image(10).jpg" alt="Card image cap">
319
</div>
320
<div class="card-body">
321
<h5 class="card-title mb-1">$ 250</h5>
322
<h4 class="card-title font-weight-bold">Furniture</h4>
323
<p class="card-text mb-1">Dimension: 60 cm x 100 cm x 42 cm</p>
324
<p class="card-text mb-1">Material: wood</p>
325
<button type="button" class="btn btn-wood z-depth-0 mx-0">Buy now</button>
326
</div>
327
</div>
328
</div>
329
<div class="grid-item col-md-6 col-lg-4 mb-4">
330
<div class="card">
331
<div class="view overlay">
332
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/image(5).jpg" alt="Card image cap">
333
</div>
334
<div class="card-body">
335
<h5 class="card-title mb-1">$ 250</h5>
336
<h4 class="card-title font-weight-bold">Furniture</h4>
337
<p class="card-text mb-1">Dimension: 60 cm x 100 cm x 42 cm</p>
338
<p class="card-text mb-1">Material: wood</p>
339
<button type="button" class="btn btn-wood z-depth-0 mx-0">Buy now</button>
340
</div>
341
</div>
342
</div>
343
<div class="grid-item col-md-6 col-lg-4 mb-4">
344
<div class="card">
345
<div class="view overlay">
346
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/image(15).jpg" alt="Card image cap">
347
</div>
348
<div class="card-body">
349
<h5 class="card-title mb-1">$ 250</h5>
350
<h4 class="card-title font-weight-bold">Furniture</h4>
351
<p class="card-text mb-1">Dimension: 60 cm x 100 cm x 42 cm</p>
352
<p class="card-text mb-1">Material: wood</p>
353
<button type="button" class="btn btn-wood z-depth-0 mx-0">Buy now</button>
354
</div>
355
</div>
356
</div>
357
<div class="grid-item col-md-6 col-lg-4 mb-4">
358
<div class="card">
359
<div class="view overlay">
360
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/image(9).jpg" alt="Card image cap">
361
</div>
362
<div class="card-body">
363
<h5 class="card-title mb-1">$ 130</h5>
364
<h4 class="card-title font-weight-bold">Accessories</h4>
365
<p class="card-text mb-1">Dimension: 40 cm x 70 cm x 21 cm</p>
366
<p class="card-text mb-1">Material: cotton</p>
367
<button type="button" class="btn btn-wood z-depth-0 mx-0">Buy now</button>
368
</div>
369
</div>
370
</div>
371
<div class="grid-item col-md-6 col-lg-4 mb-4">
372
<div class="card">
373
<div class="view overlay">
374
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/image(13).jpg" alt="Card image cap">
375
</div>
376
<div class="card-body">
377
<h5 class="card-title mb-1">$ 250</h5>
378
<h4 class="card-title font-weight-bold">Furniture</h4>
379
<p class="card-text mb-1">Dimension: 60 cm x 100 cm x 42 cm</p>
380
<p class="card-text mb-1">Material: wood</p>
381
<button type="button" class="btn btn-wood z-depth-0 mx-0">Buy now</button>
382
</div>
383
</div>
384
</div>
385
<div class="grid-item col-md-6 col-lg-4 mb-4">
386
<div class="card">
387
<div class="view overlay">
388
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/image(20).jpg" alt="Card image cap">
389
</div>
390
<div class="card-body">
391
<h5 class="card-title mb-1">$ 130</h5>
392
<h4 class="card-title font-weight-bold">Accessories</h4>
393
<p class="card-text mb-1">Dimension: 40 cm x 70 cm x 21 cm</p>
394
<p class="card-text mb-1">Material: cotton</p>
395
<button type="button" class="btn btn-wood z-depth-0 mx-0">Buy now</button>
396
</div>
397
</div>
398
</div>
399
<div class="grid-item col-md-6 col-lg-4 mb-4">
400
<div class="card">
401
<div class="view overlay">
402
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/image(14).jpg" alt="Card image cap">
403
</div>
404
<div class="card-body">
405
<h5 class="card-title mb-1">$ 130</h5>
406
<h4 class="card-title font-weight-bold">Accessories</h4>
407
<p class="card-text mb-1">Dimension: 40 cm x 70 cm x 21 cm</p>
408
<p class="card-text mb-1">Material: cotton</p>
409
<button type="button" class="btn btn-wood z-depth-0 mx-0">Buy now</button>
410
</div>
411
</div>
412
</div>
413
<div class="grid-item col-md-6 col-lg-4 mb-4">
414
<div class="card">
415
<div class="view overlay">
416
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/image(18).jpg" alt="Card image cap">
417
</div>
418
<div class="card-body">
419
<h5 class="card-title mb-1">$ 250</h5>
420
<h4 class="card-title font-weight-bold">Furniture</h4>
421
<p class="card-text mb-1">Dimension: 60 cm x 100 cm x 42 cm</p>
422
<p class="card-text mb-1">Material: wood</p>
423
<button type="button" class="btn btn-wood z-depth-0 mx-0">Buy now</button>
424
</div>
425
</div>
426
</div>
427
<div class="grid-item col-md-6 col-lg-4 mb-4">
428
<div class="card">
429
<div class="view overlay">
430
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/image(23).jpg" alt="Card image cap">
431
</div>
432
<div class="card-body">
433
<h5 class="card-title mb-1">$ 130</h5>
434
<h4 class="card-title font-weight-bold">Accessories</h4>
435
<p class="card-text mb-1">Dimension: 40 cm x 70 cm x 21 cm</p>
436
<p class="card-text mb-1">Material: cotton</p>
437
<button type="button" class="btn btn-wood z-depth-0 mx-0">Buy now</button>
438
</div>
439
</div>
440
</div>
441
<div class="grid-item col-md-6 col-lg-4 mb-4">
442
<div class="card">
443
<div class="view overlay">
444
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/image(17).jpg" alt="Card image cap">
445
</div>
446
<div class="card-body">
447
<h5 class="card-title mb-1">$ 250</h5>
448
<h4 class="card-title font-weight-bold">Furniture</h4>
449
<p class="card-text mb-1">Dimension: 60 cm x 100 cm x 42 cm</p>
450
<p class="card-text mb-1">Material: wood</p>
451
<button type="button" class="btn btn-wood z-depth-0 mx-0">Buy now</button>
452
</div>
453
</div>
454
</div>
455
<div class="grid-item col-md-6 col-lg-4 mb-4">
456
<div class="card">
457
<div class="view overlay">
458
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/image(19).jpg" alt="Card image cap">
459
</div>
460
<div class="card-body">
461
<h5 class="card-title mb-1">$ 130</h5>
462
<h4 class="card-title font-weight-bold">Accessories</h4>
463
<p class="card-text mb-1">Dimension: 40 cm x 70 cm x 21 cm</p>
464
<p class="card-text mb-1">Material: cotton</p>
465
<button type="button" class="btn btn-wood z-depth-0 mx-0">Buy now</button>
466
</div>
467
</div>
468
</div>
469
<div class="grid-item col-md-6 col-lg-4 mb-4">
470
<div class="card">
471
<div class="view overlay">
472
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/image(12).jpg" alt="Card image cap">
473
</div>
474
<div class="card-body">
475
<h5 class="card-title mb-1">$ 130</h5>
476
<h4 class="card-title font-weight-bold">Accessories</h4>
477
<p class="card-text mb-1">Dimension: 40 cm x 70 cm x 21 cm</p>
478
<p class="card-text mb-1">Material: cotton</p>
479
<button type="button" class="btn btn-wood z-depth-0 mx-0">Buy now</button>
480
</div>
481
</div>
482
</div>
483
</div>
484
485
</div>
486
487
</section>
488
<!-- Section: -->
489
490
<!-- Section: -->
491
<section id="contact" class="my-5 pt-4 contact-section">
492
493
<div class="container">
494
495
<div class="row">
496
497
<div class="col-md-12">
498
499
<h2 class="h1 font-weight-bold text-uppercase mb-5">Contact</h2>
500
501
<!-- Form with header -->
502
<div class="card">
503
504
<!-- Grid row -->
505
<div class="row">
506
507
<!-- Grid column -->
508
<div class="col-lg-8">
509
510
<div class="card-body form">
511
512
<!-- Header -->
513
<h3 class="mt-4"><i class="fas fa-envelope pr-2"></i>Write to us for design your dream furniture:</h3>
514
515
<!-- Grid row -->
516
<div class="row">
517
518
<!-- Grid column -->
519
<div class="col-md-6">
520
<div class="md-form mb-0">
521
<input type="text" id="form-contact-name" class="form-control">
522
<label for="form-contact-name" class="">Your name</label>
523
</div>
524
</div>
525
<!-- Grid column -->
526
527
<!-- Grid column -->
528
<div class="col-md-6">
529
<div class="md-form mb-0">
530
<input type="text" id="form-contact-email" class="form-control">
531
<label for="form-contact-email" class="">Your email</label>
532
</div>
533
</div>
534
<!-- Grid column -->
535
536
</div>
537
<!-- Grid row -->
538
539
<!-- Grid row -->
540
<div class="row">
541
542
<!-- Grid column -->
543
<div class="col-md-6">
544
<div class="md-form mb-0">
545
<input type="text" id="form-contact-phone" class="form-control">
546
<label for="form-contact-phone" class="">Your phone</label>
547
</div>
548
</div>
549
<!-- Grid column -->
550
551
<!-- Grid column -->
552
<div class="col-md-6">
553
<div class="md-form mb-0">
554
<input type="text" id="form-contact-company" class="form-control">
555
<label for="form-contact-company" class="">Your company</label>
556
</div>
557
</div>
558
<!-- Grid column -->
559
560
</div>
561
<!-- Grid row -->
562
563
<!-- Grid row -->
564
<div class="row">
565
566
<!-- Grid column -->
567
<div class="col-md-12">
568
<div class="md-form mb-0">
569
<textarea id="form-contact-message" class="form-control md-textarea" rows="3"></textarea>
570
<label for="form-contact-message">Your message</label>
571
<a class="btn-floating btn-lg grey-new">
572
<i class="far fa-paper-plane"></i>
573
</a>
574
</div>
575
</div>
576
<!-- Grid column -->
577
578
</div>
579
<!-- Grid row -->
580
581
</div>
582
583
</div>
584
<!-- Grid column -->
585
586
<!-- Grid column -->
587
<div class="col-lg-4">
588
589
<div class="card-body contact text-center h-100 white-text">
590
591
<h3 class="my-4 pb-2 font-weight-bold">Contact information</h3>
592
<ul class="text-lg-left list-unstyled ml-4">
593
<li>
594
<p><i class="fas fa-map-marker-alt pr-2"></i>New York, 94126, USA</p>
595
</li>
596
<li>
597
<p><i class="fas fa-phone pr-2"></i>+ 01 234 567 89</p>
598
</li>
599
<li>
600
<p><i class="fas fa-envelope pr-2"></i>contact@example.com</p>
601
</li>
602
</ul>
603
<hr class="hr-light my-4">
604
<ul class="list-inline text-center list-unstyled">
605
<li class="list-inline-item">
606
<a class="p-2 fa-lg tw-ic">
607
<i class="fab fa-twitter"></i>
608
</a>
609
</li>
610
<li class="list-inline-item">
611
<a class="p-2 fa-lg li-ic">
612
<i class="fab fa-linkedin-in"> </i>
613
</a>
614
</li>
615
<li class="list-inline-item">
616
<a class="p-2 fa-lg ins-ic">
617
<i class="fab fa-instagram"> </i>
618
</a>
619
</li>
620
</ul>
621
622
</div>
623
624
</div>
625
<!-- Grid column -->
626
627
</div>
628
<!-- Grid row -->
629
630
</div>
631
<!-- Form with header -->
632
633
</div>
634
635
</div>
636
637
</div>
638
639
</section>
640
<!-- Section: -->
641
642
<!-- Section: Video -->
643
<section id="video" class="my-5 py-5">
644
645
<div class="container">
646
647
<div class="row">
648
649
<div class="col-md-12">
650
651
<h2 class="h1 font-weight-bold text-uppercase mb-5">See how we create our furniture</h2>
652
653
<div class="embed-responsive embed-responsive-16by9 z-depth-2">
654
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/jB4PmdQhTqk" allowfullscreen=""
655
data-gtm-yt-inspected-2340190_699="true" id="263690183" data-gtm-yt-inspected-2340190_908="true"></iframe>
656
</div>
657
658
</div>
659
660
</div>
661
662
</div>
663
664
</section>
665
<!-- Section: Video -->
666
667
</main>
668
<!-- Main layout -->
669
670
<!-- Footer -->
671
<footer class="page-footer pt-4">
672
673
<div class="container text-center my-5">
674
675
<div class="row">
676
677
<div class="col-md-6 mx-auto">
678
679
<h2 class="font-weight-bold text-uppercase mb-4 pb-2">Subscribe to our newsletter</h2>
680
<form action="" class="pb-5">
681
<div class="md-form input-group mb-3">
682
<input type="email" class="form-control pl-0 white-text" placeholder="Your email address"
683
aria-label="Your email address" aria-describedby="MaterialButton-addon3">
684
<div class="input-group-append">
685
<button class="btn btn-md btn-wood m-0 px-3" type="button"
686
id="MaterialButton-addon3">Subscribe</button>
687
</div>
688
</div>
689
</form>
690
691
</div>
692
693
<div class="col-12 d-flex justify-content-center pb-3">
694
695
<h6 class="text-uppercase font-weight-bold mx-4">
696
<a href="#!">Facebook</a>
697
</h6>
698
<h6 class="text-uppercase font-weight-bold mx-4">
699
<a href="#!">LinkedIn</a>
700
</h6>
701
<h6 class="text-uppercase font-weight-bold mx-4">
702
<a href="#!">Twitter</a>
703
</h6>
704
705
</div>
706
707
</div>
708
709
</div>
710
711
<!-- Copyright -->
712
<div class="footer-copyright text-center py-3">© 2018 Copyright:
713
<a href="https://mdbootstrap.com/education/bootstrap/"> MDBootstrap.com</a>
714
</div>
715
<!-- Copyright -->
716
717
</footer>
718
<!-- Footer -->
xxxxxxxxxx
1
/* Navigation*/
2
.navbar,
3
.grey-new {
4
background-color: #667490; }
5
6
.scrolling-navbar {
7
transition: background .5s ease-in-out, padding .5s ease-in-out; }
8
9
footer.page-footer {
10
background-color: #667490; }
11
12
@media only screen and (max-width: 768px) {
13
.navbar {
14
background-color: #667490; } }
15
16
/* Necessary for full page carousel*/
17
html,
18
body,
19
header,
20
header .carousel .carousel-inner .carousel-item > .view {
21
height: 100%; }
22
23
@media (min-width: 600px) and (max-width: 850px) {
24
html,
25
body,
26
header,
27
header .carousel .carousel-inner .carousel-item > .view {
28
height: 650px; } }
29
30
/* Carousel*/
31
.carousel,
32
.carousel-item,
33
.carousel-item.active {
34
height: 100%; }
35
36
.carousel-inner {
37
height: 100%; }
38
39
.carousel-item:nth-child(1) {
40
background-repeat: no-repeat;
41
background-size: cover;
42
background-position: center center;
43
background-color: #eadca6; }
44
45
.carousel-item:nth-child(2) {
46
background-repeat: no-repeat;
47
background-size: cover;
48
background-position: center center;
49
background-color: #e2c275; }
50
51
.carousel-item:nth-child(3) {
52
background-repeat: no-repeat;
53
background-size: cover;
54
background-position: center center;
55
background-color: #c36a2d; }
56
57
@media (min-width: 1020px) {
58
.carousel .card.card-bottom {
59
bottom: 0;
60
position: absolute; }
61
.carousel .card.card-bottom .card-body {
62
background-color: rgba(234, 220, 166, 0.4); } }
63
64
.carousel .card.card-bottom .card-body {
65
background-color: rgba(234, 220, 166, 0.4); }
66
67
.btn.btn-wood {
68
background-color: #C36A2D;
69
color: #fff; }
70
71
.btn-lg-font {
72
font-size: 1rem;
73
padding-bottom: .6rem; }
74
75
.grid {
76
margin-left: -15px;
77
margin-right: -15px; }
78
79
.contact-section .contact {
80
background-color: #C36A2D; }
81
.contact-section .contact .fas,
82
.contact-section .contact .fab {
83
color: #fff; }
84
85
.page-footer input::-webkit-input-placeholder {
86
color: #fff; }
87
88
.page-footer input:-ms-input-placeholder {
89
color: #fff; }
90
91
.page-footer input::-ms-input-placeholder {
92
color: #fff; }
93
94
.page-footer input::placeholder {
95
color: #fff; }
96
xxxxxxxxxx
1
$('.carousel').carousel({
2
interval: 5000
3
});
4
5
$('.grid').masonry({
6
itemSelector: '.grid-item',
7
columnWidth: '.grid-sizer',
8
percentPosition: true
9
});
Console errors: 0