xxxxxxxxxx1
<!--Main Navigation-->2
<header class="mb-5 mb-lg-7">3
4
<!-- Navbar -->5
<nav style="z-index: 1; min-height: 58.59px;" class="navbar navbar-expand-lg navbar-dark bg-dark">6
<!-- Container wrapper -->7
<div class="container">8
<!-- Toggle button -->9
<button data-mdb-collapse-init class="navbar-toggler" type="button" data-mdb-target="#navbarSupportedContent"10
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">11
<i class="fas fa-bars"></i>12
</button>13
14
<!-- Collapsible wrapper -->15
<div class="collapse navbar-collapse" id="navbarSupportedContent">16
<!-- Navbar brand -->17
<a class="navbar-brand mt-2 mt-lg-0" href="#">18
<i class="fas fa-gem text-secondary"></i>19
</a>20
<!-- Left links -->21
<ul class="navbar-nav me-auto mb-2 mb-lg-0">22
<li class="nav-item">23
<a class="nav-link text-secondary fw-bold" href="#">About</a>24
</li>25
<li class="nav-item">26
<a class="nav-link text-secondary fw-bold" href="#">Projects</a>27
</li>28
<li class="nav-item">29
<a class="nav-link text-secondary fw-bold" href="#">Contact</a>30
</li>31
</ul>32
<!-- Left links -->33
</div>34
<!-- Collapsible wrapper -->35
36
<!-- Right elements -->37
<div class="d-flex align-items-center">38
<!-- Icon -->39
<a class="text-secondary me-3" href="https://www.youtube.com/c/Mdbootstrap/videos" rel="nofollow"40
target="_blank">41
<i class="fab fa-youtube"></i>42
</a>43
<!-- Icon -->44
<a class="text-secondary me-3" href="https://twitter.com/ascensus_mdb" rel="nofollow" target="_blank">45
<i class="fab fa-twitter"></i>46
</a>47
<!-- Icon -->48
<a class="text-secondary me-3" href="https://github.com/mdbootstrap/mdb-ui-kit" rel="nofollow"49
target="_blank">50
<i class="fab fa-github"></i>51
</a>52
53
</div>54
<!-- Right elements -->55
</div>56
<!-- Container wrapper -->57
</nav>58
<!-- Navbar -->59
60
<!-- Background image -->61
<div class="bg-image vh-100" style="62
margin-top: -58.59px;63
background-image: url('https://mdbcdn.b-cdn.net/img/new/fluid/city/018.jpg');">64
65
<!-- Mask -->66
<div class="mask" style="background-color: hsla(0, 0%, 0%, 0.6)">67
68
<!-- Container -->69
<div class="container d-flex justify-content-center align-items-center h-100">70
71
<!-- Call to action -->72
<div class="text-white text-center">73
<h1 class="mb-3">Whoah, what a view!</h1>74
<h5 class="mb-4">Learning web design is such an amazing thing</h5>75
<a class="btn btn-secondary btn-rounded btn-lg m-2" data-mdb-ripple-init data-ripple-color="primary"76
href="#" role="button">Learn with me<i class="fas fa-graduation-cap ms-2"></i></a>77
</div>78
79
</div>80
81
</div>82
83
</div>84
85
</header>86
<!--Main Navigation-->87
88
<!--Main layout-->89
<main>90
<div class="container">91
92
<!-- Section: Details -->93
<section class="mb-5 mb-lg-10">94
<div class="row gx-xl-5">95
96
<div class="col-lg-7 mb-5 mb-lg-0">97
<!-- Carousel wrapper -->98
<div id="carouselBasicExample" class="carousel slide carousel-fade" data-mdb-ride="carousel"99
data-mdb-carousel-init>100
<!-- Indicators -->101
<div class="carousel-indicators">102
<button type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide-to="0" class="active"103
aria-current="true" aria-label="Slide 1"></button>104
<button type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide-to="1"105
aria-label="Slide 2"></button>106
<button type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide-to="2"107
aria-label="Slide 3"></button>108
</div>109
110
<!-- Inner -->111
<div class="carousel-inner rounded-6 shadow-4-strong">112
<!-- Single item -->113
<div class="carousel-item active">114
<img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(15).webp" class="d-block w-100"115
alt="Sunset Over the City" />116
<div class="carousel-caption d-none d-md-block">117
<h5>First slide label</h5>118
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>119
</div>120
</div>121
122
<!-- Single item -->123
<div class="carousel-item">124
<img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(22).webp" class="d-block w-100"125
alt="Canyon at Nigh" />126
<div class="carousel-caption d-none d-md-block">127
<h5>Second slide label</h5>128
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>129
</div>130
</div>131
132
<!-- Single item -->133
<div class="carousel-item">134
<img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(23).webp" class="d-block w-100"135
alt="Cliff Above a Stormy Sea" />136
<div class="carousel-caption d-none d-md-block">137
<h5>Third slide label</h5>138
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>139
</div>140
</div>141
</div>142
<!-- Inner -->143
144
<!-- Controls -->145
<button class="carousel-control-prev" type="button" data-mdb-target="#carouselBasicExample"146
data-mdb-slide="prev">147
<span class="carousel-control-prev-icon" aria-hidden="true"></span>148
<span class="visually-hidden">Previous</span>149
</button>150
<button class="carousel-control-next" type="button" data-mdb-target="#carouselBasicExample"151
data-mdb-slide="next">152
<span class="carousel-control-next-icon" aria-hidden="true"></span>153
<span class="visually-hidden">Next</span>154
</button>155
</div>156
<!-- Carousel wrapper -->157
</div>158
159
<div class="col-lg-5 mb-5 mb-lg-0">160
161
<h3 class="fw-bold mb-4">Details</h3>162
163
<p>This beginner-friendly, example-based course will guide you through the essential knowledge of MDB164
ecosystem.</p>165
166
<p class="mb-2"><strong>What will you learn:</strong></p>167
168
<ul class="list-unstyled">169
<li><i class="fas fa-check text-success me-2"></i>Bootstrap</li>170
<li><i class="fas fa-check text-success me-2"></i>MDBootstrap</li>171
<li><i class="fas fa-check text-success me-2"></i>UI & UX design</li>172
<li><i class="fas fa-check text-success me-2"></i>Responsive web design</li>173
</ul>174
175
<a class="btn btn-link btn-rounded" href="#" role="button" data-mdb-ripple-color="primary">Learn more</a>176
177
</div>178
179
</div>180
</section>181
<!-- Section: Details -->182
183
<!-- Section: Pricing -->184
<section class="mb-5 mb-lg-10">185
186
<h3 class="fw-bold text-center mb-5">Pricing</h3>187
188
<div class="row gx-xl-5">189
<div class="col-lg-4 col-md-6 mb-4 mb-lg-0 order-2 order-lg-1">190
191
<div class="card h-100">192
<div class="card-header text-center pt-4">193
<p class="text-uppercase">194
<strong>Basic</strong>195
</p>196
197
<h3 class="mb-4">198
<strong>$ 129</strong>199
<small class="text-muted" style="font-size: 16px">/year</small>200
</h3>201
202
<button type="button" class="btn btn-secondary btn-rounded w-100 mb-3" data-mdb-ripple-init>203
Buy204
</button>205
206
</div>207
<div class="card-body">208
209
<ol class="list-unstyled mb-0">210
<li class="mb-3">211
<i class="fas fa-check text-success me-3"></i>Unlimited212
updates213
</li>214
<li class="mb-3">215
<i class="fas fa-check text-success me-3"></i>Git repository216
</li>217
<li class="mb-3">218
<i class="fas fa-check text-success me-3"></i>npm219
installation220
</li>221
</ol>222
223
</div>224
</div>225
226
</div>227
228
<div class="col-lg-4 col-md-12 mb-4 mb-lg-0 order-1 order-lg-2">229
230
<div class="card h-100">231
<div class="card-header text-center pt-4">232
<p class="text-uppercase">233
<strong>Advanced</strong>234
</p>235
236
<h3 class="mb-4">237
<strong>$ 299</strong>238
<small class="text-muted" style="font-size: 16px">/year</small>239
</h3>240
241
<button type="button" class="btn btn-primary btn-rounded w-100 mb-3" data-mdb-ripple-init>242
Buy243
</button>244
</div>245
<div class="card-body">246
<ol class="list-unstyled mb-0">247
<li class="mb-3">248
<i class="fas fa-check text-success me-3"></i>Unlimited249
updates250
</li>251
<li class="mb-3">252
<i class="fas fa-check text-success me-3"></i>Git repository253
</li>254
<li class="mb-3">255
<i class="fas fa-check text-success me-3"></i>npm256
installation257
</li>258
<li class="mb-3">259
<i class="fas fa-check text-success me-3"></i>Code examples260
</li>261
<li class="mb-3">262
<i class="fas fa-check text-success me-3"></i>Premium263
snippets264
</li>265
</ol>266
</div>267
</div>268
269
</div>270
271
<div class="col-lg-4 col-md-6 mb-4 mb-lg-0 order-3 order-lg-3">272
273
<div class="card h-100">274
<div class="card-header text-center pt-4">275
<p class="text-uppercase">276
<strong>Enterprise</strong>277
</p>278
<h3 class="mb-4">279
<strong>$ 499</strong>280
<small class="text-muted" style="font-size: 16px">/year</small>281
</h3>282
283
<button type="button" class="btn btn-secondary btn-rounded w-100 mb-3" data-mdb-ripple-init>284
Buy285
</button>286
</div>287
<div class="card-body">288
<ol class="list-unstyled mb-0">289
<li class="mb-3">290
<i class="fas fa-check text-success me-3"></i>Unlimited291
updates292
</li>293
<li class="mb-3">294
<i class="fas fa-check text-success me-3"></i>Git repository295
</li>296
<li class="mb-3">297
<i class="fas fa-check text-success me-3"></i>npm298
installation299
</li>300
<li class="mb-3">301
<i class="fas fa-check text-success me-3"></i>Code examples302
</li>303
<li class="mb-3">304
<i class="fas fa-check text-success me-3"></i>Premium305
snippets306
</li>307
<li class="mb-3">308
<i class="fas fa-check text-success me-3"></i>Premium309
support310
</li>311
<li class="mb-3">312
<i class="fas fa-check text-success me-3"></i>Drag&Drop313
builder314
</li>315
</ol>316
</div>317
</div>318
319
</div>320
</div>321
322
</section>323
<!-- Section: Pricing -->324
325
<!-- Section: Contact -->326
<section class="mb-5 mb-lg-10">327
328
<h3 class="fw-bold text-center mb-5">Contact us</h3>329
330
<div class="row gx-xl-5">331
332
<div class="col-lg-5 mb-4 mb-lg-0">333
334
<form>335
<!-- Name input -->336
<div class="form-outline mb-4" data-mdb-input-init>337
<input type="text" id="form4Example1" class="form-control" />338
<label class="form-label" for="form4Example1">Name</label>339
</div>340
341
<!-- Email input -->342
<div class="form-outline mb-4" data-mdb-input-init>343
<input type="email" id="form4Example2" class="form-control" />344
<label class="form-label" for="form4Example2">Email address</label>345
</div>346
347
<!-- Message input -->348
<div class="form-outline mb-4" data-mdb-input-init>349
<textarea class="form-control" id="form4Example3" rows="4"></textarea>350
<label class="form-label" for="form4Example3">Message</label>351
</div>352
353
<!-- Checkbox -->354
<div class="form-check d-flex justify-content-center mb-4">355
<input class="form-check-input me-2" type="checkbox" value="" id="form4Example4" checked />356
<label class="form-check-label" for="form4Example4">357
Send me a copy of this message358
</label>359
</div>360
361
<!-- Submit button -->362
<button type="submit" class="btn btn-primary btn-block mb-4" data-mdb-ripple-init>Send</button>363
</form>364
365
</div>366
367
<div class="col-lg-7 mb-4 mb-lg-0">368
369
</div>370
371
</div>372
373
</section>374
<!-- Section: Contact -->375
376
</div>377
</main>378
<!--Main layout-->379
380
<!--Footer-->381
<footer>382
383
</footer>384
<!--Footer-->1
1
1
1
Console errors: 0