xxxxxxxxxx1
<body>2
<!--Main Navigation-->3
<header>4
<!-- Intro settings -->5
<style>6
/* Default height for small devices */7
#intro {8
height: 600px;9
/* Margin to fix overlapping fixed navbar */10
margin-top: 58px;11
}12
13
@media (max-width: 991px) {14
#intro {15
/* Margin to fix overlapping fixed navbar */16
margin-top: 45px;17
}18
}19
20
body {21
background-color: rgba(0, 0, 0, 0.938);22
}23
</style>24
25
26
<!-- Navbar -->27
<nav class="navbar navbar-expand-lg navbar-light fixed-top">28
<div class="container-fluid">29
<!-- Navbar brand -->30
<a class="navbar-brand" target="_blank" href="https://mdbootstrap.com/docs/standard/">31
<img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" height="16" alt="" loading="lazy"32
style="margin-top: -3px;" />33
</a>34
<button class="navbar-toggler" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarExample01"35
aria-controls="navbarExample01" aria-expanded="false" aria-label="Toggle navigation">36
<i class="fas fa-bars"></i>37
</button>38
<div class="collapse navbar-collapse" id="navbarExample01">39
<ul class="navbar-nav me-auto mb-2 mb-lg-0">40
<li class="nav-item active">41
<a class="nav-link text-white" aria-current="page" href="#intro">Home</a>42
</li>43
<li class="nav-item text-white">44
<a class="nav-link text-white" href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA"45
rel="nofollow" target="_blank">Learn Bootstrap 5</a>46
</li>47
<li class="nav-item">48
<a class="nav-link text-white" href="https://mdbootstrap.com/docs/standard/" target="_blank">Download MDB49
UI KIT</a>50
</li>51
</ul>52
53
<ul class="navbar-nav d-flex flex-row">54
55
<!-- Icons -->56
<li class="nav-item">57
<a class="nav-link text-white fw-bold" href="https://mdbootstrap.com/bf/waiting-list" target="_blank">Join58
MDB Black November Waiting List</a>59
</li>60
<li class="nav-item me-3 me-lg-0">61
<a class="nav-link" href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow"62
target="_blank">63
<i class="text-white fab fa-youtube"></i>64
</a>65
</li>66
<li class="nav-item me-3 me-lg-0">67
<a class="nav-link" href="https://www.facebook.com/mdbootstrap" rel="nofollow" target="_blank">68
<i class="text-white fab fa-facebook-f"></i>69
</a>70
</li>71
<li class="nav-item me-3 me-lg-0">72
<a class="nav-link" href="https://twitter.com/MDBootstrap" rel="nofollow" target="_blank">73
<i class="text-white fab fa-twitter"></i>74
</a>75
</li>76
<li class="nav-item me-3 me-lg-0">77
<a class="nav-link" href="https://github.com/mdbootstrap/mdb-ui-kit" rel="nofollow" target="_blank">78
<i class="text-white fab fa-github"></i>79
</a>80
</li>81
</ul>82
</div>83
</div>84
</nav>85
<!-- Navbar -->86
87
<!-- Background image -->88
<div id="intro" class="p-5 text-center bg-image shadow-1-strong"89
style="background-image: url('https://v1.mdbootstrap.com/wp-content/uploads/2021/10/bg-bf.jpg');">90
<div class="mask" style="background-color: rgba(0, 0, 0, 0.7);">91
<div class="d-flex justify-content-center align-items-center h-100">92
<div class="text-white px-4">93
<h1 class="display-1 mb-3 fw-bold">Black Friday</h1>94
<p>starts in:</p>95
<!-- Time Counter -->96
<h1 class="display-4 mt-2" id="time-counter"></h1>97
<a class="btn btn-outline-light btn-lg m-2 mt-3" href="https://mdbootstrap.com/bf/waiting-list"98
role="button" target="_blank">Join waiting list</a>99
</div>100
</div>101
</div>102
</div>103
<!-- Background image -->104
</header>105
<!--Main Navigation-->106
107
<!--Main layout-->108
<main class="mt-5">109
<!-- Container for demo purpose -->110
<div class="container text-white mt-5 pt-5">111
<!--Section: Design Block-->112
<section>113
114
<h3 class="text-center mb-5">Upcoming discounts</h3>115
116
<p class="text-center mb-5 mx-lg-5">117
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum laborum animi doloremque118
nam dicta veniam dolor ea nostrum excepturi laboriosam molestiae, expedita odit id! Sunt119
quia cumque consequatur perferendis hic.120
</p>121
122
<!-- Section: Design Block -->123
<section class="mb-8">124
<div class="row gx-xl-5 justify-content-center">125
<div class="col-lg-4 col-6 mb-4 mb-lg-0">126
<!-- Product card -->127
<div>128
<!-- Product image -->129
<div class="130
bg-image131
ripple132
shadow-4-strong133
rounded-6134
mb-4135
overflow-hidden136
d-block137
" data-ripple-color="light">138
<img src="https://mdbootstrap.com/img/new/ecommerce/vertical/075.jpg" class="w-100" alt="" />139
<a href="#!">140
<div class="mask">141
<div class="142
d-flex143
justify-content-start144
align-items-end145
h-100146
p-3147
">148
<span class="badge badge-danger rounded-pill me-2">New</span>149
<span class="badge badge-success rounded-pill">Eco</span>150
</div>151
</div>152
<div class="hover-overlay">153
<div class="mask" style="background-color: hsla(0, 0%, 98.4%, 0.09)"></div>154
</div>155
</a>156
</div>157
158
<!-- Product content -->159
<a href="" class="px-3 text-reset d-block">160
<p class="fw-bold mb-2">Stylish watch</p>161
<p class="text-muted mb-2">Watches</p>162
<ul class="list-unstyled d-flex text-muted mb-2">163
<li><i class="fas fa-star text-danger"></i></li>164
<li><i class="fas fa-star text-danger"></i></li>165
<li><i class="fas fa-star text-danger"></i></li>166
<li><i class="fas fa-star text-danger"></i></li>167
<li><i class="fas fa-star text-danger"></i></li>168
</ul>169
<h5 class="mb-2">170
<s class="text-muted me-2 small align-middle">$199</s><span171
class="h2 fw-bold text-danger">$99</span>172
</h5>173
</a>174
<!-- Product content -->175
</div>176
<!-- Product card -->177
</div>178
179
<div class="col-lg-4 col-6 mb-4 mb-lg-0">180
<!-- Product card -->181
<div>182
<!-- Product image -->183
<div class="184
bg-image185
ripple186
shadow-4-strong187
rounded-6188
mb-4189
overflow-hidden190
d-block191
" data-ripple-color="light">192
<img src="https://mdbootstrap.com/img/new/ecommerce/vertical/001.jpg" class="w-100" alt="" />193
<a href="#!">194
<div class="mask">195
<div class="196
d-flex197
justify-content-start198
align-items-end199
h-100200
p-3201
">202
<span class="badge badge-danger rounded-pill me-2">6 offers left</span></div>203
</div>204
<div class="hover-overlay">205
<div class="mask" style="background-color: hsla(0, 0%, 98.4%, 0.09)">206
</div>207
</div>208
</a>209
</div>210
211
<!-- Product content -->212
<a href="" class="px-3 text-reset d-block">213
<p class="fw-bold mb-2">Modern watch</p>214
<p class="text-muted mb-2">Watches</p>215
<ul class="list-unstyled d-flex text-muted mb-2">216
<li><i class="fas fa-star text-danger"></i></li>217
<li><i class="fas fa-star text-danger"></i></li>218
<li><i class="fas fa-star text-danger"></i></li>219
<li><i class="fas fa-star text-danger"></i></li>220
<li><i class="far fa-star text-danger"></i></li>221
</ul>222
<h5 class="mb-2">223
<s class="text-muted me-2 small align-middle">$199</s><span224
class="h2 fw-bold text-danger">$99</span>225
</h5>226
</a>227
<!-- Product content -->228
</div>229
<!-- Product card -->230
</div>231
<div class="col-lg-4 col-6 mb-4 mb-xl-0">232
<!-- Product card -->233
<div>234
<!-- Product image -->235
<div class="236
bg-image237
ripple238
shadow-4-strong239
rounded-6240
mb-4241
overflow-hidden242
d-block243
" data-ripple-color="light">244
<img src="https://mdbootstrap.com/img/new/ecommerce/vertical/018.jpg" class="w-100" alt="" />245
<a href="#!">246
<div class="mask">247
<div class="248
d-flex249
justify-content-start250
align-items-end251
h-100252
p-3253
">254
<span class="badge badge-danger rounded-pill me-2">-50%</span>255
</div>256
</div>257
<div class="hover-overlay">258
<div class="mask" style="background-color: hsla(0, 0%, 98.4%, 0.09)"></div>259
</div>260
</a>261
</div>262
263
<!-- Product content -->264
<a href="" class="px-3 text-reset d-block">265
<p class="fw-bold mb-2">Watch cleaning fluid</p>266
<p class="text-muted mb-2">Watches</p>267
<ul class="list-unstyled d-flex text-muted mb-2">268
<li><i class="fas fa-star text-danger"></i></li>269
<li><i class="fas fa-star text-danger"></i></li>270
<li><i class="fas fa-star text-danger"></i></li>271
<li><i class="fas fa-star text-danger"></i></li>272
<li><i class="far fa-star text-danger"></i></li>273
</ul>274
<h5 class="mb-2">275
<s class="text-muted me-2 small align-middle">$199</s><span276
class="h2 fw-bold text-danger">$99</span>277
</h5>278
</a>279
<!-- Product content -->280
</div>281
<!-- Product card -->282
</div>283
</div>284
</section>285
<!-- Section: Design Block -->286
<hr />287
</div>288
<!-- Container for demo purpose -->289
290
291
<!-- Container for demo purpose -->292
<div class="container text-white mt-5 pt-5">293
294
<!--Section: Design block-->295
<section class="mb-7">296
<h5 class="mb-4 text-uppercase">297
<strong>Explore by Trending 2021</strong>298
</h5>299
300
<div class="row text-center">301
<div class="col-lg-3 col-md-6 mb-4 mb-lg-0">302
<a303
href="#!"304
class="ripple bg-image hover-zoom d-block mb-2"305
data-mdb-ripple-color="light"306
>307
<img308
src="https://mdbootstrap.com/img/new/ecommerce/vertical/132.jpg"309
class="w-100 rounded"310
alt=""311
/>312
</a>313
314
<p><strong>New arrivals</strong></p>315
</div>316
317
<div class="col-lg-3 col-md-6 mb-4 mb-lg-0">318
<a319
href="#!"320
class="ripple bg-image hover-zoom d-block mb-2"321
data-mdb-ripple-color="light"322
>323
<img324
src="https://mdbootstrap.com/img/new/ecommerce/vertical/004.jpg"325
class="w-100 rounded"326
alt=""327
/>328
</a>329
330
<p><strong>Hot items</strong></p>331
</div>332
333
<div class="col-lg-3 col-md-6 mb-4 mb-lg-0">334
<a335
href="#!"336
class="ripple bg-image hover-zoom d-block mb-2"337
data-mdb-ripple-color="light"338
>339
<img340
src="https://mdbootstrap.com/img/new/ecommerce/vertical/071.jpg"341
class="w-100 rounded"342
alt=""343
/>344
</a>345
346
<p><strong>Best deals</strong></p>347
</div>348
349
<div class="col-lg-3 col-md-6 mb-4 mb-lg-0">350
<a351
href="#!"352
class="ripple bg-image hover-zoom d-block mb-2"353
data-mdb-ripple-color="light"354
>355
<img356
src="https://mdbootstrap.com/img/new/ecommerce/vertical/029.jpg"357
class="w-100 rounded"358
alt=""359
/>360
</a>361
362
<p><strong>Trending design</strong></p>363
</div>364
</div>365
366
<div class="row text-center">367
<div class="col-lg-3 col-md-6 mb-4 mb-lg-0">368
<a369
href="#!"370
class="ripple bg-image hover-zoom d-block mb-2"371
data-mdb-ripple-color="light"372
>373
<img374
src="https://mdbootstrap.com/img/new/ecommerce/vertical/001.jpg"375
class="w-100 rounded"376
alt=""377
/>378
</a>379
380
<p><strong>New arrivals</strong></p>381
</div>382
383
<div class="col-lg-3 col-md-6 mb-4 mb-lg-0">384
<a385
href="#!"386
class="ripple bg-image hover-zoom d-block mb-2"387
data-mdb-ripple-color="light"388
>389
<img390
src="https://mdbootstrap.com/img/new/ecommerce/vertical/007.jpg"391
class="w-100 rounded"392
alt=""393
/>394
</a>395
396
<p><strong>Hot items</strong></p>397
</div>398
399
<div class="col-lg-3 col-md-6 mb-4 mb-lg-0">400
<a401
href="#!"402
class="ripple bg-image hover-zoom d-block mb-2"403
data-mdb-ripple-color="light"404
>405
<img406
src="https://mdbootstrap.com/img/new/ecommerce/vertical/018.jpg"407
class="w-100 rounded"408
alt=""409
/>410
</a>411
412
<p><strong>Best deals</strong></p>413
</div>414
415
<div class="col-lg-3 col-md-6 mb-4 mb-lg-0">416
<a417
href="#!"418
class="ripple bg-image hover-zoom d-block mb-2"419
data-mdb-ripple-color="light"420
>421
<img422
src="https://mdbootstrap.com/img/new/ecommerce/vertical/055.jpg"423
class="w-100 rounded"424
alt=""425
/>426
</a>427
428
<p><strong>Trending design</strong></p>429
</div>430
</div>431
</section>432
<!--Section: Design block-->433
<hr />434
435
</div>436
<!-- Container for demo purpose -->437
438
439
<!-- Container for demo purpose -->440
<div class="container text-white mt-5 pt-5">441
442
<!--Section: Design Block-->443
<section class="text-center">444
<h3 class="mb-5">Our Clients about us</h3>445
446
<div class="row">447
<div class="col-md-12 col-lg-4 mb-4">448
<img class="rounded-circle shadow-1-strong mb-4"449
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(26).jpg" alt="avatar" style="width: 150px;" />450
<h5 class="mb-3">Anna Deynah</h5>451
<p class="font-weight-bold text-primary">UX Designer</p>452
<p>453
<i class="fas fa-quote-left pe-2"></i>454
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic455
tenetur quae quaerat ad velit ab hic tenetur.456
</p>457
<ul class="list-unstyled d-flex justify-content-center text-muted mb-0">458
<li><i class="fas fa-star fa-sm"></i></li>459
<li><i class="fas fa-star fa-sm"></i></li>460
<li><i class="fas fa-star fa-sm"></i></li>461
<li><i class="fas fa-star fa-sm"></i></li>462
<li><i class="fas fa-star fa-sm"></i></li>463
</ul>464
</div>465
<div class="col-md-6 col-lg-4 mb-4">466
<img class="rounded-circle shadow-1-strong mb-4"467
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(4).jpg" alt="avatar" style="width: 150px;" />468
<h5 class="mb-3">Jenny Doe</h5>469
<p class="font-weight-bold text-primary">Web Developer</p>470
<p>471
<i class="fas fa-quote-left pe-2"></i>472
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit473
laboriosam, nisi ut aliquid commodi.474
</p>475
<ul class="list-unstyled d-flex justify-content-center text-muted mb-0">476
<li><i class="fas fa-star fa-sm"></i></li>477
<li><i class="fas fa-star fa-sm"></i></li>478
<li><i class="fas fa-star fa-sm"></i></li>479
<li><i class="fas fa-star fa-sm"></i></li>480
<li><i class="fas fa-star-half-alt fa-sm"></i></li>481
</ul>482
</div>483
<div class="col-md-6 col-lg-4 mb-4">484
<img class="rounded-circle shadow-1-strong mb-4"485
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(6).jpg" alt="avatar" style="width: 150px;" />486
<h5 class="mb-3">Maria Kate</h5>487
<p class="font-weight-bold text-primary">Photographer</p>488
<p>489
<i class="fas fa-quote-left pe-2"></i>490
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium491
voluptatum deleniti atque corrupti.492
</p>493
<ul class="list-unstyled d-flex justify-content-center text-muted mb-0">494
<li><i class="fas fa-star fa-sm"></i></li>495
<li><i class="fas fa-star fa-sm"></i></li>496
<li><i class="fas fa-star fa-sm"></i></li>497
<li><i class="fas fa-star fa-sm"></i></li>498
<li><i class="far fa-star fa-sm"></i></li>499
</ul>500
</div>501
</div>502
<hr class="mt-5 mb-0"/>503
504
</section>505
<!--Section: Design Block-->506
507
</div>508
<!-- Container for demo purpose -->509
510
<!--Main layout-->511
<main class="py-5">512
<div class="container pt-5 text-white">513
<!--Section: Content-->514
<section>515
<div class="row">516
<div class="col-md-6 gx-5 mb-4 d-lg-flex align-items-center">517
<div>518
<h4><strong>Subscribe to stay up to date with best deals</strong></h4>519
<p class="text-muted">520
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis consequatur521
eligendi quisquam doloremque vero ex debitis veritatis placeat unde animi laborum522
sapiente illo possimus, commodi dignissimos obcaecati illum maiores corporis.523
</p>524
</div>525
</div>526
527
<div class="col-md-6 gx-5 mb-4">528
<form>529
<!-- Name input -->530
<div class="form-outline mb-4">531
<input type="text" id="form5Example1" class="form-control" />532
<label class="form-label" for="form5Example1">Name</label>533
</div>534
535
<!-- Email input -->536
<div class="form-outline mb-4">537
<input type="email" id="form5Example2" class="form-control" />538
<label class="form-label" for="form5Example2">Email address</label>539
</div>540
541
<!-- Submit button -->542
<button type="submit" class="btn btn-danger btn-block mb-4">543
Subscribe544
</button>545
</form>546
</div>547
<hr class="mt-5" />548
</div>549
</section>550
<!--Section: Content-->551
</div>552
553
</main>554
<!--Main layout-->555
556
<!--Footer-->557
<footer class=" text-lg-start">558
559
560
<div class="text-center py-4 align-items-center">561
<p>Follow MDB on social media</p>562
<a href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" class="btn btn-danger m-1" role="button"563
rel="nofollow" target="_blank">564
<i class="fab fa-youtube"></i>565
</a>566
<a href="https://www.facebook.com/mdbootstrap" class="btn btn-danger m-1" role="button" rel="nofollow"567
target="_blank">568
<i class="fab fa-facebook-f"></i>569
</a>570
<a href="https://twitter.com/MDBootstrap" class="btn btn-danger m-1" role="button" rel="nofollow"571
target="_blank">572
<i class="fab fa-twitter"></i>573
</a>574
<a href="https://github.com/mdbootstrap/mdb-ui-kit" class="btn btn-danger m-1" role="button" rel="nofollow"575
target="_blank">576
<i class="fab fa-github"></i>577
</a>578
</div>z579
580
<!-- Copyright -->581
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">582
© 2023 Copyright:583
<a class="text-white" href="https://mdbootstrap.com/">MDBootstrap.com</a>584
</div>585
<!-- Copyright -->586
</footer>587
<!--Footer-->588
589
</body>1
1
xxxxxxxxxx1
// Set the date we're counting down to2
var countDownDate = new Date();3
countDownDate.setDate(countDownDate.getDate() + 30);4
5
// Update the count down every 1 second6
var x = setInterval(function () {7
// Get todays date and time8
var now = new Date().getTime();9
10
// Find the distance between now an the count down date11
var distance = countDownDate - now;12
13
// Time calculations for days, hours, minutes and seconds14
var days = Math.floor(distance / (1000 * 60 * 60 * 24));15
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));16
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));17
var seconds = Math.floor((distance % (1000 * 60)) / 1000);18
19
// Display the result in the element with id="demo"20
document.getElementById('time-counter').innerHTML =21
days + 'd ' + hours + 'h ' + minutes + 'm ' + seconds + 's ';22
23
// If the count down is finished, write some text24
if (distance < 0) {25
clearInterval(x);26
document.getElementById('time-counter').innerHTML = 'EXPIRED';27
}28
}, 1000); Console errors: 0