HTML
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 class="navbar-toggler" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" 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="navbarSupportedContent1">12
<!-- Navbar brand -->13
<a class="navbar-brand mt-2 mt-sm-0" href="https://mdbootstrap.com/">14
<img src="https://mdbcdn.b-cdn.net/img/logo/mdb-transaprent-noshadows.webp" height="20" 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 active">19
<a class="nav-link" href="https://mdbootstrap.com/">Home</a>20
</li>21
<li class="nav-item">22
<a class="nav-link" href="https://mdbootstrap.com/docs/standard/">About MDB</a>23
</li>24
<li class="nav-item">25
<a class="nav-link" href="https://mdbootstrap.com/docs/standard/getting-started/installation/">Free download</a>26
</li>27
<li class="nav-item">28
<a class="nav-link" href="https://mdbootstrap.com/education/bootstrap/">Free tutorials</a>29
</li>30
</ul>31
<!-- Left links -->32
</div>33
<!-- Collapsible wrapper -->34
35
<!-- Right elements -->36
<div class="d-flex align-items-center">37
<!-- Icon -->38
<a class="nav-link me-3" href="#">39
<i class="fas fa-shopping-cart"></i>40
<span class="badge rounded-pill badge-notification bg-danger">1</span>41
</a>42
43
<a class="nav-link me-3" href="#">44
<i class="fab fa-facebook-f"></i>45
</a>46
<a class="nav-link me-3" href="#">47
<i class="fab fa-twitter"></i>48
</a>49
<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>50
</div>51
<!-- Right elements -->52
</div>53
<!-- Container wrapper -->54
</nav>55
<!-- Navbar -->56
57
<!--Main layout-->58
<main class="mt-5 pt-4">59
<div class="container">60
<!-- Heading -->61
<h2 class="my-5 text-center">Checkout form</h2>62
63
<!--Grid row-->64
<div class="row">65
<!--Grid column-->66
<div class="col-md-8 mb-4">67
<!--Card-->68
<div class="card p-4">69
<!--Grid row-->70
<div class="row mb-3">71
<!--Grid column-->72
<div class="col-md-6 mb-2">73
<!--firstName-->74
<div class="form-outline">75
<input type="text" id="typeText" class="form-control" />76
<label class="form-label" for="typeText">First name</label>77
</div>78
</div>79
<!--Grid column-->80
81
<!--Grid column-->82
<div class="col-md-6 mb-2">83
<!--lastName-->84
<div class="form-outline">85
<input type="text" id="typeText" class="form-control" />86
<label class="form-label" for="typeText">Last name</label>87
</div>88
</div>89
<!--Grid column-->90
</div>91
<!--Grid row-->92
93
<!--Username-->94
<div class="input-group mb-4">95
<span class="input-group-text" id="basic-addon1">@</span>96
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" />97
</div>98
99
<!--email-->100
<p class="mb-0">101
Email (optional)102
</p>103
<div class="form-outline mb-4">104
<input type="email" class="form-control" placeholder="youremail@example.com" aria-label="youremail@example.com" aria-describedby="basic-addon1" />105
</div>106
107
<!--address-->108
<p class="mb-0">109
Address110
</p>111
<div class="form-outline mb-4">112
<input type="email" class="form-control" placeholder="1234 Main St" aria-label="1234 Main St" aria-describedby="basic-addon1" />113
</div>114
115
<!--address-2-->116
<p class="mb-0">117
Address 2 (optional)118
</p>119
<div class="form-outline mb-4">120
<input type="email" class="form-control" placeholder="Apartment or suite" aria-label="Apartment or suite" aria-describedby="basic-addon1" />121
</div>122
123
<!--Grid row-->124
<div class="row">125
<!--Grid column-->126
<div class="col-lg-4 col-md-12 mb-4">127
<p class="mb-0">128
Country129
</p>130
<div class="form-outline mb-4">131
<input type="email" class="form-control" placeholder="United States" aria-label="United States" aria-describedby="basic-addon1" />132
</div>133
</div>134
<!--Grid column-->135
136
<!--Grid column-->137
<div class="col-lg-4 col-md-12 mb-4">138
<p class="mb-0">139
State140
</p>141
<div class="form-outline mb-4">142
<input type="email" class="form-control" placeholder="California" aria-label="California" aria-describedby="basic-addon1" />143
</div>144
</div>145
<!--Grid column-->146
147
<!--Grid column-->148
<div class="col-lg-4 col-md-12 mb-4">149
<p class="mb-0">150
Zip151
</p>152
<div class="form-outline">153
<input type="text" class="form-control"/>154
</div>155
</div>156
<!--Grid column-->157
</div>158
<!--Grid row-->159
160
<hr />161
<div class="form-check">162
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" />163
<label class="form-check-label" for="flexCheckDefault">Shipping address is the same as my billing address</label>164
</div>165
166
<div class="form-check">167
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" />168
<label class="form-check-label" for="flexCheckDefault">Save this information for next time</label>169
</div>170
171
<hr />172
173
<div class="my-3">174
<div class="form-check">175
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1" checked />176
<label class="form-check-label" for="flexRadioDefault1"> Credit card </label>177
</div>178
179
<div class="form-check">180
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" />181
<label class="form-check-label" for="flexRadioDefault2"> Debit card </label>182
</div>183
<div class="form-check">184
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault3" />185
<label class="form-check-label" for="flexRadioDefault3"> Paypal </label>186
</div>187
</div>188
<div class="row mb-3">189
<div class="col-md-6 mb-3">190
<p class="mb-0">191
Name on card192
</p>193
<div class="form-outline">194
<input type="text" class="form-control"/>195
<div class="form-helper">Full name as displayed on card</div>196
</div>197
</div>198
<div class="col-md-6 mb-3">199
<p class="mb-0">200
Credit card number201
</p>202
<div class="form-outline">203
<input type="text" class="form-control" /> 204
</div>205
</div>206
</div>207
<div class="row">208
<div class="col-md-3 mb-3">209
<p class="mb-0">210
Expiration211
</p>212
<div class="form-outline">213
<input type="text" class="form-control" />214
215
</div>216
</div>217
<div class="col-md-3 mb-3">218
<p class="mb-0">219
CVV220
</p>221
<div class="form-outline">222
<input type="text" class="form-control" />223
224
</div>225
</div>226
</div>227
<hr class="mb-4" /> 228
<button class="btn btn-primary" type="button">Continue to checkout</button>229
</div>230
<!--/.Card-->231
</div>232
<!--Grid column-->233
234
<!--Grid column-->235
<div class="col-md-4 mb-4">236
<!-- Heading -->237
<h4 class="d-flex justify-content-between align-items-center mb-3">238
<span class="text-muted">Your cart</span>239
<span class="badge rounded-pill badge-primary">3</span>240
</h4>241
242
<!-- Cart -->243
<ul class="list-group mb-3">244
<li class="list-group-item d-flex justify-content-between">245
<div>246
<h6 class="my-0">Product name</h6>247
<small class="text-muted">Brief description</small>248
</div>249
<span class="text-muted">$12</span>250
</li>251
<li class="list-group-item d-flex justify-content-between">252
<div>253
<h6 class="my-0">Second product</h6>254
<small class="text-muted">Brief description</small>255
</div>256
<span class="text-muted">$8</span>257
</li>258
<li class="list-group-item d-flex justify-content-between">259
<div>260
<h6 class="my-0">Third item</h6>261
<small class="text-muted">Brief description</small>262
</div>263
<span class="text-muted">$5</span>264
</li>265
<li class="list-group-item d-flex justify-content-between bg-light">266
<div class="text-success">267
<h6 class="my-0">Promo code</h6>268
<small>EXAMPLECODE</small>269
</div>270
<span class="text-success">-$5</span>271
</li>272
<li class="list-group-item d-flex justify-content-between">273
<span>Total (USD)</span>274
<strong>$20</strong>275
</li>276
</ul>277
<!-- Cart -->278
279
<!-- Promo code -->280
<form class="card p-2">281
<div class="input-group mb-3">282
<input283
type="text"284
class="form-control"285
placeholder="Promo code"286
aria-label="Promo code"287
aria-describedby="button-addon2"288
/>289
<button class="btn btn-primary" type="button" id="button-addon2" data-mdb-ripple-color="dark">290
redeem291
</button>292
</div>293
</form>294
<!-- Promo code -->295
</div>296
<!--Grid column-->297
</div>298
<!--Grid row-->299
</div>300
</main>301
<!--Main layout-->302
303
<!-- footer -->304
<footer class="text-center text-white mt-4" style="background-color: #607d8b;">305
<!--Call to action-->306
<div class="pt-4 pb-2">307
<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">308
Download MDB309
<i class="fas fa-download ms-2"></i>310
</a>311
<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">312
Start free tutorial313
<i class="fas fa-graduation-cap ms-2"></i>314
</a>315
</div>316
<!--/.Call to action-->317
318
<hr class="text-dark" />319
320
<div class="container">321
<!-- Section: Social media -->322
<section class="mb-3">323
<!-- Facebook -->324
<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>325
326
<!-- Twitter -->327
<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>328
329
<!-- Google -->330
<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>331
332
<!-- Instagram -->333
<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>334
335
<!-- YouTube -->336
<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>337
<!-- Github -->338
<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>339
</section>340
<!-- Section: Social media -->341
</div>342
<!-- Grid container -->343
344
<!-- Copyright -->345
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2); text-color: #e0e0e0;">346
© 2022 Copyright:347
<a class="text-white" href="https://mdbootstrap.com/">MDBootstrap.com</a>348
</div>349
<!-- Copyright -->350
</footer>351
CSS
1
1
JS
1
1
Console errors: 0