xxxxxxxxxx1
<!-- Navbar -->2
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-white">3
<!-- Container wrapper -->4
<div class="container">5
<!-- Toggle button -->6
<button 7
class="navbar-toggler" 8
type="button" 9
data-mdb-toggle="collapse" 10
data-mdb-target="#navbarSupportedContent1" 11
aria-controls="navbarSupportedContent1" 12
aria-expanded="false" 13
aria-label="Toggle navigation">14
<i class="fas fa-bars"></i>15
</button>16
17
<!-- Collapsible wrapper -->18
<div class="collapse navbar-collapse" id="navbarSupportedContent1">19
<!-- Navbar brand -->20
<a class="navbar-brand mt-2 mt-sm-0" href="https://mdbootstrap.com/">21
<img src="https://mdbcdn.b-cdn.net/img/logo/mdb-transaprent-noshadows.webp" height="20" alt="MDB Logo" loading="lazy" />22
</a>23
<!-- Left links -->24
<ul class="navbar-nav me-auto mb-2 mb-lg-0">25
<li class="nav-item active">26
<a class="nav-link" href="https://mdbootstrap.com/">Home</a>27
</li>28
<li class="nav-item">29
<a class="nav-link" href="https://mdbootstrap.com/docs/standard/">About MDB</a>30
</li>31
<li class="nav-item">32
<a class="nav-link" href="https://mdbootstrap.com/docs/standard/getting-started/installation/">Free download</a>33
</li>34
<li class="nav-item">35
<a class="nav-link" href="https://mdbootstrap.com/education/bootstrap/">Free tutorials</a>36
</li>37
</ul>38
<!-- Left links -->39
</div>40
<!-- Collapsible wrapper -->41
42
<!-- Right elements -->43
<div class="d-flex align-items-center">44
<!-- Icon -->45
<a class="nav-link me-3" href="#">46
<i class="fas fa-shopping-cart"></i>47
<span class="badge rounded-pill badge-notification bg-danger">1</span>48
</a>49
50
<a class="nav-link me-3" href="#">51
<i class="fab fa-facebook-f"></i>52
</a>53
<a class="nav-link me-3" href="#">54
<i class="fab fa-twitter"></i>55
</a>56
<a href="https://github.com/mdbootstrap/bootstrap-material-design" class="border rounded px-2 nav-link" target="_blank"> <i class="fab fa-github me-2"></i>MDB GitHub </a>57
</div>58
<!-- Right elements -->59
</div>60
<!-- Container wrapper -->61
</nav>62
<!-- Navbar -->63
64
<!--Main layout-->65
<main class="mt-5 pt-4">66
<div class="container mt-5">67
<!--Grid row-->68
<div class="row">69
<!--Grid column-->70
<div class="col-md-6 mb-4">71
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/14.jpg" class="img-fluid" alt="" />72
</div>73
<!--Grid column-->74
75
<!--Grid column-->76
<div class="col-md-6 mb-4">77
<!--Content-->78
<div class="p-4">79
<div class="mb-3">80
<a href="">81
<span class="badge bg-dark me-1">Category 2</span>82
</a>83
<a href="">84
<span class="badge bg-info me-1">New</span>85
</a>86
<a href="">87
<span class="badge bg-danger me-1">Bestseller</span>88
</a>89
</div>90
91
<p class="lead">92
<span class="me-1">93
<del>$200</del>94
</span>95
<span>$100</span>96
</p>97
98
<strong><p style="font-size: 20px;">Description</p></strong>99
100
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et dolor suscipit libero eos atque quia ipsa sint voluptatibus! Beatae sit assumenda asperiores iure at maxime atque repellendus maiores quia sapiente.</p>101
102
<form class="d-flex justify-content-left">103
<!-- Default input -->104
<div class="form-outline me-1" style="width: 100px;">105
<input type="number" value="1" class="form-control" />106
</div>107
<button class="btn btn-primary ms-1" type="submit">108
Add to cart109
<i class="fas fa-shopping-cart ms-1"></i>110
</button>111
</form>112
</div>113
<!--Content-->114
</div>115
<!--Grid column-->116
</div>117
<!--Grid row-->118
119
<hr />120
121
<!--Grid row-->122
<div class="row d-flex justify-content-center">123
<!--Grid column-->124
<div class="col-md-6 text-center">125
<h4 class="my-4 h4">Additional information</h4>126
127
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus suscipit modi sapiente illo soluta odit voluptates, quibusdam officia. Neque quibusdam quas a quis porro? Molestias illo neque eum in laborum.</p>128
</div>129
<!--Grid column-->130
</div>131
<!--Grid row-->132
133
<!--Grid row-->134
<div class="row">135
<!--Grid column-->136
<div class="col-lg-4 col-md-12 mb-4">137
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/11.jpg" class="img-fluid" alt="" />138
</div>139
<!--Grid column-->140
141
<!--Grid column-->142
<div class="col-lg-4 col-md-6 mb-4">143
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/12.jpg" class="img-fluid" alt="" />144
</div>145
<!--Grid column-->146
147
<!--Grid column-->148
<div class="col-lg-4 col-md-6 mb-4">149
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/13.jpg" class="img-fluid" alt="" />150
</div>151
<!--Grid column-->152
</div>153
<!--Grid row-->154
</div>155
</main>156
<!--Main layout-->157
158
<!-- footer -->159
<footer class="text-center text-white mt-4" style="background-color: #607d8b;">160
<!--Call to action-->161
<div class="pt-4 pb-2">162
<a class="btn btn-outline-white footer-cta mx-2" style="box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px;" href="https://mdbootstrap.com/docs/jquery/getting-started/download/" target="_blank" role="button">163
Download MDB164
<i class="fas fa-download ms-2"></i>165
</a>166
<a class="btn btn-outline-white footer-cta mx-2" style="box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px;" href="https://mdbootstrap.com/education/bootstrap/" target="_blank" role="button">167
Start free tutorial168
<i class="fas fa-graduation-cap ms-2"></i>169
</a>170
</div>171
<!--/.Call to action-->172
173
<hr class="text-dark" />174
175
<div class="container">176
<!-- Section: Social media -->177
<section class="mb-3">178
<!-- Facebook -->179
<a class="btn-link btn-floating btn-lg text-white" href="#!" role="button" data-mdb-ripple-color="dark"><i class="fab fa-facebook-f"></i></a>180
181
<!-- Twitter -->182
<a class="btn-link btn-floating btn-lg text-white" href="#!" role="button" data-mdb-ripple-color="dark"><i class="fab fa-twitter"></i></a>183
184
<!-- Google -->185
<a class="btn-link btn-floating btn-lg text-white" href="#!" role="button" data-mdb-ripple-color="dark"><i class="fab fa-google"></i></a>186
187
<!-- Instagram -->188
<a class="btn-link btn-floating btn-lg text-white" href="#!" role="button" data-mdb-ripple-color="dark"><i class="fab fa-instagram"></i></a>189
190
<!-- YouTube -->191
<a class="btn-link btn-floating btn-lg text-white" href="#!" role="button" data-mdb-ripple-color="dark"><i class="fab fa-youtube"></i></a>192
<!-- Github -->193
<a class="btn-link btn-floating btn-lg text-white" href="#!" role="button" data-mdb-ripple-color="dark"><i class="fab fa-github"></i></a>194
</section>195
<!-- Section: Social media -->196
</div>197
<!-- Grid container -->198
199
<!-- Copyright -->200
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2); text-color: #e0e0e0;">201
© 2022 Copyright:202
<a class="text-white" href="https://mdbootstrap.com/">MDBootstrap.com</a>203
</div>204
<!-- Copyright -->205
</footer>206
1
1
1
1
Console errors: 0