xxxxxxxxxx1
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">2
<body>3
<!--Main Navigation-->4
<header>5
<nav class="navbar navbar-expand-lg navbar-light fixed-top">6
<div class="container-fluid">7
<!-- Navbar brand -->8
<a class="navbar-brand" target="_blank" href="https://mdbootstrap.com/docs/standard/">9
<img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" height="16" alt="" loading="lazy"10
style="margin-top: -3px;" />11
</a>12
<button class="navbar-toggler" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarExample01"13
aria-controls="navbarExample01" aria-expanded="false" aria-label="Toggle navigation">14
<i class="fas fa-bars"></i>15
</button>16
<div class="collapse navbar-collapse" id="navbarExample01">17
<ul class="navbar-nav me-auto mb-2 mb-lg-0">18
<li class="nav-item active">19
<a class="nav-link text-white" aria-current="page" href="#intro">Home</a>20
</li>21
<li class="nav-item text-white">22
<a class="nav-link text-white" href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA"23
rel="nofollow" target="_blank">Learn Bootstrap 5</a>24
</li>25
<li class="nav-item">26
<a class="nav-link text-white" href="https://mdbootstrap.com/docs/standard/" target="_blank">Download27
MDB28
UI KIT</a>29
</li>30
</ul>31
32
<ul class="navbar-nav d-flex flex-row">33
34
<!-- Icons -->35
<li class="nav-item">36
<a class="nav-link text-white fw-bold" href="https://mdbootstrap.com/bf/cyber-monday"37
target="_blank">Get Special Offer</a>38
</li>39
<li class="nav-item me-3 me-lg-0">40
<a class="nav-link" href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow"41
target="_blank">42
<i class="text-white fab fa-youtube"></i>43
</a>44
</li>45
<li class="nav-item me-3 me-lg-0">46
<a class="nav-link" href="https://www.facebook.com/mdbootstrap" rel="nofollow" target="_blank">47
<i class="text-white fab fa-facebook-f"></i>48
</a>49
</li>50
<li class="nav-item me-3 me-lg-0">51
<a class="nav-link" href="https://twitter.com/MDBootstrap" rel="nofollow" target="_blank">52
<i class="text-white fab fa-twitter"></i>53
</a>54
</li>55
<li class="nav-item me-3 me-lg-0">56
<a class="nav-link" href="https://github.com/mdbootstrap/mdb-ui-kit" rel="nofollow" target="_blank">57
<i class="text-white fab fa-github"></i>58
</a>59
</li>60
</ul>61
</div>62
</div>63
</nav>64
<!-- Navbar -->65
66
<!-- Background image -->67
<div id="intro" class="p-5 text-center bg-image shadow-1-strong"68
style="background-image: url('https://images.unsplash.com/photo-1603302576837-37561b2e2302?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1468&q=80');">69
<div class="mask" style="background-color: rgba(0, 0, 0, 0.7);">70
<div class="d-flex justify-content-center align-items-center h-100">71
<div class="text-white px-4">72
<h1 class="display-1 mb-3 fw-bold cyber-font">Cyber Monday</h1>73
<p>starts in:</p>74
<!-- Time Counter -->75
<h1 class="display-4 mt-2 cyber-font" id="time-counter"></h1>76
<a class="btn btn-outline-light btn-lg m-2 mt-3" href="https://mdbootstrap.com/bf/cyber-monday"77
role="button" target="_blank">Get Special Offer</a>78
</div>79
</div>80
</div>81
</div>82
<!-- Background image -->83
</header>84
<!--Main Navigation-->85
86
<!--Main layout-->87
<main class="mt-5">88
<!-- Container for demo purpose -->89
90
<div class="container text-white mt-5 pt-5">91
<!--Section: Design Block-->92
<section>93
94
<h3 class="text-center mb-5 cyber-font">Pricing</h3>95
96
<p class="text-center mb-5 mx-lg-5">97
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum laborum animi doloremque98
nam dicta veniam dolor ea nostrum excepturi laboriosam molestiae, expedita odit id! Sunt99
quia cumque consequatur perferendis hic.100
</p>101
102
<section class="text-center">103
<div class="btn-group mb-4" role="group" aria-label="Basic example">104
<!-- Pills navs -->105
<ul class="nav nav-pills mb-3" id="ex1" role="tablist">106
<li class="nav-item" role="presentation">107
<a class="nav-link active cyber-btn" id="ex1-tab-1" data-mdb-toggle="pill" href="#ex1-pills-1" role="tab"108
aria-controls="ex1-pills-1" aria-selected="true">Monthly billing</a>109
</li>110
<li class="nav-item" role="presentation">111
<a class="nav-link btn-light" id="ex1-tab-2" data-mdb-toggle="pill" href="#ex1-pills-2" role="tab"112
aria-controls="ex1-pills-2" aria-selected="false">Annual billign <small>(2 months FREE)</small></a>113
</li>114
</ul>115
<!-- Pills navs --> 116
</div>117
</section>118
119
<!-- Pills content -->120
<div class="tab-content" id="ex1-content">121
<div class="tab-pane fade show active" id="ex1-pills-1" role="tabpanel" aria-labelledby="ex1-tab-1">122
<div class="row">123
<div class="col-md-3">124
<div class="card shadow-3-strong custom-card">125
<div class="mx-2 card-body">126
<h5 class="card-title my-2 cyber-font cyber-text">Hobby</h5>127
<p class="text-muted mb-2">128
All the essentials for starting a business129
</p>130
<p class="h2 fw-bold cyber-text cyber-font">$12<small class="text-muted"131
style="font-size: 18px;">/mo</small></p>132
<a href="#" class="btn cyber-btn d-block mb-2 mt-3 text-capitalize">Buy Hobby</a>133
</div>134
<div class="card-footer">135
<p class="text-uppercase fw-bold" style="font-size: 12px;">What's included</p>136
<ol class="list-unstyled mb-0 px-4">137
<p class="my-3 fw-bold text-muted text-center">138
</p>139
<li class="mb-3">140
<i class="fas fa-check cyber-text me-3"></i><small>Lorem Ipsum</small>141
</li>142
<li class="mb-3">143
<i class="fas fa-check cyber-text me-3"></i><small>Lorem Ipsum</small>144
</li>145
</ol>146
</div>147
</div>148
</div>149
<div class="col-md-3">150
<div class="card cyber-border custom-card">151
<div class="mx-2 card-body">152
<h5 class="card-title my-2 cyber-font cyber-text ">Freelancer</h5>153
<p class="text-muted">154
All the essentials for starting a business155
</p>156
<p class="h2 fw-bold cyber-text cyber-font">$20<small class="text-muted"157
style="font-size: 18px;">/mo</small></p>158
<a href="#" class="btn cyber-btn d-block mb-2 mt-3 text-capitalize">Buy Freelancer</a>159
</div>160
<div class="card-footer">161
<p class="text-uppercase fw-bold" style="font-size: 12px;">What's included</p>162
<ol class="list-unstyled mb-0 px-4">163
<p class="my-3 fw-bold text-muted text-center">164
</p>165
<li class="mb-3">166
<i class="fas fa-check cyber-text me-3"></i><small>Lorem Ipsum</small>167
</li>168
<li class="mb-3">169
<i class="fas fa-check cyber-text me-3"></i><small>Lorem Ipsum</small>170
</li>171
<li class="mb-3">172
<i class="fas fa-check cyber-text me-3"></i><small>Lorem Ipsum</small>173
</li>174
</ol>175
</div>176
</div>177
</div>178
<div class="col-md-3">179
<div class="card shadow-3-strong custom-card">180
<div class="mx-2 card-body">181
<h5 class="card-title my-2 cyber-font cyber-text">Startup</h5>182
<p class="text-muted">183
All the essentials for starting a business184
</p>185
<p class="h2 fw-bold cyber-font cyber-text">$40<small class="text-muted"186
style="font-size: 18px;">/mo</small></p>187
<a href="#" class="btn cyber-btn d-block mb-2 mt-3 text-capitalize">Buy Startup</a>188
</div>189
<div class="card-footer">190
<p class="text-uppercase fw-bold" style="font-size: 12px;">What's included</p>191
<ol class="list-unstyled mb-0 px-4">192
<p class="my-3 fw-bold text-muted text-center">193
</p>194
<li class="mb-3">195
<i class="fas fa-check cyber-text me-3"></i><small>Lorem Ipsum</small>196
</li>197
<li class="mb-3">198
<i class="fas fa-check cyber-text me-3"></i><small>Lorem Ipsum</small>199
</li>200
<li class="mb-3">201
<i class="fas fa-check cyber-text me-3"></i><small>Lorem Ipsum</small>202
</li>203
<li class="mb-3">204
<i class="fas fa-check cyber-text me-3"></i><small>Lorem Ipsum</small>205
</li>206
</ol>207
</div>208
</div>209
</div>210
<div class="col-md-3">211
<div class="card shadow-3-strong custom-card">212
<div class="mx-2 card-body">213
<h5 class="card-title my-2 cyber-font cyber-text ">Enterprise</h5>214
<p class="text-muted">215
All the essentials for starting a business216
</p>217
<p class="h2 fw-bold cyber-text cyber-font">$55<small class="text-muted"218
style="font-size: 18px;">/mo</small></p>219
<a href="#" class="btn d-block mb-2 mt-3 text-capitalize cyber-btn">Buy Enterprise</a>220
</div>221
<div class="card-footer">222
<p class="text-uppercase fw-bold" style="font-size: 12px;">What's included</p>223
<ol class="list-unstyled mb-0 px-4">224
<li class="mb-3">225
<i class="fas fa-check cyber-text me-3"></i><small class="">Lorem Ipsum</small>226
</li>227
<li class="mb-3">228
<i class="fas fa-check cyber-text me-3"></i><small>Lorem Ipsum</small>229
</li>230
<li class="mb-3">231
<i class="fas fa-check cyber-text me-3"></i><small>Lorem Ipsum</small>232
</li>233
<li class="mb-3">234
<i class="fas fa-check cyber-text me-3"></i><small>Lorem Ipsum</small>235
</li>236
<li class="mb-3">237
<i class="fas fa-check cyber-text me-3"></i><small>Lorem Ipsum</small>238
</li>239
<li class="mb-3">240
<i class="fas fa-check cyber-text me-3"></i><small>Lorem Ipsum</small>241
</li>242
<li class="mb-3">243
<i class="fas fa-check cyber-text me-3"></i><small>Lorem Ipsum</small>244
</li>245
</ol>246
</div>247
</div>248
</div>249
</div>250
</div>251
<div class="tab-pane fade" id="ex1-pills-2" role="tabpanel" aria-labelledby="ex1-tab-2">252
<div class="row">253
<div class="col-md-3">254
<div class="card shadow-3-strong custom-card">255
<div class="mx-2 card-body">256
<h5 class="card-title my-2 cyber-font cyber-text">Hobby</h5>257
<p class="text-muted mb-2">258
All the essentials for starting a business259
</p>260
<p class="h2 fw-bold cyber-text cyber-font">$120<small class="text-muted"261
style="font-size: 18px;">/year</small></p>262
<a href="#" class="btn cyber-btn d-block mb-2 mt-3 text-capitalize">Buy Hobby</a>263
</div>264
<div class="card-footer">265
<p class="text-uppercase fw-bold" style="font-size: 12px;">What's included</p>266
<ol class="list-unstyled mb-0 px-4">267
<p class="my-3 fw-bold text-muted text-center">268
</p>269
<li class="mb-3">270
<i class="fas fa-check cyber-text me-3"></i><small>Lorem Ipsum</small>271
</li>272
<li class="mb-3">273
<i class="fas fa-check cyber-text me-3"></i><small>Lorem Ipsum</small>274
</li>275
</ol>276
</div>277
</div>278
</div>279
<div class="col-md-3">280
<div class="card cyber-border custom-card">281
<div class="mx-2 card-body">282
<h5 class="card-title my-2 cyber-font cyber-text ">Freelancer</h5>283
<p class="text-muted">284
All the essentials for starting a business285
</p>286
<p class="h2 fw-bold cyber-text cyber-font">$199<small class="text-muted"287
style="font-size: 18px;">/year</small></p>288
<a href="#" class="btn cyber-btn d-block mb-2 mt-3 text-capitalize">Buy Freelancer</a>289
</div>290
<div class="card-footer">291
<p class="text-uppercase fw-bold" style="font-size: 12px;">What's included</p>292
<ol class="list-unstyled mb-0 px-4">293
<p class="my-3 fw-bold text-muted text-center">294
</p>295
<li class="mb-3">296
<i class="fas fa-check cyber-text me-3"></i><small>Lorem Ipsum</small>297
</li>298
<li class="mb-3">299
<i class="fas fa-check cyber-text me-3"></i><small>Lorem Ipsum</small>300
</li>301
<li class="mb-3">302
<i class="fas fa-check cyber-text me-3"></i><small>Lorem Ipsum</small>303
</li>304
</ol>305
</div>306
</div>307
</div>308
<div class="col-md-3">309
<div class="card shadow-3-strong custom-card">310
<div class="mx-2 card-body">311
<h5 class="card-title my-2 cyber-font cyber-text">Startup</h5>312
<p class="text-muted">313
All the essentials for starting a business314
</p>315
<p class="h2 fw-bold cyber-font cyber-text">$399<small class="text-muted"316
style="font-size: 18px;">/year</small></p>317
<a href="#" class="btn cyber-btn d-block mb-2 mt-3 text-capitalize">Buy Startup</a>318
</div>319
<div class="card-footer">320
<p class="text-uppercase fw-bold" style="font-size: 12px;">What's included</p>321
<ol class="list-unstyled mb-0 px-4">322
<p class="my-3 fw-bold text-muted text-center">323
</p>324
<li class="mb-3">325
<i class="fas fa-check cyber-text me-3"></i><small>Lorem Ipsum</small>326
</li>327
<li class="mb-3">328
<i class="fas fa-check cyber-text me-3"></i><small>Lorem Ipsum</small>329
</li>330
<li class="mb-3">331
<i class="fas fa-check cyber-text me-3"></i><small>Lorem Ipsum</small>332
</li>333
<li class="mb-3">334
<i class="fas fa-check cyber-text me-3"></i><small>Lorem Ipsum</small>335
</li>336
</ol>337
</div>338
</div>339
</div>340
<div class="col-md-3">341
<div class="card shadow-3-strong custom-card">342
<div class="mx-2 card-body">343
<h5 class="card-title my-2 cyber-font cyber-text ">Enterprise</h5>344
<p class="text-muted">345
All the essentials for starting a business346
</p>347
<p class="h2 fw-bold cyber-text cyber-font">$550<small class="text-muted"348
style="font-size: 18px;">/year</small></p>349
<a href="#" class="btn d-block mb-2 mt-3 text-capitalize cyber-btn">Buy Enterprise</a>350
</div>351
<div class="card-footer">352
<p class="text-uppercase fw-bold" style="font-size: 12px;">What's included</p>353
<ol class="list-unstyled mb-0 px-4">354
<li class="mb-3">355
<i class="fas fa-check cyber-text me-3"></i><small class="">Lorem Ipsum</small>356
</li>357
<li class="mb-3">358
<i class="fas fa-check cyber-text me-3"></i><small>Lorem Ipsum</small>359
</li>360
<li class="mb-3">361
<i class="fas fa-check cyber-text me-3"></i><small>Lorem Ipsum</small>362
</li>363
<li class="mb-3">364
<i class="fas fa-check cyber-text me-3"></i><small>Lorem Ipsum</small>365
</li>366
<li class="mb-3">367
<i class="fas fa-check cyber-text me-3"></i><small>Lorem Ipsum</small>368
</li>369
<li class="mb-3">370
<i class="fas fa-check cyber-text me-3"></i><small>Lorem Ipsum</small>371
</li>372
<li class="mb-3">373
<i class="fas fa-check cyber-text me-3"></i><small>Lorem Ipsum</small>374
</li>375
</ol>376
</div>377
</div>378
</div>379
</div>380
</div>381
</div>382
<!-- Pills content -->383
384
<hr />385
</div>386
387
388
<div class="container text-white mt-5 pt-5">389
<!--Section: Design Block-->390
<section>391
392
<h3 class="text-center mb-5 cyber-font">Upcoming discounts</h3>393
394
<p class="text-center mb-5 mx-lg-5">395
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum laborum animi doloremque396
nam dicta veniam dolor ea nostrum excepturi laboriosam molestiae, expedita odit id! Sunt397
quia cumque consequatur perferendis hic.398
</p>399
400
<!-- Section: Design Block -->401
<section class="mb-8">402
<div class="row gx-xl-5 justify-content-center">403
<div class="col-lg-4 col-6 mb-4 mb-lg-0">404
<!-- Product card -->405
<div>406
<!-- Product image -->407
<div class="408
bg-image409
ripple410
shadow-4-strong411
rounded-6412
mb-4413
overflow-hidden414
d-block415
" data-ripple-color="light">416
<img src="https://mdbootstrap.com/img/new/ecommerce/vertical/074.jpg" class="w-100" alt="" />417
<a href="#!">418
<div class="mask">419
<div class="420
d-flex421
justify-content-start422
align-items-end423
h-100424
p-3425
">426
<span class="badge badge-danger rounded-pill me-2">New</span>427
<span class="badge badge-success rounded-pill">Eco</span>428
</div>429
</div>430
<div class="hover-overlay">431
<div class="mask" style="background-color: hsla(0, 0%, 98.4%, 0.09)"></div>432
</div>433
</a>434
</div>435
436
<!-- Product content -->437
<a href="" class="px-3 text-reset d-block">438
<p class="fw-bold mb-2 cyber-font">Iphone 13 PRO</p>439
<p class="text-muted mb-2">Apple</p>440
<ul class="list-unstyled d-flex text-muted mb-2">441
<li><i class="fas fa-star cyber-text"></i></li>442
<li><i class="fas fa-star cyber-text"></i></li>443
<li><i class="fas fa-star cyber-text"></i></li>444
<li><i class="fas fa-star cyber-text"></i></li>445
<li><i class="fas fa-star cyber-text"></i></li>446
</ul>447
<h5 class="mb-2">448
<s class="text-muted me-2 small align-middle">$999</s><span449
class="h2 fw-bold cyber-text cyber-font">$799</span>450
</h5>451
</a>452
<!-- Product content -->453
</div>454
<!-- Product card -->455
</div>456
457
<div class="col-lg-4 col-6 mb-4 mb-lg-0">458
<!-- Product card -->459
<div>460
<!-- Product image -->461
<div class="462
bg-image463
ripple464
shadow-4-strong465
rounded-6466
mb-4467
overflow-hidden468
d-block469
" data-ripple-color="light">470
<img src="https://mdbootstrap.com/img/new/ecommerce/vertical/038.jpg" class="w-100" alt="" />471
<a href="#!">472
<div class="mask">473
<div class="474
d-flex475
justify-content-start476
align-items-end477
h-100478
p-3479
">480
<span class="badge badge-danger rounded-pill me-2">6 offers left</span></div>481
</div>482
<div class="hover-overlay">483
<div class="mask" style="background-color: hsla(0, 0%, 98.4%, 0.09)">484
</div>485
</div>486
</a>487
</div>488
489
<!-- Product content -->490
<a href="" class="px-3 text-reset d-block">491
<p class="fw-bold mb-2 cyber-font">Amazon Echo Plus</p>492
<p class="text-muted mb-2">Speakers</p>493
<ul class="list-unstyled d-flex text-muted mb-2">494
<li><i class="fas fa-star cyber-text"></i></li>495
<li><i class="fas fa-star cyber-text"></i></li>496
<li><i class="fas fa-star cyber-text"></i></li>497
<li><i class="fas fa-star cyber-text"></i></li>498
<li><i class="far fa-star cyber-text"></i></li>499
</ul>500
<h5 class="mb-2">501
<s class="text-muted me-2 small align-middle">$199</s><span502
class="h2 fw-bold cyber-text cyber-font">$99</span>503
</h5>504
</a>505
<!-- Product content -->506
</div>507
<!-- Product card -->508
</div>509
<div class="col-lg-4 col-6 mb-4 mb-xl-0">510
<!-- Product card -->511
<div>512
<!-- Product image -->513
<div class="514
bg-image515
ripple516
shadow-4-strong517
rounded-6518
mb-4519
overflow-hidden520
d-block521
" data-ripple-color="light">522
<img src="https://mdbootstrap.com/img/new/ecommerce/vertical/131.jpg" class="w-100" alt="" />523
<a href="#!">524
<div class="mask">525
<div class="526
d-flex527
justify-content-start528
align-items-end529
h-100530
p-3531
">532
<span class="badge badge-danger rounded-pill me-2">-50%</span>533
</div>534
</div>535
<div class="hover-overlay">536
<div class="mask" style="background-color: hsla(0, 0%, 98.4%, 0.09)"></div>537
</div>538
</a>539
</div>540
541
<!-- Product content -->542
<a href="" class="px-3 text-reset d-block">543
<p class="fw-bold mb-2">Nikon D750</p>544
<p class="text-muted mb-2">Camera</p>545
<ul class="list-unstyled d-flex text-muted mb-2">546
<li><i class="fas fa-star cyber-text"></i></li>547
<li><i class="fas fa-star cyber-text"></i></li>548
<li><i class="fas fa-star cyber-text"></i></li>549
<li><i class="fas fa-star cyber-text"></i></li>550
<li><i class="far fa-star cyber-text"></i></li>551
</ul>552
<h5 class="mb-2">553
<s class="text-muted me-2 small align-middle">$1999</s><span554
class="h2 fw-bold cyber-text cyber-font">$999</span>555
</h5>556
</a>557
<!-- Product content -->558
</div>559
<!-- Product card -->560
</div>561
</div>562
</section>563
<!-- Section: Design Block -->564
<hr />565
</div>566
567
568
569
<!-- Container for demo purpose -->570
571
572
573
<!-- Container for demo purpose -->574
<div class="container text-white mt-5 pt-5">575
576
<!--Section: Design Block-->577
<section class="text-center">578
<h3 class="mb-5 cyber-font">Our Clients about us</h3>579
580
<div class="row">581
<div class="col-md-12 col-lg-4 mb-4">582
<img class="rounded-circle shadow-1-strong mb-4"583
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(32).jpg" alt="avatar" style="width: 150px;" />584
<h5 class="mb-3">Anna Deynah</h5>585
<p class="font-weight-bold text-primary">UX Designer</p>586
<p>587
<i class="fas fa-quote-left pe-2"></i>588
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic589
tenetur quae quaerat ad velit ab hic tenetur.590
</p>591
<ul class="list-unstyled d-flex justify-content-center text-muted mb-0">592
<li><i class="fas fa-star fa-sm"></i></li>593
<li><i class="fas fa-star fa-sm"></i></li>594
<li><i class="fas fa-star fa-sm"></i></li>595
<li><i class="fas fa-star fa-sm"></i></li>596
<li><i class="fas fa-star fa-sm"></i></li>597
</ul>598
</div>599
<div class="col-md-6 col-lg-4 mb-4">600
<img class="rounded-circle shadow-1-strong mb-4"601
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(9).jpg" alt="avatar" style="width: 150px;" />602
<h5 class="mb-3">Jenny Doe</h5>603
<p class="font-weight-bold text-primary">Web Developer</p>604
<p>605
<i class="fas fa-quote-left pe-2"></i>606
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit607
laboriosam, nisi ut aliquid commodi.608
</p>609
<ul class="list-unstyled d-flex justify-content-center text-muted mb-0">610
<li><i class="fas fa-star fa-sm"></i></li>611
<li><i class="fas fa-star fa-sm"></i></li>612
<li><i class="fas fa-star fa-sm"></i></li>613
<li><i class="fas fa-star fa-sm"></i></li>614
<li><i class="fas fa-star-half-alt fa-sm"></i></li>615
</ul>616
</div>617
<div class="col-md-6 col-lg-4 mb-4">618
<img class="rounded-circle shadow-1-strong mb-4"619
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(2).jpg" alt="avatar" style="width: 150px;" />620
<h5 class="mb-3">Maria Kate</h5>621
<p class="font-weight-bold text-primary">Photographer</p>622
<p>623
<i class="fas fa-quote-left pe-2"></i>624
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium625
voluptatum deleniti atque corrupti.626
</p>627
<ul class="list-unstyled d-flex justify-content-center text-muted mb-0">628
<li><i class="fas fa-star fa-sm"></i></li>629
<li><i class="fas fa-star fa-sm"></i></li>630
<li><i class="fas fa-star fa-sm"></i></li>631
<li><i class="fas fa-star fa-sm"></i></li>632
<li><i class="far fa-star fa-sm"></i></li>633
</ul>634
</div>635
</div>636
<hr class="mt-5 mb-0" />637
638
</section>639
<!--Section: Design Block-->640
641
</div>642
<!-- Container for demo purpose -->643
644
<!--Main layout-->645
<main class="py-5">646
<div class="container pt-5 text-white">647
<!--Section: Content-->648
<section>649
<div class="row">650
<div class="col-md-6 gx-5 mb-4 d-lg-flex align-items-center">651
<div>652
<h4 class="cyber-font"><strong>Subscribe to stay up to date with best deals</strong></h4>653
<p class="text-muted">654
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis consequatur655
eligendi quisquam doloremque vero ex debitis veritatis placeat unde animi laborum656
sapiente illo possimus, commodi dignissimos obcaecati illum maiores corporis.657
</p>658
</div>659
</div>660
661
<div class="col-md-6 gx-5 mb-4">662
<form>663
<!-- Name input -->664
<div class="form-outline mb-4">665
<input type="text" id="form5Example1" class="form-control" />666
<label class="form-label text-white" for="form5Example1">Name</label>667
</div>668
669
<!-- Email input -->670
<div class="form-outline mb-4">671
<input type="email" id="form5Example2" class="form-control" />672
<label class="form-label text-white" for="form5Example2">Email address</label>673
</div>674
675
<!-- Submit button -->676
<button type="submit" class="btn cyber-btn btn-block mb-4">677
Subscribe678
</button>679
</form>680
</div>681
<hr class="mt-5" />682
</div>683
</section>684
<!--Section: Content-->685
</div>686
687
</main>688
<!--Main layout-->689
690
<!--Footer-->691
<footer class=" text-lg-start">692
693
694
<div class="text-center py-4 align-items-center">695
<p>Follow MDB on social media</p>696
<a href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" class="btn cyber-btn m-1" role="button"697
rel="nofollow" target="_blank">698
<i class="fab fa-youtube"></i>699
</a>700
<a href="https://www.facebook.com/mdbootstrap" class="btn cyber-btn m-1" role="button" rel="nofollow"701
target="_blank">702
<i class="fab fa-facebook-f"></i>703
</a>704
<a href="https://twitter.com/MDBootstrap" class="btn cyber-btn m-1" role="button" rel="nofollow"705
target="_blank">706
<i class="fab fa-twitter"></i>707
</a>708
<a href="https://github.com/mdbootstrap/mdb-ui-kit" class="btn cyber-btn m-1" role="button" rel="nofollow"709
target="_blank">710
<i class="fab fa-github"></i>711
</a>712
</div>713
714
<!-- Copyright -->715
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">716
© 2020 Copyright:717
<a class="text-white" href="https://mdbootstrap.com/">MDBootstrap.com</a>718
</div>719
<!-- Copyright -->720
</footer>721
<!--Footer-->722
723
</body>xxxxxxxxxx1
/* Default height for small devices */2
#intro {3
height: 600px;4
/* Margin to fix overlapping fixed navbar */5
margin-top: 58px;6
}7
8
@media (max-width: 991px) {9
#intro {10
/* Margin to fix overlapping fixed navbar */11
margin-top: 45px;12
}13
}14
15
body {16
background-color: hsl(219, 80%, 10%);17
}18
19
.cyber-font {20
font-family: 'Press Start 2P', cursive;21
22
}23
24
.cyber-btn {25
background-image: linear-gradient(310deg, hsl(43, 77%, 52%), hsl(47, 90%, 70%));26
color: white;27
}28
29
.cyber-text {30
background: -webkit-linear-gradient(310deg, hsl(43, 77%, 52%), hsl(47, 90%, 70%));31
-webkit-background-clip: text;32
-webkit-text-fill-color: transparent;33
}34
35
.cyber-border {36
border: 2px solid #E6B431 !important;37
}38
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {39
background-image: linear-gradient(310deg, hsl(43, 77%, 52%), hsl(47, 90%, 70%)) !important; 40
background-color: #E6B431 !important;41
}42
43
.custom-card{44
background: rgb(34,56,195);45
background: linear-gradient(0deg, rgba(34,56,195,1) 0%, rgba(100,35,143,1) 100%);46
}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