<div class="container">
<div class="text-center darken-grey-text mb-4">
<h1 class="font-bold mt-4 mb-3 h5">Built with Material Design for Bootstrap 4</h1>
<a class="btn btn-danger btn-md" href="https://mdbootstrap.com/material-design-for-bootstrap/" target="_blank">Free download<i class="fa fa-download pl-2"></i></a>
</div>
<!--Section: Additional Modals-->
<section>
<!-- Frame Modal Top Info-->
<div class="modal fade top" id="frameModalTopInfoDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
data-backdrop="false">
<div class="modal-dialog modal-frame modal-top modal-notify modal-info" role="document">
<!--Content-->
<div class="modal-content">
<!--Body-->
<div class="modal-body">
<div class="row d-flex justify-content-center align-items-center">
<p class="pt-3 pr-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit
nostrum quos..</p>
<a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
</div>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!-- Frame Modal Bottom Success-->
<!-- Frame Modal Bottom Success-->
<div class="modal fade bottom" id="frameModalBottomSuccessDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true" data-backdrop="false">
<div class="modal-dialog modal-frame modal-bottom modal-notify modal-success" role="document">
<!--Content-->
<div class="modal-content">
<!--Body-->
<div class="modal-body">
<div class="row d-flex justify-content-center align-items-center">
<p class="pt-3 pr-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit
nostrum quos..</p>
<a role="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
<a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
</div>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!-- Frame Modal Bottom Success-->
<!-- Side Modal Top Right Success-->
<div class="modal fade right" id="sideModalTRSuccessDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
data-backdrop="false">
<div class="modal-dialog modal-side modal-top-right modal-notify modal-success" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading lead">Modal Success</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="text-center">
<i class="fa fa-check fa-4x mb-3 animated rotateIn"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis
ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga,
enim, ab officiis totam.
</p>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<a role="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
<a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!-- Side Modal Top Right Success-->
<!-- Side Modal Top Left Info-->
<div class="modal fade left" id="sideModalTLInfoDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
data-backdrop="false">
<div class="modal-dialog modal-side modal-top-left modal-notify modal-info" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading lead">Modal Info</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<img src="https://mdbootstrap.com/wp-content/uploads/2016/11/admin-dashboard-bootstrap.jpg" alt="Material Design for Bootstrap - dashboard" class="img-fluid">
<div class="text-center">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt vero illo error eveniet cum.
</p>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<a role="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
<a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!-- Side Modal Top Left Info-->
<!-- Side Modal Bottom Right Danger-->
<div class="modal fade right" id="sideModalBRDangerDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
data-backdrop="false">
<div class="modal-dialog modal-side modal-bottom-right modal-notify modal-danger" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading">Modal Danger</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="row">
<div class="col-3">
<p></p>
<p class="text-center"><i class="fa fa-shopping-cart fa-4x"></i></p>
</div>
<div class="col-9">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus
sunt earum.</p>
<h2><span class="badge">v52gs1</span></h2>
</div>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<a role="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
<a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!-- Side Modal Bottom Right Danger-->
<!-- Side Modal Bottom Left Warning-->
<div class="modal fade left" id="sideModalBLWarningDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
data-backdrop="false">
<div class="modal-dialog modal-side modal-bottom-left modal-notify modal-warning" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading">Modal Warning</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="row">
<div class="col-3 text-center">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg" alt="Michal Szymanski - founder of Material Design for Bootstrap"
class="img-fluid z-depth-1-half rounded-circle">
<div style="height: 10px"></div>
<p class="title mb-0">Jane</p>
<p class="text-muted " style="font-size: 13px">Consultant</p>
</div>
<div class="col-9">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus
sunt earum.</p>
<p class="card-text"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</strong></p>
</div>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<a role="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
<a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!-- Side Modal Bottom Left Warning-->
<!--Modal Form Login with Avatar Demo-->
<div class="modal fade" id="modalLoginAvatarDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog cascading-modal modal-avatar modal-sm" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%281%29.jpg" class="rounded-circle img-responsive" alt="Avatar photo">
</div>
<!--Body-->
<div class="modal-body text-center mb-1">
<h5 class="mt-1 mb-2">Maria Doe</h5>
<div class="md-form ml-0 mr-0">
<input type="password" type="text" id="form1" class="form-control ml-0">
<label for="form1" class="ml-0">Enter password</label>
</div>
<div class="text-center">
<button class="btn btn-cyan mt-1">Login <i class="fa fa-sign-in ml-1"></i></button>
</div>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal Form Login with Avatar Demo-->
<!--Modal: Login / Register Form Demo-->
<div class="modal fade" id="modalLRFormDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog cascading-modal" role="document">
<!--Content-->
<div class="modal-content">
<!--Modal cascading tabs-->
<div class="modal-c-tabs">
<!-- Nav tabs -->
<ul class="nav nav-tabs tabs-2 light-blue darken-3" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#panel17" role="tab"><i class="fa fa-user mr-1"></i> Login</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#panel18" role="tab"><i class="fa fa-user-plus mr-1"></i> Register</a>
</li>
</ul>
<!-- Tab panels -->
<div class="tab-content">
<!--Panel 17-->
<div class="tab-pane fade in show active" id="panel17" role="tabpanel">
<!--Body-->
<div class="modal-body mb-1">
<div class="md-form form-sm">
<i class="fa fa-envelope prefix"></i>
<input type="text" id="form2" class="form-control">
<label for="form2">Your email</label>
</div>
<div class="md-form form-sm">
<i class="fa fa-lock prefix"></i>
<input type="password" id="form3" class="form-control">
<label for="form3">Your password</label>
</div>
<div class="text-center mt-2">
<button class="btn btn-info">Log in <i class="fa fa-sign-in ml-1"></i></button>
</div>
</div>
<!--Footer-->
<div class="modal-footer">
<div class="options text-center text-md-right mt-1">
<p>Not a member? <a href="#" class="blue-text">Sign Up</a></p>
<p>Forgot <a href="#" class="blue-text">Password?</a></p>
</div>
<button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Close</button>
</div>
</div>
<!--/.Panel 7-->
<!--Panel 18-->
<div class="tab-pane fade" id="panel18" role="tabpanel">
<!--Body-->
<div class="modal-body">
<div class="md-form form-sm">
<i class="fa fa-envelope prefix"></i>
<input type="text" id="form14" class="form-control">
<label for="form14">Your email</label>
</div>
<div class="md-form form-sm">
<i class="fa fa-lock prefix"></i>
<input type="password" id="form5" class="form-control">
<label for="form5">Your password</label>
</div>
<div class="md-form form-sm">
<i class="fa fa-lock prefix"></i>
<input type="password" id="form6" class="form-control">
<label for="form6">Repeat password</label>
</div>
<div class="text-center form-sm mt-2">
<button class="btn btn-info">Sign up <i class="fa fa-sign-in ml-1"></i></button>
</div>
</div>
<!--Footer-->
<div class="modal-footer">
<div class="options text-right">
<p class="pt-1">Already have an account? <a href="#" class="blue-text">Log In</a></p>
</div>
<button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Close</button>
</div>
</div>
<!--/.Panel 8-->
</div>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: Login / Register Form Demo-->
<!-- Central Modal Large Info-->
<div class="modal fade" id="centralModalLGInfoDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-notify modal-info" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading lead">Modal Info</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="text-center">
<i class="fa fa-check fa-4x mb-3 animated rotateIn"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis
ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga,
enim, ab officiis totam.
</p>
</div>
<img src="https://mdbootstrap.com/wp-content/uploads/2016/11/admin-dashboard-bootstrap.jpg" alt="Material Design for Bootstrap - dashboard" class="img-fluid">
</div>
<!--Footer-->
<div class="modal-footer">
<a role="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
<a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!-- Central Modal Large Info-->
<!-- Central Modal Fluid Success-->
<div class="modal fade" id="centralModalFluidSuccessDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-fluid modal-notify modal-success" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading lead">Modal Success</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="text-center">
<i class="fa fa-check fa-4x mb-3 animated rotateIn"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis
ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga,
enim, ab officiis totam.
</p>
</div>
<ul class="list-group z-depth-0">
<li class="list-group-item justify-content-between">
Cras justo odio
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item justify-content-between">
Dapibus ac facilisis in
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item justify-content-between">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
<li class="list-group-item justify-content-between">
Cras justo odio
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item justify-content-between">
Dapibus ac facilisis in
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item justify-content-between">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
</div>
<!--Footer-->
<div class="modal-footer">
<a role="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
<a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!-- Central Modal Fluid Success-->
<!-- Full Height Modal Right Success Demo-->
<div class="modal fade right" id="fluidModalRightSuccessDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true" data-backdrop="false">
<div class="modal-dialog modal-full-height modal-right modal-notify modal-success" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading lead">Modal Success</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="text-center">
<i class="fa fa-check fa-4x mb-3 animated rotateIn"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis
ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga,
enim, ab officiis totam.
</p>
</div>
<ul class="list-group z-depth-0">
<li class="list-group-item justify-content-between">
Cras justo odio
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item justify-content-between">
Dapibus ac facilisis in
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item justify-content-between">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
<li class="list-group-item justify-content-between">
Cras justo odio
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item justify-content-between">
Dapibus ac facilisis in
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item justify-content-between">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<a role="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
<a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!-- Full Height Modal Right Success Demo-->
<!-- Full Height Modal Left Info Demo-->
<div class="modal fade left" id="fluidModalLeftInfoDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
data-backdrop="false">
<div class="modal-dialog modal-full-height modal-left modal-notify modal-info" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading lead">Modal Success</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="text-center">
<i class="fa fa-check fa-4x mb-3 animated rotateIn"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis
ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga,
enim, ab officiis totam.
</p>
</div>
<ul class="list-group z-depth-0">
<li class="list-group-item justify-content-between">
Cras justo odio
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item justify-content-between">
Dapibus ac facilisis in
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item justify-content-between">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
<li class="list-group-item justify-content-between">
Cras justo odio
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item justify-content-between">
Dapibus ac facilisis in
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item justify-content-between">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<a role="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
<a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!-- Full Height Modal Right Info Demo-->
<!-- Full Height Modal Top Warning Demo-->
<div class="modal fade top" id="fluidModalTopWarningDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
data-backdrop="false">
<div class="modal-dialog modal-full-height modal-top modal-notify modal-warning" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading lead">Modal Warning</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="text-center">
<i class="fa fa-check fa-4x mb-3 animated rotateIn"></i>
</div>
<ul class="list-group z-depth-0">
<li class="list-group-item justify-content-between">
Cras justo odio
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item justify-content-between">
Dapibus ac facilisis in
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item justify-content-between">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
</div>
<!--Footer-->
<div class="modal-footer">
<a role="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
<a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!-- Full Height Modal Top Warning Demo-->
<!-- Full Height Modal Bottom Danger Demo-->
<div class="modal fade bottom" id="fluidModalBottomDangerDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true" data-backdrop="false">
<div class="modal-dialog modal-full-height modal-bottom modal-notify modal-danger" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading lead">Modal Danger</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="text-center">
<i class="fa fa-check fa-4x mb-3 animated rotateIn"></i>
</div>
<ul class="list-group z-depth-0">
<li class="list-group-item justify-content-between">
Cras justo odio
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item justify-content-between">
Dapibus ac facilisis in
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item justify-content-between">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
</div>
<!--Footer-->
<div class="modal-footer">
<a role="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
<a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!-- Full Height Modal Bottom Danger Demo-->
<!-- Central Modal Success Demo-->
<div class="modal fade" id="centralModalSuccessDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-notify modal-success" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading lead">Modal Success</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="text-center">
<i class="fa fa-check fa-4x mb-3 animated rotateIn"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis
ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga,
enim, ab officiis totam.
</p>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<a role="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
<a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!-- Central Modal Success Demo-->
<!-- Central Modal Info Demo-->
<div class="modal fade" id="centralModalInfoDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-notify modal-info" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading lead">Modal Info</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<img src="https://mdbootstrap.com/wp-content/uploads/2016/11/admin-dashboard-bootstrap.jpg" alt="Material Design for Bootstrap - dashboard" class="img-fluid">
<div class="text-center">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt vero illo error eveniet cum.
</p>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<a role="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
<a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!-- Central Modal Info Demo-->
<!-- Central Modal Danger Demo-->
<div class="modal fade" id="centralModalDangerDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-notify modal-danger" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading">Modal Danger</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="row">
<div class="col-3">
<p></p>
<p class="text-center"><i class="fa fa-shopping-cart fa-4x"></i></p>
</div>
<div class="col-9">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus
sunt earum.</p>
<h2><span class="badge">v52gs1</span></h2>
</div>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<a role="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
<a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!-- Central Modal Danger Demo-->
<!-- Central Modal Warning Demo-->
<div class="modal fade" id="centralModalWarningDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-notify modal-warning" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading">Modal Warning</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="row">
<div class="col-3 text-center">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg" alt="Michal Szymanski - founder of Material Design for Bootstrap"
class="img-fluid z-depth-1-half rounded-circle">
<div style="height: 10px"></div>
<p class="title mb-0">Jane</p>
<p class="text-muted " style="font-size: 13px">Consultant</p>
</div>
<div class="col-9">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus
sunt earum.</p>
<p class="card-text"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</strong></p>
</div>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<a role="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
<a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!-- Central Modal Warning Demo-->
<!--Modal: New User-->
<div class="modal fade right" id="modalBFDemoNewUser" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
data-backdrop="false">
<div class="modal-dialog modal-side modal-bottom-right modal-notify modal-info" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading">Welcome to MDBootstrap!</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="row">
<div class="col-3 text-center">
<img src="https://mdbootstrap.com/img/Others/Modals/michal.jpg" alt="Michal Szymanski - founder of Material Design for Bootstrap"
class="img-fluid z-depth-1-half rounded-circle">
<div style="height: 10px"></div>
<p class="title mb-0">Michal</p>
<p class="text-muted " style="font-size: 13px">MDB Founder</p>
</div>
<div class="col-9">
<p><strong>Hey there!</strong></p>
<p>We're happy to see that you're getting involved.</p>
<p>How about <strong>we help you in getting more</strong> out of all this awesomeness?</p>
</div>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<a href="https://mdbootstrap.com/bootstrap-tutorial/" class="btn btn-primary-modal">Start tutorial <i class="fa fa-code ml-1"></i></a>
<a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: New User-->
<!--Modal: 10% Discount-->
<div class="modal fade right" id="modalBFDemoDiscount" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
data-backdrop="false">
<div class="modal-dialog modal-side modal-bottom-right modal-notify modal-danger" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading">Discount offer: <strong>10% off</strong></p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="row">
<div class="col-3">
<p></p>
<p class="text-center"><i class="fa fa-gift fa-4x"></i></p>
</div>
<div class="col-9">
<p>Sharing is caring. Therefore, from time to time we like to give our visitors small gifts.
Today is one of those days.</p>
<p><strong>Copy the following code and use it at the checkout. It's valid for <u>one day</u>.</strong></p>
<h2><span class="badge">v52gs1</span></h2>
</div>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<a href="https://mdbootstrap.com/product/material-design-for-bootstrap-pro/" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
<a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: 10% Discount-->
<!--Modal: Subscription-->
<div class="modal fade" id="modalBFDemoSubscription" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog cascading-modal z-depth-1" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header light-blue darken-3 white-text">
<h4 class="title"><i class="fa fa-newspaper-o"></i> Don’t miss important updates</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body mb-0">
<p class="lead text-center">Subscribe to our newsletter</p>
<div class="md-form form-sm">
<i class="fa fa-lock prefix"></i>
<input type="password" id="form16" class="form-control">
<label for="form16">Your name</label>
</div>
<div class="md-form form-sm">
<i class="fa fa-envelope prefix"></i>
<input type="text" id="form17" class="form-control">
<label for="form17">Your email</label>
</div>
<div class="text-center mt-1-half">
<button class="btn btn-info">Submit <i class="fa fa-check ml-1"></i></button>
<button class="btn btn-outline-info waves-effect" data-dismiss="modal">No, thanks</button>
</div>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: Subscription-->
</section>
<!--Section: Additional Modals-->
<!--Section: Predefined templates modals-->
<section>
<!--Modal: modalCookie-->
<div class="modal fade top" id="modalCookie" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
data-backdrop="false">
<div class="modal-dialog modal-frame modal-top modal-notify modal-info" role="document">
<!--Content-->
<div class="modal-content">
<!--Body-->
<div class="modal-body">
<div class="row d-flex justify-content-center align-items-center">
<p class="pt-3 pr-2">We use cookies to improve your website experience</p>
<a role="button" class="btn btn-primary-modal">Learn more <i class="fa fa-book ml-1"></i></a>
<a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">Ok, thanks</a>
</div>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: modalCookie-->
<!--Modal: modalCoupon-->
<div class="modal fade top" id="modalCoupon" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
data-backdrop="false">
<div class="modal-dialog modal-frame modal-top modal-notify modal-success" role="document">
<!--Content-->
<div class="modal-content">
<!--Body-->
<div class="modal-body">
<div class="row d-flex justify-content-center align-items-center">
<h2><span class="badge">v52gs1</span></h2>
<p class="pt-3 mx-4">We have a gift for you! Use this code to get a <strong>10% discount</strong>.</p>
<a role="button" class="btn btn-primary-modal">Get it <i class="fa fa-book ml-1"></i></a>
<a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
</div>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: modalCoupon-->
<!--Modal: modalDiscount-->
<div class="modal fade right" id="modalDiscount" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
data-backdrop="false">
<div class="modal-dialog modal-side modal-bottom-right modal-notify modal-danger" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading">Discount offer: <strong>10% off</strong></p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="row">
<div class="col-3">
<p></p>
<p class="text-center"><i class="fa fa-gift fa-4x"></i></p>
</div>
<div class="col-9">
<p>Sharing is caring. Therefore, from time to time we like to give our visitors small gifts.
Today is one of those days.</p>
<p><strong>Copy the following code and use it at the checkout. It's valid for <u>one day</u>.</strong></p>
<h2><span class="badge">v52gs1</span></h2>
</div>
</div>
</div>
<!--Footer-->
<div class="modal-footer flex-center">
<a href="https://mdbootstrap.com/product/material-design-for-bootstrap-pro/" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
<a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: modalDiscount-->
<!--Modal: modalRelatedContent-->
<div class="modal fade right" id="modalRelatedContent" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
data-backdrop="false">
<div class="modal-dialog modal-side modal-bottom-right modal-notify modal-info" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading">Related article</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="row">
<div class="col-5">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(55).jpg" class="img-fluid" alt="Material Design for Bootstrap - example photo">
</div>
<div class="col-7">
<p><strong>My travel to paradise</strong></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit [...]</p>
<button type="button" class="btn btn-primary btn-md">Read more</button>
</div>
</div>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: modalRelatedContent-->
<!-- Modal: modalAbandonedCart-->
<div class="modal fade right" id="modalAbandonedCart" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
data-backdrop="false">
<div class="modal-dialog modal-side modal-bottom-right modal-notify modal-info" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading">Product in the cart
</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="row">
<div class="col-3">
<p></p>
<p class="text-center"><i class="fa fa-shopping-cart fa-4x"></i></p>
</div>
<div class="col-9">
<p>Do you need more time to make a purchase decision?</p>
<p>No pressure, your product will be waiting for you in the cart.</p>
</div>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<a role="button" class="btn btn-primary-modal">Go to cart</a>
<a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">Cancel</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!-- Modal: modalAbandonedCart-->
<!--Modal: modalConfirmDelete-->
<div class="modal fade" id="modalConfirmDelete" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm modal-notify modal-danger" role="document">
<!--Content-->
<div class="modal-content text-center">
<!--Header-->
<div class="modal-header d-flex justify-content-center">
<p class="heading">Are you sure?</p>
</div>
<!--Body-->
<div class="modal-body">
<i class="fa fa-times fa-4x animated rotateIn"></i>
</div>
<!--Footer-->
<div class="modal-footer flex-center">
<a href="https://mdbootstrap.com/product/material-design-for-bootstrap-pro/" class="btn btn-outline-secondary-modal">Yes</a>
<a role="button" class="btn btn-primary-modal waves-effect" data-dismiss="modal">No</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: modalConfirmDelete-->
<!-- Modal: modalPoll -->
<div class="modal fade right" id="modalPoll" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"
data-backdrop="false">
<div class="modal-dialog modal-full-height modal-right modal-notify modal-info" role="document">
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading lead">Feedback request
</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="text-center">
<i class="fa fa-file-text-o fa-4x mb-3 animated rotateIn"></i>
<p><strong>Your opinion matters</strong></p>
<p>Have some ideas how to improve our product? <strong></strong>Give us your feedback.</strong>
</p>
</div>
<hr>
<!-- Radio -->
<p class="text-center"><strong>Your rating</strong></p>
<div class="form-group">
<input name="group1" type="radio" id="radio-1">
<label for="radio-1">Very good</label>
</div>
<div class="form-group">
<input name="group1" type="radio" id="radio-2">
<label for="radio-2">Good</label>
</div>
<div class="form-group">
<input name="group1" type="radio" id="radio-3">
<label for="radio-3">Mediocre</label>
</div>
<div class="form-group">
<input name="group1" type="radio" id="radio-4">
<label for="radio-4">Bad</label>
</div>
<div class="form-group">
<input name="group1" type="radio" id="radio-4">
<label for="radio-4">Very bad</label>
</div>
<!-- Radio -->
<p class="text-center"><strong>What could we improve?</strong></p>
<!--Basic textarea-->
<div class="md-form">
<textarea type="text" id="form7" class="md-textarea"></textarea>
<label for="form7">Your message</label>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<a role="button" class="btn btn-primary-modal waves-effect waves-light">Send <i class="fa fa-paper-plane ml-1"></i></a>
<a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">Cancel</a>
</div>
</div>
</div>
</div>
<!-- Modal: modalPoll -->
<!-- Modal: modalCart -->
<div class="modal fade" id="modalCart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Your cart</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Product name</th>
<th>Price</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Product 1</td>
<td>100$</td>
<td><a><i class="fa fa-remove"></i></a></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Product 2</td>
<td>100$</td>
<td><a><i class="fa fa-remove"></i></a></td>
</tr>
<tr>
<th scope="row">3</th>
<td>Product 3</td>
<td>100$</td>
<td><a><i class="fa fa-remove"></i></a></td>
</tr>
<tr>
<th scope="row">4</th>
<td>Product 4</td>
<td>100$</td>
<td><a><i class="fa fa-remove"></i></a></td>
</tr>
<tr class="total">
<th scope="row">5</th>
<td>Total</td>
<td>400$</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<!--Footer-->
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Close</button>
<button class="btn btn-primary">Checkout</button>
</div>
</div>
</div>
</div>
<!-- Modal: modalCart -->
<!--Modal: modalPush-->
<div class="modal fade" id="modalPush" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-notify modal-info" role="document">
<!--Content-->
<div class="modal-content text-center">
<!--Header-->
<div class="modal-header d-flex justify-content-center">
<p class="heading">Be always up to date</p>
</div>
<!--Body-->
<div class="modal-body">
<i class="fa fa-bell fa-4x animated rotateIn mb-4"></i>
<p>Do you want to receive the push notification about the newest posts?</p>
</div>
<!--Footer-->
<div class="modal-footer flex-center">
<a href="https://mdbootstrap.com/product/material-design-for-bootstrap-pro/" class="btn btn-primary-modal ">Yes</a>
<a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: modalPush-->
<!--Modal: modalYT-->
<div class="modal fade" id="modalYT" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<!--Content-->
<div class="modal-content">
<!--Body-->
<div class="modal-body mb-0 p-0">
<div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/A3PDXmYoF5U" allowfullscreen></iframe>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<span class="mr-4">Spread the word!</span>
<a role="button" class="btn-floating btn-sm btn-fb"><i class="fa fa-facebook"></i></a>
<!--Twitter-->
<a role="button" class="btn-floating btn-sm btn-tw"><i class="fa fa-twitter"></i></a>
<!--Google +-->
<a role="button" class="btn-floating btn-sm btn-gplus"><i class="fa fa-google-plus"></i></a>
<!--Linkedin-->
<a role="button" class="btn-floating btn-sm btn-ins"><i class="fa fa-linkedin"></i></a>
<button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Close</button>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: modalYT-->
<!--Modal: modalVM-->
<div class="modal fade" id="modalVM" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<!--Content-->
<div class="modal-content">
<!--Body-->
<div class="modal-body mb-0 p-0">
<div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
<iframe class="embed-responsive-item" src="https://player.vimeo.com/video/115098447" allowfullscreen></iframe>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<span class="mr-4">Spread the word!</span>
<a role="button" class="btn-floating btn-sm btn-fb"><i class="fa fa-facebook"></i></a>
<!--Twitter-->
<a role="button" class="btn-floating btn-sm btn-tw"><i class="fa fa-twitter"></i></a>
<!--Google +-->
<a role="button" class="btn-floating btn-sm btn-gplus"><i class="fa fa-google-plus"></i></a>
<!--Linkedin-->
<a role="button" class="btn-floating btn-sm btn-ins"><i class="fa fa-linkedin"></i></a>
<button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Close</button>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: modalVM-->
<!-- Modal: modalQuickView -->
<div class="modal fade" id="modalQuickView" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="row">
<div class="col-lg-5">
<!--Carousel Wrapper-->
<div id="carousel-thumb" class="carousel slide carousel-fade carousel-thumbnails" data-ride="carousel">
<!--Slides-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="http://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(23).jpg" alt="First slide">
</div>
<div class="carousel-item">
<img src="http://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(24).jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img src="http://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(25).jpg" alt="Third slide">
</div>
</div>
<!--/.Slides-->
<!--Thumbnails-->
<a class="carousel-control-prev" href="#carousel-thumb" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-thumb" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--/.Thumbnails-->
</div>
<!--/.Carousel Wrapper-->
</div>
<div class="col-lg-7">
<h2 class="h2-responsive product-name"><strong>Product Name</strong></h2>
<h4 class="h4-responsive"><span class="green-text"><strong>$49</strong></span> <span class="grey-text"><small><s>$89</s></small></span></h4>
<!--Accordion wrapper-->
<div class="accordion" id="accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<h5 class="mb-0">
Description <i class="fa fa-angle-down rotate-icon"></i>
</h5>
</a>
</div>
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente nesciunt atque nemo neque ut officiis nostrum incidunt
maiores, magni optio et sunt suscipit iusto nisi totam quis, nobis mollitia
necessitatibus.
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<h5 class="mb-0">
Details <i class="fa fa-angle-down rotate-icon"></i>
</h5>
</a>
</div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente nesciunt atque nemo neque ut officiis nostrum incidunt
maiores, magni optio et sunt suscipit iusto nisi totam quis, nobis mollitia
necessitatibus.
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingThree">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<h5 class="mb-0">
Shipping <i class="fa fa-angle-down rotate-icon"></i>
</h5>
</a>
</div>
<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente nesciunt atque nemo neque ut officiis nostrum incidunt
maiores, magni optio et sunt suscipit iusto nisi totam quis, nobis mollitia
necessitatibus.
</div>
</div>
</div>
</div>
<!--/.Accordion wrapper-->
<!-- Add to Cart -->
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="md-form">
<select class="mdb-select colorful-select dropdown-primary">
<option value="" disabled selected>Choose your option</option>
<option value="1">White</option>
<option value="2">Black</option>
<option value="3">Pink</option>
</select>
<label>Select color</label>
</div>
</div>
<div class="col-md-6">
<div class="md-form">
<select class="mdb-select colorful-select dropdown-primary">
<option value="" disabled selected>Choose your option</option>
<option value="1">XS</option>
<option value="2">S</option>
<option value="3">L</option>
</select>
<label>Select size</label>
</div>
</div>
</div>
<div class="text-center">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button class="btn btn-primary">Add to cart<i class="fa fa-cart-plus ml-2" aria-hidden="true"></i></button>
</div>
</div>
<!-- /.Add to Cart -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal: modalQuickView -->
<!--Modal: modalSocial-->
<div class="modal fade" id="modalSocial" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog cascading-modal" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header light-blue darken-3 white-text">
<h4 class="title"><i class="fa fa-users"></i> Spreed the word!</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<!--Body-->
<div class="modal-body mb-0 text-center">
<!--Facebook-->
<a role="button" class="btn-floating btn-fb"><i class="fa fa-facebook"></i></a>
<!--Twitter-->
<a role="button" class="btn-floating btn-tw"><i class="fa fa-twitter"></i></a>
<!--Google +-->
<a role="button" class="btn-floating btn-gplus"><i class="fa fa-google-plus"></i></a>
<!--Linkedin-->
<a role="button" class="btn-floating btn-li"><i class="fa fa-linkedin"></i></a>
<!--Instagram-->
<a role="button" class="btn-floating btn-ins"><i class="fa fa-instagram"></i></a>
<!--Pinterest-->
<a role="button" class="btn-floating btn-pin"><i class="fa fa-pinterest"></i></a>
<!--Youtube-->
<a role="button" class="btn-floating btn-yt"><i class="fa fa-youtube"></i></a>
<!--Dribbble-->
<a role="button" class="btn-floating btn-dribbble"><i class="fa fa-dribbble"></i></a>
<!--Vkontakte-->
<a role="button" class="btn-floating btn-vk"><i class="fa fa-vk"></i></a>
<!--Stack Overflow-->
<a role="button" class="btn-floating btn-so"><i class="fa fa-stack-overflow"></i></a>
<!--Slack-->
<a role="button" class="btn-floating btn-slack"><i class="fa fa-slack"></i></a>
<!--Github-->
<a role="button" class="btn-floating btn-git"><i class="fa fa-github"></i></a>
<!--Comments-->
<a role="button" class="btn-floating btn-comm"><i class="fa fa-comments"></i></a>
<!--Email-->
<a role="button" class="btn-floating btn-email"><i class="fa fa-envelope"></i></a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: modalSocial-->
</section>
<!--Section: Predefined templates modals-->
<!-- SECTION: Demo-->
<section id="liveDemo">
<!--Section: Position & Sizes-->
<section>
<h2 class="doc-title mt-0">Position & Sizes</h2>
<div class="text-center mb-5">
<p class="lead">Click buttons below to launch modals demo</p>
</div>
<!-- First row-->
<div class="row">
<!--First column-->
<div class="col-md-3">
<h5 class="text-center mb-3">Frame Modal</h5>
<img src="https://mdbootstrap.com/img/brandflow/modal4.jpg" alt="MDB graphics" class="img-fluid z-depth-1">
<div class="text-center">
<h5 class="my-3">Position</h5>
<a class="btn btn-primary" data-toggle="modal" data-target="#frameModalTopInfoDemo" data-backdrop="false">Top</a> <br>
<a class="btn btn-primary mb-3" data-toggle="modal" data-target="#frameModalBottomSuccessDemo" data-backdrop="false">Bottom</a>
</div>
</div>
<!--First column-->
<!--Second column-->
<div class="col-md-3">
<h5 class="text-center mb-3">Side Modal</h5>
<img src="https://mdbootstrap.com/img/brandflow/modal3.jpg" alt="MDB graphics" class="img-fluid z-depth-1">
<div class="text-center">
<h5 class="my-3">Position</h5>
<a class="btn btn-primary" data-toggle="modal" data-target="#sideModalTRSuccessDemo" data-backdrop="false">Top Right</a> <br>
<a class="btn btn-primary" data-toggle="modal" data-target="#sideModalTLInfoDemo">Top Left</a> <br>
<a class="btn btn-primary" data-toggle="modal" data-target="#sideModalBRDangerDemo">Bottom Right</a> <br>
<a class="btn btn-primary mb-3" data-toggle="modal" data-target="#sideModalBLWarningDemo">Bottom Left</a>
</div>
</div>
<!--Second column-->
<!--Third column-->
<div class="col-md-3">
<h5 class="text-center mb-3">Central Modal</h5>
<img src="https://mdbootstrap.com/img/brandflow/modal2.jpg" alt="MDB graphics" class="img-fluid z-depth-1">
<div class="text-center">
<h5 class="my-3">Size</h5>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalLoginAvatarDemo">Small </button> <br>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalLRFormDemo">Medium </button> <br>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#centralModalLGInfoDemo">Large </button> <br>
<button type="button" class="btn btn-primary mb-3" data-toggle="modal" data-target="#centralModalFluidSuccessDemo">Fluid </button>
</div>
</div>
<!--Third column-->
<!--Fourth column-->
<div class="col-md-3">
<h5 class="text-center mb-3">Fluid Modal</h5>
<img src="https://mdbootstrap.com/img/brandflow/modal1.jpg" alt="MDB graphics" class="img-fluid z-depth-1">
<div class="text-center">
<h5 class="my-3">Position</h5>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#fluidModalRightSuccessDemo">Right</button> <br>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#fluidModalLeftInfoDemo">Left</button> <br>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#fluidModalTopWarningDemo">Top</button> <br>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#fluidModalBottomDangerDemo">Bottom</button>
</div>
</div>
<!--Fourth column-->
</div>
<!-- /.First row-->
</section>
<!--/Section: Position & Sizes-->
<!--Section: Styles-->
<section>
<h2 class="doc-title mt-3">Styles examples</h2>
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-md-6">
<div class="text-center">
<a href="" class="btn btn-default btn-rounded" data-toggle="modal" data-target="#centralModalSuccessDemo">Launch Modal Success <i class="fa fa-eye ml-1"></i></a>
</div>
<!--Modal: mdb-abandonedCart-hard-->
<div class="modal-dialog modal-notify modal-success" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading lead">Modal Success</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="text-center">
<i class="fa fa-check fa-4x mb-3 animated rotateIn"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam
blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat.
Esse ratione fuga, enim, ab officiis totam.</p>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<a role="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
<a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-6">
<div class="text-center">
<a href="" class="btn btn-default btn-rounded" data-toggle="modal" data-target="#centralModalInfoDemo">Launch Modal Info <i class="fa fa-eye ml-1"></i></a>
</div>
<!--Modal: mdb-abandonedCart-hard-->
<div class="modal-dialog modal-notify modal-info" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading lead">Modal Info</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<img src="https://mdbootstrap.com/wp-content/uploads/2016/11/admin-dashboard-bootstrap.jpg" alt="Material Design for Bootstrap - dashboard" class="img-fluid">
<div class="text-center">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt vero illo error eveniet
cum.
</p>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<a role="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
<a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
</div>
</div>
<!--/.Content-->
</div>
<!--/Modal: mdb-abandonedCart-hard-->
</div>
<!--/Second column-->
</div>
<!--/First row-->
<!--Second row-->
<div class="row">
<!--First column-->
<div class="col-md-6">
<div class="text-center">
<a href="" class="btn btn-default btn-rounded" data-toggle="modal" data-target="#centralModalDangerDemo">Launch Modal Danger <i class="fa fa-eye ml-1"></i></a>
</div>
<!--Modal: mdb-abandonedCart-hard-->
<div class="modal-dialog modal-notify modal-danger" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading">Modal Danger</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="row">
<div class="col-3">
<p></p>
<p class="text-center"><i class="fa fa-shopping-cart fa-4x"></i></p>
</div>
<div class="col-9">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident
temporibus sunt earum.</p>
<h2><span class="badge">v52gs1</span></h2>
</div>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<a role="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
<a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-6">
<div class="text-center">
<a href="" class="btn btn-default btn-rounded" data-toggle="modal" data-target="#centralModalWarningDemo">Launch Modal Warning <i class="fa fa-eye ml-1"></i></a>
</div>
<!--Modal: mdb-abandonedCart-hard-->
<div class="modal-dialog modal-notify modal-warning" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading">Modal Warning</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="row">
<div class="col-3 text-center">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg" alt="Michal Szymanski - founder of Material Design for Bootstrap"
class="img-fluid z-depth-1-half rounded-circle">
<div style="height: 10px"></div>
<p class="title mb-0">Jane</p>
<p class="text-muted " style="font-size: 13px">Consultant</p>
</div>
<div class="col-9">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident
temporibus sunt earum.</p>
<p class="card-text"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</strong></p>
</div>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<a role="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
<a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--/Second column-->
</div>
<!--/Second row-->
</section>
<!--Section: Styles-->
<!--Section: Forms-->
<section>
<h2 class="doc-title">Forms Examples</h2>
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-md-6">
<div class="text-center">
<a href="" class="btn btn-default btn-rounded mb-4" data-toggle="modal" data-target="#modalContactForm">Launch Modal Contact Form <i class="fa fa-eye ml-1"></i></a>
</div>
<!--Modal: Contact form-->
<div class="modal-dialog cascading-modal" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header light-blue darken-3 white-text">
<h4 class="title"><i class="fa fa-pencil"></i> Contact form</h4>
<button type="button" class="close waves-effect waves-light" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body mb-0">
<div class="md-form form-sm">
<i class="fa fa-envelope prefix"></i>
<input type="text" id="form8" class="form-control">
<label for="form8">Your name</label>
</div>
<div class="md-form form-sm">
<i class="fa fa-lock prefix"></i>
<input type="password" id="form9" class="form-control">
<label for="form9">Your email</label>
</div>
<div class="md-form form-sm">
<i class="fa fa-tag prefix"></i>
<input type="text" id="form10" class="form-control">
<label for="form10">Subject</label>
</div>
<div class="md-form form-sm">
<i class="fa fa-pencil prefix"></i>
<textarea type="text" id="form8" class="md-textarea mb-0"></textarea>
<label for="form8">Your message</label>
</div>
<div class="text-center mt-1-half">
<button class="btn btn-info mb-2">Send <i class="fa fa-send ml-1"></i></button>
</div>
</div>
</div>
<!--/.Content-->
</div>
<!--/Modal: Contact form-->
</div>
<!--/First column-->
<!--First column-->
<div class="col-md-6">
<div class="text-center">
<a href="" class="btn btn-default btn-rounded mb-4" data-toggle="modal" data-target="#modalSubscription">Launch Modal Subscription Form <i class="fa fa-eye ml-1"></i></a>
</div>
<!--Modal: Subscription-->
<div class="modal-dialog cascading-modal" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header light-blue darken-3 white-text">
<h4 class="title"><i class="fa fa-newspaper-o"></i> Subscription form</h4>
<button type="button" class="close waves-effect waves-light" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body mb-0">
<div class="md-form form-sm">
<i class="fa fa-lock prefix"></i>
<input type="password" id="form16" class="form-control">
<label for="form16">Your name</label>
</div>
<div class="md-form form-sm">
<i class="fa fa-envelope prefix"></i>
<input type="text" id="form17" class="form-control">
<label for="form17">Your email</label>
</div>
<div class="text-center mt-1-half">
<button class="btn btn-info mb-1">Submit <i class="fa fa-check ml-1"></i></button>
</div>
</div>
</div>
<!--/.Content-->
</div>
<!--/Modal: Subscription-->
</div>
<!--/First column-->
</div>
<!--/First row-->
<!--Second row-->
<div class="row">
<!--Second column-->
<div class="col-md-12">
<div class="text-center">
<a href="" class="btn btn-default btn-rounded" data-toggle="modal" data-target="#modalLoginAvatar">Launch Modal Login with Avatar <i class="fa fa-eye ml-1"></i></a>
</div>
<!--Modal: Avatar-->
<div class="modal-dialog modal-sm cascading-modal modal-avatar" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%281%29.jpg" class="rounded-circle img-responsive" alt="Avator photo">
</div>
<!--Body-->
<div class="modal-body text-center mb-1">
<h5 class="mt-1 mb-2">Maria Doe</h5>
<div class="md-form ml-0 mr-0">
<input type="password" type="text" id="form18" class="form-control ml-0">
<label for="form18" class="ml-0">Enter password</label>
</div>
<div class="text-center">
<button class="btn btn-cyan mt-1">Login <i class="fa fa-sign-in ml-1"></i></button>
</div>
</div>
</div>
<!--/.Content-->
</div>
<!--/Modal: Avatar-->
</div>
<!--/Second column-->
</div>
<!--/Second row-->
<p class="text-center font-weight-bold mt-5">More modal form templates you can find in <a href="https://mdbootstrap.com/javascript/bootstrap-modal-form/">Modal Forms documentation</a>.</p>
</section>
<!--Section: Forms-->
<!--Section: Predefined-->
<section class="text-center">
<h2 class="doc-title">Predefined templates</h2>
<p><strong>Click buttons below to launch modals demo</strong></p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalCookie">Cookies</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalCoupon">Coupon</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalDiscount">Discount</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalRelatedContent">Related content</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalAbandonedCart">Abandoned cart</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalConfirmDelete">Confirm delete</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalPoll">Poll</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalCart">Cart</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalPush">Push</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalYT">YouTube</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalVM">Vimeo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalQuickView">Product</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalSocial">Social share</button>
</section>
<!--Section: Predefined-->
</section>
<!-- /SECTION: Demo-->
<div class="text-center darken-grey-text my-4">
<h3 class="font-bold mb-3">Here you can find more Modals Examples:</h3>
<a class="btn btn-danger" href="https://mdbootstrap.com/javascript/modals/" target="_blank">Bootstrap Modals</a>
</div>
</div>
!
