xxxxxxxxxx1
<!-- Navbar -->2
<nav class="navbar fixed-top navbar-expand-lg navbar-light white scrolling-navbar">3
<div class="container">4
5
<!-- Brand -->6
<a class="navbar-brand waves-effect" href="https://mdbootstrap.com/docs/jquery/" target="_blank">7
<strong class="blue-text">MDB</strong>8
</a>9
10
<!-- Collapse -->11
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"12
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">13
<span class="navbar-toggler-icon"></span>14
</button>15
16
<!-- Links -->17
<div class="collapse navbar-collapse" id="navbarSupportedContent">18
19
<!-- Left -->20
<ul class="navbar-nav mr-auto">21
<li class="nav-item active">22
<a class="nav-link waves-effect" href="#">Home23
<span class="sr-only">(current)</span>24
</a>25
</li>26
<li class="nav-item">27
<a class="nav-link waves-effect" href="https://mdbootstrap.com/docs/jquery/" target="_blank">About MDB</a>28
</li>29
<li class="nav-item">30
<a class="nav-link waves-effect" href="https://mdbootstrap.com/docs/jquery/getting-started/download/"31
target="_blank">Free download</a>32
</li>33
<li class="nav-item">34
<a class="nav-link waves-effect" href="https://mdbootstrap.com/education/bootstrap/" target="_blank">Free35
tutorials</a>36
</li>37
</ul>38
39
<!-- Right -->40
<ul class="navbar-nav nav-flex-icons">41
<li class="nav-item">42
<a class="nav-link waves-effect">43
<span class="badge red z-depth-1 mr-1"> 1 </span>44
<i class="fas fa-shopping-cart"></i>45
<span class="clearfix d-none d-sm-inline-block"> Cart </span>46
</a>47
</li>48
<li class="nav-item">49
<a href="https://www.facebook.com/mdbootstrap" class="nav-link waves-effect" target="_blank">50
<i class="fab fa-facebook-f"></i>51
</a>52
</li>53
<li class="nav-item">54
<a href="https://twitter.com/MDBootstrap" class="nav-link waves-effect" target="_blank">55
<i class="fab fa-twitter"></i>56
</a>57
</li>58
<li class="nav-item">59
<a href="https://github.com/mdbootstrap/bootstrap-material-design" class="nav-link border border-light rounded waves-effect"60
target="_blank">61
<i class="fab fa-github mr-2"></i>MDB GitHub62
</a>63
</li>64
</ul>65
66
</div>67
68
</div>69
</nav>70
<!-- Navbar -->71
72
<!--Main layout-->73
<main class="mt-5 pt-4">74
<div class="container dark-grey-text mt-5">75
76
<!--Grid row-->77
<div class="row wow fadeIn">78
79
<!--Grid column-->80
<div class="col-md-6 mb-4">81
82
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/14.jpg" class="img-fluid" alt="">83
84
</div>85
<!--Grid column-->86
87
<!--Grid column-->88
<div class="col-md-6 mb-4">89
90
<!--Content-->91
<div class="p-4">92
93
<div class="mb-3">94
<a href="">95
<span class="badge purple mr-1">Category 2</span>96
</a>97
<a href="">98
<span class="badge blue mr-1">New</span>99
</a>100
<a href="">101
<span class="badge red mr-1">Bestseller</span>102
</a>103
</div>104
105
<p class="lead">106
<span class="mr-1">107
<del>$200</del>108
</span>109
<span>$100</span>110
</p>111
112
<p class="lead font-weight-bold">Description</p>113
114
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et dolor suscipit libero eos atque quia ipsa115
sint voluptatibus!116
Beatae sit assumenda asperiores iure at maxime atque repellendus maiores quia sapiente.</p>117
118
<form class="d-flex justify-content-left">119
<!-- Default input -->120
<input type="number" value="1" aria-label="Search" class="form-control" style="width: 100px">121
<button class="btn btn-primary btn-md my-0 p" type="submit">Add to cart122
<i class="fas fa-shopping-cart ml-1"></i>123
</button>124
125
</form>126
127
</div>128
<!--Content-->129
130
</div>131
<!--Grid column-->132
133
</div>134
<!--Grid row-->135
136
<hr>137
138
<!--Grid row-->139
<div class="row d-flex justify-content-center wow fadeIn">140
141
<!--Grid column-->142
<div class="col-md-6 text-center">143
144
<h4 class="my-4 h4">Additional information</h4>145
146
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus suscipit modi sapiente illo soluta odit147
voluptates,148
quibusdam officia. Neque quibusdam quas a quis porro? Molestias illo neque eum in laborum.</p>149
150
</div>151
<!--Grid column-->152
153
</div>154
<!--Grid row-->155
156
<!--Grid row-->157
<div class="row wow fadeIn">158
159
<!--Grid column-->160
<div class="col-lg-4 col-md-12 mb-4">161
162
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/11.jpg" class="img-fluid" alt="">163
164
</div>165
<!--Grid column-->166
167
<!--Grid column-->168
<div class="col-lg-4 col-md-6 mb-4">169
170
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/12.jpg" class="img-fluid" alt="">171
172
</div>173
<!--Grid column-->174
175
<!--Grid column-->176
<div class="col-lg-4 col-md-6 mb-4">177
178
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/13.jpg" class="img-fluid" alt="">179
180
</div>181
<!--Grid column-->182
183
</div>184
<!--Grid row-->185
186
</div>187
</main>188
<!--Main layout-->189
190
<!--Footer-->191
<footer class="page-footer text-center font-small mt-4 wow fadeIn">192
193
<!--Call to action-->194
<div class="pt-4">195
<a class="btn btn-outline-white" href="https://mdbootstrap.com/docs/jquery/getting-started/download/" target="_blank"196
role="button">Download MDB197
<i class="fas fa-download ml-2"></i>198
</a>199
<a class="btn btn-outline-white" href="https://mdbootstrap.com/education/bootstrap/" target="_blank" role="button">Start200
free tutorial201
<i class="fas fa-graduation-cap ml-2"></i>202
</a>203
</div>204
<!--/.Call to action-->205
206
<hr class="my-4">207
208
<!-- Social icons -->209
<div class="pb-4">210
<a href="https://www.facebook.com/mdbootstrap" target="_blank">211
<i class="fab fa-facebook-f mr-3"></i>212
</a>213
214
<a href="https://twitter.com/MDBootstrap" target="_blank">215
<i class="fab fa-twitter mr-3"></i>216
</a>217
218
<a href="https://www.youtube.com/watch?v=7MUISDJ5ZZ4" target="_blank">219
<i class="fab fa-youtube mr-3"></i>220
</a>221
222
<a href="https://plus.google.com/u/0/b/107863090883699620484" target="_blank">223
<i class="fab fa-google-plus-g mr-3"></i>224
</a>225
226
<a href="https://dribbble.com/mdbootstrap" target="_blank">227
<i class="fab fa-dribbble mr-3"></i>228
</a>229
230
<a href="https://pinterest.com/mdbootstrap" target="_blank">231
<i class="fab fa-pinterest mr-3"></i>232
</a>233
234
<a href="https://github.com/mdbootstrap/bootstrap-material-design" target="_blank">235
<i class="fab fa-github mr-3"></i>236
</a>237
238
<a href="http://codepen.io/mdbootstrap/" target="_blank">239
<i class="fab fa-codepen mr-3"></i>240
</a>241
</div>242
<!-- Social icons -->243
244
<!--Copyright-->245
<div class="footer-copyright py-3">246
© 2018 Copyright:247
<a href="https://mdbootstrap.com/education/bootstrap/" target="_blank"> MDBootstrap.com </a>248
</div>249
<!--/.Copyright-->250
251
</footer>252
<!--/.Footer-->xxxxxxxxxx1
/* Footer color for sake of consistency with Navbar */2
.page-footer {3
background-color: #929FBA; }xxxxxxxxxx1
new WOW().init();2
Console errors: 0