<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<style>
.md-form .prefix {
float: left;
position: relative;
width: 0;
}
.view:not(.hm-zoom) {
overflow:visible;
}
/* Animations */
.wow {
visibility: hidden;
}
.btn-group {
display:inline-flex;
}
</style>
<!--Main layout-->
<main class="mt-2">
<div class="container text-center">
<h3 class="mb-2 wow fadeIn" data-wow-delay="0.2s">Material Design for Bootstrap 4 or 3</h3>
<p class="lead mb-2 wow fadeIn" data-wow-delay="0.2s">This presentation shows a small part of components and features available in Material Design for Bootstrap. <strong>To see all of them have a look at our full demo.</strong></p>
<h4 class="mb-2 wow fadeIn" data-wow-delay="0.3s">Full demo & download</h4>
<!--First row-->
<div class="row wow fadeIn" data-wow-delay="0.4s">
<!--First column-->
<div class="col-md-8 offset-md-2">
<!--Featured image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Mockups/Horizontal/6-col/mdb2.jpg" class="img-fluid">
<a target="_blank" href="http://mdbootstrap.com/material-design-for-bootstrap/">
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<!--Excerpt-->
<a target="_blank" href="http://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-primary btn-lg mt-3 mb-2"><i class="fa fa-download left"></i> Free download</a>
</div>
<!--/First column-->
</div>
<!--/First row-->
<hr class="wow fadeIn" data-wow-delay="0.4s">
<!--Section: Buttons-->
<section class="section mb-3 mt-3 wow fadeIn" data-wow-delay="0.4s">
<!--Section heading-->
<h1 class="section-heading">Buttons</h1>
<!--Component title-->
<h5 class="mb-3">Basic buttons</h5>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-default">Default</button>
<!-- Secondary, outline button -->
<button type="button" class="btn btn-secondary">Secondary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!--Component title-->
<h5 class="mt-3 mb-3">Additional buttons</h5>
<!--Elegant-->
<button type="button" class="btn btn-elegant">Elegant</button>
<!--Unique-->
<button type="button" class="btn btn-unique">Unique</button>
<!--Pink-->
<button type="button" class="btn btn-pink">Pink</button>
<!--Purple-->
<button type="button" class="btn btn-purple">Purple</button>
<!--Deep-purple-->
<button type="button" class="btn btn-deep-purple">Deep-purple</button>
<!--Indigo-->
<button type="button" class="btn btn-indigo">Indigo</button>
<!--Cyan-->
<button type="button" class="btn btn-cyan">Cyan</button>
<!--Light-green-->
<button type="button" class="btn btn-light-green">Light-green</button>
<!--Lime-->
<button type="button" class="btn btn-lime">Lime</button>
<!--Yellow-->
<button type="button" class="btn btn-yellow">Yellow</button>
<!--Amber-->
<button type="button" class="btn btn-amber">Amber</button>
<!--Orange-->
<button type="button" class="btn btn-orange">Orange</button>
<!--Deep-orange-->
<button type="button" class="btn btn-deep-orange">Deep-orange</button>
<!--Brown-->
<button type="button" class="btn btn-brown">Brown</button>
<!--Blue-grey-->
<button type="button" class="btn btn-blue-grey">Blue-grey</button>
<!--MDB-->
<button type="button" class="btn btn-mdb">MDB</button>
<!--Dark-green-->
<button type="button" class="btn btn-dark-green">Dark-green</button>
<!--Component title-->
<h5 class="mt-3 mb-3">Outline buttons</h5>
<button type="button" class="btn btn-outline-primary waves-effect">Primary</button>
<button type="button" class="btn btn-outline-default waves-effect">Default</button>
<button type="button" class="btn btn-outline-secondary waves-effect">Secondary</button>
<button type="button" class="btn btn-outline-success waves-effect">Success</button>
<button type="button" class="btn btn-outline-info waves-effect">Info</button>
<button type="button" class="btn btn-outline-warning waves-effect">Warning</button>
<button type="button" class="btn btn-outline-danger waves-effect">Danger</button>
<!--Component title-->
<h5 class="mt-3 mb-3">Large and small buttons</h5>
<button type="button" class="btn btn-light-green btn-lg">Light-green</button>
<button type="button" class="btn btn-cyan btn-lg">Cyan</button>
<button type="button" class="btn btn-amber btn-lg">Amber</button>
<button type="button" class="btn btn-indigo btn-sm">Indigo</button>
<button type="button" class="btn btn-pink btn-sm">Pink</button>
<button type="button" class="btn btn-secondary btn-sm">Secondary</button>
<!--Component title-->
<h5 class="mt-3 mb-3">Checkbox and radio buttons</h5>
<!--Checkbox buttons-->
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div>
<!--/Checkbox buttons-->
<!--Radio buttons-->
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
</label>
</div>
<!--/Radio buttons-->
</section>
<!--/Section: Buttons-->
<hr class="wow fadeIn" data-wow-delay="0.4s">
<!--Section: Cards-->
<section class="mt-3 mb-3 wow fadeIn" data-wow-delay="0.4s">
<!--Section heading-->
<h1 class="section-heading mb-4">Cards</h1>
<!--Component title-->
<h5 class="mb-3">Classic cards</h5>
<!--First row-->
<div class="row text-left">
<!--First column-->
<div class="col-lg-4 col-md-12">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%2859%29.jpg" class="img-fluid" alt="">
<a href="#">
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title">Card title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#!" class="btn btn-info">Button</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--/First column-->
<!--Second column-->
<div class="col-lg-4 col-md-6">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%287%29.jpg" class="img-fluid" alt="">
<a href="#!">
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title">Card title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#!" class="btn btn-blue-grey">Button</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--/Second column-->
<!--Third column-->
<div class="col-lg-4 col-md-6">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(2).jpg" class="img-fluid" alt="">
<a href="#">
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title">Card title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--/Third column-->
</div>
<!--/First row-->
<!--Component title-->
<h5 class="text-center mt-3 mb-3">Cards group</h5>
<!--Second row-->
<div class="row">
<div class="col-md-12">
<div class="card-group">
<div class="card">
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%2813%29.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%2840%29.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%2842%29.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
<!--/Second row-->
</section>
<!--/Section: Cards-->
<hr class="wow fadeIn" data-wow-delay="0.4s">
<!--Section: Dropdowns-->
<section class="section wow fadeIn mt-3 mb-3" data-wow-delay="0.4s">
<!--Section heading-->
<h1 class="section-heading">Dropdown</h1>
<div class="btn-group">
<div class="dropdown">
<button class="btn btn-cyan dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Basic dropdown</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-pink">Action</button>
<button type="button" class="btn btn-pink dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group dropup">
<button type="button" class="btn btn-purple">Dropup</button>
<button type="button" class="btn btn-purple dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group">
<div class="dropdown">
<button class="btn btn-blue-grey dropdown-toggle" type="button" id="dropdownMenu5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Disabled
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu5">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item disabled" href="#">Disabled link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
</div>
</div>
</section>
<!--/Section: Dropdowns-->
<hr class="wow fadeIn" data-wow-delay="0.4s">
<!--Section: Inputs-->
<section class="section mt-3 wow fadeIn" data-wow-delay="0.4s">
<!--Section heading-->
<h1 class="section-heading">Inputs</h1>
<!--Component title-->
<h5 class="text-center mb-3">Input fields</h5>
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-md-6 mb-3">
<div class="md-form">
<input type="text" id="form1" class="form-control">
<label for="form1" class="">Example label</label>
</div>
</div>
<!--First column-->
<!--Second column-->
<div class="col-md-6 mb-3">
<div class="md-form">
<input placeholder="Placeholder" type="text" id="form5" class="form-control">
<label class="active" for="form5">Example label</label>
</div>
</div>
<!--/Second column-->
</div>
<!--/First row-->
<!--Second row-->
<div class="row">
<!--First column-->
<div class="col-md-6 mb-3">
<div class="md-form">
<input value="John Doe" type="text" id="form6" class="form-control">
<label class="active" for="form6">Example label</label>
</div>
</div>
<!--First column-->
<!--Second column-->
<div class="col-md-6 mb-3">
<div class="md-form">
<input type="text" id="form11" class="form-control" disabled>
<label for="form11" class="disabled">Disabled</label>
</div>
</div>
<!--/Second column-->
</div>
<!--/Second row-->
<!--Third row-->
<div class="row">
<!--First column-->
<div class="col-md-6 mb-3">
<div class="md-form">
<i class="fa fa-tag prefix"></i>
<input type="text" id="form2" class="form-control">
<label for="form2">Example label</label>
</div>
</div>
<!--First column-->
<!--Second column-->
<div class="col-md-6 mb-3">
<div class="md-form">
<i class="fa fa-user prefix"></i>
<input type="text" id="form3" class="form-control">
<label for="form3">Example label</label>
</div>
</div>
<!--/Third column-->
</div>
<!--/Second row-->
<!--Component title-->
<h5 class="text-center mb-3">Error or Success Messages</h5>
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-md-6 mb-3">
<div class="md-form">
<i class="fa fa-envelope prefix"></i>
<input type="email" id="form9" class="form-control validate">
<label for="form9" data-error="wrong" data-success="right">Type your email</label>
</div>
</div>
<!--First column-->
<!--Second column-->
<div class="col-md-6 mb-3">
<div class="md-form">
<i class="fa fa-lock prefix"></i>
<input type="password" id="form10" class="form-control validate">
<label for="form10" data-error="wrong" data-success="right">Type your password</label>
</div>
</div>
<!--/Second column-->
</div>
<!--/First row-->
<!--Component title-->
<h5 class="text-center mb-3">Textarea</h5>
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-md-6 mb-1">
<div class="md-form">
<textarea type="text" id="form7" class="md-textarea"></textarea>
<label for="form7">Basic textarea</label>
</div>
</div>
<!--First column-->
<!--Second column-->
<div class="col-md-6 mb-1">
<div class="md-form">
<i class="fa fa-pencil prefix"></i>
<textarea type="text" id="form8" class="md-textarea"></textarea>
<label for="form8">Icon Prefix</label>
</div>
</div>
<!--/Second column-->
</div>
<!--/First row-->
</section>
<!--/Section: Inputs-->
<hr class="wow fadeIn" data-wow-delay="0.4s">
<!--Section: Carousels-->
<section class="section wow fadeIn mt-3 mb-3" data-wow-delay="0.4s">
<!--Section heading-->
<h1 class="section-heading">Carousels</h1>
<h5 class="mb-3">Classic carousel</h5>
<!--Carousel Wrapper-->
<div id="carousel-example-1z" class="carousel slide carousel-fade wow fadeIn z-depth-1-half" data-wow-delay="0.4s" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-1z" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-1z" data-slide-to="1"></li>
<li data-target="#carousel-example-1z" data-slide-to="2"></li>
</ol>
<!--/.Indicators-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<!--First slide-->
<div class="carousel-item active">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(1).jpg" class="img-fluid" alt="First slide">
</div>
<!--/First slide-->
<!--Second slide-->
<div class="carousel-item">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(10).jpg" class="img-fluid" alt="Second slide">
</div>
<!--/Second slide-->
<!--Third slide-->
<div class="carousel-item">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(3).jpg" class="img-fluid" alt="Third slide">
</div>
<!--/Third slide-->
</div>
<!--/.Slides-->
<!--Controls-->
<a class="carousel-control-prev" href="#carousel-example-1z" 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-example-1z" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--/.Controls-->
</div>
<!--/.Carousel Wrapper-->
<h5 class="mt-3 mb-3">Classic carousel with captions</h5>
<!--Carousel Wrapper-->
<div id="carousel-example-2" class="carousel slide carousel-fade wow fadeIn z-depth-1-half" data-wow-delay="0.4s" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-2" data-slide-to="1"></li>
<li data-target="#carousel-example-2" data-slide-to="2"></li>
</ol>
<!--/.Indicators-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt="First slide">
<div class="carousel-caption">
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(67).jpg" alt="Second slide">
<div class="carousel-caption">
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(69).jpg" alt="Third slide">
<div class="carousel-caption">
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<!--/.Slides-->
<!--Controls-->
<a class="carousel-control-prev" href="#carousel-example-2" 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-example-2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--/.Controls-->
</div>
<!--/.Carousel Wrapper-->
<h5 class="mt-3 mb-3">Video Carousel </h5>
<!--Carousel Wrapper-->
<div id="video-carousel-example" class="carousel slide carousel-fade z-depth-1-half" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#video-carousel-example" data-slide-to="0" class="active"></li>
<li data-target="#video-carousel-example" data-slide-to="1"></li>
<li data-target="#video-carousel-example" data-slide-to="2"></li>
</ol>
<!--/.Indicators-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<video class="video-fluid black" autoplay loop>
<source src="https://mdbootstrap.com/img/video/Strum-Away.mp4" type="video/mp4" />
</video>
</div>
<div class="carousel-item">
<video class="video-fluid black" autoplay loop>
<source src="https://mdbootstrap.com/img/video/Beach-Ball.mp4" type="video/mp4" />
</video>
</div>
<div class="carousel-item">
<video class="video-fluid brown" autoplay loop>
<source src="https://mdbootstrap.com/img/video/Nature-Sunset.mp4" type="video/mp4" />
</video>
</div>
</div>
<!--/.Slides-->
<!--Controls-->
<a class="carousel-control-prev" href="#video-carousel-example" 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="#video-carousel-example" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--/.Controls-->
</div>
<!--/.Carousel Wrapper-->
</section>
<!--/Section: Carousels-->
<hr class="wow fadeIn" data-wow-delay="0.4s">
<!--Section: SideNav-->
<section class="section wow fadeIn mt-3 mb-2" data-wow-delay="0.4s">
<!--Section heading-->
<h1 class="section-heading">Skins</h1>
<p class="mb-3">Click on the images below to see live preview</p>
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-md-6 mb-3">
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/screens/skins/skin1.jpg" alt="" class="img-fluid">
<a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/white-skin.html">
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<h3 class="mt-3 mb-2">White Skin</h3>
<a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/white-skin.html" class="btn btn-info mt-1">Live preview</a>
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-6 mb-3">
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/screens/skins/skin6.jpg" alt="" class="img-fluid">
<a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/navy-blue-skin.html">
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<h3 class="mt-3 mb-2">Navy Blue Skin</h3>
<a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/navy-blue-skin.html" class="btn btn-info mt-1">Live preview</a>
</div>
<!--/Second column-->
</div>
<!--/First row-->
<!--Second row-->
<div class="row">
<!--First column-->
<div class="col-md-6 mb-3">
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/screens/skins/skin5.jpg" alt="" class="img-fluid">
<a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/deep-purple-skin.html">
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<h3 class="mt-3 mb-2">Deep Purple Skin</h3>
<a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/deep-purple-skin.html" class="btn btn-info mt-1">Live preview</a>
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-6 mb-3">
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/screens/skins/skin9.jpg" alt="" class="img-fluid">
<a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/light-blue-skin.html">
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<h3 class="mt-3 mb-2">Light Blue Skin</h3>
<a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/light-blue-skin.html" class="btn btn-info mt-1">Live preview</a>
</div>
<!--/Second column-->
</div>
<!--/Second row-->
<!--Third row-->
<div class="row">
<!--First column-->
<div class="col-md-6 mb-3">
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/screens/skins/skin3.jpg" alt="" class="img-fluid">
<a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/cyan-skin.html">
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<h3 class="mt-3 mb-2">Cyan Skin</h3>
<a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/cyan-skin.html" class="btn btn-info mt-1">Live preview</a>
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-6 mb-3">
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/screens/skins/skin10.jpg" alt="" class="img-fluid">
<a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/grey-skin.html">
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<h3 class="mt-3 mb-2">Grey Skin</h3>
<a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/grey-skin.html" class="btn btn-info mt-1">Live preview</a>
</div>
<!--/Second column-->
</div>
<!--Third row-->
<!--Fourth row-->
<div class="row">
<!--First column-->
<div class="col-md-6 mb-3">
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/screens/skins/skin7.jpg" alt="" class="img-fluid">
<a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/pink-skin.html">
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<h3 class="mt-3 mb-2">Pink Skin</h3>
<a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/pink-skin.html" class="btn btn-info mt-1">Live preview</a>
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-6 mb-3">
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/screens/skins/skin4.jpg" alt="" class="img-fluid">
<a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/mdb-skin.html">
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<h3 class="mt-3 mb-2">MDB Skin</h3>
<a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/mdb-skin.html" class="btn btn-info mt-1">Live preview</a>
</div>
<!--/Second column-->
</div>
<!--/Fourth row-->
<!--Fifth row-->
<div class="row">
<!--First column-->
<div class="col-md-6 mb-1">
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/screens/skins/skin2.jpg" alt="" class="img-fluid">
<a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/black-skin.html">
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<h3 class="mt-3 mb-2">Black Skin</h3>
<a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/black-skin.html" class="btn btn-info mt-1">Live preview</a>
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-6 mb-1">
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/screens/skins/skin8.jpg" alt="" class="img-fluid">
<a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/indigo-skin.html">
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<h3 class="mt-3 mb-2">Indigo Skin</h3>
<a href="https://mdbootstrap.com/live/_MDB/index/docs/skins/indigo-skin.html" class="btn btn-info mt-1">Live preview</a>
</div>
<!--/Second column-->
</div>
<!--/Fifth row-->
</section>
<!--/Section: SideNav-->
<hr class="wow fadeIn" data-wow-delay="0.4s">
<!--Section: Navbars-->
<section class="section mt-3 mb-3 wow fadeIn" data-wow-delay="0.4s">
<!--Section heading-->
<h1 class="section-heading">Navbars</h1>
<!--Navbar blue-->
<nav class="navbar navbar-toggleable-md navbar-dark bg-primary mb-3">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav1" aria-controls="navbarNav1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<strong>Navbar</strong>
</a>
<div class="collapse navbar-collapse" id="navbarNav1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link waves-effect waves-light">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect waves-light">Features</a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect waves-light">Pricing</a>
</li>
<li class="nav-item dropdown btn-group">
<a class="nav-link dropdown-toggle waves-effect waves-light" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu dropdown" aria-labelledby="dropdownMenu1">
<a class="dropdown-item waves-effect waves-light">Action</a>
<a class="dropdown-item waves-effect waves-light">Another action</a>
<a class="dropdown-item waves-effect waves-light">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline waves-effect waves-light">
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
</div>
</nav>
<!--/.Navbar blue-->
<!--Navbar purple-->
<nav class="navbar navbar-toggleable-md navbar-dark secondary-color-dark mb-3">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav2" aria-controls="navbarNav2" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<strong>Navbar</strong>
</a>
<div class="collapse navbar-collapse" id="navbarNav2">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link waves-effect waves-light">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect waves-light">Features</a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect waves-light">Pricing</a>
</li>
<li class="nav-item dropdown btn-group">
<a class="nav-link dropdown-toggle waves-effect waves-light" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu dropdown-secondary" aria-labelledby="dropdownMenu2">
<a class="dropdown-item waves-effect waves-light">Action</a>
<a class="dropdown-item waves-effect waves-light">Another action</a>
<a class="dropdown-item waves-effect waves-light">Something else here</a>
</div>
</li>
</ul>
<ul class="navbar-nav ml-auto nav-flex-icons">
<li class="nav-item">
<a class="nav-link waves-effect waves-light"><i class="fa fa-twitter"></i></a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect waves-light"><i class="fa fa-google-plus"></i></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle waves-effect waves-light" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user"></i></a>
<div class="dropdown-menu dropdown-secondary dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item waves-effect waves-light" href="#">Action</a>
<a class="dropdown-item waves-effect waves-light" href="#">Another action</a>
<a class="dropdown-item waves-effect waves-light" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<!--/.Navbar purple-->
<!--Navbar green-->
<nav class="navbar navbar-toggleable-md navbar-dark default-color mb-3">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav3" aria-controls="navbarNav3" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<strong>Navbar</strong>
</a>
<div class="collapse navbar-collapse" id="navbarNav3">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link waves-effect waves-light"><i class="fa fa-envelope"></i> Contact</a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect waves-light"><i class="fa fa-gear"></i> Settings</a>
</li>
<li class="nav-item dropdown btn-group">
<a class="nav-link dropdown-toggle waves-effect waves-light" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user"></i> Profile</a>
<div class="dropdown-menu dropdown-default dropdown-menu-left" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item waves-effect waves-light" href="#">Action</a>
<a class="dropdown-item waves-effect waves-light" href="#">Another action</a>
<a class="dropdown-item waves-effect waves-light" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<!--/.Navbar green-->
<!--Navbar orange-->
<nav class="navbar navbar-toggleable-md navbar-dark warning-color-dark">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav4" aria-controls="navbarNav4" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<strong>Navbar</strong>
</a>
<div class="collapse navbar-collapse" id="navbarNav4">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link waves-effect waves-light">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect waves-light">Features</a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect waves-light">Pricing</a>
</li>
<li class="nav-item dropdown btn-group">
<a class="nav-link dropdown-toggle waves-effect waves-light" id="dropdownMenu4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu dropdown-warning" aria-labelledby="dropdownMenu4">
<a class="dropdown-item waves-effect waves-light">Action</a>
<a class="dropdown-item waves-effect waves-light">Another action</a>
<a class="dropdown-item waves-effect waves-light">Something else here</a>
</div>
</li>
</ul>
<ul class="navbar-nav ml-auto nav-flex-icons">
<li class="nav-item">
<a class="nav-link waves-effect waves-light">1 <i class="fa fa-envelope"></i></a>
</li>
</ul>
</div>
</div>
</nav>
<!--/.Navbar orange-->
<!--Component title-->
<h5 class="text-center mt-3 mb-3">Breadcrumbs</h5>
<ol class="breadcrumb">
<li class="breadcrumb-item active">Home</li>
</ol>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active">Library</li>
</ol>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active">Data</li>
</ol>
<!-- /.Live preview-->
<!-- Live preview-->
<nav class="navbar navbar-dark stylish-color mb-1">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active white-text">Data</li>
</ol>
</nav>
<!-- /.Live preview-->
<!-- Live preview-->
<nav class="navbar navbar-light teal lighten-5">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active">Data</li>
</ol>
</nav>
</section>
<!--/Section: Navbars-->
<hr class="wow fadeIn" data-wow-delay="0.4s">
<!--Section: Forms-->
<section class="mt-3 mb-1">
<!--Section heading-->
<h1 class="section-heading mb-4">Forms</h1>
<!--Component title-->
<h5 class="mb-5">Forms with header</h5>
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-md-6 mb-2">
<!--Form with header-->
<div class="card">
<div class="card-block">
<!--Header-->
<div class="form-header purple darken-4">
<h3><i class="fa fa-lock"></i> Login:</h3>
</div>
<!--Body-->
<div class="md-form">
<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">
<i class="fa fa-lock prefix"></i>
<input type="password" id="form4" class="form-control">
<label for="form4">Your password</label>
</div>
<div class="text-center">
<button class="btn btn-deep-purple">Login</button>
</div>
</div>
<!--Footer-->
<div class="modal-footer">
<div class="options">
<p>Not a member? <a href="#">Sign Up</a></p>
<p>Forgot <a href="#">Password?</a></p>
</div>
</div>
</div>
<!--/Form with header-->
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-6">
<!--Form with header-->
<div class="card">
<div class="card-block">
<!--Header-->
<div class="form-header blue-gradient">
<h3><i class="fa fa-user"></i> Register:</h3>
</div>
<!--Body-->
<div class="md-form">
<i class="fa fa-user prefix"></i>
<input type="text" id="form3" class="form-control">
<label for="form3">Your name</label>
</div>
<div class="md-form">
<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">
<i class="fa fa-lock prefix"></i>
<input type="password" id="form4" class="form-control">
<label for="form4">Your password</label>
</div>
<div class="text-center">
<button class="btn btn-indigo">Sign up</button>
</div>
</div>
</div>
<!--/Form with header-->
</div>
<!--Second column-->
</div>
<!--/First row-->
<!--Component title-->
<h5 class="text-center mt-2 mb-3">Forms without header</h5>
<!--Second row-->
<div class="row">
<!--First column-->
<div class="col-md-6">
<!--Form without header-->
<div class="card">
<div class="card-block">
<!--Header-->
<div class="text-center">
<h3><i class="fa fa-lock"></i> Login:</h3>
<hr class="mt-2 mb-2">
</div>
<!--Body-->
<div class="md-form">
<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">
<i class="fa fa-lock prefix"></i>
<input type="password" id="form4" class="form-control">
<label for="form4">Your password</label>
</div>
<div class="text-center">
<button class="btn btn-deep-purple">Login</button>
</div>
</div>
<!--Footer-->
<div class="modal-footer">
<div class="options">
<p>Not a member? <a href="#">Sign Up</a></p>
<p>Forgot <a href="#">Password?</a></p>
</div>
</div>
</div>
<!--/Form without header-->
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-6">
<!--Form without header-->
<div class="card">
<div class="card-block">
<!--Header-->
<div class="text-center">
<h3><i class="fa fa-pencil"></i> Subscribe:</h3>
<hr class="mt-2 mb-2">
</div>
<!--Body-->
<p>We'll write rarely, but only the best content.</p>
<br>
<!--Body-->
<div class="md-form">
<i class="fa fa-user prefix"></i>
<input type="text" id="form3" class="form-control">
<label for="form3">Your name</label>
</div>
<div class="md-form">
<i class="fa fa-envelope prefix"></i>
<input type="text" id="form2" class="form-control">
<label for="form2">Your email</label>
</div>
<div class="text-center">
<button class="btn btn-deep-orange">Send</button>
</div>
</div>
</div>
<!--/Form without header-->
</div>
<!--Second column-->
</div>
<!--/Second row-->
<!--Component title-->
<h5 class="text-center mt-3 mb-3">Naked forms</h5>
<!--Third row-->
<div class="row">
<!--Second column-->
<div class="col-md-6">
<!--Naked Form-->
<div class="card-block">
<!--Header-->
<div class="text-center">
<h3><i class="fa fa-envelope"></i> Write to us:</h3>
<hr class="mt-2 mb-2">
</div>
<!--Body-->
<p>We'll write rarely, but only the best content.</p>
<br>
<!--Body-->
<div class="md-form">
<i class="fa fa-user prefix"></i>
<input type="text" id="form3" class="form-control">
<label for="form3">Your name</label>
</div>
<div class="md-form">
<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">
<i class="fa fa-tag prefix"></i>
<input type="text" id="form32" class="form-control">
<label for="form34">Subject</label>
</div>
<div class="md-form">
<i class="fa fa-pencil prefix"></i>
<textarea type="text" id="form8" class="md-textarea"></textarea>
<label for="form8">Icon Prefix</label>
</div>
<div class="text-center">
<button class="btn btn-default">Submit</button>
<div class="call">
<br>
<p>Or would you prefer to call?
<br>
<span><i class="fa fa-phone"> </i></span> + 01 234 565 280</p>
</div>
</div>
</div>
<!--Naked Form-->
</div>
<!--Second column-->
<!--First column-->
<div class="col-md-6">
<!--Naked Form-->
<div class="card-block">
<!--Header-->
<div class="text-center">
<h3><i class="fa fa-lock"></i> Login:</h3>
<hr class="mt-2 mb-2">
</div>
<!--Body-->
<div class="md-form">
<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">
<i class="fa fa-lock prefix"></i>
<input type="password" id="form4" class="form-control">
<label for="form4">Your password</label>
</div>
<div class="text-center">
<button class="btn btn-deep-purple">Login</button>
</div>
</div>
<!--Footer-->
<div class="modal-footer">
<div class="options">
<p>Not a member? <a href="#">Sign Up</a></p>
<p>Forgot <a href="#">Password?</a></p>
</div>
</div>
<!--Naked Form-->
</div>
<!--/First column-->
</div>
<!--/Third row-->
</section>
<!--/Section: Navbars-->
<hr class="wow fadeIn" data-wow-delay="0.4s">
<!--Section: Masks-->
<section class="section text-center mt-3 mb-3 wow fadeIn" data-wow-delay="0.4s">
<!--Section heading-->
<h1 class="section-heading">Masks</h1>
<!--Component title-->
<h5 class="mb-3">Patterns</h5>
<!--First row-->
<div class="row">
<div class="col-md-6 mb-2">
<div class="view">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(28).jpg" class="img-fluid" alt="">
<div class="mask flex-center">
<p class="white-text">no mask</p>
</div>
</div>
</div>
<div class="col-md-6 mb-2">
<div class="view">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(28).jpg" class="img-fluid" alt="">
<div class="mask pattern-1 flex-center">
<p class="white-text">.pattern-1</p>
</div>
</div>
</div>
</div>
<!--/First row-->
<!--Second row-->
<div class="row">
<div class="col-md-6 mb-2">
<div class="view">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(28).jpg" class="img-fluid" alt="">
<div class="mask pattern-2 flex-center">
<p class="white-text">.pattern-2</p>
</div>
</div>
</div>
<div class="col-md-6 mb-2">
<div class="view">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(28).jpg" class="img-fluid" alt="">
<div class="mask pattern-3 flex-center">
<p class="white-text">.pattern-3</p>
</div>
</div>
</div>
</div>
<!--/Second row-->
<!--Third row-->
<div class="row">
<div class="col-md-6 mb-2">
<div class="view">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(28).jpg" class="img-fluid" alt="">
<div class="mask pattern-4 flex-center">
<p class="white-text">.pattern-4</p>
</div>
</div>
</div>
<div class="col-md-6 mb-2">
<div class="view">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(28).jpg" class="img-fluid" alt="">
<div class="mask pattern-5 flex-center">
<p class="white-text">.pattern-5</p>
</div>
</div>
</div>
</div>
<!--/Third row-->
<!--Fourth row-->
<div class="row">
<div class="col-md-6 mb-2">
<div class="view">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(28).jpg" class="img-fluid" alt="">
<div class="mask pattern-8 flex-center">
<p class="white-text">.pattern-8</p>
</div>
</div>
</div>
<div class="col-md-6 mb-2">
<div class="view">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(28).jpg" class="img-fluid" alt="">
<div class="mask pattern-6 flex-center">
<p class="white-text">.pattern-6</p>
</div>
</div>
</div>
</div>
<!--/Fourth row-->
<!--Fifth row-->
<div class="row">
<div class="col-md-6 mb-2">
<div class="view">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(28).jpg" class="img-fluid" alt="">
<div class="mask pattern-7 flex-center">
<p class="white-text">.pattern-7</p>
</div>
</div>
</div>
<div class="col-md-6 mb-2">
<div class="view">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(28).jpg" class="img-fluid" alt="">
<div class="mask pattern-9 flex-center">
<p class="white-text">.pattern-9</p>
</div>
</div>
</div>
</div>
<!--/Fifth row-->
<!--Component title-->
<h5 class="mt-1 mb-3">Overlays</h5>
<!-- Live preview-->
<div class="row mb-2">
<div class="col-md-12">
<div class="view">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(85).jpg" class="img-fluid" alt="">
<div class="mask flex-center">
<h2 class="white-text">no overlay</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="view hm-black-light">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(28).jpg" class="img-fluid" alt="">
<div class="mask flex-center">
<p class="white-text">light overlay</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="view hm-black-strong">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(28).jpg" class="img-fluid" alt="">
<div class="mask flex-center">
<p class="white-text">strong overlay</p>
</div>
</div>
</div>
</div>
<!--Life preview-->
</section>
<!--/Section: Masks-->
<hr class="wow fadeIn" data-wow-delay="0.4s">
<!--Section: Typography-->
<section class="section mt-3 mb-3 wow fadeIn" data-wow-delay="0.4s">
<!--Section heading-->
<h1 class="section-heading ">Typography</h1>
<!--Component title-->
<h5 class="mb-3 text-center">Notifications</h5>
<!--First row-->
<div class="row text-left">
<!--First column-->
<div class="col-md-12">
<!--Notifications-->
<blockquote class="blockquote bq-primary">
<p class="bq-title">Info notification</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores quibusdam dignissimos itaque harum illo! Quidem, corporis at quae tempore nisi impedit cupiditate perferendis nesciunt, ex dolores doloremque! Sit, rem, in?</p>
</blockquote>
<blockquote class="blockquote bq-warning">
<p class="bq-title">Warning notification</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores quibusdam dignissimos itaque harum illo! Quidem, corporis at quae tempore nisi impedit cupiditate perferendis nesciunt, ex dolores doloremque! Sit, rem, in?</p>
</blockquote>
<blockquote class="blockquote bq-success">
<p class="bq-title">Success notification</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores quibusdam dignissimos itaque harum illo! Quidem, corporis at quae tempore nisi impedit cupiditate perferendis nesciunt, ex dolores doloremque! Sit, rem, in?</p>
</blockquote>
<blockquote class="blockquote bq-danger">
<p class="bq-title">Danger notification</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores quibusdam dignissimos itaque harum illo! Quidem, corporis at quae tempore nisi impedit cupiditate perferendis nesciunt, ex dolores doloremque! Sit, rem, in?</p>
</blockquote>
<!--Notifications-->
</div>
<!--/First column-->
</div>
<!--/First row-->
<!--Second row-->
<div class="row text-left">
<!--First column-->
<div class="col-md-6 mt-3">
<!--Component title-->
<h5 class="mb-3">Display headings</h5>
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-6 mt-3">
<!--Component title-->
<h5 class="mb-3">Responsive headings</h5>
<h1 class="h1-responsive">h1. heading</h1>
<h2 class="h2-responsive">h2. heading</h2>
<h3 class="h3-responsive">h3. heading</h3>
<h4 class="h4-responsive">h4. heading</h4>
<h5 class="h5-responsive">h5. heading</h5>
</div>
<!--/Second column-->
</div>
<!--/Second row-->
<!--Component title-->
<h5 class="mt-3 mb-2">Blockquotes</h5>
<!--Third row-->
<div class="row text-left">
<!--First column-->
<div class="col-md-12">
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, dolorem. Nulla illum, earum illo, expedita necessitatibus sunt autem aspernatur sit sequi excepturi molestiae dolore, doloribus nesciunt voluptas exercitationem ipsa perferendis?</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
<!--/First column-->
</div>
<!--/Third row-->
<!--Component title-->
<h5 class="mt-3 mb-2 text-center">Text color</h5>
<p class="lead mb-2 text-center">MDBootstrap allows you to simply set the text color. All you have to to is add one of our classes:</p>
<!--Fourth row-->
<div class="row text-left">
<!--First column-->
<div class="col-md-12">
<p class="red-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p class="pink-text">Impedit architecto, totam hic sunt eum odio, deleniti.</p>
<p class="purple-text">Similique ex, expedita minus assumenda a magni beatae dolorum itaque.</p>
<p class="deep-purple-text">Veritatis eum libero nam, adipisci, necessitatibus eos.</p>
<p class="indigo-text">Sapiente, ea. Molestias sunt nihil saepe numquam quas perferendis.</p>
<p class="blue-text">Sapiente sit, possimus maiores, quo alias corporis cum eum nesciunt.</p>
<p class="light-blue-text">Corrupti adipisci, praesentium iusto eos, iure debitis modi.</p>
<p class="cyan-text">Odio autem veritatis aliquam consequuntur ea voluptatibus.</p>
<p class="teal-text">Similique, adipisci ea, sequi magnam sit inventore.</p>
<p class="green-text">Eos et vitae, odit deserunt dignissimos voluptas.</p>
<p class="light-green-text">Fugit nihil numquam inventore accusantium tenetur ex est.</p>
<p class="lime-text">Sed odit inventore illum excepturi officia, reiciendis numquam modi.</p>
<p class="yellow-text">At odio animi distinctio, aut enim tempora nobis error odit mollitia.</p>
<p class="amber-text">Quo at accusamus vel earum hic, inventore non, minima sint.</p>
<p class="orange-text">Iusto odit eos distinctio temporibus voluptates ad, illo repellat.</p>
<p class="deep-orange-text">Quas fugit fuga assumenda nihil esse et culpa reiciendis voluptatum.</p>
<p class="brown-text">Excepturi iusto amet sunt illo ad debitis quibusdam eius, consequatur.</p>
<p class="grey-text">Non sint nulla incidunt, odit repellat tempore, veniam ratione fugit.</p>
<p class="blue-grey-text">Eius, provident. Quo similique, repellat atque voluptas explicabo odio.</p>
<p class="mdb-color white-text">In consequuntur error, non consequatur expedita maxime dolorum.</p>
</div>
<!--/First column-->
</div>
<!--/Fourth row-->
</section>
<!--/Section: Typography-->
<hr class="wow fadeIn" data-wow-delay="0.4s">
<!--Section: Icons-->
<section class="mt-3 mb-3 wow fadeIn" data-wow-delay="0.4s">
<!--Section heading-->
<h1 class="section-heading pb-4">Icons</h1>
<!--First row-->
<div class="row mb-3">
<!--First column-->
<div class="col-md-3">
<ul>
<li><i class="fa fa-camera-retro fa-lg mb-1 deep-purple-text"></i> fa-lg</li>
<li><i class="fa fa-camera-retro fa-2x mb-1 deep-purple-text"></i> fa-2x</li>
<li><i class="fa fa-camera-retro fa-3x mb-1 deep-purple-text"></i> fa-3x</li>
<li><i class="fa fa-camera-retro fa-4x mb-1 deep-purple-text"></i> fa-4x</li>
<li><i class="fa fa-camera-retro fa-5x mb-1 deep-purple-text"></i> fa-5x</li>
</ul>
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-3">
<ul>
<li><i class="fa fa-heart-o fa-lg mb-1 red-text"></i> fa-lg</li>
<li><i class="fa fa-heart-o fa-2x mb-1 red-text"></i> fa-2x</li>
<li><i class="fa fa-heart-o fa-3x mb-1 red-text"></i> fa-3x</li>
<li><i class="fa fa-heart-o fa-4x mb-1 red-text"></i> fa-4x</li>
<li><i class="fa fa-heart-o fa-5x mb-1 red-text"></i> fa-5x</li>
</ul>
</div>
<!--/Second column-->
<!--Third column-->
<div class="col-md-3">
<ul>
<li><i class="fa fa-umbrella fa-lg mb-1 cyan-text"></i> fa-lg</li>
<li><i class="fa fa-umbrella fa-2x mb-1 cyan-text"></i> fa-2x</li>
<li><i class="fa fa-umbrella fa-3x mb-1 cyan-text"></i> fa-3x</li>
<li><i class="fa fa-umbrella fa-4x mb-1 cyan-text"></i> fa-4x</li>
<li><i class="fa fa-umbrella fa-5x mb-1 cyan-text"></i> fa-5x</li>
</ul>
</div>
<!--/Third column-->
<!--Fourth column-->
<div class="col-md-3">
<ul>
<li><i class="fa fa-snapchat-ghost fa-lg mb-1 amber-text"></i> fa-lg</li>
<li><i class="fa fa-snapchat-ghost fa-2x mb-1 amber-text"></i> fa-2x</li>
<li><i class="fa fa-snapchat-ghost fa-3x mb-1 amber-text"></i> fa-3x</li>
<li><i class="fa fa-snapchat-ghost fa-4x mb-1 amber-text"></i> fa-4x</li>
<li><i class="fa fa-snapchat-ghost fa-5x mb-1 amber-text"></i> fa-5x</li>
</ul>
</div>
<!--/Fourth column-->
</div>
<!--/First row-->
<!--Second row-->
<div class="row text-center">
<div class="col-md-12">
<p class="lead">To see the full list of available icons click the button below</p>
</div>
<div class="col-md-12">
<div class="flex-center">
<a href="https://mdbootstrap.com/css/icons-list/" class="btn btn-info">Icons list</a>
</div>
</div>
</div>
<!--/Second row-->
</section>
<!--/Section: Icons-->
<hr class="wow fadeIn" data-wow-delay="0.4s">
<!--Section: Animations-->
<section class="section mt-3 mb-3 wow fadeIn" data-wow-delay="0.4s">
<!--Section heading-->
<h1 class="section-heading">Animations</h1>
<p class="lead"><strong>Over 70 CSS animations</strong> </p>
<p class="mt-3 mb-3">Bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.</p>
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-md-4 wow bounceInUp">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(58).jpg" alt="" class="img-fluid">
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-4 wow tada">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(32).jpg" alt="" class="img-fluid">
</div>
<!--/Second column-->
<!--Third column-->
<div class="col-md-4 wow fadeInLeft">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(33).jpg" alt="" class="img-fluid">
</div>
<!--/Third column-->
</div>
<!--/First row-->
<br>
<!--Second row-->
<div class="row">
<!--First column-->
<div class="col-md-4 wow fadeInRight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(3).jpg" alt="" class="img-fluid">
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-4 wow fadeInUp" data-wow-delay="0.2s">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(10).jpg" alt="" class="img-fluid">
</div>
<!--/Second column-->
<!--Third column-->
<div class="col-md-4 wow fadeInUp" data-wow-delay="0.6s">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(46).jpg" alt="" class="img-fluid">
</div>
<!--/Third column-->
</div>
<!--/Second row-->
</section>
<!--/Section: Animations-->
<hr class="wow fadeIn" data-wow-delay="0.4s">
<!--Section: Miscellaneous-->
<section class="section mt-3 mb-3 wow fadeIn" data-wow-delay="0.4s">
<!--Section heading-->
<h1 class="section-heading">Miscellaneous</h1>
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-md-5">
<!--Component title-->
<h5 class="mb-2">Paginations </h5>
<!--Pagination blue-->
<nav>
<ul class="pagination pg-blue">
<!--Arrow left-->
<li class="page-item">
<a class="page-link" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<!--Numbers-->
<li class="page-item active"><a class="page-link">1</a></li>
<li class="page-item"><a class="page-link">2</a></li>
<li class="page-item"><a class="page-link">3</a></li>
<li class="page-item"><a class="page-link">4</a></li>
<li class="page-item"><a class="page-link">5</a></li>
<!--Arrow right-->
<li class="page-item">
<a class="page-link" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<!--/Pagination blue-->
<!--Pagination red-->
<nav>
<ul class="pagination pg-red">
<!--Arrow left-->
<li class="page-item">
<a class="page-link" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<!--Numbers-->
<li class="page-item active"><a class="page-link">1</a></li>
<li class="page-item"><a class="page-link">2</a></li>
<li class="page-item"><a class="page-link">3</a></li>
<li class="page-item"><a class="page-link">4</a></li>
<li class="page-item"><a class="page-link">5</a></li>
<!--Arrow right-->
<li class="page-item">
<a class="page-link" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<!--/Pagination red-->
<!--Pagination teal-->
<nav>
<ul class="pagination pg-teal">
<!--Arrow left-->
<li class="page-item">
<a class="page-link" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<!--Numbers-->
<li class="page-item active"><a class="page-link">1</a></li>
<li class="page-item"><a class="page-link">2</a></li>
<li class="page-item"><a class="page-link">3</a></li>
<li class="page-item"><a class="page-link">4</a></li>
<li class="page-item"><a class="page-link">5</a></li>
<!--Arrow right-->
<li class="page-item">
<a class="page-link" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<!--/Pagination teal-->
<!--Pagination dark-->
<nav>
<ul class="pagination pg-dark">
<!--Arrow left-->
<li class="page-item">
<a class="page-link" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<!--Numbers-->
<li class="page-item active"><a class="page-link">1</a></li>
<li class="page-item"><a class="page-link">2</a></li>
<li class="page-item"><a class="page-link">3</a></li>
<li class="page-item"><a class="page-link">4</a></li>
<li class="page-item"><a class="page-link">5</a></li>
<!--Arrow right-->
<li class="page-item">
<a class="page-link" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<!--/Pagination dark-->
<!--Pagination blue grey-->
<nav>
<ul class="pagination pg-bluegrey">
<!--Arrow left-->
<li class="page-item">
<a class="page-link" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<!--Numbers-->
<li class="page-item active"><a class="page-link">1</a></li>
<li class="page-item"><a class="page-link">2</a></li>
<li class="page-item"><a class="page-link">3</a></li>
<li class="page-item"><a class="page-link">4</a></li>
<li class="page-item"><a class="page-link">5</a></li>
<!--Arrow right-->
<li class="page-item">
<a class="page-link" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<!--/Pagination grey-->
<!--Pagination amber-->
<nav>
<ul class="pagination pg-amber">
<!--Arrow left-->
<li class="page-item">
<a class="page-link" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<!--Numbers-->
<li class="page-item active"><a class="page-link">1</a></li>
<li class="page-item"><a class="page-link">2</a></li>
<li class="page-item"><a class="page-link">3</a></li>
<li class="page-item"><a class="page-link">4</a></li>
<li class="page-item"><a class="page-link">5</a></li>
<!--Arrow right-->
<li class="page-item">
<a class="page-link" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<!--/Pagination amber-->
<!--Pagination purple-->
<nav>
<ul class="pagination pg-purple">
<!--Arrow left-->
<li class="page-item">
<a class="page-link" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<!--Numbers-->
<li class="page-item active"><a class="page-link">1</a></li>
<li class="page-item"><a class="page-link">2</a></li>
<li class="page-item"><a class="page-link">3</a></li>
<li class="page-item"><a class="page-link">4</a></li>
<li class="page-item"><a class="page-link">5</a></li>
<!--Arrow right-->
<li class="page-item">
<a class="page-link" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<!--/Pagination purple-->
<!--Pagination dark grey-->
<nav>
<ul class="pagination pg-darkgrey">
<!--Arrow left-->
<li class="page-item">
<a class="page-link" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<!--Numbers-->
<li class="page-item active"><a class="page-link">1</a></li>
<li class="page-item"><a class="page-link">2</a></li>
<li class="page-item"><a class="page-link">3</a></li>
<li class="page-item"><a class="page-link">4</a></li>
<li class="page-item"><a class="page-link">5</a></li>
<!--Arrow right-->
<li class="page-item">
<a class="page-link" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<!--/Pagination dark grey-->
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-7">
<!--Component title-->
<h5 class="mb-2">Tags </h5>
<h1>Example heading <span class="badge red">New</span></h1>
<h2>Example heading <span class="badge blue">New</span></h2>
<h3>Example heading <span class="badge black">New</span></h3>
<h4>Example heading <span class="badge green">New</span></h4>
<h5>Example heading <span class="badge grey">New</span></h5>
<h6>Example heading <span class="badge indigo">New</span></h6>
</div>
<!--/Second column-->
</div>
<!--/First row-->
</section>
<!--/Section: Miscellaneous-->
<hr class="wow fadeIn" data-wow-delay="0.4s">
<!--Section: Hover effects-->
<section class="mt-3 mb-4 wow fadeIn" data-wow-delay="0.4s">
<!--Section heading-->
<h1 class="section-heading pb-4"> Hover effects</h1>
<!--Component title-->
<h5 class="mb-3">Overlay effect</h5>
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-md-4">
<div class="view overlay hm-blue-light">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(75).jpg" class="img-fluid " alt="">
<div class="mask flex-center">
<p class="white-text">Light overlay</p>
</div>
</div>
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-4">
<div class="view overlay hm-red-strong">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(75).jpg" class="img-fluid " alt="">
<div class="mask flex-center">
<p class="white-text">Strong overlay</p>
</div>
</div>
</div>
<!--Second column-->
<!--Third column-->
<div class="col-md-4">
<div class="view overlay hm-green-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(75).jpg" class="img-fluid " alt="">
<div class="mask flex-center">
<p class="white-text">Super light overlay</p>
</div>
</div>
</div>
<!--/Third column-->
</div>
<!--/First row-->
<!--Second row-->
<div class="row">
<!--First column-->
<div class="col-md-6">
<h5 class="mt-3 mb-3">Zoom effect</h5>
<div class="view overlay hm-zoom">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(2).jpg" class="img-fluid " alt="">
<div class="mask flex-center">
<p class="white-text">Zoom effect</p>
</div>
</div>
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-6">
<h5 class="mt-3 mb-3">Shadow effect</h5>
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(32).jpg" class="img-fluid rounded-circle hoverable" alt="">
</div>
<!--/Second column-->
</div>
<!--/Second row-->
</section>
<!--/Section: Hover effects-->
<hr class="wow fadeIn" data-wow-delay="0.4s">
<!--Section: More-->
<section class="section text-center wow fadeIn" data-wow-delay="0.4s">
<!--Section heading-->
<h1 class="section-heading">...and many more</h1>
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-md-6 mb-r">
<!--Featured image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Mockups/Horizontal/6-col/section.jpg">
<a href="https://mdbootstrap.com/sections/">
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<!--Excerpt-->
<div class="card-block">
<h4 class="mt-1 mb-2">Sections</h4>
<a href="https://mdbootstrap.com/sections/" class="btn btn-info ">Live preview</a>
</div>
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-6 mb-r">
<!--Featured image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Mockups/Horizontal/6-col/templates.jpg">
<a href="https://mdbootstrap.com/templates-2/">
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<!--Excerpt-->
<div class="card-block">
<h4 class="mt-1 mb-2">Templates</h4>
<a href="https://mdbootstrap.com/templates-2/" class="btn btn-info ">Live preview</a>
</div>
</div>
<!--/Second column-->
<!--Third column-->
<div class="col-md-6 mb-r">
<!--Featured image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Mockups/Horizontal/6-col/css.jpg">
<a href="https://mdbootstrap.com/css/">
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<!--Excerpt-->
<div class="card-block">
<h4 class="mt-1 mb-2">CSS</h4>
<a href="https://mdbootstrap.com/css/" class="btn btn-info ">Live preview</a>
</div>
</div>
<!--/Third column-->
<!--Fourth column-->
<div class="col-md-6 mb-r">
<!--Featured image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Mockups/Horizontal/6-col/javascript.jpg">
<a href="https://mdbootstrap.com/javascript/">
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<!--Excerpt-->
<div class="card-block">
<h4 class="mt-1 mb-2">JavaScript plugins</h4>
<a href="https://mdbootstrap.com/javascript/" class="btn btn-info ">Live preview</a>
</div>
</div>
<!--/Fourth column-->
</div>
<!--/First row-->
</section>
<!--/Section: More-->
</div>
</main>
<!--/Main layout-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/js/mdb.min.js"></script>
<script>
//Animations on scroll
new WOW().init();
</script>
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css);
@import url(https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/css/mdb.min.css);
// Adds some data to charts
$(function() {
var data = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
datasets: [{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
}, {
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}]
};
var option = {
responsive: true,
scaleFontSize: 10,
};
//Chart 1
var ctx = document.getElementById("lineChartEx").getContext('2d');
var lineChart = new Chart(ctx).Line(data, option);
// Chart 2
var ctx = document.getElementById("radarChartEx").getContext('2d');
var radarChart = new Chart(ctx).Radar(data, option);
// Chart 3
var ctx = document.getElementById("barChartEx").getContext('2d');
var barChart = new Chart(ctx).Bar(data, option);
});
$(function() {
var data = [{
value: 300,
color: "#F7464A",
highlight: "#FF5A5E",
label: "Red"
}, {
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
}, {
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}, {
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
}, {
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
}];
var option = {
responsive: true,
};
//Chart 4
var ctx = document.getElementById("polarChartEx").getContext('2d');
var myPolarChart = new Chart(ctx).PolarArea(data, option);
//Chart 5
var ctx = document.getElementById("pieChartEx").getContext('2d');
var myPieChart = new Chart(ctx).Pie(data, option);
//Chart 6
var ctx = document.getElementById("doughnutChartEx").getContext('2d');
var myDoughnutChart = new Chart(ctx).Doughnut(data, option);
});
