HTML
xxxxxxxxxx1
<!-- Container for demo purpose -->2
<div class="container my-5 py-5">3
4
<!--Section: Design Block-->5
<nav class="navbar navbar-expand-lg navbar-light bg-light">6
<!-- Container wrapper -->7
<div class="container-fluid">8
9
<!-- Toggle button -->10
<button class="navbar-toggler px-0" type="button" data-mdb-collapse-init data-mdb-target="#navbarSupportedContent"11
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">12
<span class="navbar-toggler-icon"><i class="fas fa-bars"></i></span>13
</button>14
15
<!-- Collapsible wrapper -->16
<div class="collapse navbar-collapse" id="navbarSupportedContent">17
<!-- Left links -->18
<ul class="navbar-nav me-auto ps-lg-0" style="padding-left: .15rem;">19
<!-- Navbar dropdown -->20
<li class="nav-item dropdown position-static">21
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-mdb-dropdown-init22
aria-expanded="false">23
Mega menu24
</a>25
<!-- Dropdown menu -->26
<div class="dropdown-menu w-100 mt-0" aria-labelledby="navbarDropdown"27
style="border-top-left-radius: 0; border-top-right-radius: 0;">28
<div class="container">29
<div class="row my-4">30
<div class="col-md-6 col-xl-3 mb-3 mb-xl-0">31
<div class="pt-2">32
<p class="text-uppercase font-weight-bold">Explicabo voluptas</p>33
<div class="bg-image hover-overlay shadow-1-strong rounded mb-4"34
data-mdb-ripple-init data-mdb-ripple-color="light">35
<img src="https://mdbootstrap.com/img/new/fluid/city/113.jpg" class="img-fluid" />36
<a href="#!">37
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>38
</a>39
</div>40
<div class="d-flex justify-content-between">41
<a href="" class="text-info"><i class="fas fa-plane pe-1"></i>Travels</a>42
<p><u>15.07.2020</u></p>43
</div>44
<a href="" class="text-dark">45
<h5>This is title of the news</h5>46
<p>47
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, iste48
aliquid. Sed id nihil magni, sint vero provident esse numquam49
perferendis ducimus dicta adipisci iusto nam temporibus modi animi50
laboriosam?51
</p>52
</a>53
</div>54
</div>55
<div class="col-md-6 col-xl-3 mb-3 mb-xl-0">56
<div class="pt-2">57
<p class="text-uppercase font-weight-bold">Explicabo voluptas</p>58
<a href="" class="text-dark">59
<div class="row mb-4 border-bottom pb-2">60
<div class="col-3">61
<img src="https://mdbootstrap.com/img/new/standard/city/041.jpg"62
class="img-fluid shadow-1-strong rounded" alt="" />63
</div>64
<div class="col-9">65
<p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>66
<p><u>15.07.2020</u></p>67
</div>68
</div>69
</a>70
<a href="" class="text-dark">71
<div class="row mb-4 border-bottom pb-2">72
<div class="col-3">73
<img src="https://mdbootstrap.com/img/new/standard/city/042.jpg"74
class="img-fluid shadow-1-strong rounded" alt="" />75
</div>76
<div class="col-9">77
<p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>78
<p><u>15.07.2020</u></p>79
</div>80
</div>81
</a>82
<a href="" class="text-dark">83
<div class="row mb-4 border-bottom pb-2">84
<div class="col-3">85
<img src="https://mdbootstrap.com/img/new/standard/city/043.jpg"86
class="img-fluid shadow-1-strong rounded" alt="" />87
</div>88
<div class="col-9">89
<p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>90
<p><u>15.07.2020</u></p>91
</div>92
</div>93
</a>94
<a href="" class="text-dark">95
<div class="row mb-4 border-bottom pb-2">96
<div class="col-3">97
<img src="https://mdbootstrap.com/img/new/standard/city/044.jpg"98
class="img-fluid shadow-1-strong rounded" alt="" />99
</div>100
<div class="col-9">101
<p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>102
<p><u>15.07.2020</u></p>103
</div>104
</div>105
</a>106
</div>107
</div>108
<div class="col-md-6 col-xl-3 mb-3 mb-md-0">109
<div class="list-group list-group-flush">110
<p class="mb-0 list-group-item text-uppercase font-weight-bold">Iste quaerato</p>111
<a href="" class="list-group-item list-group-item-action"><i112
class="fas fa-caret-right pe-2"></i>Cras justo odio</a>113
<a href="" class="list-group-item list-group-item-action"><i114
class="fas fa-caret-right pe-2"></i>Est iure</a>115
<a href="" class="list-group-item list-group-item-action"><i116
class="fas fa-caret-right pe-2"></i>Praesentium</a>117
<a href="" class="list-group-item list-group-item-action"><i118
class="fas fa-caret-right pe-2"></i>Laboriosam</a>119
<a href="" class="list-group-item list-group-item-action"><i120
class="fas fa-caret-right pe-2"></i>Dolor sit</a>121
<a href="" class="list-group-item list-group-item-action"><i122
class="fas fa-caret-right pe-2"></i>Amet consectetur</a>123
<a href="" class="list-group-item list-group-item-action"><i124
class="fas fa-caret-right pe-2"></i>Cras justo odio</a>125
<a href="" class="list-group-item list-group-item-action"><i126
class="fas fa-caret-right pe-2"></i>Adipiscing elit</a>127
</div>128
</div>129
<div class="col-md-6 col-xl-3">130
<div class="list-group list-group-flush">131
<p class="mb-0 list-group-item text-uppercase font-weight-bold">Cras justo odio</p>132
<a href="" class="list-group-item list-group-item-action"><i133
class="fas fa-caret-right pe-2"></i>Saepe</a>134
<a href="" class="list-group-item list-group-item-action"><i135
class="fas fa-caret-right pe-2"></i>Vel alias</a>136
<a href="" class="list-group-item list-group-item-action"><i137
class="fas fa-caret-right pe-2"></i>Sunt doloribus</a>138
<a href="" class="list-group-item list-group-item-action"><i139
class="fas fa-caret-right pe-2"></i>Cum dolores</a>140
<a href="" class="list-group-item list-group-item-action"><i141
class="fas fa-caret-right pe-2"></i>Perspiciatis quo</a>142
<a href="" class="list-group-item list-group-item-action"><i143
class="fas fa-caret-right pe-2"></i>Cras justo odio</a>144
<a href="" class="list-group-item list-group-item-action"><i145
class="fas fa-caret-right pe-2"></i>Laudantium maiores</a>146
<a href="" class="list-group-item list-group-item-action"><i147
class="fas fa-caret-right pe-2"></i>Provident dolor</a>148
</div>149
</div>150
</div>151
</div>152
</div>153
</li>154
</ul>155
<!-- Left links -->156
</div>157
<!-- Collapsible wrapper -->158
</div>159
<!-- Container wrapper -->160
</nav>161
<!--Section: Design Block-->162
163
</div>164
<!-- Container for demo purpose -->CSS
xxxxxxxxxx1
body {2
background-color: #eee;3
}JS
1
1
Console errors: 0