xxxxxxxxxx1
<!--Main Navigation-->2
<header>3
4
<!--Navbar-->5
<nav class="navbar navbar-expand-lg navbar-dark indigo">6
7
<!-- Additional container -->8
<div class="container">9
10
<!-- Navbar brand -->11
<a class="navbar-brand" href="#">Navbar</a>12
13
<!-- Collapse button -->14
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"15
aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">16
<span class="navbar-toggler-icon"></span>17
</button>18
19
<!-- Collapsible content -->20
<div class="collapse navbar-collapse" id="basicExampleNav">21
22
<!-- Links -->23
<ul class="navbar-nav mr-auto">24
<li class="nav-item active">25
<a class="nav-link" href="#">Home26
<span class="sr-only">(current)</span>27
</a>28
</li>29
<li class="nav-item">30
<a class="nav-link" href="#">Features</a>31
</li>32
<li class="nav-item">33
<a class="nav-link" href="#">Pricing</a>34
</li>35
36
<!-- Dropdown -->37
<li class="nav-item dropdown">38
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"39
aria-expanded="false">Dropdown</a>40
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">41
<a class="dropdown-item" href="#">Action</a>42
<a class="dropdown-item" href="#">Another action</a>43
<a class="dropdown-item" href="#">Something else here</a>44
</div>45
</li>46
47
</ul>48
<!-- Links -->49
50
<form class="form-inline">51
<div class="md-form my-0">52
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">53
</div>54
</form>55
</div>56
<!-- Collapsible content -->57
58
</div>59
<!-- Additional container -->60
61
</nav>62
<!--/.Navbar-->63
64
</header>65
<!--Main Navigation-->66
67
<!--Main layout-->68
<main class="mt-5">69
70
<!--Main container-->71
<div class="container">72
73
<!--Grid row-->74
<div class="row">75
76
<!--Grid column-->77
<div class="col-md-7 mb-4">78
79
<div class="view overlay z-depth-1-half">80
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" class="card-img-top" alt="">81
<div class="mask rgba-white-light"></div>82
</div>83
84
</div>85
<!--Grid column-->86
87
<!--Grid column-->88
<div class="col-md-5 mb-4">89
90
<h2>Some awesome heading</h2>91
<hr>92
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis pariatur quod ipsum atque quam93
dolorem94
voluptate officia sunt placeat consectetur alias fugit cum praesentium ratione sint mollitia, perferendis95
natus quaerat!</p>96
<a href="https://mdbootstrap.com/" class="btn btn-indigo">Get it now!</a>97
98
</div>99
<!--Grid column-->100
101
</div>102
<!--Grid row-->103
104
<!--Grid row-->105
<div class="row">106
107
<!--Grid column-->108
<div class="col-lg-4 col-md-12 mb-4">109
110
<!--Card-->111
<div class="card">112
113
<!--Card image-->114
<div class="view overlay">115
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(72).jpg" class="card-img-top"116
alt="">117
<a href="#">118
<div class="mask rgba-white-slight"></div>119
</a>120
</div>121
122
<!--Card content-->123
<div class="card-body">124
<!--Title-->125
<h4 class="card-title">Card title</h4>126
<!--Text-->127
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the128
card's content.</p>129
<a href="#!" class="btn btn-indigo">Button</a>130
</div>131
132
</div>133
<!--/.Card-->134
135
</div>136
<!--Grid column-->137
138
<!--Grid column-->139
<div class="col-lg-4 col-md-6 mb-4">140
141
<!--Card-->142
<div class="card">143
144
<!--Card image-->145
<div class="view overlay">146
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(74).jpg" class="card-img-top"147
alt="">148
<a href="#">149
<div class="mask rgba-white-slight"></div>150
</a>151
</div>152
153
<!--Card content-->154
<div class="card-body">155
<!--Title-->156
<h4 class="card-title">Card title</h4>157
<!--Text-->158
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the159
card's content.</p>160
<a href="#" class="btn btn-indigo">Button</a>161
</div>162
163
</div>164
<!--/.Card-->165
166
</div>167
<!--Grid column-->168
169
<!--Grid column-->170
<div class="col-lg-4 col-md-6 mb-4">171
172
<!--Card-->173
<div class="card">174
175
<!--Card image-->176
<div class="view overlay">177
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(75).jpg" class="card-img-top"178
alt="">179
<a href="#">180
<div class="mask rgba-white-slight"></div>181
</a>182
</div>183
184
<!--Card content-->185
<div class="card-body">186
<!--Title-->187
<h4 class="card-title">Card title</h4>188
<!--Text-->189
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the190
card's content.</p>191
<a href="#" class="btn btn-indigo">Button</a>192
</div>193
194
</div>195
<!--/.Card-->196
197
</div>198
<!--Grid column-->199
200
</div>201
<!--Grid row-->202
203
</div>204
<!--Main container-->205
206
</main>207
<!--Main layout-->208
209
<!-- Footer -->210
<footer class="page-footer font-small indigo pt-4 mt-4">211
212
<!-- Footer Links -->213
<div class="container text-center text-md-left">214
215
<!-- Grid row -->216
<div class="row">217
218
<!-- Grid column -->219
<div class="col-md-6 mt-md-0 mt-3">220
221
<!-- Content -->222
<h5 class="text-uppercase">Footer Content</h5>223
<p>Here you can use rows and columns here to organize your footer content.</p>224
225
</div>226
<!-- Grid column -->227
228
<hr class="clearfix w-100 d-md-none pb-3">229
230
<!-- Grid column -->231
<div class="col-md-3 mb-md-0 mb-3">232
233
<!-- Links -->234
<h5 class="text-uppercase">Links</h5>235
236
<ul class="list-unstyled">237
<li>238
<a href="#!">Link 1</a>239
</li>240
<li>241
<a href="#!">Link 2</a>242
</li>243
<li>244
<a href="#!">Link 3</a>245
</li>246
<li>247
<a href="#!">Link 4</a>248
</li>249
</ul>250
251
</div>252
<!-- Grid column -->253
254
<!-- Grid column -->255
<div class="col-md-3 mb-md-0 mb-3">256
257
<!-- Links -->258
<h5 class="text-uppercase">Links</h5>259
260
<ul class="list-unstyled">261
<li>262
<a href="#!">Link 1</a>263
</li>264
<li>265
<a href="#!">Link 2</a>266
</li>267
<li>268
<a href="#!">Link 3</a>269
</li>270
<li>271
<a href="#!">Link 4</a>272
</li>273
</ul>274
275
</div>276
<!-- Grid column -->277
278
</div>279
<!-- Grid row -->280
281
</div>282
<!-- Footer Links -->283
284
<!-- Copyright -->285
<div class="footer-copyright text-center py-3">© 2018 Copyright:286
<a href="https://mdbootstrap.com/bootstrap-tutorial/"> MDBootstrap.com</a>287
</div>288
<!-- Copyright -->289
290
</footer>291
<!-- Footer -->1
1
1
1
Console errors: 0