xxxxxxxxxx1
<header class="mb-6">2
<!-- Intro settings -->3
<style>4
/* Default height for small devices */5
#intro-example {6
height: 400px;7
}8
9
/* Height for devices larger than 992px */10
@media (min-width: 992px) {11
#intro-example {12
height: 600px;13
}14
}15
.card .mask {16
z-index: 10;17
}18
</style>19
20
<!-- Navbar -->21
<nav class="navbar navbar-expand-lg navbar-light bg-white">22
<div class="container-fluid">23
<button24
class="navbar-toggler"25
type="button"26
data-mdb-toggle="collapse"27
data-mdb-target="#navbarExample01"28
aria-controls="navbarExample01"29
aria-expanded="false"30
aria-label="Toggle navigation"31
>32
<i class="fas fa-bars"></i>33
</button>34
<div class="collapse navbar-collapse" id="navbarExample01">35
<ul class="navbar-nav me-auto mb-2 mb-lg-0">36
<li class="nav-item active">37
<a class="nav-link" aria-current="page" href="#">Home</a>38
</li>39
<li class="nav-item">40
<a class="nav-link" href="#">Features</a>41
</li>42
<li class="nav-item">43
<a class="nav-link" href="#">Pricing</a>44
</li>45
<li class="nav-item">46
<a class="nav-link" href="#">About</a>47
</li>48
</ul>49
</div>50
</div>51
</nav>52
<!-- Navbar -->53
54
<!-- Background image -->55
<div56
id="intro-example"57
class="p-5 text-center bg-image position-relative"58
>59
<video60
class="position-absolute"61
style="min-width: 100%; min-height: 100%; left: 0; top: 0"62
playsinline63
autoplay64
muted65
loop66
>67
<source68
class="h-100"69
src="https://mdbootstrap.com/img/video/Lines.mp4"70
type="video/mp4"71
/>72
</video>73
<div class="mask" style="background-color: rgba(0, 0, 0, 0.7)">74
<div class="d-flex justify-content-center align-items-center h-100">75
<div class="text-white">76
<h1 class="mb-3">Learn Bootstrap 5 with MDB</h1>77
<h5 class="mb-4">Best & free guide of responsive web design</h5>78
<a79
class="btn btn-outline-light btn-lg m-2"80
href="https://www.youtube.com/watch?v=c9B4TPnak1A"81
role="button"82
rel="nofollow"83
target="_blank"84
>Start tutorial</a85
>86
<a87
class="btn btn-outline-light btn-lg m-2"88
href="https://mdbootstrap.com/docs/standard/"89
target="_blank"90
role="button"91
>Download MDB UI KIT</a92
>93
</div>94
</div>95
</div>96
97
<svg98
class="position-absolute"99
xmlns="http://www.w3.org/2000/svg"100
viewBox="0 0 1440 320"101
style="left: 0; bottom: 0"102
>103
<path104
fill="#fff"105
d="M 0 297.33 L 1440 183.98 L 1440 320 L 0 320 Z"106
></path>107
</svg>108
</div>109
110
<!-- Background image -->111
</header>112
113
<main>114
<div class="container">115
<div class="row gx-lg-5">116
<div class="col-lg-4 col-md-12 mb-4 mb-lg-0">117
<div class="card">118
<div119
class="bg-image hover-overlay ripple"120
data-ripple-color="light"121
>122
<img123
src="https://mdbootstrap.com/img/new/standard/nature/111.jpg"124
class="img-fluid"125
/>126
<a href="#!">127
<div128
class="mask"129
style="background-color: rgba(251, 251, 251, 0.15)"130
></div>131
</a>132
133
<svg134
class="position-absolute"135
xmlns="http://www.w3.org/2000/svg"136
viewBox="0 0 1440 320"137
style="left: 0; bottom: 0"138
>139
<path140
fill="#fff"141
d="M0,288L48,272C96,256,192,224,288,197.3C384,171,480,149,576,165.3C672,181,768,235,864,250.7C960,267,1056,245,1152,250.7C1248,256,1344,288,1392,304L1440,320L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"142
></path>143
</svg>144
</div>145
<div class="card-body">146
<h5 class="card-title">Card title</h5>147
<p class="card-text">148
Some quick example text to build on the card title and make up149
the bulk of the card's content.150
</p>151
<a href="#!" class="btn btn-primary">Button</a>152
</div>153
</div>154
</div>155
156
<div class="col-lg-4 mb-4 mb-lg-0">157
<div class="card">158
<div159
class="bg-image hover-overlay ripple"160
data-ripple-color="light"161
>162
<img163
src="https://mdbootstrap.com/img/new/standard/nature/114.jpg"164
class="img-fluid"165
/>166
<a href="#!">167
<div168
class="mask"169
style="background-color: rgba(251, 251, 251, 0.15)"170
></div>171
</a>172
173
<svg174
class="position-absolute"175
xmlns="http://www.w3.org/2000/svg"176
viewBox="0 0 1440 320"177
style="left: 0; bottom: 0"178
>179
<path180
fill="#fff"181
d="M0,96L48,128C96,160,192,224,288,240C384,256,480,224,576,213.3C672,203,768,213,864,202.7C960,192,1056,160,1152,128C1248,96,1344,64,1392,48L1440,32L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"182
></path>183
</svg>184
</div>185
<div class="card-body">186
<h5 class="card-title">Card title</h5>187
<p class="card-text">188
Some quick example text to build on the card title and make up189
the bulk of the card's content.190
</p>191
<a href="#!" class="btn btn-primary">Button</a>192
</div>193
</div>194
</div>195
196
<div class="col-lg-4 mb-4 mb-lg-0">197
<div class="card">198
<div199
class="bg-image hover-overlay ripple"200
data-ripple-color="light"201
>202
<img203
src="https://mdbootstrap.com/img/new/standard/nature/117.jpg"204
class="img-fluid"205
/>206
<a href="#!">207
<div208
class="mask"209
style="background-color: rgba(251, 251, 251, 0.15)"210
></div>211
</a>212
213
<svg214
class="position-absolute"215
xmlns="http://www.w3.org/2000/svg"216
viewBox="0 0 1440 320"217
style="left: 0; bottom: 0"218
>219
<path220
fill="#fff"221
d="M0,288L48,256C96,224,192,160,288,160C384,160,480,224,576,213.3C672,203,768,117,864,85.3C960,53,1056,75,1152,69.3C1248,64,1344,32,1392,16L1440,0L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"222
></path>223
</svg>224
</div>225
<div class="card-body">226
<h5 class="card-title">Card title</h5>227
<p class="card-text">228
Some quick example text to build on the card title and make up229
the bulk of the card's content.230
</p>231
<a href="#!" class="btn btn-primary">Button</a>232
</div>233
</div>234
</div>235
</div>236
</div>237
</main>1
1
1
1
Console errors: 0