xxxxxxxxxx
1
<!--Main Navigation-->
2
<header>
3
<!-- Intro settings -->
4
<style>
5
#intro {
6
/* Margin to fix overlapping fixed navbar */
7
margin-top: 58px;
8
}
9
@media (max-width: 991px) {
10
#intro {
11
/* Margin to fix overlapping fixed navbar */
12
margin-top: 45px;
13
}
14
}
15
</style>
16
17
<!-- Navbar -->
18
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top">
19
<div class="container-fluid">
20
<!-- Navbar brand -->
21
<a class="navbar-brand" target="_blank" href="https://mdbootstrap.com/docs/standard/">
22
<img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" height="16" alt="" loading="lazy"
23
style="margin-top: -3px;" />
24
</a>
25
<button class="navbar-toggler" type="button" data-mdb-collapse-init data-mdb-target="#navbarExample01"
26
aria-controls="navbarExample01" aria-expanded="false" aria-label="Toggle navigation">
27
<i class="fas fa-bars"></i>
28
</button>
29
<div class="collapse navbar-collapse" id="navbarExample01">
30
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
31
<li class="nav-item active">
32
<a class="nav-link" aria-current="page" href="#intro">Home</a>
33
</li>
34
<li class="nav-item">
35
<a class="nav-link" href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow"
36
target="_blank">Learn Bootstrap 5</a>
37
</li>
38
<li class="nav-item">
39
<a class="nav-link" href="https://mdbootstrap.com/docs/standard/" target="_blank">Download MDB UI KIT</a>
40
</li>
41
</ul>
42
43
<ul class="navbar-nav d-flex flex-row">
44
<!-- Icons -->
45
<li class="nav-item me-3 me-lg-0">
46
<a class="nav-link" href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow"
47
target="_blank">
48
<i class="fab fa-youtube"></i>
49
</a>
50
</li>
51
<li class="nav-item me-3 me-lg-0">
52
<a class="nav-link" href="https://www.facebook.com/mdbootstrap" rel="nofollow" target="_blank">
53
<i class="fab fa-facebook-f"></i>
54
</a>
55
</li>
56
<li class="nav-item me-3 me-lg-0">
57
<a class="nav-link" href="https://twitter.com/MDBootstrap" rel="nofollow" target="_blank">
58
<i class="fab fa-twitter"></i>
59
</a>
60
</li>
61
<li class="nav-item me-3 me-lg-0">
62
<a class="nav-link" href="https://github.com/mdbootstrap/mdb-ui-kit" rel="nofollow" target="_blank">
63
<i class="fab fa-github"></i>
64
</a>
65
</li>
66
</ul>
67
</div>
68
</div>
69
</nav>
70
<!-- Navbar -->
71
72
<!-- Jumbotron -->
73
<div id="intro" class="p-5 text-center bg-light">
74
<h1 class="mb-3 h2">Learn Bootstrap 5 with MDB</h1>
75
<p class="mb-3">Best & free guide of responsive web design</p>
76
<a class="btn btn-primary m-2" href="https://www.youtube.com/watch?v=c9B4TPnak1A" role="button" rel="nofollow" data-mdb-ripple-init
77
target="_blank">Start tutorial</a>
78
<a class="btn btn-primary m-2" href="https://mdbootstrap.com/docs/standard/" target="_blank" data-mdb-ripple-init
79
role="button">Download MDB UI KIT</a>
80
</div>
81
<!-- Jumbotron -->
82
</header>
83
<!--Main Navigation-->
84
85
<!--Main layout-->
86
<main class="my-5">
87
<div class="container">
88
<!--Grid row-->
89
<div class="row">
90
<!--Grid column-->
91
<div class="col-md-9 mb-4">
92
<!--Section: Content-->
93
<section>
94
<!-- Post -->
95
<div class="row">
96
<div class="col-md-4 mb-4">
97
<div class="bg-image hover-overlay shadow-1-strong rounded" data-mdb-ripple-init data-mdb-ripple-color="light">
98
<img src="https://mdbootstrap.com/img/new/standard/nature/184.jpg" class="img-fluid" />
99
<a href="#!">
100
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
101
</a>
102
</div>
103
</div>
104
105
<div class="col-md-8 mb-4">
106
<h5>Very long post title</h5>
107
<p>
108
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus ratione
109
necessitatibus itaque error alias repellendus nemo reiciendis aperiam quisquam
110
minus ipsam reprehenderit commodi ducimus, in dicta aliquam eveniet dignissimos
111
magni.
112
</p>
113
114
<button type="button" class="btn btn-primary" data-mdb-ripple-init>Read</button>
115
</div>
116
</div>
117
118
<!-- Post -->
119
<div class="row">
120
<div class="col-md-4 mb-4">
121
<div class="bg-image hover-overlay shadow-1-strong rounded" data-mdb-ripple-init data-mdb-ripple-color="light">
122
<img src="https://mdbootstrap.com/img/new/standard/nature/002.jpg" class="img-fluid" />
123
<a href="#!">
124
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
125
</a>
126
</div>
127
</div>
128
129
<div class="col-md-8 mb-4">
130
<h5>Very long post title</h5>
131
<p>
132
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus ratione
133
necessitatibus itaque error alias repellendus nemo reiciendis aperiam quisquam
134
minus ipsam reprehenderit commodi ducimus, in dicta aliquam eveniet dignissimos
135
magni.
136
</p>
137
138
<button type="button" class="btn btn-primary" data-mdb-ripple-init>Read</button>
139
</div>
140
</div>
141
142
<!-- Post -->
143
<div class="row">
144
<div class="col-md-4 mb-4">
145
<div class="bg-image hover-overlay shadow-1-strong rounded" data-mdb-ripple-init data-mdb-ripple-color="light">
146
<img src="https://mdbootstrap.com/img/new/standard/nature/023.jpg" class="img-fluid" />
147
<a href="#!">
148
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
149
</a>
150
</div>
151
</div>
152
153
<div class="col-md-8 mb-4">
154
<h5>Very long post title</h5>
155
<p>
156
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus ratione
157
necessitatibus itaque error alias repellendus nemo reiciendis aperiam quisquam
158
minus ipsam reprehenderit commodi ducimus, in dicta aliquam eveniet dignissimos
159
magni.
160
</p>
161
162
<button type="button" class="btn btn-primary" data-mdb-ripple-init>Read</button>
163
</div>
164
</div>
165
166
<!-- Post -->
167
<div class="row">
168
<div class="col-md-4 mb-4">
169
<div class="bg-image hover-overlay shadow-1-strong rounded" data-mdb-ripple-init data-mdb-ripple-color="light">
170
<img src="https://mdbootstrap.com/img/new/standard/nature/111.jpg" class="img-fluid" />
171
<a href="#!">
172
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
173
</a>
174
</div>
175
</div>
176
177
<div class="col-md-8 mb-4">
178
<h5>Very long post title</h5>
179
<p>
180
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus ratione
181
necessitatibus itaque error alias repellendus nemo reiciendis aperiam quisquam
182
minus ipsam reprehenderit commodi ducimus, in dicta aliquam eveniet dignissimos
183
magni.
184
</p>
185
186
<button type="button" class="btn btn-primary" data-mdb-ripple-init>Read</button>
187
</div>
188
</div>
189
</section>
190
<!--Section: Content-->
191
</div>
192
<!--Grid column-->
193
194
<!--Grid column-->
195
<div class="col-md-3 mb-4">
196
<!--Section: Sidebar-->
197
<section class="sticky-top" style="top: 80px;">
198
<!--Section: Ad-->
199
<section class="text-center border-bottom pb-4 mb-4">
200
<div class="bg-image hover-overlay mb-4" data-mdb-ripple-init>
201
<img
202
src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/about/assets/mdb5-about.webp"
203
class="img-fluid" />
204
<a href="https://mdbootstrap.com/docs/standard/" target="_blank">
205
<div class="mask" style="background-color: rgba(57, 192, 237, 0.2);"></div>
206
</a>
207
</div>
208
<h5>Material Design for Bootstrap 5</h5>
209
210
<p>
211
500+ components, free templates, 1-min installation, extensive tutorial, huge
212
community. MIT license - free for personal & commercial use
213
</p>
214
<a role="button" class="btn btn-primary" href="https://mdbootstrap.com/docs/standard/" data-mdb-ripple-init
215
target="_blank">Download for free<i class="fas fa-download ms-2"></i></a>
216
</section>
217
<!--Section: Ad-->
218
219
<!--Section: Video-->
220
<section class="text-center">
221
<h5 class="mb-4">Learn the newest Bootstrap 5</h5>
222
223
<div class="embed-responsive embed-responsive-16by9 shadow-4-strong">
224
<iframe class="embed-responsive-item rounded" src="https://www.youtube.com/embed/c9B4TPnak1A"
225
allowfullscreen></iframe>
226
</div>
227
</section>
228
<!--Section: Video-->
229
</section>
230
<!--Section: Sidebar-->
231
</div>
232
<!--Grid column-->
233
</div>
234
<!--Grid row-->
235
236
<!-- Pagination -->
237
<nav class="my-4" aria-label="...">
238
<ul class="pagination pagination-circle justify-content-center">
239
<li class="page-item">
240
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
241
</li>
242
<li class="page-item"><a class="page-link" href="#">1</a></li>
243
<li class="page-item active" aria-current="page">
244
<a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
245
</li>
246
<li class="page-item"><a class="page-link" href="#">3</a></li>
247
<li class="page-item">
248
<a class="page-link" href="#">Next</a>
249
</li>
250
</ul>
251
</nav>
252
</div>
253
</main>
254
<!--Main layout-->
255
256
<!--Footer-->
257
<footer class="bg-light text-lg-start">
258
<div class="py-4 text-center">
259
<a role="button" class="btn btn-primary btn-lg m-2" data-mdb-ripple-init
260
href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow" target="_blank">
261
Learn Bootstrap 5
262
</a>
263
<a role="button" class="btn btn-primary btn-lg m-2" data-mdb-ripple-init href="https://mdbootstrap.com/docs/standard/" target="_blank">
264
Download MDB UI KIT
265
</a>
266
</div>
267
268
<hr class="m-0" />
269
270
<div class="text-center py-4 align-items-center">
271
<p>Follow MDB on social media</p>
272
<a href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" class="btn btn-primary m-1" role="button" data-mdb-ripple-init
273
rel="nofollow" target="_blank">
274
<i class="fab fa-youtube"></i>
275
</a>
276
<a href="https://www.facebook.com/mdbootstrap" class="btn btn-primary m-1" role="button" rel="nofollow" data-mdb-ripple-init
277
target="_blank">
278
<i class="fab fa-facebook-f"></i>
279
</a>
280
<a href="https://twitter.com/MDBootstrap" class="btn btn-primary m-1" role="button" rel="nofollow" data-mdb-ripple-init
281
target="_blank">
282
<i class="fab fa-twitter"></i>
283
</a>
284
<a href="https://github.com/mdbootstrap/mdb-ui-kit" class="btn btn-primary m-1" role="button" rel="nofollow" data-mdb-ripple-init
285
target="_blank">
286
<i class="fab fa-github"></i>
287
</a>
288
</div>
289
290
<!-- Copyright -->
291
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
292
© 2020 Copyright:
293
<a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>
294
</div>
295
<!-- Copyright -->
296
</footer>
297
<!--Footer-->
1
1
1
1
Console errors: 0