HTML
xxxxxxxxxx1
2
<!DOCTYPE html>3
<html lang="en">4
5
<head>6
<!-- Required meta tags always come first -->7
<meta charset="utf-8">8
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">9
<meta http-equiv="x-ua-compatible" content="ie=edge">10
<title>Material Design Bootstrap Template</title>11
12
<!-- Font Awesome -->13
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">14
15
<!-- Bootstrap core CSS -->16
<link href="../css/bootstrap.min.css" rel="stylesheet">17
<link href="../css/bootstrap.css" rel="stylesheet">18
19
<!-- Material Design Bootstrap -->20
<link href="../css/mdb.min.css" rel="stylesheet">21
<link href="../css/mdb.css" rel="stylesheet">22
</head>23
24
<body class="fixed-sn homepage-v3">25
26
<!-- Navigation -->27
<header>28
29
<!--Navbar-->30
<nav class="navbar navbar-expand-lg navbar-dark stylish-color-dark">31
32
<!-- Navbar brand -->33
<a class="navbar-brand" href="#">Navbar</a>34
35
<!-- Collapse button -->36
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"37
aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>38
39
<!-- Collapsible content -->40
<div class="collapse navbar-collapse" id="navbarSupportedContent">41
42
<!-- Links -->43
<ul class="navbar-nav mr-auto">44
<!-- Dropdown -->45
<li class="nav-item dropdown">46
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Homepages</a>47
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">48
<a class="dropdown-item" href="../homepage/v-1.html">V1</a>49
<a class="dropdown-item" href="../homepage/v-2.html">V2</a>50
<a class="dropdown-item" href="../homepage/v-3.html">V3</a>51
<a class="dropdown-item" href="../homepage/v-4.html">V4</a>52
<a class="dropdown-item" href="../homepage/v-5.html">V5</a>53
</div>54
</li>55
56
<!-- Dropdown -->57
<li class="nav-item dropdown">58
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Postpages</a>59
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">60
<a class="dropdown-item" href="../postpage/v-1.html">V1</a>61
<a class="dropdown-item" href="../postpage/v-2.html">V2</a>62
<a class="dropdown-item" href="../postpage/v-3.html">V3</a>63
<a class="dropdown-item" href="../postpage/v-4.html">V4</a>64
<a class="dropdown-item" href="../postpage/v-5.html">V5</a>65
</div>66
</li>67
68
</ul>69
<!-- Links -->70
71
<!-- Search form -->72
<form class="form-inline">73
<div class="md-form my-0">74
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">75
</div>76
</form>77
</div>78
<!-- Collapsible content -->79
80
</nav>81
<!--/.Navbar-->82
83
</header>84
<!--/ Navigation -->85
86
<!--Carousel Wrapper-->87
<div id="carousel-example-1z" class="carousel slide carousel-fade" data-ride="carousel">88
<!--Indicators-->89
<ol class="carousel-indicators">90
<li data-target="#carousel-example-1z" data-slide-to="0" class="active"></li>91
<li data-target="#carousel-example-1z" data-slide-to="1"></li>92
<li data-target="#carousel-example-1z" data-slide-to="2"></li>93
</ol>94
<!--/.Indicators-->95
<!--Slides-->96
<div class="carousel-inner" role="listbox">97
<!--First slide-->98
<div class="carousel-item active">99
<div class="view h-200">100
<img class="d-block h-100 w-lg-100" src="https://mdbootstrap.com/img/Photos/Others/city8.jpg" alt="First slide">101
<div class="mask rgba-black-light ">102
<!-- Caption -->103
<div class="full-bg-img flex-center white-text">104
<ul class="animated fadeIn col-10 list-unstyled">105
<li>106
<h1 class="h1-responsive font-weight-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>107
</li>108
<li>109
<p>Tempora incidunt ut labore et dolore veritatis et quasi architecto beatae</p>110
</li>111
<li>112
<a target="_blank" href="https://mdbootstrap.com/getting-started/" class="btn btn-info" rel="nofollow">See more!</a>113
</li>114
</ul>115
</div>116
<!-- /.Caption -->117
</div>118
</div>119
</div>120
<!--/First slide-->121
<!--Second slide-->122
<div class="carousel-item h-100">123
<div class="view h-100">124
<img class="d-block h-100 w-lg-100" src="https://mdbootstrap.com/img/Photos/Others/slider1.jpg" alt="Second slide">125
<div class="mask rgba-stylish-strong">126
<!-- Caption -->127
<div class="full-bg-img flex-center white-text">128
<ul class="animated fadeIn col-10 list-unstyled">129
<li>130
<h1 class="h1-responsive font-weight-bold">Nemo enim ipsam voluptatem quia voluptas sit </h1>131
</li>132
<li>133
<p>Nemo enim ipsam voluptatem quia veritatis et quasi architecto beatae</p>134
</li>135
<li>136
<a target="_blank" href="https://mdbootstrap.com/bootstrap-tutorial/" class="btn btn-info" rel="nofollow">Read more</a>137
</li>138
</ul>139
</div>140
<!-- /.Caption -->141
</div>142
</div>143
</div>144
<!--/Second slide-->145
<!--Third slide-->146
<div class="carousel-item">147
<div class="view h-100">148
<img class="d-block h-100 w-lg-100" src="https://mdbootstrap.com/img/Photos/Others/city9.jpg" alt="Third slide">149
<div class="mask rgba-black-light">150
<!-- Caption -->151
<div class="full-bg-img flex-center white-text">152
<ul class="animated fadeIn col-md-12 list-unstyled">153
<li>154
<h1 class="h1-responsive font-weight-bold">Sed ut perspiciatis unde omnis iste natus sit voluptatem</h1>155
</li>156
<li>157
<p>Unde omnis iste natus sit voluptatem veritatis et quasi architecto beatae</p>158
</li>159
<li>160
<a target="_blank" href="https://mdbootstrap.com/forums/forum/support/" class="btn btn-default" rel="nofollow">Read more</a>161
</li>162
</ul>163
</div>164
<!-- /.Caption -->165
</div>166
</div>167
</div>168
<!--/Third slide-->169
</div>170
<!--/.Slides-->171
<!--Controls-->172
<a class="carousel-control-prev" href="#carousel-example-1z" role="button" data-slide="prev">173
<span class="carousel-control-prev-icon" aria-hidden="true"></span>174
<span class="sr-only">Previous</span>175
</a>176
<a class="carousel-control-next" href="#carousel-example-1z" role="button" data-slide="next">177
<span class="carousel-control-next-icon" aria-hidden="true"></span>178
<span class="sr-only">Next</span>179
</a>180
<!--/.Controls-->181
</div>182
<!--/.Carousel Wrapper-->183
184
<!-- Main layout -->185
<main>186
<div class="container-fluid">187
188
<!-- Magazine -->189
<div class="row mt-5">190
191
<!-- Main news -->192
<div class="col-xl-8 col-md-12">193
194
<!--Section: Magazine posts-->195
<section class="section extra-margins listing-section mt-2">196
197
<h4 class="font-weight-bold"><strong>LATESTS NEWS</strong></h4>198
<hr class="red title-hr">199
200
<!--Grid row-->201
<div class="row mb-4">202
203
<!--Grid column-->204
<div class="col-md-4 my-3">205
<!--Card-->206
<div class="card">207
208
<!--Card image-->209
<div class="view overlay">210
<img src="http://mdbootstrap.com/img/Photos/Horizontal/City/6-col/img%20(49).jpg" class="card-img-top" alt="">211
<a>212
<div class="mask rgba-white-slight"></div>213
</a>214
</div>215
<!--/.Card image-->216
217
<!--Card content-->218
<div class="card-body">219
<!--Title-->220
<h4 class="card-title"><strong>Card title</strong></h4>221
<hr>222
<!--Text-->223
<p class="card-text mb-3">Some quick example text to build on the card title and make up the bulk of the card's224
content.225
</p>226
<p class="font-small font-weight-bold dark-grey-text mb-1"><i class="fa fa-clock-o"></i> 27/08/2017</p>227
<p class="font-small grey-text mb-0">Anna Smith</p>228
<p class="text-right mb-0 font-small font-weight-bold"><a>read more <i class="fa fa-angle-right"></i></a></p>229
</div>230
<!--/.Card content-->231
232
</div>233
<!--/.Card-->234
235
</div>236
<!--Grid column-->237
238
<!--Grid column-->239
<div class="col-md-4 text-left mt-3">240
241
<!--Card-->242
<div class="card">243
244
<!--Card image-->245
<div class="view overlay">246
<img src="http://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img%20(33).jpg" class="card-img-top" alt="">247
<a>248
<div class="mask rgba-white-slight"></div>249
</a>250
</div>251
<!--/.Card image-->252
253
<!--Card content-->254
<div class="card-body">255
<!--Title-->256
<h4 class="card-title"><strong>Card title</strong></h4>257
<hr>258
<!--Text-->259
<p class="card-text mb-3">Some quick example text to build on the card title and make up the bulk of the card's260
content.261
</p>262
<p class="font-small font-weight-bold dark-grey-text mb-1"><i class="fa fa-clock-o"></i> 27/08/2017</p>263
<p class="font-small grey-text mb-0">Anna Smith</p>264
<p class="text-right mb-0 font-small font-weight-bold"><a>read more <i class="fa fa-angle-right"></i></a></p>265
</div>266
<!--/.Card content-->267
268
</div>269
<!--/.Card-->270
</div>271
<!--Grid column-->272
273
<!--Grid column-->274
<div class="col-md-4 text-left mt-3">275
276
<!--Card-->277
<div class="card">278
279
<!--Card image-->280
<div class="view overlay">281
<img src="http://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img%20(84).jpg" class="card-img-top" alt="">282
<a>283
<div class="mask rgba-white-slight"></div>284
</a>285
</div>286
<!--/.Card image-->287
288
<!--Card content-->289
<div class="card-body">290
<!--Title-->291
<h4 class="card-title"><strong>Card title</strong></h4>292
<hr>293
<!--Text-->294
<p class="card-text mb-3">Some quick example text to build on the card title and make up the bulk of the card's295
content.296
</p>297
<p class="font-small font-weight-bold dark-grey-text mb-1"><i class="fa fa-clock-o"></i> 27/08/2017</p>298
<p class="font-small grey-text mb-0">Anna Smith</p>299
<p class="text-right mb-0 font-small font-weight-bold"><a>read more <i class="fa fa-angle-right"></i></a></p>300
</div>301
<!--/.Card content-->302
303
</div>304
<!--/.Card-->305
</div>306
<!--Grid column-->307
308
</div>309
<!--/Grid row-->310
311
<!--News card-->312
<div class="card mb-3 text-center hoverable">313
<div class="card-body">314
<!--Grid row-->315
<div class="row">316
317
<!--Grid column-->318
<div class="col-md-5 mx-3 my-3">319
<!--Featured image-->320
<div class="view overlay">321
<img src="http://mdbootstrap.com/img/Photos/Others/img%20(43).jpg" class="img-fluid rounded-0" alt="Sample image">322
<a>323
<div class="mask rgba-white-slight"></div>324
</a>325
</div>326
</div>327
<!--Grid column-->328
329
<!--Grid column-->330
<div class="col-md-6 text-left ml-3 mt-3">331
<h4 class="mb-4"><strong>This is title of the news</strong></h4>332
<p class="dark-grey-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque,333
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis...</p>334
<p>by <a><strong>Carine Fox</strong></a>, 19/08/2016</p>335
<a class="btn btn-indigo btn-sm">Read more</a>336
</div>337
<!--Grid column-->338
</div>339
<!--Grid row-->340
341
<!--Grid row-->342
<div class="row mt-4">343
<!--Grid column-->344
<div class="col-md-5 mx-3 my-3">345
<!--Small news-->346
<div class="single-news">347
348
<div class="row mb-2">349
<div class="col-md-4">350
351
<!--Image-->352
<div class="view overlay rgba-white-slight z-depth-1 mb-2">353
<img src="https://mdbootstrap.com/img/Photos/Horizontal/People/4-col/img%20(95).jpg" class="img-fluid rounded-0" alt="Minor sample post image">354
<a>355
<div class="mask rgba-white-slight"></div>356
</a>357
</div>358
</div>359
360
<!--Excerpt-->361
<div class="col-md-8">362
<p class="font-small text-left mb-2"><strong>19/08/2016</strong></p>363
<p class="text-left"><a>Title of the news364
<i class="fa fa-angle-right float-right"></i>365
</a></p>366
</div>367
368
</div>369
</div>370
<!--/Small news-->371
372
<!--Small news-->373
<div class="single-news">374
375
<div class="row mb-2">376
<div class="col-md-4">377
378
<!--Image-->379
<div class="view overlay rgba-white-slight z-depth-1 mb-2">380
<img src="https://mdbootstrap.com/img/Photos/Horizontal/People/4-col/img%20(78).jpg" class="img-fluid rounded-0" alt="Minor sample post image">381
<a>382
<div class="mask rgba-white-slight"></div>383
</a>384
</div>385
</div>386
387
<!--Excerpt-->388
<div class="col-md-8">389
<p class="font-small text-left mb-2"><strong>18/08/2016</strong></p>390
<p class="text-left"><a>Title of the news391
<i class="fa fa-angle-right float-right"></i>392
</a></p>393
</div>394
395
</div>396
</div>397
<!--/Small news-->398
399
<!--Small news-->400
<div class="single-news">401
402
<div class="row">403
<div class="col-md-4">404
405
<!--Image-->406
<div class="view overlay rgba-white-slight z-depth-1 mb-2">407
<img src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(45).jpg" class="img-fluid rounded-0" alt="Minor sample post image">408
<a>409
<div class="mask rgba-white-slight"></div>410
</a>411
</div>412
</div>413
414
<!--Excerpt-->415
<div class="col-md-8">416
<p class="font-small text-left mb-2"><strong>17/08/2016</strong></p>417
<p class="text-left"><a>Title of the news418
<i class="fa fa-angle-right float-right"></i>419
</a></p>420
</div>421
422
</div>423
</div>424
<!--/Small news-->425
</div>426
<!--Grid column-->427
428
<!--Grid column-->429
<div class="col-md-5 mx-3 my-3">430
<!--Small news-->431
<div class="single-news">432
433
<div class="row mb-2">434
<div class="col-md-4">435
436
<!--Image-->437
<div class="view overlay rgba-white-slight z-depth-1 mb-2">438
<img src="https://mdbootstrap.com/img/Photos/Horizontal/People/4-col/img%20(93).jpg" class="img-fluid rounded-0" alt="Minor sample post image">439
<a>440
<div class="mask rgba-white-slight"></div>441
</a>442
</div>443
</div>444
445
<!--Excerpt-->446
<div class="col-md-8">447
<p class="font-small text-left mb-2"><strong>19/08/2016</strong></p>448
<p class="text-left"><a>Title of the news449
<i class="fa fa-angle-right float-right"></i>450
</a></p>451
</div>452
453
</div>454
</div>455
<!--/Small news-->456
457
<!--Small news-->458
<div class="single-news">459
460
<div class="row mb-2">461
<div class="col-md-4">462
463
<!--Image-->464
<div class="view overlay rgba-white-slight z-depth-1 mb-2">465
<img src="https://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img%20(43).jpg" class="img-fluid rounded-0" alt="Minor sample post image">466
<a>467
<div class="mask rgba-white-slight"></div>468
</a>469
</div>470
</div>471
472
<!--Excerpt-->473
<div class="col-md-8">474
<p class="font-small text-left mb-2"><strong>18/08/2016</strong></p>475
<p class="text-left"><a>Title of the news476
<i class="fa fa-angle-right float-right"></i>477
</a></p>478
</div>479
480
</div>481
</div>482
<!--/Small news-->483
484
<!--Small news-->485
<div class="single-news">486
487
<div class="row">488
<div class="col-md-4">489
490
<!--Image-->491
<div class="view overlay rgba-white-slight z-depth-1 mb-2">492
<img src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(60).jpg" class="img-fluid rounded-0" alt="Minor sample post image">493
<a>494
<div class="mask rgba-white-slight"></div>495
</a>496
</div>497
</div>498
499
<!--Excerpt-->500
<div class="col-md-8">501
<p class="font-small text-left mb-2"><strong>17/08/2016</strong></p>502
<p class="text-left"><a>Title of the news503
<i class="fa fa-angle-right float-right"></i>504
</a></p>505
</div>506
507
</div>508
</div>509
<!--/Small news-->510
511
512
</div>513
<!--Grid column-->514
515
</div>516
</div>517
<!--News card-->518
</div>519
<!--/Grid row-->520
521
<h4 class="font-weight-bold mt-5"><strong>TOP NEWS</strong></h4>522
<hr class="red title-hr">523
524
<!--Grid row-->525
<div class="row mb-4">526
527
<!--Grid column-->528
<div class="col-md-6 text-left mt-3">529
530
<!--Card-->531
<div class="card">532
533
<!--Card image-->534
<div class="view overlay">535
<img src="http://mdbootstrap.com/img/Photos/Horizontal/Technology/4-col/img%20(1).jpg" class="card-img-top" alt="Sample image">536
<a>537
<div class="mask rgba-white-slight"></div>538
</a>539
</div>540
<!--/.Card image-->541
542
<!--Card content-->543
<div class="card-body">544
<!--Title-->545
<h4 class="card-title"><strong>Card title</strong></h4>546
<hr>547
<!--Text-->548
<p class="card-text mb-3">Some quick example text to build on the card title and make up the bulk of the card's549
content.550
</p>551
<p class="font-small font-weight-bold dark-grey-text mb-1"><i class="fa fa-clock-o"></i> 27/08/2017</p>552
<p class="font-small grey-text mb-0">Anna Smith</p>553
<p class="text-right mb-0 font-small font-weight-bold"><a>read more <i class="fa fa-angle-right"></i></a></p>554
</div>555
<!--/.Card content-->556
557
</div>558
<!--/.Card-->559
</div>560
<!--Grid column-->561
562
563
<!--Grid column-->564
<div class="col-md-6 text-left mt-3">565
566
<!--Card-->567
<div class="card">568
569
<!--Card image-->570
<div class="view overlay">571
<img src="http://mdbootstrap.com/img/Photos/Horizontal/Technology/4-col/img%20(4).jpg" class="card-img-top" alt="Sample image">572
<a>573
<div class="mask rgba-white-slight"></div>574
</a>575
</div>576
<!--/.Card image-->577
578
<!--Card content-->579
<div class="card-body">580
<!--Title-->581
<h4 class="card-title"><strong>Card title</strong></h4>582
<hr>583
<!--Text-->584
<p class="card-text mb-3">Some quick example text to build on the card title and make up the bulk of the card's585
content.586
</p>587
<p class="font-small font-weight-bold dark-grey-text mb-1"><i class="fa fa-clock-o"></i> 27/08/2017</p>588
<p class="font-small grey-text mb-0">Anna Smith</p>589
<p class="text-right mb-0 font-small font-weight-bold"><a>read more <i class="fa fa-angle-right"></i></a></p>590
</div>591
<!--/.Card content-->592
593
</div>594
<!--/.Card-->595
</div>596
<!--Grid column-->597
598
</div>599
<!--/Grid row-->600
601
<h4 class="font-weight-bold mt-5"><strong>SPORT</strong></h4>602
<hr class="red title-hr">603
604
<!--Grid row-->605
<div class="row mb-4">606
607
<!--Grid column-->608
<div class="col-md-4 my-3">609
<!--Card-->610
<div class="card">611
612
<!--Card image-->613
<div class="view overlay">614
<img src="http://mdbootstrap.com/img/Photos/Horizontal/Sport/6-col/img%20(1).jpg" class="card-img-top" alt="Sample image">615
<a>616
<div class="mask rgba-white-slight"></div>617
</a>618
</div>619
<!--/.Card image-->620
621
<!--Card content-->622
<div class="card-body">623
<!--Title-->624
<h4 class="card-title"><strong>Card title</strong></h4>625
<hr>626
<!--Text-->627
<p class="card-text mb-3">Some quick example text to build on the card title and make up the bulk of the card's628
content.629
</p>630
<p class="font-small font-weight-bold dark-grey-text mb-1"><i class="fa fa-clock-o"></i> 27/08/2017</p>631
<p class="font-small grey-text mb-0">Anna Smith</p>632
<p class="text-right mb-0 font-small font-weight-bold"><a>read more <i class="fa fa-angle-right"></i></a></p>633
</div>634
<!--/.Card content-->635
636
</div>637
<!--/.Card-->638
639
</div>640
<!--Grid column-->641
642
<!--Grid column-->643
<div class="col-md-4 text-left mt-3">644
645
<!--Card-->646
<div class="card">647
648
<!--Card image-->649
<div class="view overlay">650
<img src="http://mdbootstrap.com/img/Photos/Horizontal/Sport/6-col/img%20(2).jpg" class="card-img-top" alt="Sample image">651
<a>652
<div class="mask rgba-white-slight"></div>653
</a>654
</div>655
<!--/.Card image-->656
657
<!--Card content-->658
<div class="card-body">659
<!--Title-->660
<h4 class="card-title"><strong>Card title</strong></h4>661
<hr>662
<!--Text-->663
<p class="card-text mb-3">Some quick example text to build on the card title and make up the bulk of the card's664
content.665
</p>666
<p class="font-small font-weight-bold dark-grey-text mb-1"><i class="fa fa-clock-o"></i> 27/08/2017</p>667
<p class="font-small grey-text mb-0">Anna Smith</p>668
<p class="text-right mb-0 font-small font-weight-bold"><a>read more <i class="fa fa-angle-right"></i></a></p>669
</div>670
<!--/.Card content-->671
672
</div>673
<!--/.Card-->674
</div>675
<!--Grid column-->676
677
<!--Grid column-->678
<div class="col-md-4 text-left mt-3">679
680
<!--Card-->681
<div class="card">682
683
<!--Card image-->684
<div class="view overlay">685
<img src="http://mdbootstrap.com/img/Photos/Horizontal/Sport/6-col/img%20(3).jpg" class="card-img-top" alt="Sample image">686
<a>687
<div class="mask rgba-white-slight"></div>688
</a>689
</div>690
<!--/.Card image-->691
692
<!--Card content-->693
<div class="card-body">694
<!--Title-->695
<h4 class="card-title"><strong>Card title</strong></h4>696
<hr>697
<!--Text-->698
<p class="card-text mb-3">Some quick example text to build on the card title and make up the bulk of the card's699
content.700
</p>701
<p class="font-small font-weight-bold dark-grey-text mb-1"><i class="fa fa-clock-o"></i> 27/08/2017</p>702
<p class="font-small grey-text mb-0">Anna Smith</p>703
<p class="text-right mb-0 font-small font-weight-bold"><a>read more <i class="fa fa-angle-right"></i></a></p>704
</div>705
<!--/.Card content-->706
707
</div>708
<!--/.Card-->709
</div>710
<!--Grid column-->711
712
</div>713
<!--/Grid row-->714
715
<h4 class="font-weight-bold mt-5"><strong>LIFESTYLE</strong></h4>716
<hr class="red title-hr">717
718
<!--Grid row-->719
<div class="row single-post mb-4">720
721
<!--Grid column-->722
<div class="col-md-6 text-left mt-3">723
724
<!--Card-->725
<div class="card">726
727
<!--Card image-->728
<div class="view overlay">729
<img src="http://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(12).jpg" class="card-img-top" alt="Sample image">730
<a>731
<div class="mask rgba-white-slight"></div>732
</a>733
</div>734
<!--/.Card image-->735
736
<!--Card content-->737
<div class="card-body">738
<!--Title-->739
<h4 class="card-title"><strong>Card title</strong></h4>740
<hr>741
<!--Text-->742
<p class="card-text mb-3">Some quick example text to build on the card title and make up the bulk of the card's743
content.744
</p>745
<p class="font-small font-weight-bold dark-grey-text mb-1"><i class="fa fa-clock-o"></i> 27/08/2017</p>746
<p class="font-small grey-text mb-0">Anna Smith</p>747
<p class="text-right mb-0 font-small font-weight-bold"><a>read more <i class="fa fa-angle-right"></i></a></p>748
</div>749
<!--/.Card content-->750
751
</div>752
<!--/.Card-->753
</div>754
<!--Grid column-->755
756
757
<!--Grid column-->758
<div class="col-md-6 text-left mt-3">759
760
<!--Card-->761
<div class="card">762
763
<!--Card image-->764
<div class="view overlay">765
<img src="http://mdbootstrap.com/img/Photos/Horizontal/Architecture/4-col/img%20(3).jpg" class="card-img-top" alt="sample image">766
<a>767
<div class="mask rgba-white-slight"></div>768
</a>769
</div>770
<!--/.Card image-->771
772
<!--Card content-->773
<div class="card-body">774
<!--Title-->775
<h4 class="card-title"><strong>Card title</strong></h4>776
<hr>777
<!--Text-->778
<p class="card-text mb-3">Some quick example text to build on the card title and make up the bulk of the card's779
content.780
</p>781
<p class="font-small font-weight-bold dark-grey-text mb-1"><i class="fa fa-clock-o"></i> 27/08/2017</p>782
<p class="font-small grey-text mb-0">Anna Smith</p>783
<p class="text-right mb-0 font-small font-weight-bold"><a>read more <i class="fa fa-angle-right"></i></a></p>784
</div>785
<!--/.Card content-->786
787
</div>788
<!--/.Card-->789
</div>790
<!--Grid column-->791
792
</div>793
<!--/Grid row-->794
795
</section>796
<!--/Section: Magazine posts-->797
798
<!--Pagination dark-->799
<nav>800
<ul class="pagination pg-dark flex-center pt-4">801
<!--Arrow left-->802
<li class="page-item">803
<a class="page-link" aria-label="Previous">804
<span aria-hidden="true">«</span>805
<span class="sr-only">Previous</span>806
</a>807
</li>808
809
<!--Numbers-->810
<li class="page-item active"><a class="page-link">1</a></li>811
<li class="page-item"><a class="page-link">2</a></li>812
<li class="page-item"><a class="page-link">3</a></li>813
<li class="page-item"><a class="page-link">4</a></li>814
<li class="page-item"><a class="page-link">5</a></li>815
816
<!--Arrow right-->817
<li class="page-item">818
<a class="page-link" aria-label="Next">819
<span aria-hidden="true">»</span>820
<span class="sr-only">Next</span>821
</a>822
</li>823
</ul>824
</nav>825
<!--/Pagination dark grey-->826
827
</div>828
<!--/ Main news -->829
830
<!-- Sidebar -->831
<div class="col-xl-4 col-md-12 widget-column mt-0">832
833
<!-- Section: Categories -->834
<section class="section mb-5">835
836
<h4 class="font-weight-bold mt-2"><strong>CATEGORIES</strong></h4>837
<hr class="red title-hr">838
839
<ul class="list-group z-depth-1 mt-4">840
<li class="list-group-item d-flex justify-content-between align-items-center">841
<a>Business</a>842
<span class="badge badge-danger badge-pill">4</span>843
</li>844
<li class="list-group-item d-flex justify-content-between align-items-center">845
<a>Entertainment</a>846
<span class="badge badge-danger badge-pill">2</span>847
</li>848
<li class="list-group-item d-flex justify-content-between align-items-center">849
<a>Health</a>850
<span class="badge badge-danger badge-pill">1</span>851
</li>852
<li class="list-group-item d-flex justify-content-between align-items-center">853
<a>Lifestyle</a>854
<span class="badge badge-danger badge-pill">2</span>855
</li>856
<li class="list-group-item d-flex justify-content-between align-items-center">857
<a>Photography</a>858
<span class="badge badge-danger badge-pill">1</span>859
</li>860
<li class="list-group-item d-flex justify-content-between align-items-center">861
<a>Technology</a>862
<span class="badge badge-danger badge-pill">2</span>863
</li>864
<li class="list-group-item d-flex justify-content-between align-items-center">865
<a>Sport</a>866
<span class="badge badge-danger badge-pill">5</span>867
</li>868
</ul>869
</section>870
<!-- Section: Categories -->871
872
<h4 class="font-weight-bold"><strong>POPULAR POSTS</strong></h4>873
<hr class="red title-hr mb-4">874
875
<!--Carousel Wrapper-->876
<div id="carousel-example-2" class="carousel slide carousel-fade" data-ride="carousel">877
<!--Indicators-->878
<ol class="carousel-indicators">879
<li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>880
<li data-target="#carousel-example-2" data-slide-to="1"></li>881
<li data-target="#carousel-example-2" data-slide-to="2"></li>882
</ol>883
<!--/.Indicators-->884
<!--Slides-->885
<div class="carousel-inner" role="listbox">886
<div class="carousel-item active">887
<div class="view">888
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Others/images/7.jpg" alt="First slide">889
<div class="mask rgba-black-light"></div>890
</div>891
<div class="carousel-caption">892
<h3 class="h3-responsive font-weight-bold">This is news</h3>893
<p>First text</p>894
</div>895
</div>896
<div class="carousel-item">897
<!--Mask color-->898
<div class="view">899
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Others/images/5.jpg" alt="Second slide">900
<div class="mask rgba-black-light"></div>901
</div>902
<div class="carousel-caption">903
<h3 class="h3-responsive font-weight-bold">This is news</h3>904
<p>Secondary text</p>905
</div>906
</div>907
<div class="carousel-item">908
<!--Mask color-->909
<div class="view">910
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Others/images/6.jpg" alt="Third slide">911
<div class="mask rgba-black-light"></div>912
</div>913
<div class="carousel-caption">914
<h3 class="h3-responsive font-weight-bold">This is news</h3>915
<p>Third text</p>916
</div>917
</div>918
</div>919
<!--/.Slides-->920
921
<!--Controls-->922
<a class="carousel-control-prev" href="#carousel-example-2" role="button" data-slide="prev">923
<span class="carousel-control-prev-icon" aria-hidden="true"></span>924
<span class="sr-only">Previous</span>925
</a>926
<a class="carousel-control-next" href="#carousel-example-2" role="button" data-slide="next">927
<span class="carousel-control-next-icon" aria-hidden="true"></span>928
<span class="sr-only">Next</span>929
</a>930
<!--/.Controls-->931
</div>932
<!--/.Carousel Wrapper-->933
934
935
<!-- Section: Advertisment -->936
<section class="section mt-5">937
938
<h6 class="grey-text text-center mb-3"><strong>- Advertisment -</strong></h6>939
940
<!--Jumbotron-->941
<div class="jumbotron text-center">942
943
<!--Title-->944
<h1 class="card-title h2-responsive mt-2"><strong>Material Design for Bootstrap</strong></h1>945
<!--Subtitle-->946
<p class="blue-text mb-4 mt-5 font-weight-bold">Powerful and free Material Design UI KIT</p>947
948
<!--Text-->949
<div class="d-flex justify-content-center">950
<p class="card-text mb-1" style="max-width: 43rem;">Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium,951
totam rem aperiam.952
</p>953
</div>954
955
<hr class="my-4">956
957
<button type="button" class="btn btn-primary btn-sm waves-effect">Buy now <span class="fa fa-diamond ml-1"></span></button>958
<button type="button" class="btn btn-outline-primary btn-sm waves-effect">Download <i class="fa fa-download ml-1"></i></button>959
960
</div>961
<!--Jumbotron-->962
963
</section>964
<!--/ Section: Advertisment -->965
966
<!-- Section: Newsletter -->967
<section class="section mt-5">968
<h4 class="font-weight-bold"><strong>NEWSLETTER</strong></h4>969
<hr class="red title-hr mb-4">970
971
<!-- Newsletter -->972
<div class="card z-depth-1 widget-spacing mt-0">973
<div class="card-body">974
975
<!-- Header -->976
<div class="text-center">977
<h4>Subscribe:</h4>978
<hr class="mt-2">979
</div>980
981
<!-- Body -->982
<p class="font-small text-center">We'll write rarely, but only the best content.</p>983
984
<!-- Body -->985
<div class="md-form">986
<i class="fa fa-user prefix grey-text"></i>987
<input type="text" id="form3" class="form-control">988
<label for="form3">Your name</label>989
</div>990
991
<div class="md-form">992
<i class="fa fa-envelope prefix grey-text"></i>993
<input type="text" id="form2" class="form-control">994
<label for="form2">Your email</label>995
</div>996
997
<div class="text-center">998
<button class="btn btn-primary">Send</button>999
</div>1000
1001
</div>1002
</div>1003
1004
</section>1005
<!--/ Section: Newsletter -->1006
1007
<!-- Section: Gallery -->1008
<section class="section sidebar-imgs mb-5">1009
1010
<h4 class="font-weight-bold"><strong>GALLERY</strong></h4>1011
<hr class="red title-hr">1012
1013
<!--Grid row-->1014
1015
<div class="row">1016
<div class="col-md-12">1017
1018
<div id="mdb-lightbox-ui"></div>1019
1020
<div class="mdb-lightbox">1021
1022
<figure class="col-md-4 px-1 py-1">1023
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(10).jpg" data-size="1600x1067">1024
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(10).jpg" class="img-fluid" alt="sample image">1025
</a>1026
</figure>1027
1028
<figure class="col-md-4 px-1 py-1">1029
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(98).jpg" data-size="1600x1067">1030
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(98).jpg" class="img-fluid" alt="sample image"/>1031
</a>1032
</figure>1033
1034
<figure class="col-md-4 px-1 py-1">1035
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(131).jpg" data-size="1600x1067">1036
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(131).jpg" class="img-fluid" alt="sample image"/>1037
</a>1038
</figure>1039
1040
<figure class="col-md-4 px-1 py-1">1041
<a href="https://mdbootstrap.com/img/Photos/Horizontal/City/12-col/img%20(4).jpg" data-size="1600x1067">1042
<img src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(4).jpg" class="img-fluid" alt="sample image"/>1043
</a>1044
</figure>1045
1046
<figure class="col-md-4 px-1 py-1">1047
<a href="https://mdbootstrap.com/img/Photos/Horizontal/City/12-col/img%20(51).jpg" data-size="1600x1067">1048
<img src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(51).jpg" class="img-fluid" alt="sample image"/>1049
</a>1050
</figure>1051
1052
<figure class="col-md-4 px-1 py-1">1053
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(128).jpg" data-size="1600x1067">1054
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(128).jpg" class="img-fluid" alt="sample image"/>1055
</a>1056
</figure>1057
1058
<figure class="col-md-4 px-1 py-1">1059
<a href="https://mdbootstrap.com/img/Photos/Horizontal/People/12-col/img%20(49).jpg" data-size="1600x1067">1060
<img src="https://mdbootstrap.com/img/Photos/Horizontal/People/4-col/img%20(49).jpg" class="img-fluid" alt="sample image" />1061
</a>1062
</figure>1063
1064
<figure class="col-md-4 px-1 py-1">1065
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(115).jpg" data-size="1600x1067">1066
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" alt="sample image" />1067
</a>1068
</figure>1069
1070
<figure class="col-md-4 px-1 py-1">1071
<a href="https://mdbootstrap.com/img/Photos/Horizontal/People/12-col/img%20(15).jpg" data-size="1600x1067">1072
<img src="https://mdbootstrap.com/img/Photos/Horizontal/People/4-col/img%20(15).jpg" class="img-fluid" alt="sample image" />1073
</a>1074
</figure>1075
1076
</div>1077
1078
</div>1079
1080
</div>1081
<!--Grid row-->1082
1083
</section>1084
<!--/ Section: Gallery -->1085
1086
<!-- Section: Featured posts -->1087
<section class="section widget-content">1088
<!-- Heading -->1089
<h4 class="font-weight-bold pt-2"><strong>FEATURED POSTS</strong></h4>1090
<hr class="red title-hr mb-4">1091
1092
<!--/ Card -->1093
<div class="card card-body pb-0">1094
<div class="single-post">1095
1096
<!-- Grid row -->1097
<div class="row">1098
<div class="col-4">1099
1100
<!-- Image -->1101
<div class="view overlay">1102
<img src="http://mdbootstrap.com/img/Photos/Horizontal/People/4-col/img%20(121).jpg" class="img-fluid rounded-0" alt="sample image">1103
<a>1104
<div class="mask rgba-white-slight"></div>1105
</a>1106
</div>1107
</div>1108
1109
<!-- Excerpt -->1110
<div class="col-8">1111
<h6 class="mt-0 mb-3"><a><strong>This is title of the news</strong></a></h6>1112
1113
<div class="post-data">1114
<p class="font-small grey-text mb-0"><i class="fa fa-clock-o"></i> 18/08/2017</p>1115
</div>1116
</div>1117
<!--/ Excerpt -->1118
</div>1119
<!--/ Grid row -->1120
</div>1121
1122
<div class="single-post">1123
<!-- Grid row -->1124
<div class="row">1125
<!-- Image -->1126
<div class="col-4">1127
<div class="view overlay">1128
<img src="http://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(30).jpg" class="img-fluid rounded-0" alt="sample image">1129
<a>1130
<div class="mask rgba-white-slight"></div>1131
</a>1132
</div>1133
</div>1134
<!--/ Image -->1135
1136
<!-- Excerpt -->1137
<div class="col-8">1138
<h6 class="mt-0 mb-3"><a><strong>This is title of the news</strong></a></h6>1139
1140
<div class="post-data">1141
<p class="font-small grey-text mb-0"><i class="fa fa-clock-o"></i> 21/08/2017</p>1142
</div>1143
</div>1144
<!--/ Excerpt -->1145
</div>1146
<!--/ Grid row -->1147
</div>1148
1149
<div class="single-post">1150
<!-- Grid row -->1151
<div class="row">1152
<!-- Image -->1153
<div class="col-4">1154
<div class="view overlay">1155
<img src="http://mdbootstrap.com/img/Photos/Horizontal/People/4-col/img%20(118).jpg" class="img-fluid rounded-0" alt="sample image">1156
<a>1157
<div class="mask rgba-white-slight"></div>1158
</a>1159
</div>1160
</div>1161
<!--/ Image -->1162
1163
<!-- Excerpt -->1164
<div class="col-8">1165
<h6 class="mt-0 mb-3"><a><strong>This is title of the news</strong></a></h6>1166
1167
<div class="post-data">1168
<p class="font-small grey-text mb-0"><i class="fa fa-clock-o"></i> 27/08/2017</p>1169
</div>1170
1171
</div>1172
<!--/ Excerpt -->1173
</div>1174
<!--/ Grid row -->1175
</div>1176
1177
<div class="single-post">1178
<!-- Grid row -->1179
<div class="row">1180
<!-- Image -->1181
<div class="col-4">1182
<div class="view overlay">1183
<img src="http://mdbootstrap.com/img/Photos/Horizontal/People/4-col/img%20(124).jpg" class="img-fluid rounded-0" alt="sample image">1184
<a>1185
<div class="mask rgba-white-slight"></div>1186
CSS
1
1
JS
1
1
Console errors: 0