xxxxxxxxxx
1
<!-- 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 name
130
</h6>
131
<p>
132
Here you can use rows and columns to organize your footer content. Lorem ipsum
133
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
Products
143
</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 links
164
</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.com
188
</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