xxxxxxxxxx1
<!--Main Navigation-->2
<header class="mb-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
93
<!-- Section: Details -->94
<section class="mb-10">95
<div class="row">96
97
<div class="col-lg-7">98
<!-- Carousel wrapper -->99
<div id="carouselBasicExample" class="carousel slide carousel-fade" data-mdb-ride="carousel"100
data-mdb-carousel-init>101
<!-- Indicators -->102
<div class="carousel-indicators">103
<button type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide-to="0" class="active"104
aria-current="true" aria-label="Slide 1"></button>105
<button type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide-to="1"106
aria-label="Slide 2"></button>107
<button type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide-to="2"108
aria-label="Slide 3"></button>109
</div>110
111
<!-- Inner -->112
<div class="carousel-inner rounded-6 shadow-4-strong">113
<!-- Single item -->114
<div class="carousel-item active">115
<img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(15).webp" class="d-block w-100"116
alt="Sunset Over the City" />117
<div class="carousel-caption d-none d-md-block">118
<h5>First slide label</h5>119
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>120
</div>121
</div>122
123
<!-- Single item -->124
<div class="carousel-item">125
<img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(22).webp" class="d-block w-100"126
alt="Canyon at Nigh" />127
<div class="carousel-caption d-none d-md-block">128
<h5>Second slide label</h5>129
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>130
</div>131
</div>132
133
<!-- Single item -->134
<div class="carousel-item">135
<img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(23).webp" class="d-block w-100"136
alt="Cliff Above a Stormy Sea" />137
<div class="carousel-caption d-none d-md-block">138
<h5>Third slide label</h5>139
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>140
</div>141
</div>142
</div>143
<!-- Inner -->144
145
<!-- Controls -->146
<button class="carousel-control-prev" type="button" data-mdb-target="#carouselBasicExample"147
data-mdb-slide="prev">148
<span class="carousel-control-prev-icon" aria-hidden="true"></span>149
<span class="visually-hidden">Previous</span>150
</button>151
<button class="carousel-control-next" type="button" data-mdb-target="#carouselBasicExample"152
data-mdb-slide="next">153
<span class="carousel-control-next-icon" aria-hidden="true"></span>154
<span class="visually-hidden">Next</span>155
</button>156
</div>157
<!-- Carousel wrapper -->158
</div>159
160
<div class="col-lg-5">161
162
<h3 class="fw-bold mb-4">Details</h3>163
164
<p>This beginner-friendly, example-based course will guide you through the essential knowledge of MDB165
ecosystem.</p>166
167
<p class="mb-2"><strong>What will you learn:</strong></p>168
169
<ul class="list-unstyled">170
<li><i class="fas fa-check text-success me-2"></i>Bootstrap</li>171
<li><i class="fas fa-check text-success me-2"></i>MDBootstrap</li>172
<li><i class="fas fa-check text-success me-2"></i>UI & UX design</li>173
<li><i class="fas fa-check text-success me-2"></i>Responsive web design</li>174
</ul>175
176
<a class="btn btn-link btn-rounded" href="#" role="button" data-mdb-ripple-color="primary">Learn more</a>177
178
</div>179
180
</div>181
</section>182
<!-- Section: Details -->183
184
185
</div>186
</main>187
<!--Main layout-->188
189
<!--Footer-->190
<footer>191
192
</footer>193
<!--Footer-->1
1
1
1
Console errors: 0