xxxxxxxxxx1
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet"> 2
<body>3
<!--Main Navigation-->4
<header>5
6
<!-- Navbar -->7
<nav class="navbar navbar-expand-lg navbar-dark d-none d-lg-block" style="z-index: 2000;">8
<div class="container-fluid">9
<!-- Navbar brand -->10
<a class="navbar-brand nav-link" target="_blank" href="https://mdbootstrap.com/docs/standard/">11
<strong>MDB</strong>12
</a>13
<button class="navbar-toggler" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarExample01"14
aria-controls="navbarExample01" aria-expanded="false" aria-label="Toggle navigation">15
<i class="fas fa-bars"></i>16
</button>17
<div class="collapse navbar-collapse" id="navbarExample01">18
<ul class="navbar-nav me-auto mb-2 mb-lg-0">19
<li class="nav-item active">20
<a class="nav-link" aria-current="page" href="#intro">Home</a>21
</li>22
<li class="nav-item">23
<a class="nav-link" href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow"24
target="_blank">Learn Bootstrap 5</a>25
</li>26
<li class="nav-item">27
<a class="nav-link" href="https://mdbootstrap.com/docs/standard/" target="_blank">Download MDB UI28
KIT</a>29
</li>30
31
</ul>32
33
<ul class="navbar-nav d-flex flex-row">34
<!-- Icons -->35
<li class="nav-item">36
<a class="nav-link cyber-text fw-bold" href="https://mdbootstrap.com/bf/cyber-monday"37
target="_blank">MDB PRO Sale</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="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="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="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="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="bg-image shadow-2-strong">68
<div class="mask" style="background-color: rgba(0, 0, 0, 0.61);">69
<div class="container d-flex align-items-center justify-content-center text-center h-100">70
<div class="text-white">71
<h1 class="display-1 fw-bold mb-0 text-uppercase cyber-font">Cyber Monday</h1>72
<h2 class="display-5 mb-4 fw-normal cyber-font">SALE</h2>73
<a class="btn cyber-btn btn-lg m-2" href="#offers" role="button">SEE OFFERS</a>74
</div>75
</div>76
</div>77
</div>78
<!-- Background image -->79
</header>80
<!--Main Navigation-->81
82
<!--Main layout-->83
<main class="mt-5">84
<div class="container">85
<!--Section: Content-->86
<section>87
<div class="row">88
<div class="col-md-6 gx-5 mb-4">89
<div class="bg-image hover-overlay ripple text-center rounded-6" data-mdb-ripple-color="light">90
<img src="https://mdbootstrap.com/img/new/ecommerce/horizontal/064.jpg"91
class="w-100 text-center img-fluid" />92
<a href="https://mdbootstrap.com/bf/waiting-list/">93
<div class="mask" style="background-color: rgba(10, 10, 10, 0.137);"></div>94
</a>95
</div>96
</div>97
98
<div id="offers" class="col-md-6 gx-5 mb-4 mt-6">99
<h4 class="display-6 text-white fw-bold pb-3 cyber-font"><strong>TOP CYBER MONDAY DEAL</strong></h4>100
<p class="text-muted pb-4">101
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis consequatur102
eligendi quisquam doloremque vero ex debitis veritatis placeat unde animi laborum103
sapiente illo possimus, commodi dignissimos obcaecati illum maiores corporis.104
</p>105
<p class="display-6 fw-bold cyber-text mb-0 mt-5 cyber-font">SAVE 50%</p>106
107
<p class="my-1"><del class="text-muted">$199</del> <span class="ms-1 fw-bold cyber-text"108
style="font-size: 35px;">$99</span></p>109
110
<a class="btn cyber-btn fw-bold mt-3" href="#offers" role="button">BUY NOW</a>111
</div>112
</div>113
</section>114
<!--Section: Content-->115
116
<hr class="my-5" />117
118
<!--Section: Content-->119
<section class="text-center">120
<h4 class="mb-5 text-white cyber-font"><strong>LIMITED OFFERS</strong></h4>121
122
<!-- Container for demo purpose -->123
124
<div class="container ">125
126
<!--Section: Design Block-->127
<section class="text-center">128
129
<h6 class="mb-5"><i class="fas fa-square me-2 cyber-text"></i><span130
class="text-uppercase text-muted">Lorem131
ipsum dolor sit amet</span></h6>132
133
<div class="row">134
<div class="col-md-6 col-lg-4 mb-4 mb-md-0 pb-2 order-md-2 order-lg-1">135
<div class="card">136
<div class="card-body p-4 shadow-2-strong">137
<h5 class="card-title pb-2 mt-2 cyber-font text-white">Basic</h5>138
<p class="price mt-4 mb-3 text-primary"><span class="display-4">10</span></p>139
<ul class="list-group list-group-flush mb-4">140
<li class="list-group-item bg-transparent text-white"><strong>100</strong> attractions</li>141
<li class="list-group-item bg-transparent text-white"><strong>150</strong> lorem ipsum</li>142
<li class="list-group-item bg-transparent text-white"><strong>200</strong> lorem ipsum</li>143
</ul>144
<button type="button" class="btn btn-primary btn-lg mb-2 cyber-btn">Buy now</button>145
</div>146
</div>147
</div>148
<div class="col-md-12 col-lg-4 mb-4 mb-lg-0 pb-2 order-md-1 order-lg-2">149
<div class="card shadow-2-strong bg-image text-white"150
style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(1).jpg');">151
<div class="card-body p-4" style="background-color: rgba(62,69,81,.3);">152
<h5 class="card-title cyber-font pb-2 mt-2">Pro</h5>153
<p class="price mt-4 mb-3"><span class="display-4">20</span></p>154
<ul class="list-group list-group-flush mb-4">155
<li class="list-group-item bg-transparent text-white"><strong>200</strong> attractions</li>156
<li class="list-group-item bg-transparent text-white"><strong>250</strong> lorem ipsum</li>157
<li class="list-group-item bg-transparent text-white"><strong>300</strong> lorem ipsum</li>158
</ul>159
<button type="button" class="btn btn-outline-white cyber-outline-btn btn-lg mb-2">Buy now</button>160
</div>161
</div>162
</div>163
<div class="col-md-6 col-lg-4 pb-2 order-md-3 order-lg-3">164
<div class="card">165
<div class="card-body p-4 shadow-2-strong">166
<h5 class="card-title pb-2 mt-2 cyber-font text-white">Enterprise</h5>167
<p class="price mt-4 mb-3 text-primary"><span class="display-4">30</span></p>168
<ul class="list-group list-group-flush mb-4">169
<li class="list-group-item bg-transparent text-white"><strong>300</strong> attractions</li>170
<li class="list-group-item bg-transparent text-white"><strong>350</strong> lorem ipsum</li>171
<li class="list-group-item bg-transparent text-white"><strong>400</strong> lorem ipsum</li>172
</ul>173
<button type="button" class="btn btn-primary btn-lg mb-2 cyber-btn">Buy now</button>174
</div>175
</div>176
</div>177
</div>178
179
</section>180
<!--Section: Design Block-->181
182
</div>183
<!-- Container for demo purpose -->184
185
186
</section>187
188
189
<!--Section: Content-->190
191
<hr class="my-5" />192
193
194
195
<!-- Container for demo purpose -->196
<div class="container my-5 py-5 shadow-5">197
198
<!--Section: Design Block-->199
<section class="text-center text-white">200
<h3 class="mb-5 text-white cyber-font">Our Clients about us</h3>201
202
<div class="row">203
<div class="col-md-12 col-lg-4 mb-4">204
<img class="rounded-circle shadow-1-strong mb-4"205
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(29).jpg" alt="avatar" style="width: 150px;" />206
<h5 class="mb-3">Anna Deynah</h5>207
<p class="font-weight-bold cyber-text">UX Designer</p>208
<p>209
<i class="fas fa-quote-left pe-2"></i>210
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic211
tenetur quae quaerat ad velit ab hic tenetur.212
</p>213
<ul class="list-unstyled d-flex justify-content-center text-muted mb-0">214
<li><i class="fas fa-star fa-sm"></i></li>215
<li><i class="fas fa-star fa-sm"></i></li>216
<li><i class="fas fa-star fa-sm"></i></li>217
<li><i class="fas fa-star fa-sm"></i></li>218
<li><i class="fas fa-star fa-sm"></i></li>219
</ul>220
</div>221
<div class="col-md-6 col-lg-4 mb-4">222
<img class="rounded-circle shadow-1-strong mb-4"223
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(2).jpg" alt="avatar" style="width: 150px;" />224
<h5 class="mb-3">Jenny Doe</h5>225
<p class="font-weight-bold cyber-text">Web Developer</p>226
<p>227
<i class="fas fa-quote-left pe-2"></i>228
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit229
laboriosam, nisi ut aliquid commodi.230
</p>231
<ul class="list-unstyled d-flex justify-content-center text-muted mb-0">232
<li><i class="fas fa-star fa-sm"></i></li>233
<li><i class="fas fa-star fa-sm"></i></li>234
<li><i class="fas fa-star fa-sm"></i></li>235
<li><i class="fas fa-star fa-sm"></i></li>236
<li><i class="fas fa-star-half-alt fa-sm"></i></li>237
</ul>238
</div>239
<div class="col-md-6 col-lg-4 mb-4">240
<img class="rounded-circle shadow-1-strong mb-4"241
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg" alt="avatar" style="width: 150px;" />242
<h5 class="mb-3">Maria Kate</h5>243
<p class="font-weight-bold cyber-text">Photographer</p>244
<p>245
<i class="fas fa-quote-left pe-2"></i>246
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium247
voluptatum deleniti atque corrupti.248
</p>249
<ul class="list-unstyled d-flex justify-content-center text-muted mb-0">250
<li><i class="fas fa-star fa-sm"></i></li>251
<li><i class="fas fa-star fa-sm"></i></li>252
<li><i class="fas fa-star fa-sm"></i></li>253
<li><i class="fas fa-star fa-sm"></i></li>254
<li><i class="far fa-star fa-sm"></i></li>255
</ul>256
</div>257
</div>258
</section>259
<!--Section: Design Block-->260
261
</div>262
<!-- Container for demo purpose -->263
264
265
<hr class="my-5" />266
267
268
269
270
<!-- Container for demo purpose -->271
<div class="container my-0 py-0">272
273
<!--Section: Design Block-->274
<section class="text-center text-white">275
276
<h3 class="mb-5 cyber-font">Get in touch</h3>277
278
<p class="text-center mb-5 mx-lg-5">279
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum laborum animi doloremque280
nam dicta veniam dolor ea nostrum excepturi laboriosam molestiae, expedita odit id! Sunt281
quia cumque consequatur perferendis hic.282
</p>283
284
<form>285
<div class="row">286
<div class="col-lg-5">287
<p class="text-center mt-lg-4 mb-4"><strong>Make an appointment to get the best offer</strong></p>288
<div class="form-outline mb-4">289
<input type="text" id="form3Example1" class="form-control" />290
<label class="form-label text-muted" for="form3Example1">Name</label>291
</div>292
<div class="form-outline mb-4">293
<input type="email" id="form3Example2" class="form-control" />294
<label class="form-label text-muted" for="form3Example2">Email</label>295
</div>296
<div class="form-outline mb-4">297
<textarea class="form-control" id="form4Example3" rows="4"></textarea>298
<label class="form-label text-muted" for="form4Example3">Message</label>299
</div>300
<div class="text-center pb-3">301
<button type="submit" class="btn cyber-btn btn-block mb-5 mb-md-0">302
Send303
</button>304
</div>305
</div>306
<div class="col-lg-7" style="margin-top: -7rem;">307
<img src="https://mdbootstrap.com/img/illustrations/graphics(1).png" class="img-fluid"308
alt="smaple image">309
</div>310
</div>311
</form>312
313
</section>314
<!--Section: Design Block-->315
316
</div>317
<!-- Container for demo purpose -->318
</div>319
</main>320
<!--Main layout-->321
322
<!--Footer-->323
<footer class="text-lg-start">324
325
<hr class="m-0" />326
327
<div class="text-center py-4 align-items-center text-white">328
<p>Follow MDB on social media</p>329
<a href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" class="btn cyber-btn m-1" role="button"330
rel="nofollow" target="_blank">331
<i class="fab fa-youtube"></i>332
</a>333
<a href="https://www.facebook.com/mdbootstrap" class="btn cyber-btn m-1" role="button" rel="nofollow"334
target="_blank">335
<i class="fab fa-facebook-f"></i>336
</a>337
<a href="https://twitter.com/MDBootstrap" class="btn cyber-btn m-1" role="button" rel="nofollow"338
target="_blank">339
<i class="fab fa-twitter"></i>340
</a>341
<a href="https://github.com/mdbootstrap/mdb-ui-kit" class="btn cyber-btn m-1" role="button" rel="nofollow"342
target="_blank">343
<i class="fab fa-github"></i>344
</a>345
</div>346
347
<!-- Copyright -->348
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">349
© 2020 Copyright:350
<a class="text-white" href="https://mdbootstrap.com/">MDBootstrap.com</a>351
</div>352
<!-- Copyright -->353
</footer>354
<!--Footer-->355
</body>xxxxxxxxxx1
#intro {2
background-image: url("https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80");3
height: 100vh;4
}5
6
/* Height for devices larger than 576px */7
@media (min-width: 992px) {8
#intro {9
margin-top: -58.59px;10
}11
}12
13
body {14
background-color: hsl(219, 80%, 10%);15
}16
17
.card-body {18
background-color: hsl(219, 80%, 10%);19
;20
}21
22
.navbar .nav-link {23
color: #fff !important;24
}25
26
.cyber-font {27
font-family: 'Press Start 2P', cursive;28
}29
30
.cyber-btn {31
background-image: linear-gradient(310deg, hsl(43, 77%, 52%), hsl(47, 90%, 70%));32
color: white;33
}34
35
.cyber-text {36
background: -webkit-linear-gradient(310deg, hsl(43, 77%, 52%), hsl(47, 90%, 70%));37
-webkit-background-clip: text;38
-webkit-text-fill-color: transparent;39
}40
.cyber-outline-btn{41
border-color:hsl(43, 86%, 46%);42
color:hsl(43, 86%, 46%) ;43
}44
45
46
47
.price {48
position: relative;49
background: -webkit-linear-gradient(310deg, hsl(43, 77%, 52%), hsl(47, 90%, 70%));50
-webkit-background-clip: text;51
-webkit-text-fill-color: transparent;52
}53
54
.price:before {55
content: "$";56
font-size: 1.33rem;57
position: absolute;58
margin-left: -.7rem;59
background: -webkit-linear-gradient(310deg, hsl(43, 77%, 52%), hsl(47, 90%, 70%));60
-webkit-background-clip: text;61
-webkit-text-fill-color: transparent;62
}63
64
.price:after {65
content: "/mo";66
font-size: 1.33rem;67
position: absolute;68
bottom: 0;69
background: -webkit-linear-gradient(310deg, hsl(43, 77%, 52%), hsl(47, 90%, 70%));70
-webkit-background-clip: text;71
-webkit-text-fill-color: transparent;72
}73
74
1
1
Console errors: 0