xxxxxxxxxx1
<!-- Navbar -->2
<nav class="navbar navbar-expand-lg navbar-light bg-light">3
<!-- Container wrapper -->4
<div class="container-fluid">5
<!-- Toggle button -->6
<button class="navbar-toggler" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">7
<i class="fas fa-bars"></i>8
</button>9
10
<!-- Collapsible wrapper -->11
<div class="collapse navbar-collapse" id="navbarSupportedContent">12
<!-- Navbar brand -->13
<a class="navbar-brand mt-2 mt-lg-0" href="#">14
<img src="https://mdbcdn.b-cdn.net/img/logo/mdb-transaprent-noshadows.webp" height="15" alt="MDB Logo" loading="lazy" />15
</a>16
<!-- Left links -->17
<ul class="navbar-nav me-auto mb-2 mb-lg-0">18
<li class="nav-item">19
<a class="nav-link" href="#">Dashboard</a>20
</li>21
<li class="nav-item">22
<a class="nav-link" href="#">Team</a>23
</li>24
<li class="nav-item">25
<a class="nav-link" href="#">Projects</a>26
</li>27
</ul>28
<!-- Left links -->29
</div>30
<!-- Collapsible wrapper -->31
32
<!-- Right elements -->33
<div class="d-flex align-items-center">34
<!-- Icon -->35
<a class="text-reset me-3" href="#">36
<i class="fas fa-shopping-cart"></i>37
</a>38
39
<!-- Notifications -->40
<div class="dropdown">41
<a class="text-reset me-3 dropdown-toggle hidden-arrow" href="#" id="navbarDropdownMenuLink" role="button" data-mdb-toggle="dropdown" aria-expanded="false">42
<i class="fas fa-bell"></i>43
<span class="badge rounded-pill badge-notification bg-danger">1</span>44
</a>45
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink">46
<li>47
<a class="dropdown-item" href="#">Some news</a>48
</li>49
<li>50
<a class="dropdown-item" href="#">Another news</a>51
</li>52
<li>53
<a class="dropdown-item" href="#">Something else here</a>54
</li>55
</ul>56
</div>57
<!-- Avatar -->58
<div class="dropdown">59
<a class="dropdown-toggle d-flex align-items-center hidden-arrow" href="#" id="navbarDropdownMenuAvatar" role="button" data-mdb-toggle="dropdown" aria-expanded="false">60
<img src="https://mdbcdn.b-cdn.net/img/new/avatars/2.webp" class="rounded-circle" height="25" alt="Black and White Portrait of a Man" loading="lazy" />61
</a>62
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuAvatar">63
<li>64
<a class="dropdown-item" href="#">My profile</a>65
</li>66
<li>67
<a class="dropdown-item" href="#">Settings</a>68
</li>69
<li>70
<a class="dropdown-item" href="#">Logout</a>71
</li>72
</ul>73
</div>74
</div>75
<!-- Right elements -->76
</div>77
<!-- Container wrapper -->78
</nav>79
<!-- Navbar -->80
81
<div class="container" style="height: 50vh;">82
83
</div>84
85
<!-- Footer -->86
<footer class="text-center text-lg-start bg-light text-muted">87
<!-- Section: Social media -->88
<section class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom">89
<!-- Left -->90
<div class="me-5 d-none d-lg-block">91
<span>Get connected with us on social networks:</span>92
</div>93
<!-- Left -->94
95
<!-- Right -->96
<div>97
<a href="" class="me-4 text-reset">98
<i class="fab fa-facebook-f"></i>99
</a>100
<a href="" class="me-4 text-reset">101
<i class="fab fa-twitter"></i>102
</a>103
<a href="" class="me-4 text-reset">104
<i class="fab fa-google"></i>105
</a>106
<a href="" class="me-4 text-reset">107
<i class="fab fa-instagram"></i>108
</a>109
<a href="" class="me-4 text-reset">110
<i class="fab fa-linkedin"></i>111
</a>112
<a href="" class="me-4 text-reset">113
<i class="fab fa-github"></i>114
</a>115
</div>116
<!-- Right -->117
</section>118
<!-- Section: Social media -->119
120
<!-- Section: Links -->121
<section class="">122
<div class="container text-center text-md-start mt-5">123
<!-- Grid row -->124
<div class="row mt-3">125
<!-- Grid column -->126
<div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">127
<!-- Content -->128
<h6 class="text-uppercase fw-bold mb-4">129
<i class="fas fa-gem me-3"></i>Company name130
</h6>131
<p>132
Here you can use rows and columns to organize your footer content. Lorem ipsum133
dolor sit amet, consectetur adipisicing elit.134
</p>135
</div>136
<!-- Grid column -->137
138
<!-- Grid column -->139
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">140
<!-- Links -->141
<h6 class="text-uppercase fw-bold mb-4">142
Products143
</h6>144
<p>145
<a href="#!" class="text-reset">Angular</a>146
</p>147
<p>148
<a href="#!" class="text-reset">React</a>149
</p>150
<p>151
<a href="#!" class="text-reset">Vue</a>152
</p>153
<p>154
<a href="#!" class="text-reset">Laravel</a>155
</p>156
</div>157
<!-- Grid column -->158
159
<!-- Grid column -->160
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">161
<!-- Links -->162
<h6 class="text-uppercase fw-bold mb-4">163
Useful links164
</h6>165
<p>166
<a href="#!" class="text-reset">Pricing</a>167
</p>168
<p>169
<a href="#!" class="text-reset">Settings</a>170
</p>171
<p>172
<a href="#!" class="text-reset">Orders</a>173
</p>174
<p>175
<a href="#!" class="text-reset">Help</a>176
</p>177
</div>178
<!-- Grid column -->179
180
<!-- Grid column -->181
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">182
<!-- Links -->183
<h6 class="text-uppercase fw-bold mb-4">Contact</h6>184
<p><i class="fas fa-home me-3"></i> New York, NY 10012, US</p>185
<p>186
<i class="fas fa-envelope me-3"></i>187
info@example.com188
</p>189
<p><i class="fas fa-phone me-3"></i> + 01 234 567 88</p>190
<p><i class="fas fa-print me-3"></i> + 01 234 567 89</p>191
</div>192
<!-- Grid column -->193
</div>194
<!-- Grid row -->195
</div>196
</section>197
<!-- Section: Links -->198
199
<!-- Copyright -->200
<div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">201
© 2021 Copyright:202
<a class="text-reset fw-bold" href="https://mdbootstrap.com/">MDBootstrap.com</a>203
</div>204
<!-- Copyright -->205
</footer>206
<!-- Footer -->1
1
1
1
Console errors: 0