gramps/namaste
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Archive: Namaste PHP AMQP framework v1.0 (2017-2020)

Browse Source 
952 days continuous production uptime, 40k+ tp/s single node.
Original corpo Bitbucket history not included — clean archive commit.
This commit is contained in:
Llama Chile Shop
2026-04-05 09:49:30 -07:00
commit 373ebc8c93
1284 changed files with 409372 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

537
html/templates/about-us.html Executable file
View File

@@ -0,0 +1,537 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap Template</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="../css/mdb.min.css" rel="stylesheet">
<!-- Custom styles -->
<style>
html,
body,
header,
.jarallax {
height: 700px;
}
@media (max-width: 740px) {
html,
body,
header,
.jarallax {
height: 100vh;
}
}
@media (min-width: 800px) and (max-width: 850px) {
html,
body,
header,
.jarallax {
height: 100vh;
}
}
@media (min-width: 560px) and (max-width: 650px) {
header .jarallax h1 {
margin-bottom: 1.5rem !important;
}
header .jarallax h5 {
margin-bottom: 1.5rem !important;
}
}
.top-nav-collapse {
background-color: #3f51b5!important;
}
.navbar:not(.top-nav-collapse) {
background: transparent!important;
}
@media (max-width: 768px) {
.navbar:not(.top-nav-collapse) {
background: #3f51b5!important;
}
}
@media (min-width: 800px) and (max-width: 850px) {
.navbar:not(.top-nav-collapse) {
background: #3f51b5!important;
}
}
h5 {
letter-spacing: 3px;
}
</style>
</head>
<body>
<!-- Main Navigation -->
<header>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
<div class="container smooth-scroll">
<a class="navbar-brand" href="#"><strong>MDB</strong></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7" aria-controls="navbarSupportedContent-7" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent-7">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#team" data-offset="60">Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#products" data-offset="60">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gallery" data-offset="60">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact" data-offset="60">Contact</a>
</li>
</ul>
<form class="form-inline">
<div class="md-form my-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
</div>
</form>
</div>
</div>
</nav>
<!-- Intro Section -->
<div id="home" class="view jarallax" data-jarallax='{"speed": 0.2}' style="background-image: url(https://mdbootstrap.com/img/Photos/Others/img%20%2853%29.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center;">
<div class="mask rgba-stylish-light">
<div class="container h-100 d-flex justify-content-center align-items-center">
<div class="row pt-5 mt-3">
<div class="col-md-12 mb-3">
<div class="intro-info-content text-center">
<h1 class="display-3 white-text mb-5 wow fadeInDown" data-wow-delay="0.3s">ABOUT <a class="white-text font-weight-bold">US</a></h1>
<h5 class="text-uppercase white-text mb-5 mt-1 font-weight-bold wow fadeInDown" data-wow-delay="0.3s">Lorem ipsum dolor sit amet consectetur. </h5>
<a class="btn btn-light-blue btn-lg wow fadeInDown" data-wow-delay="0.3s">portfolio</a>
<a class="btn btn-indigo btn-lg wow fadeInDown" data-wow-delay="0.3s">About</a>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Main Navigation -->
<!-- Main Layout -->
<main>
<div class="container">
<!-- Section: Team v.3 -->
<section id="team" class="section team-section pb-4 wow fadeIn" data-wow-delay="0.3s">
<!-- Section heading -->
<h2 class="font-weight-bold text-center h1 my-5">Our amazing team</h2>
<!-- Section description -->
<p class="text-center grey-text mb-5 mx-auto w-responsive">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
<!-- Grid row -->
<div class="row mb-lg-4 text-center text-md-left">
<!-- Grid column -->
<div class="col-lg-6 col-md-12 mb-4">
<div class="col-md-6 float-left">
<div class="avatar mx-auto mb-md-0 mb-3">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg" class="z-depth-1" alt="First sample avatar image">
</div>
</div>
<div class="col-md-6 float-right">
<h4><strong>John Doe</strong></h4>
<h6 class="font-weight-bold grey-text mb-4">Web Designer</h6>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur.</p>
<!-- Facebook -->
<a class="p-2 m-2 fa-lg fb-ic"><i class="fa fa-facebook"> </i></a>
<!-- Twitter -->
<a class="p-2 m-2 fa-lg tw-ic"><i class="fa fa-twitter"> </i></a>
<!-- Dribbble -->
<a class="p-2 m-2 fa-lg dribbble-ic"><i class="fa fa-dribbble"> </i></a>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-6 col-md-12 mb-4">
<div class="col-md-6 float-left">
<div class="avatar mx-auto mb-md-0 mb-3">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(31).jpg" class="z-depth-1" alt="Second sample avatar image">
</div>
</div>
<div class="col-md-6 float-right">
<h4><strong>Maria Kate</strong></h4>
<h6 class="font-weight-bold grey-text mb-4">Photographer</h6>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur.</p>
<!-- Facebook -->
<a class="p-2 m-2 fa-lg fb-ic"><i class="fa fa-facebook"> </i></a>
<!-- YouTube -->
<a class="p-2 m-2 fa-lg yt-ic"><i class="fa fa-youtube"> </i></a>
<!-- Instagram -->
<a class="p-2 m-2 fa-lg ins-ic"><i class="fa fa-instagram"> </i></a>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="row text-center text-md-left">
<!-- Grid column -->
<div class="col-lg-6 col-md-12 mb-4">
<div class="col-md-6 float-left">
<div class="avatar mx-auto mb-md-0 mb-3">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(26).jpg" class="z-depth-1" alt="Fourth sample avatar image">
</div>
</div>
<div class="col-md-6 float-right">
<h4><strong>Anna Deynah</strong></h4>
<h6 class="font-weight-bold grey-text mb-4">Web Developer</h6>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur.</p>
<!-- Facebook -->
<a class="p-2 m-2 fa-lg fb-ic"><i class="fa fa-facebook"> </i></a>
<!-- Twitter -->
<a class="p-2 m-2 fa-lg tw-ic"><i class="fa fa-twitter"> </i></a>
<!-- GitHub -->
<a class="p-2 m-2 fa-lg git-ic"><i class="fa fa-github"> </i></a>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-6 col-md-12 mb-4">
<div class="col-md-6 float-left">
<div class="avatar mx-auto mb-md-0 mb-3">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(29).jpg" class="z-depth-1" alt="Fifth sample avatar image">
</div>
</div>
<div class="col-md-6 float-right">
<h4><strong>Sarah Melyah</strong></h4>
<h6 class="font-weight-bold grey-text mb-4">Front-end Developer</h6>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur.</p>
<!-- Google + -->
<a class="p-2 m-2 fa-lg gplus-ic"><i class="fa fa-google-plus"> </i></a>
<!-- LinkedIn -->
<a class="p-2 m-2 fa-lg li-ic"><i class="fa fa-linkedin"> </i></a>
<!-- Email -->
<a class="p-2 m-2 fa-lg email-ic"><i class="fa fa-envelope"> </i></a>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</section>
<!-- Section: Team v.3 -->
<hr class="my-5">
<!-- Section: Features v.1 -->
<section id="products" class="text-center wow fadeIn" data-wow-delay="0.3s">
<!-- Section heading -->
<h1 class="font-weight-bold text-center h1 my-5">We create awesome products</h1>
<!-- Section description -->
<p class="text-center grey-text mb-5 mx-auto w-responsive lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-4 mb-4">
<i class="fa fa-4x fa-area-chart pink-text"></i>
<h4 class="font-weight-bold my-4">Analytics</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-4 mb-4">
<i class="fa fa-4x fa-pencil cyan-text"></i>
<h4 class="font-weight-bold my-4">Design</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-4 mb-4">
<i class="fa fa-4x fa-laptop indigo-text"></i>
<h4 class="font-weight-bold my-4">Development</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</section>
<!-- Section: Features v.1 -->
<hr class="my-5">
<!-- Section: Gallery -->
<section id="gallery" class="section wow fadeIn" data-wow-delay="0.3s">
<!-- Section heading -->
<h1 class="font-weight-bold text-center h1 my-5">Our work</h1>
<!-- Section description -->
<p class="text-center grey-text mb-5 mx-auto w-responsive">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<div class="row pb-4">
<div class="col-md-12">
<div id="mdb-lightbox-ui"></div>
<div class="mdb-lightbox">
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Work/12-col/img%20(43).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/12-col/img%20(43).jpg" class="img-fluid z-depth-1" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Work/12-col/img%20(41).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(41).jpg" class="img-fluid z-depth-1" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Work/12-col/img%20(40).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(40).jpg" class="img-fluid z-depth-1" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Work/12-col/img%20(14).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/12-col/img%20(14).jpg" class="img-fluid z-depth-1" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Work/12-col/img%20(42).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(42).jpg" class="img-fluid z-depth-1" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/People/12-col/img%20(132).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/People/12-col/img%20(132).jpg" class="img-fluid z-depth-1" />
</a>
</figure>
</div>
</div>
</div>
</section>
<!-- /Section: Gallery -->
<hr class="my-5">
<!-- Section: Contact v.2 -->
<section id="contact" class="section pb-5 wow fadeIn" data-wow-delay="0.3s">
<!-- Section heading -->
<h2 class="font-weight-bold text-center h1 my-5">Contact us</h2>
<!-- Section description -->
<p class="text-center grey-text mb-5 mx-auto w-responsive">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
<div class="row">
<!-- Grid column -->
<div class="col-md-8 col-xl-9">
<form>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-6">
<div class="md-form">
<input type="text" id="contact-name" class="form-control">
<label for="contact-name" class="">Your name</label>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-6">
<div class="md-form">
<input type="text" id="contact-email" class="form-control">
<label for="contact-email" class="">Your email</label>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="row">
<div class="col-md-12">
<div class="md-form">
<input type="text" id="contact-Subject" class="form-control">
<label for="contact-Subject" class="">Subject</label>
</div>
</div>
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="row mb-4">
<!-- Grid column -->
<div class="col-md-12">
<div class="md-form">
<textarea type="text" id="contact-message" class="md-textarea form-control" rows="3"></textarea>
<label for="contact-message">Your message</label>
</div>
</div>
</div>
<!-- Grid row -->
</form>
<div class="text-center text-md-left mb-4">
<a class="btn btn-light-blue">Send</a>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-4 col-xl-3">
<ul class="contact-icons text-center list-unstyled">
<li><i class="fa fa-map-marker fa-2x"></i>
<p>San Francisco, CA 94126, USA</p>
</li>
<li><i class="fa fa-phone fa-2x"></i>
<p>+ 01 234 567 89</p>
</li>
<li><i class="fa fa-envelope fa-2x"></i>
<p>contact@mdbootstrap.com</p>
</li>
</ul>
</div>
<!-- Grid column -->
</div>
</section>
<!-- Section: Contact v.2 -->
</div>
</main>
<!-- Main Layout -->
<!-- Footer -->
<footer class="page-footer pt-4 mt-4 indigo text-center text-md-left">
<!-- Footer Links -->
<div class="container">
<div class="row">
<!-- First column -->
<div class="col-md-6">
<h6 class="text-uppercase font-weight-bold">Footer Content</h6>
<p>Here you can use rows and columns here to organize your footer content.</p>
</div>
<!-- First column -->
<!-- Second column -->
<div class="col-md-3">
<h6 class="text-uppercase font-weight-bold">Links</h6>
<ul class="list-unstyled">
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
</ul>
</div>
<!-- Second column -->
<!-- Third column -->
<div class="col-md-3">
<h6 class="text-uppercase font-weight-bold">Links</h6>
<ul class="list-unstyled">
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
</ul>
</div>
<!-- Third column -->
</div>
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright py-3 text-center">
<div class="container-fluid">
&copy; 2018 Copyright: <a href="https://mdbootstrap.com/material-design-for-bootstrap/"> MDBootstrap.com </a>
</div>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="../js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="../js/mdb.min.js"></script>
<script>
new WOW().init();
// MDB Lightbox Init
$(function () {
$("#mdb-lightbox-ui").load("../mdb-addons/mdb-lightbox-ui.html");
});
</script>
</body>
</html>

474
html/templates/advanced/Admin/home-page.html Normal file
View File

@@ -0,0 +1,474 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap Template</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="../../../css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="../../../css/mdb.min.css" rel="stylesheet">
<style>
</style>
</head>
<body class="fixed-sn mdb-skin">
<!--Double navigation-->
<header>
<!-- Sidebar navigation -->
<ul id="slide-out" class="side-nav fixed sn-bg-1 custom-scrollbar">
<!-- Logo -->
<li>
<div class="logo-wrapper sn-ad-avatar-wrapper">
<img src="https://mdbootstrap.com/images/avatars/img%20(9)" class="img-fluid rounded-circle">
<div class="rgba-stylish-strong">
<p class="user white-text">Admin<br>admin@gmail.com</p>
</div>
</div>
</li>
<!--/. Logo -->
<!-- Side navigation links -->
<li>
<ul class="collapsible collapsible-accordion">
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-heart"></i> New Arrivals<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Handbags</a>
</li>
<li><a href="#" class="waves-effect">Shoes</a>
</li>
<li><a href="#" class="waves-effect">Dresses</a>
</li>
<li><a href="#" class="waves-effect">Skirts</a>
</li>
<li><a href="#" class="waves-effect">Jeans</a>
</li>
<li><a href="#" class="waves-effect">Outerwear</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-diamond"></i> Accessories<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Jewelry</a>
</li>
<li><a href="#" class="waves-effect">Wallets & Purses</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-gitlab"></i> For kids<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Girls</a>
</li>
<li><a href="#" class="waves-effect">Boys</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-sun-o"></i> Summer<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Swimsuits</a>
</li>
<li><a href="#" class="waves-effect">Sandals</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-briefcase"></i> Fall / Winter<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Coats</a>
</li>
<li><a href="#" class="waves-effect">Boots</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-coffee "></i> Spring<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Denim jackets</a>
</li>
<li><a href="#" class="waves-effect">Sneakers</a>
</li>
</ul>
</div>
</li>
</ul>
</li>
<!--/. Side navigation links -->
<div class="sidenav-bg mask-strong"></div>
</ul>
<!--/. Sidebar navigation -->
<!--Navbar-->
<nav class="navbar fixed-top navbar-toggleable-md navbar-dark scrolling-navbar double-nav">
<!-- SideNav slide-out button -->
<div class="float-left">
<a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a>
</div>
<!-- Breadcrumb-->
<div class="breadcrumb-dn mr-auto">
<p>BrandFlow Home Page</p>
</div>
<ul class="nav navbar-nav nav-flex-icons ml-auto">
<li class="nav-item">
<a class="nav-link"> <span class="badge red z-depth-1">2</span> <i class="fa fa-shopping-cart"></i> <span class="hidden-sm-down">Cart</span></a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="fa fa-envelope"></i> <span class="hidden-sm-down">Contact</span></a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="fa fa-comments-o"></i> <span class="hidden-sm-down">Support</span></a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="fa fa-sign-in"></i> <span class="hidden-sm-down">Register</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-user"></i> <span class="hidden-sm-down">Profile</span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Logout</a>
<a class="dropdown-item" href="#">My account</a>
</div>
</li>
</ul>
</nav>
<!--/.Navbar-->
</header>
<!--/Double navigation-->
<!--Main layout-->
<main>
<div class="container-fluid">
<!-- Nav tabs -->
<ul class="nav nav-tabs tabs-3 red" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#panel1" role="tab"> Day</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#panel2" role="tab"> Week</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#panel3" role="tab"> Month</a>
</li>
</ul>
<!-- Tab panels -->
<div class="tab-content card">
<!--Panel 1-->
<div class="tab-pane animated fadeIn active" id="panel1" role="tabpanel">
<!--First row-->
<div class="row mt-2">
<!--First column-->
<div class="col-lg-4 col-md-6">
<!--Card-->
<div class="card">
<!--Header-->
<div class="card-header danger-color-dark white-text text-center">
Featured
</div>
<!--/Header-->
<!--Content-->
<div class="card-block">
<table class="table table-responsive">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<!--/Content-->
</div>
<!--/Card-->
<br>
<hr>
<br>
<!--Chart-->
<canvas id="myChart-1"></canvas>
<!--/Chart-->
</div>
<!--/First column-->
<!--Second column-->
<div class="col-lg-4 col-md-6">
<!--Card-->
<div class="card">
<!--Header-->
<div class="card-header danger-color-dark white-text text-center">
Featured
</div>
<!--/Header-->
<!--Content-->
<div class="card-block">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<!--/Content-->
</div>
<!--/Card-->
<br>
<hr>
<br>
<!--Chart-->
<canvas id="myChart-2"></canvas>
<!--/Chart-->
</div>
<!--/Second column-->
<!--Third column-->
<div class="col-lg-4 col-md-6">
<!--Card-->
<div class="card">
<!--Header-->
<div class="card-header danger-color-dark white-text text-center">
Featured
</div>
<!--/Header-->
<!--Content-->
<div class="card-block">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<!--/Content-->
</div>
<!--/Card-->
<br>
<hr>
<br>
<!--Chart-->
<canvas id="myChart-3"></canvas>
<!--/Chart-->
</div>
<!--/Third column-->
</div>
<!--/First row-->
</div>
<!--/.Panel 1-->
<!--Panel 2-->
<div class="tab-pane animated fadeIn" id="panel2" role="tabpanel">
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
</div>
<!--/.Panel 2-->
<!--Panel 3-->
<div class="tab-pane animated fadeIn" id="panel3" role="tabpanel">
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
</div>
<!--/.Panel 3-->
</div>
</div>
</main>
<!--/Main layout-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="../../../js/jquery-3.1.1.min.js"></script>
<!-- Tooltips -->
<script type="text/javascript" src="../../../js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="../../../js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="../../../js/mdb.min.js"></script>
<script>
// SideNav init
$(".button-collapse").sideNav();
var el = document.querySelector('.custom-scrollbar');
Ps.initialize(el);
</script>
<script>
new WOW().init();
</script>
<script>
$(function() {
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
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,
};
// Chart-1
var ctx = document.getElementById("myChart-1").getContext('2d');
var myLineChart = new Chart(ctx).Line(data, option);
// Chart-2
var ctx = document.getElementById("myChart-2").getContext('2d');
var myLineChart = new Chart(ctx).Line(data, option);
// Chart-3
var ctx = document.getElementById("myChart-3").getContext('2d');
var myLineChart = new Chart(ctx).Line(data, option);
});
</script>
</body>
</html>

315
html/templates/advanced/Admin/landing-page.html Normal file
View File

@@ -0,0 +1,315 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap Template</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="../../../css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="../../../css/mdb.min.css" rel="stylesheet">
<style>
</style>
</head>
<body class="mdb-skin">
<!--Navigation-->
<header>
<!--Navbar-->
<nav class="navbar navbar-toggleable-md navbar-dark">
<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="#">
<img src="https://mdbootstrap.com/img/logo/mdb-transparent-sm-shadows.png" class="d-inline-block align-top z-depth-0" alt="MDBootstrap">
</a>
<div class="collapse navbar-collapse" id="navbarNav2">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link">Features</a>
</li>
<li class="nav-item">
<a class="nav-link">Pricing</a>
</li>
<li class="nav-item btn-group">
<a class="nav-link dropdown-toggle" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<a class="dropdown-item">Action</a>
<a class="dropdown-item">Another action</a>
<a class="dropdown-item">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-->
</header>
<!--/Navigation-->
<!--Main layout-->
<main class="pt-6">
<div class="container">
<!--Section: Product intro-->
<section class="section section-blog-fw">
<!--First row-->
<div class="row">
<div class="col-md-12 wow fadeIn" data-wow-delay="0.2s">
<!--Featured image-->
<img src="https://mdbootstrap.com/wp-content/uploads/2016/05/updatepro-min-1.jpg">
<!--Post data-->
<div class="jumbotron wow fadeIn" data-wow-delay="0.4s">
<h1 class="h1-responsive">BrandFlow software</h1>
<hr class="mb-1">
<p>Short description</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat maiores dicta, illo ullam reiciendis sed, ab recusandae et perferendis in, distinctio, harum molestias eum quasi totam enim! Quibusdam, iure ipsa.</p>
<a href="" class="btn btn-primary"><i class="fa fa-user left"></i> <span class="hidden-sm-down">Sign up for free</span></a>
</div>
<!--/Post data-->
</div>
</div>
<!--/First row-->
</section>
<!--/Section: Product intro-->
<hr class="between-sections wow fadeIn" data-wow-delay="0.4s">
<!--Section: Features v.3-->
<section class="section feature-box">
<!--Section heading-->
<h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Why is it so great?</h1>
<!--Section sescription-->
<p class="section-description lead wow fadeIn" data-wow-delay="0.2s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>
<!--First row-->
<div class="row features-small wow fadeIn" data-wow-delay="0.4s">
<!--First column-->
<div class="col-md-5 mb-r center-on-small-only">
<img src="https://mdbootstrap.com/wp-content/uploads/2016/07/img-2-min.jpg" alt="" class="z-depth-0">
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-7 center-on-small-only">
<!--First row-->
<div class="row">
<div class="col-1">
<i class="fa fa-bank indigo-text"></i>
</div>
<div class="col-10">
<h4 class="feature-title">Safety</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
</div>
</div>
<!--/First row-->
<div style="height:50px"></div>
<!--Second row-->
<div class="row">
<div class="col-1">
<i class="fa fa-code indigo-text"></i>
</div>
<div class="col-10">
<h4 class="feature-title">Technology</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
</div>
</div>
<!--/Second row-->
<div style="height:50px"></div>
<!--Third row-->
<div class="row">
<div class="col-1">
<i class="fa fa-money indigo-text"></i>
</div>
<div class="col-10">
<h4 class="feature-title">Finance</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
</div>
</div>
<!--/Third row-->
</div>
<!--/Second column-->
</div>
<!--/First row-->
</section>
<!--/Section: Features v.3-->
</div>
</main>
<!--/Main layout-->
<!--Footer-->
<footer class="page-footer center-on-small-only">
<!--Footer Links-->
<div class="container-fluid">
<div class="row wow fadeIn" data-wow-delay="0.3s">
<!--First column-->
<div class="col-md-3 offset-md-1">
<h5 class="title">ABOUT MATERIAL DESIGN</h5>
<br>
<p>Material Design (codenamed Quantum Paper) is a design language developed by Google. </p>
<p>Material Design for Bootstrap (MDB) is a powerful Material Design UI KIT for most popular HTML, CSS, and JS framework - Bootstrap.</p>
</div>
<!--/.First column-->
<hr class="hidden-md-up">
<!--Second column-->
<div class="col-md-2 offset-md-1">
<h5 class="title">Links</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Second column-->
<hr class="hidden-md-up">
<!--Third column-->
<div class="col-md-2">
<h5 class="title">Links</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Third column-->
<hr class="hidden-md-up">
<!--Fourth column-->
<div class="col-md-2">
<h5 class="title">Links</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Fourth column-->
</div>
</div>
<!--/.Footer Links-->
<hr>
<!--Call to action-->
<div class="call-to-action wow fadeIn" data-wow-delay="0.3s">
<ul>
<li>
<h5>Register for free</h5></li>
<li><a href="" class="btn btn-danger">Sign up!</a></li>
</ul>
</div>
<!--/.Call to action-->
<hr>
<!--Social buttons-->
<div class="social-section wow fadeIn" data-wow-delay="0.2s">
<ul>
<li><a href="https://www.facebook.com/mdbootstrap" target="_blank" class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"> </i></a></li>
<li><a href="https://twitter.com/MDBootstrap" target="_blank" class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"> </i></a></li>
<li><a href="https://plus.google.com/u/0/+Mdbootstrap" target="_blank" class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"> </i></a></li>
<li><a href="https://www.linkedin.com/in/michal-szymanski-9228918a" target="_blank" class="btn-floating btn-small btn-li"><i class="fa fa-linkedin"> </i></a></li>
<li><a class="btn-floating btn-small btn-git"><i class="fa fa-github"> </i></a></li>
<li><a href="https://pl.pinterest.com/materialdesignf/" target="_blank" class="btn-floating btn-small btn-pin"><i class="fa fa-pinterest"> </i></a></li>
<li><a href="https://www.instagram.com/mdbootstrap/" target="_blank" class="btn-floating btn-small btn-ins"><i class="fa fa-instagram"> </i></a></li>
</ul>
</div>
<!--/.Social buttons-->
<!--Copyright-->
<div class="footer-copyright">
<div class="container-fluid">
© 2017 Copyright: <a href="http://www.MDBootstrap.com"> MDBootstrap.com </a>
</div>
</div>
<!--/.Copyright-->
</footer>
<!--/.Footer-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="../../../js/jquery-3.1.1.min.js"></script>
<!-- Tooltips -->
<script type="text/javascript" src="../../../js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="../../../js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="../../../js/mdb.min.js"></script>
<script>
new WOW().init();
</script>
</body>
</html>

738
html/templates/advanced/Blog/home-page.html Normal file
View File

@@ -0,0 +1,738 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap Template</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="../../../css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="../../../css/mdb.min.css" rel="stylesheet">
</head>
<body class="fixed-sn navy-blue-skin">
<!--Double navigation-->
<header>
<!-- Sidebar navigation -->
<ul id="slide-out" class="side-nav fixed sn-bg-1 custom-scrollbar">
<!-- Logo -->
<li>
<div class="logo-wrapper waves-light sn-avatar-wrapper">
<a href="#">
<img src="https://mdbootstrap.com/images/avatars/img%20(8)" class="rounded-circle">
</a>
</div>
</li>
<!--/. Logo -->
<!--About-->
<li>
<div class="about">
<p>Quae ad, vel pariatur non voluptates nam quaerat.</p>
</div>
</li>
<!--/.About-->
<!--Social-->
<li>
<ul class="social">
<li><a href="https://twitter.com/MDBootstrap" target="_blank" class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a></li>
<li><a href="https://www.facebook.com/mdbootstrap" target="_blank" class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a></li>
<li><a href="https://dribbble.com/mdbootstrap" target="_blank" class="icons-sm drib-ic"><i class="fa fa-dribbble"> </i></a></li>
<li><a href="https://www.linkedin.com/in/michal-szymanski-9228918a" target="_blank" class="icons-sm li-ic"><i class="fa fa-linkedin"> </i></a></li>
<li><a href="https://www.instagram.com/material_design_for_bootstrap/" target="_blank" class="icons-sm ins-ic"><i class="fa fa-instagram"> </i></a></li>
</ul>
</li>
<!--/Social-->
<!-- Side navigation links -->
<li>
<ul class="collapsible collapsible-accordion">
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-bus"></i> Travels<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">It's all about passion</a>
</li>
<li><a href="#" class="waves-effect">Europe travels</a>
</li>
<li><a href="#" class="waves-effect">Americas trip</a>
</li>
<li><a href="#" class="waves-effect">Australia journey</a>
</li>
<li><a href="#" class="waves-effect">India adventure</a>
</li>
<li><a href="#" class="waves-effect">Join our crew!</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-camera"></i> Photography<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Travel pictures</a>
</li>
<li><a href="#" class="waves-effect">The best shots</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-forward"></i> Videos<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Short videos</a>
</li>
<li><a href="#" class="waves-effect">Editing tutorials</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-paw"></i> Environment<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">How to protect?</a>
</li>
<li><a href="#" class="waves-effect">'Plant a tree' action</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> About<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Blog's author</a>
</li>
<li><a href="#" class="waves-effect">Our crew</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-envelope"></i> Contact us<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">FAQ</a>
</li>
<li><a href="#" class="waves-effect">Write a message</a>
</li>
</ul>
</div>
</li>
</ul>
</li>
<!--/. Side navigation links -->
<div class="sidenav-bg mask-strong"></div>
</ul>
<!--/. Sidebar navigation -->
<!--Navbar-->
<nav class="navbar fixed-top navbar-toggleable-md navbar-dark scrolling-navbar double-nav">
<!-- SideNav slide-out button -->
<div class="float-left">
<a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a>
</div>
<!-- Breadcrumb-->
<div class="breadcrumb-dn mr-auto">
<p>MDB Blog Home Page</p>
</div>
<ul class="nav navbar-nav nav-flex-icons ml-auto">
<li class="nav-item ">
<a class="nav-link"> <span class="badge red z-depth-1">2</span> <i class="fa fa-shopping-cart"></i> <span class="hidden-sm-down">Cart</span></a>
</li>
<li class="nav-item ">
<a class="nav-link"><i class="fa fa-envelope"></i> <span class="hidden-sm-down">Contact</span></a>
</li>
<li class="nav-item ">
<a class="nav-link"><i class="fa fa-comments-o"></i> <span class="hidden-sm-down">Support</span></a>
</li>
<li class="nav-item ">
<a class="nav-link"><i class="fa fa-sign-in"></i> <span class="hidden-sm-down">Register</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user"></i> <span class="hidden-sm-down">Profile</span></a>
<div class="dropdown-menu dropdown-primary dd-right" aria-labelledby="dropdownMenu1" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
<a class="dropdown-item" href="#">Logout</a>
<a class="dropdown-item" href="#">My account</a>
</div>
</li>
</ul>
</nav>
<!--/.Navbar-->
</header>
<!--/Double navigation-->
<!--Main layout-->
<main>
<div class="container-fluid">
<!--Section: Blog v.4-->
<section class="section section-blog-fw">
<!--First row-->
<div class="row">
<div class="col-md-12 wow fadeIn" data-wow-delay="0.2s">
<!--Featured image-->
<img src="https://mdbootstrap.com/images/slides/slide%20(16).jpg">
<!--Post data-->
<div class="jumbotron wow fadeIn" data-wow-delay="0.4s">
<h2><a>How I've started my adventure with surfing?</a></h2>
<p>Written by <a>John Doe</a>, 26.03.2016</p>
<!--Social shares-->
<div class="social-counters ">
<!--Facebook-->
<a class="btn btn-fb">
<i class="fa fa-facebook left "></i>
<span class="hidden-md-down ">Facebook</span>
</a>
<span class="counter ">35</span>
<!--Twitter-->
<a class="btn btn-tw">
<i class="fa fa-twitter left "></i>
<span class="hidden-md-down ">Twitter</span>
</a>
<span class="counter ">23</span>
<!--Google+-->
<a class="btn btn-gplus">
<i class="fa fa-google-plus left "></i>
<span class="hidden-md-down ">Google+</span>
</a>
<span class="counter ">27</span>
<!--Comments-->
<a class="btn btn-default">
<i class="fa fa-comments-o left "></i>
<span class="hidden-md-down ">Comments</span>
</a>
<span class="counter ">18</span>
</div>
<!--/.Social shares-->
</div>
<!--/Post data-->
<!--Excerpt-->
<div class="excerpt wow fadeIn" data-wow-delay="0.4s">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos ut tempore, cum minus perspiciatis, blanditiis tempora molestias dolorem pariatur deserunt laudantium, reprehenderit! Sed accusamus vitae qui, perferendis
minus.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa expedita quia animi placeat repudiandae, eius quos. Modi nulla, nisi itaque ullam ab, aliquam velit facilis, explicabo, eius saepe maxime quod.Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Ipsa expedita quia animi placeat repudiandae, eius quos. Modi nulla, nisi itaque ullam ab, aliquam velit facilis, explicabo, eius saepe maxime quod.</p>
</div>
</div>
</div>
<!--/First row-->
<hr>
<!--Second row-->
<div class="row">
<div class="col-md-12 wow fadeIn" data-wow-delay="0.2s">
<!--Featured image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/images/slides/slide%20(17).jpg">
<a>
<div class="mask "></div>
</a>
</div>
<!--Post data-->
<div class="jumbotron wow fadeIn" data-wow-delay="0.4s">
<h2><a>5 tips before you go by the sea.</a></h2>
<p>Written by <a>Maria Kate</a>, 25.03.2016</p>
<!--Social shares-->
<div class="social-counters ">
<!--Facebook-->
<a class="btn btn-fb ">
<i class="fa fa-facebook left "></i>
<span class="hidden-md-down ">Facebook</span>
</a>
<span class="counter ">42</span>
<!--Twitter-->
<a class="btn btn-tw ">
<i class="fa fa-twitter left "></i>
<span class="hidden-md-down ">Twitter</span>
</a>
<span class="counter ">29</span>
<!--Google+-->
<a class="btn btn-gplus ">
<i class="fa fa-google-plus left "></i>
<span class="hidden-md-down ">Google+</span>
</a>
<span class="counter ">35</span>
<!--Comments-->
<a class="btn btn-default ">
<i class="fa fa-comments-o left "></i>
<span class="hidden-md-down ">Comments</span>
</a>
<span class="counter ">22</span>
</div>
<!--/.Social shares-->
</div>
<!--/Post data-->
<!--Excerpt-->
<div class="excerpt wow fadeIn" data-wow-delay="0.4s">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos ut tempore, cum minus perspiciatis, blanditiis tempora molestias dolorem pariatur deserunt laudantium, reprehenderit! Sed accusamus vitae qui, perferendis
minus.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa expedita quia animi placeat repudiandae, eius quos. Modi nulla, nisi itaque ullam ab, aliquam velit facilis, explicabo, eius saepe maxime quod.Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Ipsa expedita quia animi placeat repudiandae, eius quos. Modi nulla, nisi itaque ullam ab, aliquam velit facilis, explicabo, eius saepe maxime quod.</p>
</div>
</div>
</div>
<!--/Second row-->
</section>
<!--/Section: Blog v.4-->
<hr class="between-sections">
<!--Section: Blog v.1-->
<section class="section extra-margins">
<!--Section heading-->
<h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Blog listing v.1</h1>
<!--Section sescription-->
<p class="section-description wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-md-5 mb-r wow fadeInLeft" data-wow-delay="0.2s">
<!--Featured image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/images/regular/people/img%20(47).jpg">
<a>
<div class="mask"></div>
</a>
</div>
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-7 mb-r wow fadeInRight" data-wow-delay="0.2s">
<!--Excerpt-->
<h5 class="red-text "><i class="fa fa-fire "></i>Lifestyle</h5>
<h4>Top 5 cities for romantic weekend for two.</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem maxime quidem minima incidunt vel impedit commodi ducimus eaque saepe sed sapiente totam omnis, eos nostrum recusandae fugit. Eos fuga, atque.</p>
<p>by <a><strong>Maria Kate</strong></a>, 23.06.2016</p>
<a class="btn btn-primary ">Read more</a>
</div>
<!--/Second column-->
</div>
<!--/First row-->
<hr>
<!--Second row-->
<div class="row">
<!--First column-->
<div class="col-md-7 mb-r wow fadeInLeft" data-wow-delay="0.3s">
<!--Excerpt-->
<h5 class="blue-text "><i class="fa fa-trophy "></i>Sport</h5>
<h4>What you need to know before begin workout.</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem maxime quidem minima incidunt vel impedit commodi ducimus eaque saepe sed sapiente totam omnis, eos nostrum recusandae fugit. Eos fuga, atque.</p>
<p>by <a><strong>John Doe</strong></a>, 22.06.2016</p>
<a class="btn btn-primary ">Read more</a>
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-5 mb-r wow fadeInRight" data-wow-delay="0.3s">
<!--Featured image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/images/regular/people/img%20(48).jpg">
<a>
<div class="mask"></div>
</a>
</div>
</div>
<!--/Second column-->
</div>
<!--/Second row-->
<hr>
<!--Third row-->
<div class="row">
<!--First column-->
<div class="col-md-5 mb-r wow fadeInLeft" data-wow-delay="0.4s">
<!--Featured image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/images/regular/people/img%20(49).jpg">
<a>
<div class="mask"></div>
</a>
</div>
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-7 mb-r wow fadeInRight" data-wow-delay="0.4s">
<!--Excerpt-->
<h5 class="teal-text "><i class="fa fa-television "></i>Entertainment</h5>
<h4>My best summer adventure - Glastonbury Festival.</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem maxime quidem minima incidunt vel impedit commodi ducimus eaque saepe sed sapiente totam omnis, eos nostrum recusandae fugit. Eos fuga, atque.</p>
<p>by <a><strong>Maria Kate</strong></a>, 21.06.2016</p>
<a class="btn btn-primary ">Read more</a>
</div>
<!--/Second column-->
</div>
<!--/Third row-->
</section>
<!--/Section: Blog v.1-->
<hr class="between-sections">
<!--Section: Blog v.2-->
<section class="section extra-margins text-center">
<!--Section heading-->
<h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Blog listing v.2</h1>
<!--Section sescription-->
<p class="section-description wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-md-4 mb-r wow fadeInUp" data-wow-delay="0.2s">
<!--Featured image-->
<div class="view overlay hm-white-slight mb-3">
<img src="https://mdbootstrap.com/images/regular/people/img%20(51).jpg" >
<a>
<div class="mask"></div>
</a>
</div>
<!--Excerpt-->
<h5 class="blue-text"><i class="fa fa-map "></i>Adventure</h5>
<h4>Life travel - 2 weeks in Amazon Jungle.</h4>
<p>by <a><strong>John Doe</strong></a>, 23.06.2016</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem maxime quidem minima incidunt vel impedit commodi ducimus eaque saepe sed sapiente totam omnis, eos nostrum recusandae fugit. Eos fuga, atque.</p>
<a class="btn btn-primary ">Read more</a>
</div>
<!--/First column-->
<hr class="p-col">
<!--Second column-->
<div class="col-md-4 mb-r wow fadeInUp" data-wow-delay="0.3s">
<!--Featured image-->
<div class="view overlay hm-white-slight mb-3">
<img src="https://mdbootstrap.com/images/regular/people/img%20(59).jpg" >
<a>
<div class="mask"></div>
</a>
</div>
<!--Excerpt-->
<h5 class="red-text"><i class="fa fa-heart "></i>Friendship</h5>
<h4>6 ideas for journey with your friend in summer.</h4>
<p>by <a><strong>Maria Kate</strong></a>, 22.06.2016</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem maxime quidem minima incidunt vel impedit commodi ducimus eaque saepe sed sapiente totam omnis, eos nostrum recusandae fugit. Eos fuga, atque.</p>
<a class="btn btn-primary ">Read more</a>
</div>
<!--/Second column-->
<hr class="p-col">
<!--Third column-->
<div class="col-md-4 mb-r wow fadeInUp" data-wow-delay="0.4s">
<!--Featured image-->
<div class="view overlay hm-white-slight mb-3">
<img src="https://mdbootstrap.com/images/regular/people/img%20(66).jpg" >
<a>
<div class="mask"></div>
</a>
</div>
<!--Excerpt-->
<h5 class="teal-text "><i class="fa fa-fire "></i>Animals</h5>
<h4>You're the best friend for your dog.</h4>
<p>by <a><strong>John Doe</strong></a>, 21.06.2016</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem maxime quidem minima incidunt vel impedit commodi ducimus eaque saepe sed sapiente totam omnis, eos nostrum recusandae fugit. Eos fuga, atque.</p>
<a class="btn btn-primary ">Read more</a>
</div>
<!--/Third column-->
</div>
<!--/First row-->
</section>
<!--/Section: Blog v.2-->
<hr class="between-sections">
<!--Section: Blog v.3-->
<section class="section extra-margins">
<!--Section heading-->
<h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Blog listing v.3</h1>
<!--Section sescription-->
<p class="section-description wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-md-5 mb-r wow fadeIn" data-wow-delay="0.3s">
<!--Featured image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/images/regular/city/img%20(24).jpg">
<a>
<div class="mask"></div>
</a>
</div>
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-7 mb-r wow fadeIn" data-wow-delay="0.3s">
<!--Excerpt-->
<h5 class="teal-text "><i class="fa fa-money "></i>Business</h5>
<h4>Top 5 polish technology startups.</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem maxime quidem minima incidunt vel impedit commodi ducimus eaque saepe sed sapiente totam omnis, eos nostrum recusandae fugit. Eos fuga, atque.</p>
<p>by <a><strong>John Doe</strong></a>, 23.06.2016</p>
<a class="btn btn-primary ">Read more</a>
</div>
<!--/Second column-->
</div>
<!--/First row-->
<hr>
<!--Second row-->
<div class="row">
<!--First column-->
<div class="col-md-5 mb-r wow fadeIn" data-wow-delay="0.3s">
<!--Featured image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/images/regular/city/img%20(25).jpg">
<a>
<div class="mask"></div>
</a>
</div>
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-7 mb-r wow fadeIn" data-wow-delay="0.3s">
<!--Excerpt-->
<h5 class="blue-text"><i class="fa fa-map "></i>Travels</h5>
<h4>6 reasons why you need to visit San Francisco.</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem maxime quidem minima incidunt vel impedit commodi ducimus eaque saepe sed sapiente totam omnis, eos nostrum recusandae fugit. Eos fuga, atque.</p>
<p>by <a><strong>Maria Kate</strong></a>, 22.06.2016</p>
<a class="btn btn-primary ">Read more</a>
</div>
<!--/Second column-->
</div>
<!--/Second row-->
<hr>
<!--Third row-->
<div class="row">
<!--First column-->
<div class="col-md-5 mb-r wow fadeIn" data-wow-delay="0.3s">
<!--Featured image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/images/regular/city/img%20(26).jpg">
<a>
<div class="mask"></div>
</a>
</div>
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-7 mb-r wow fadeIn" data-wow-delay="0.3s">
<!--Excerpt-->
<h5 class="red-text "><i class="fa fa-fire "></i>Lifestyle</h5>
<h4>Dubai - is this city of dreams?</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem maxime quidem minima incidunt vel impedit commodi ducimus eaque saepe sed sapiente totam omnis, eos nostrum recusandae fugit. Eos fuga, atque.</p>
<p>by <a><strong>John Doe</strong></a>, 21.06.2016</p>
<a class="btn btn-primary ">Read more</a>
</div>
<!--/Second column-->
</div>
<!--/Third row-->
</section>
<!--/Section: Blog v.3-->
</div>
</main>
<!--/Main layout-->
<!--Footer-->
<footer class="page-footer center-on-small-only">
<!--Footer Links-->
<div class="container-fluid">
<div class="row wow fadeIn" data-wow-delay="0.3s">
<!--First column-->
<div class="col-md-3 offset-md-1">
<h5 class="title">Footer Content</h5>
<p>Here you can use rows and columns here to organize your footer content.</p>
</div>
<!--/.First column-->
<hr class="hidden-md-up">
<!--Second column-->
<div class="col-md-2 offset-md-1">
<h5 class="title">Links</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Second column-->
<hr class="hidden-md-up">
<!--Third column-->
<div class="col-md-2">
<h5 class="title">Links</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Third column-->
<hr class="hidden-md-up">
<!--Fourth column-->
<div class="col-md-2">
<h5 class="title">Links</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Fourth column-->
</div>
</div>
<!--/.Footer Links-->
<hr>
<!--Call to action-->
<div class="call-to-action wow fadeIn" data-wow-delay="0.3s">
<ul>
<li>
<h5>Register for free</h5></li>
<li><a href="" class="btn btn-danger">Sign up!</a></li>
</ul>
</div>
<!--/.Call to action-->
<hr>
<!--Social buttons-->
<div class="social-section wow fadeIn" data-wow-delay="0.3s">
<ul>
<li><a href="https://www.facebook.com/mdbootstrap" target="_blank" class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"> </i></a></li>
<li><a href="https://twitter.com/MDBootstrap" target="_blank" class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"> </i></a></li>
<li><a href="https://plus.google.com/u/0/+Mdbootstrap" target="_blank" class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"> </i></a></li>
<li><a href="https://pl.linkedin.com/in/dawid-adach-97435534/pl" target="_blank" class="btn-floating btn-small btn-li"><i class="fa fa-linkedin"> </i></a></li>
<li><a class="btn-floating btn-small btn-git"><i class="fa fa-github"> </i></a></li>
<li><a href="https://pl.pinterest.com/materialdesignf/" target="_blank" class="btn-floating btn-small btn-pin"><i class="fa fa-pinterest"> </i></a></li>
<li><a href="https://www.instagram.com/material_design_for_bootstrap/" target="_blank" class="btn-floating btn-small btn-ins"><i class="fa fa-instagram"> </i></a></li>
</ul>
</div>
<!--/.Social buttons-->
<!--Copyright-->
<div class="footer-copyright">
<div class="container-fluid">
© 2015 Copyright: <a href="http://www.MDBootstrap.com"> MDBootstrap.com </a>
</div>
</div>
<!--/.Copyright-->
</footer>
<!--/.Footer-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="../../../js/jquery-3.1.1.min.js"></script>
<!-- Tooltips -->
<script type="text/javascript" src="../../../js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="../../../js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="../../../js/mdb.min.js"></script>
<script>
// SideNav init
$(".button-collapse").sideNav();
var el = document.querySelector('.custom-scrollbar');
Ps.initialize(el);
</script>
<script>
new WOW().init();
</script>
</body>
</html>

627
html/templates/advanced/Blog/post.html Normal file
View File

@@ -0,0 +1,627 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap Template</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="../../../css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="../../../css/mdb.min.css" rel="stylesheet">
</head>
<body class="fixed-sn navy-blue-skin">
<!--Double navigation-->
<header>
<!-- Sidebar navigation -->
<ul id="slide-out" class="side-nav fixed sn-bg-1 custom-scrollbar">
<!-- Logo -->
<li>
<div class="logo-wrapper waves-light sn-avatar-wrapper">
<a href="#">
<img src="https://mdbootstrap.com/images/avatars/img%20(8)" class="rounded-circle">
</a>
</div>
</li>
<!--/. Logo -->
<!--About-->
<li>
<div class="about">
<p>Quae ad, vel pariatur non voluptates nam quaerat.</p>
</div>
</li>
<!--/.About-->
<!--Social-->
<li>
<ul class="social">
<li><a href="https://twitter.com/MDBootstrap" target="_blank" class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a></li>
<li><a href="https://www.facebook.com/mdbootstrap" target="_blank" class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a></li>
<li><a href="https://dribbble.com/mdbootstrap" target="_blank" class="icons-sm drib-ic"><i class="fa fa-dribbble"> </i></a></li>
<li><a href="https://www.linkedin.com/in/michal-szymanski-9228918a" target="_blank" class="icons-sm li-ic"><i class="fa fa-linkedin"> </i></a></li>
<li><a href="https://www.instagram.com/material_design_for_bootstrap/" target="_blank" class="icons-sm ins-ic"><i class="fa fa-instagram"> </i></a></li>
</ul>
</li>
<!--/Social-->
<!-- Side navigation links -->
<li>
<ul class="collapsible collapsible-accordion">
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-bus"></i> Travels<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">It's all about passion</a>
</li>
<li><a href="#" class="waves-effect">Europe travels</a>
</li>
<li><a href="#" class="waves-effect">Americas trip</a>
</li>
<li><a href="#" class="waves-effect">Australia journey</a>
</li>
<li><a href="#" class="waves-effect">India adventure</a>
</li>
<li><a href="#" class="waves-effect">Join our crew!</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-camera"></i> Photography<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Travel pictures</a>
</li>
<li><a href="#" class="waves-effect">The best shots</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-forward"></i> Videos<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Short videos</a>
</li>
<li><a href="#" class="waves-effect">Editing tutorials</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-paw"></i> Environment<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">How to protect?</a>
</li>
<li><a href="#" class="waves-effect">'Plant a tree' action</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> About<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Blog's author</a>
</li>
<li><a href="#" class="waves-effect">Our crew</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-envelope"></i> Contact us<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">FAQ</a>
</li>
<li><a href="#" class="waves-effect">Write a message</a>
</li>
</ul>
</div>
</li>
</ul>
</li>
<!--/. Side navigation links -->
<div class="sidenav-bg mask-strong"></div>
</ul>
<!--/. Sidebar navigation -->
<!--Navbar-->
<nav class="navbar fixed-top navbar-toggleable-md navbar-dark scrolling-navbar double-nav">
<!-- SideNav slide-out button -->
<div class="float-left">
<a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a>
</div>
<!-- Breadcrumb-->
<div class="breadcrumb-dn mr-auto">
<p>MDB Blog Home Page</p>
</div>
<ul class="nav navbar-nav nav-flex-icons ml-auto">
<li class="nav-item ">
<a class="nav-link"> <span class="badge red z-depth-1">2</span> <i class="fa fa-shopping-cart"></i> <span class="hidden-sm-down">Cart</span></a>
</li>
<li class="nav-item ">
<a class="nav-link"><i class="fa fa-envelope"></i> <span class="hidden-sm-down">Contact</span></a>
</li>
<li class="nav-item ">
<a class="nav-link"><i class="fa fa-comments-o"></i> <span class="hidden-sm-down">Support</span></a>
</li>
<li class="nav-item ">
<a class="nav-link"><i class="fa fa-sign-in"></i> <span class="hidden-sm-down">Register</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user"></i> <span class="hidden-sm-down">Profile</span></a>
<div class="dropdown-menu dropdown-primary dd-right" aria-labelledby="dropdownMenu1" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
<a class="dropdown-item" href="#">Logout</a>
<a class="dropdown-item" href="#">My account</a>
</div>
</li>
</ul>
</nav>
<!--/.Navbar-->
</header>
<!--/Double navigation-->
<!--Main layout-->
<main>
<div class="container-fluid">
<div class="row">
<!--Post column-->
<div class="col-md-8">
<!--Section: Post-->
<section class="section section-blog-fw">
<!--First row-->
<div class="row">
<div class="col-md-12 wow fadeInUp">
<!--Featured image-->
<img src="https://mdbootstrap.com/images/slides/slide%20(16).jpg">
<!--Post data-->
<div class="jumbotron wow fadeInUp" data-wow-delay="0.2s">
<h2>How I've started my adventure with surfing?</h2>
<p>Written by <a>John Doe</a>, 26.03.2016</p>
<!--Social shares-->
<div class="social-counters ">
<!--Facebook-->
<a class="btn btn-fb ">
<i class="fa fa-facebook left "></i>
<span class="hidden-md-down ">Facebook</span>
</a>
<span class="counter ">35</span>
<!--Twitter-->
<a class="btn btn-tw ">
<i class="fa fa-twitter left "></i>
<span class="hidden-md-down ">Twitter</span>
</a>
<span class="counter ">23</span>
<!--Google+-->
<a class="btn btn-gplus ">
<i class="fa fa-google-plus left "></i>
<span class="hidden-md-down ">Google+</span>
</a>
<span class="counter ">27</span>
<!--Comments-->
<a class="btn btn-default ">
<i class="fa fa-comments-o left "></i>
<span class="hidden-md-down ">Comments</span>
</a>
<span class="counter ">18</span>
</div>
<!--/.Social shares-->
</div>
<!--/Post data-->
<!--Post text-->
<div class="post-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos ut tempore, cum minus perspiciatis, blanditiis tempora molestias dolorem pariatur deserunt laudantium, reprehenderit! Sed accusamus vitae qui, perferendis
minus.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa expedita quia animi placeat repudiandae, eius quos. Modi nulla, nisi itaque ullam ab, aliquam velit facilis, explicabo, eius saepe maxime quod.Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Ipsa expedita quia animi placeat repudiandae, eius quos. Modi nulla, nisi itaque ullam ab, aliquam velit facilis, explicabo, eius saepe maxime quod.</p>
</div>
<!--/Post text-->
<hr>
<div class="text-center">
<h3 class="h3-responsive">Do you want to share?</h3>
<!--Facebook-->
<a href="https://www.facebook.com/mdbootstrap" target="_blank" class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"> </i></a>
<!--Twitter-->
<a href="https://twitter.com/MDBootstrap" target="_blank" class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"> </i></a>
<!--Google +-->
<a href="https://plus.google.com/u/0/+Mdbootstrap" target="_blank" class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"> </i></a>
</div>
</div>
</div>
<!--/First row-->
</section>
<!--/Section: Post-->
<!--Section: About author-->
<section class="mb-4">
<!--Author box-->
<div class="author-box">
<!--Name-->
<h3 class="h3-responsive text-center">About author</h3>
<hr>
<div class="row">
<!--Avatar-->
<div class="col-12 col-sm-2">
<img src="https://mdbootstrap.com/images/avatars/img%20(8).jpg" class="img-fluid rounded-circle z-depth-2">
</div>
<!--Author Data-->
<div class=" col-12 col-sm-10">
<p><strong>Larry Smith</strong></p>
<div class="personal-sm">
<a class="email-ic"><i class="fa fa-home"> </i></a>
<a class="fb-ic"><i class="fa fa-facebook"> </i></a>
<a class="tw-ic"><i class="fa fa-twitter"> </i></a>
<a class="gplus-ic"><i class="fa fa-google-plus"> </i></a>
<a class="li-ic"><i class="fa fa-linkedin"> </i></a>
<a class="email-ic"><i class="fa fa-envelope-o"> </i></a>
</div>
<p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
<p class="hidden-md-down">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint esse nulla quia quam veniam commodi dicta, iusto inventore. Voluptatum pariatur eveniet ea, officiis vitae praesentium beatae quas libero, esse facere.
</p>
</div>
</div>
</div>
<!--/.Author box-->
</section>
<!--/Section: About author-->
<!--Section: Comments list-->
<section>
<div class="comments-list text-left">
<div class="section-heading">
<h3>Comments <span class="badge blue">3</span></h3>
</div>
<!--First row-->
<div class="row">
<!--Image column-->
<div class="col-sm-2 col-12">
<img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg">
</div>
<!--/.Image column-->
<!--Content column-->
<div class="col-sm-10 col-12">
<a><h3 class="user-name">John Doe</h3></a>
<div class="card-data">
<ul>
<li class="comment-date"><i class="fa fa-clock-o"></i> 05/10/2015</li>
</ul>
</div>
<p class="comment-text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
</div>
<!--/.Content column-->
</div>
<!--/.First row-->
<!--Second row-->
<div class="row">
<!--Image column-->
<div class="col-sm-2 col-12">
<img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg">
</div>
<!--/.Image column-->
<!--Content column-->
<div class="col-sm-10 col-12">
<a><h3 class="user-name">Marta Tev</h3></a>
<div class="card-data">
<ul>
<li class="comment-date"><i class="fa fa-clock-o"></i> 08/10/2015</li>
</ul>
</div>
<p class="comment-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur.</p>
</div>
<!--/.Content column-->
</div>
<!--/.Second row-->
<!--Third row-->
<div class="row">
<!--Image column-->
<div class="col-sm-2 col-12">
<img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg">
</div>
<!--/.Image column-->
<!--Content column-->
<div class="col-sm-10 col-12">
<a><h3 class="user-name">Anna Maria</h3></a>
<div class="card-data">
<ul>
<li class="comment-date"><i class="fa fa-clock-o"></i> 17/10/2015</li>
</ul>
</div>
<p class="comment-text">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia.
</p>
</div>
<!--/.Content column-->
</div>
<!--/.Third row-->
</div>
</section>
<!--/Section: Comments list-->
<hr class="between-sections">
<!--Section: Leave a reply (Logged In User) -->
<section>
<!--Leave a reply form-->
<div class="reply-form">
<h1 class="section-heading">Leave a reply </h1>
<p class="text-center">(Logged In User)</p>
<!--Third row-->
<div class="row">
<!--Image column-->
<div class="col-sm-2 col-12">
<img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg">
</div>
<!--/.Image column-->
<!--Content column-->
<div class="col-sm-10 col-12">
<div class="md-form">
<textarea type="text" id="form8" class="md-textarea"></textarea>
<label for="form8">Your message</label>
</div>
</div>
<div class="text-center">
<button class="btn btn-primary">Submit</button>
</div>
<!--/.Content column-->
</div>
<!--/.Third row-->
</div>
<!--/.Leave a reply form-->
</section>
<!--/.Section: Leave a reply (Logged In User)-->
<hr class="between-sections">
<!--Section: Leave a reply (Not Logged In User)-->
<section>
<!--Leave a reply form-->
<div class="reply-form">
<h1 class="section-heading">Leave a reply </h1>
<p class="text-center">(Not Logged In User)</p>
<h4>Sign up with: <span>
<!--Facebook-->
<a type="button" class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"></i></a>
<!--Twitter-->
<a type="button" class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"></i></a>
<!--Google +-->
<a type="button" class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"></i></a>
</span> <br><br>or:</h4>
<div class="text-left">
<div class="md-form">
<i class="fa fa-user prefix"></i>
<input type="text" id="form22" class="form-control">
<label for="form22">Your name</label>
</div>
<div class="md-form">
<i class="fa fa-envelope prefix"></i>
<input type="text" id="form32" class="form-control">
<label for="form32">Your email</label>
</div>
<div class="md-form">
<i class="fa fa-home prefix"></i>
<input type="text" id="form33" class="form-control">
<label for="form33">Your website</label>
</div>
<div class="md-form">
<i class="fa fa-pencil prefix"></i>
<textarea type="text" id="form18" class="md-textarea"></textarea>
<label for="form18">Your message</label>
</div>
<div class="text-center">
<button class="btn btn-primary">Submit</button>
</div>
</div>
</div>
<!--/.Leave a reply form-->
</section>
<!--/Section: Leave a reply (Not Logged In User)-->
</div>
<!--/Post column-->
<!--Right sidebar-->
<div class="col-md-4">
<!--Section: Sidebar widget-->
<section>
<!--Card-->
<div class="card card-cascade wider">
<!--Card image-->
<div class="view overlay hm-white-slight wow fadeInDown" data-wow-delay="0.2s">
<img src="https://mdbootstrap.com/images/regular/people/img%20(33).jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block text-center wow fadeInDown">
<!--Title-->
<h4 class="card-title">How to travel cheaply?</h4>
<!--Text-->
<p class="card-text">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat sunt in culpa nulla pariatur.</p>
<a class="btn btn-primary">Read more</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</section>
<!--/Section: Sidebar widget-->
</div>
<!--/Right sidebar-->
</div>
</div>
</main>
<!--/Main layout-->
<!--Footer-->
<footer class="page-footer center-on-small-only">
<!--Footer Links-->
<div class="container-fluid">
<div class="row wow fadeIn" data-wow-delay="0.3s">
<!--First column-->
<div class="col-md-3 offset-md-1">
<h5 class="title">Footer Content</h5>
<p>Here you can use rows and columns here to organize your footer content.</p>
</div>
<!--/.First column-->
<hr class="hidden-md-up">
<!--Second column-->
<div class="col-md-2 offset-md-1">
<h5 class="title">Links</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Second column-->
<hr class="hidden-md-up">
<!--Third column-->
<div class="col-md-2">
<h5 class="title">Links</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Third column-->
<hr class="hidden-md-up">
<!--Fourth column-->
<div class="col-md-2">
<h5 class="title">Links</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Fourth column-->
</div>
</div>
<!--/.Footer Links-->
<hr>
<!--Call to action-->
<div class="call-to-action wow fadeIn" data-wow-delay="0.3s">
<ul>
<li>
<h5>Register for free</h5></li>
<li><a href="" class="btn btn-danger">Sign up!</a></li>
</ul>
</div>
<!--/.Call to action-->
<hr>
<!--Social buttons-->
<div class="social-section wow fadeIn" data-wow-delay="0.3s">
<ul>
<li><a href="https://www.facebook.com/mdbootstrap" target="_blank" class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"> </i></a></li>
<li><a href="https://twitter.com/MDBootstrap" target="_blank" class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"> </i></a></li>
<li><a href="https://plus.google.com/u/0/+Mdbootstrap" target="_blank" class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"> </i></a></li>
<li><a href="https://pl.linkedin.com/in/dawid-adach-97435534/pl" target="_blank" class="btn-floating btn-small btn-li"><i class="fa fa-linkedin"> </i></a></li>
<li><a class="btn-floating btn-small btn-git"><i class="fa fa-github"> </i></a></li>
<li><a href="https://pl.pinterest.com/materialdesignf/" target="_blank" class="btn-floating btn-small btn-pin"><i class="fa fa-pinterest"> </i></a></li>
<li><a href="https://www.instagram.com/material_design_for_bootstrap/" target="_blank" class="btn-floating btn-small btn-ins"><i class="fa fa-instagram"> </i></a></li>
</ul>
</div>
<!--/.Social buttons-->
<!--Copyright-->
<div class="footer-copyright">
<div class="container-fluid">
© 2015 Copyright: <a href="http://www.MDBootstrap.com"> MDBootstrap.com </a>
</div>
</div>
<!--/.Copyright-->
</footer>
<!--/.Footer-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="../../../js/jquery-3.1.1.min.js"></script>
<!-- Tooltips -->
<script type="text/javascript" src="../../../js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="../../../js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="../../../js/mdb.min.js"></script>
<script>
// SideNav init
$(".button-collapse").sideNav();
var el = document.querySelector('.custom-scrollbar');
Ps.initialize(el);
</script>
<script>
new WOW().init();
</script>
</body>
</html>

1414
html/templates/advanced/E-commerce/home-page.html Normal file
View File

File diff suppressed because it is too large Load Diff

628
html/templates/advanced/E-commerce/product-page.html Normal file
View File

@@ -0,0 +1,628 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap Template</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="../../../css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="../../../css/mdb.min.css" rel="stylesheet">
</head>
<body class="fixed-sn mdb-skin">
<!--Double navigation-->
<header>
<!-- Sidebar navigation -->
<ul id="slide-out" class="side-nav fixed sn-bg-1 custom-scrollbar">
<!-- Logo -->
<li>
<div class="logo-wrapper waves-light">
<a href="#"><img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" class="img-fluid flex-center"></a>
</div>
</li>
<!--/. Logo -->
<!--Social-->
<li>
<ul class="social">
<li><a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a></li>
<li><a class="icons-sm pin-ic"><i class="fa fa-pinterest"> </i></a></li>
<li><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a></li>
<li><a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a></li>
</ul>
</li>
<!--/Social-->
<!--Search Form-->
<li>
<form class="search-form" role="search">
<div class="form-group waves-light">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
</li>
<!--/.Search Form-->
<!-- Side navigation links -->
<li>
<ul class="collapsible collapsible-accordion">
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-heart"></i> New Arrivals<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Handbags</a>
</li>
<li><a href="#" class="waves-effect">Shoes</a>
</li>
<li><a href="#" class="waves-effect">Dresses</a>
</li>
<li><a href="#" class="waves-effect">Skirts</a>
</li>
<li><a href="#" class="waves-effect">Jeans</a>
</li>
<li><a href="#" class="waves-effect">Outerwear</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-diamond"></i> Accessories<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Jewelry</a>
</li>
<li><a href="#" class="waves-effect">Wallets & Purses</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-gitlab"></i> For kids<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Girls</a>
</li>
<li><a href="#" class="waves-effect">Boys</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-sun-o"></i> Summer<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Swimsuits</a>
</li>
<li><a href="#" class="waves-effect">Sandals</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-briefcase"></i> Fall / Winter<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Coats</a>
</li>
<li><a href="#" class="waves-effect">Boots</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-coffee "></i> Spring<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Denim jackets</a>
</li>
<li><a href="#" class="waves-effect">Sneakers</a>
</li>
</ul>
</div>
</li>
</ul>
</li>
<!--/. Side navigation links -->
<div class="sidenav-bg mask-strong"></div>
</ul>
<!--/. Sidebar navigation -->
<!--Navbar-->
<nav class="navbar fixed-top navbar-toggleable-md navbar-dark scrolling-navbar double-nav">
<!-- SideNav slide-out button -->
<div class="float-left">
<a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a>
</div>
<!-- Breadcrumb-->
<div class="breadcrumb-dn mr-auto">
<p>MDB E-commerce Product Page</p>
</div>
<ul class="nav navbar-nav nav-flex-icons ml-auto">
<li class="nav-item">
<a class="nav-link"> <span class="badge red z-depth-1">2</span> <i class="fa fa-shopping-cart"></i> <span class="hidden-sm-down">Cart</span></a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="fa fa-envelope"></i> <span class="hidden-sm-down">Contact</span></a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="fa fa-comments-o"></i> <span class="hidden-sm-down">Support</span></a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="fa fa-sign-in"></i> <span class="hidden-sm-down">Register</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-user"></i> <span class="hidden-sm-down">Profile</span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Logout</a>
<a class="dropdown-item" href="#">My account</a>
</div>
</li>
</ul>
</nav>
<!--/.Navbar-->
</header>
<!--/Double navigation-->
<!--Main layout-->
<main>
<div class="container-fluid">
<!--Section: Product intro-->
<section class="section section-blog-fw">
<!--First row-->
<div class="row">
<div class="col-md-12 wow fadeIn">
<!--Featured image-->
<img src="https://mdbootstrap.com/images/slides/slide%20(25).jpg">
<!--Post data-->
<div class="jumbotron wow fadeIn" data-wow-delay="0.2s">
<h1 class="h1-responsive">Big Handbag for Fall / Winter Season</h1>
<hr class="mb-3">
<p>Short description</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat maiores dicta, illo ullam reiciendis sed, ab recusandae et perferendis in, distinctio, harum molestias eum quasi totam enim! Quibusdam, iure ipsa.</p>
<a href="" class="btn btn-primary"><i class="fa fa-shopping-cart left"></i> <span class="hidden-sm-down">Add to cart</span></a>
<a href="" class="btn btn-default"><i class="fa fa-star left"></i> <span class="hidden-sm-down">Live preview</span></a>
<a href="" class="btn btn-secondary"><i class="fa fa-envelope left"></i> <span class="hidden-sm-down">Ask for details</span></a>
</div>
<!--/Post data-->
</div>
</div>
<!--/First row-->
</section>
<!--/Section: Product intro-->
<!--Section: Product description-->
<section class="section">
<!--Section heading-->
<h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Product description</h1>
<!--Section sescription-->
<!-- Nav tabs -->
<ul class="nav nav-tabs tabs-3 indigo wow fadeIn" data-wow-delay="0.3s" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#panel5" role="tab"><i class="fa fa-diamond"></i> Product description</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#panel6" role="tab"><i class="fa fa-heart-o"></i> About designer</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#panel7" role="tab"><i class="fa fa-coffee"></i> More product details</a>
</li>
</ul>
<!-- Tab panels -->
<div class="tab-content">
<!--Panel 1-->
<div class="tab-pane animated wow fadeIn active" data-wow-delay="0.3s" id="panel5" role="tabpanel">
<br>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Tempora, placeat ratione porro voluptate odit minima.</p>
</div>
<!--/.Panel 1-->
<!--Panel 2-->
<div class="tab-pane animated wow fadeIn" data-wow-delay="0.3s" id="panel6" role="tabpanel">
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
</div>
<!--/.Panel 2-->
<!--Panel 3-->
<div class="tab-pane animated wow fadeIn" data-wow-delay="0.3s" id="panel7" role="tabpanel">
<br>
<p><i class="fa fa-minus"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
<p><i class="fa fa-minus"></i> Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p><i class="fa fa-minus"></i> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<!--/.Panel 3-->
</div>
</section>
<!--/Section: Product description-->
<hr class="between-sections">
<!--Section: Product gallery-->
<section class="section mb-4">
<!--Section heading-->
<h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Product gallery</h1>
<!--Section sescription-->
<p class="section-description wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>
<div class="row">
<div class="col-md-12 wow fadeIn" data-wow-delay="0.3s">
<div id="mdb-lightbox-ui"></div>
<div class="mdb-lightbox no-margin">
<figure class="col-md-4">
<a href="https://mdbootstrap.com/images/docs/lightbox-gallery/img%20(52)" data-size="1600x1067">
<img src="https://mdbootstrap.com/images/docs/lightbox-thumbs/img%20(52)" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/images/docs/lightbox-gallery/img%20(53)" data-size="1600x1067">
<img src="https://mdbootstrap.com/images/docs/lightbox-thumbs/img%20(53)" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/images/docs/lightbox-gallery/img%20(55)" data-size="1600x1067">
<img src="https://mdbootstrap.com/images/docs/lightbox-thumbs/img%20(55)" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/images/docs/lightbox-gallery/img%20(54)" data-size="1600x1067">
<img src="https://mdbootstrap.com/images/docs/lightbox-thumbs/img%20(54)" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/images/docs/lightbox-gallery/img%20(57)" data-size="1600x1067">
<img src="https://mdbootstrap.com/images/docs/lightbox-thumbs/img%20(57)" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/images/docs/lightbox-gallery/img%20(56)" data-size="1600x1067">
<img src="https://mdbootstrap.com/images/docs/lightbox-thumbs/img%20(56)" class="img-fluid" />
</a>
</figure>
</div>
</div>
</div>
</section>
<!--/Section: Product gallery-->
<hr class="between-sections">
<!--Section: Features v.3-->
<section class="section feature-box">
<!--Section heading-->
<h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Why is it so great?</h1>
<!--Section sescription-->
<p class="section-description lead wow fadeIn" data-wow-delay="0.2s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
<!--First row-->
<div class="row features-small wow fadeIn" data-wow-delay="0.4s">
<!--First column-->
<div class="col-md-5 mb-r center-on-small-only">
<img src="https://mdbootstrap.com/wp-content/uploads/2016/07/img-2-min.jpg" alt="" class="z-depth-0">
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-7 center-on-small-only">
<!--First row-->
<div class="row">
<div class="col-1">
<i class="fa fa-bank indigo-text"></i>
</div>
<div class="col-10">
<h4 class="feature-title">Safety</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
</div>
</div>
<!--/First row-->
<div style="height:50px"></div>
<!--Second row-->
<div class="row">
<div class="col-1">
<i class="fa fa-code indigo-text"></i>
</div>
<div class="col-10">
<h4 class="feature-title">Technology</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
</div>
</div>
<!--/Second row-->
<div style="height:50px"></div>
<!--Third row-->
<div class="row">
<div class="col-1">
<i class="fa fa-money indigo-text"></i>
</div>
<div class="col-10">
<h4 class="feature-title">Finance</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
</div>
</div>
<!--/Third row-->
</div>
<!--/Second column-->
</div>
<!--/First row-->
</section>
<!--/Section: Features v.3-->
<hr class="between-sections">
<!--Section: Testimonials v.3-->
<section class="section team-section">
<!--Section heading-->
<h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Testimonials</h1>
<!--Section description-->
<p class="section-description wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>
<!--First row-->
<div class="row text-center">
<!--First column-->
<div class="col-md-4 mb-r wow fadeInDown" data-wow-delay="0.3s">
<div class="testimonial">
<!--Avatar-->
<div class="avatar">
<img src="https://mdbootstrap.com/images/avatars/img%20(1).jpg" class="rounded-circle img-fluid">
</div>
<!--Content-->
<h4>Anna Deynah</h4>
<h5>Web Designer</h5>
<p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab.</p>
<!--Review-->
<div class="orange-text">
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star-half-full"> </i>
</div>
</div>
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-4 mb-r wow fadeInDown" data-wow-delay="0.4s">
<div class="testimonial">
<!--Avatar-->
<div class="avatar">
<img src="https://mdbootstrap.com/images/avatars/img%20(3).jpg" class="rounded-circle img-fluid">
</div>
<!--Content-->
<h4>John Doe</h4>
<h5>Web Developer</h5>
<p><i class="fa fa-quote-left"></i> Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.</p>
<!--Review-->
<div class="orange-text">
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
</div>
</div>
</div>
<!--/Second column-->
<!--Third column-->
<div class="col-md-4 mb-r wow fadeInDown" data-wow-delay="0.5s">
<div class="testimonial">
<!--Avatar-->
<div class="avatar">
<img src="https://mdbootstrap.com/images/avatars/img%20(2).jpg" class="rounded-circle img-fluid">
</div>
<!--Content-->
<h4>Maria Kate</h4>
<h5>Photographer</h5>
<p><i class="fa fa-quote-left"></i> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.</p>
<!--Review-->
<div class="orange-text">
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star-o"> </i>
</div>
</div>
</div>
<!--/Third column-->
</div>
<!--/First row-->
</section>
<!--/Section: Testimonials v.3-->
</div>
</main>
<!--/Main layout-->
<!--Footer-->
<footer class="page-footer center-on-small-only">
<!--Footer Links-->
<div class="container-fluid">
<div class="row wow fadeIn" data-wow-delay="0.3s">
<!--First column-->
<div class="col-md-3 offset-md-1">
<h5 class="title">Footer Content</h5>
<p>Here you can use rows and columns here to organize your footer content.</p>
</div>
<!--/.First column-->
<hr class="hidden-md-up">
<!--Second column-->
<div class="col-md-2 offset-md-1">
<h5 class="title">Links</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Second column-->
<hr class="hidden-md-up">
<!--Third column-->
<div class="col-md-2">
<h5 class="title">Links</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Third column-->
<hr class="hidden-md-up">
<!--Fourth column-->
<div class="col-md-2">
<h5 class="title">Links</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Fourth column-->
</div>
</div>
<!--/.Footer Links-->
<hr>
<!--Call to action-->
<div class="call-to-action wow fadeIn" data-wow-delay="0.3s">
<ul>
<li>
<h5>Register for free</h5></li>
<li><a href="" class="btn btn-danger">Sign up!</a></li>
</ul>
</div>
<!--/.Call to action-->
<hr>
<!--Social buttons-->
<div class="social-section wow fadeIn" data-wow-delay="0.3s">
<ul>
<li><a href="https://www.facebook.com/mdbootstrap" target="_blank" class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"> </i></a></li>
<li><a href="https://twitter.com/MDBootstrap" target="_blank" class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"> </i></a></li>
<li><a href="https://plus.google.com/u/0/+Mdbootstrap" target="_blank" class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"> </i></a></li>
<li><a href="https://pl.linkedin.com/in/dawid-adach-97435534/pl" target="_blank" class="btn-floating btn-small btn-li"><i class="fa fa-linkedin"> </i></a></li>
<li><a class="btn-floating btn-small btn-git"><i class="fa fa-github"> </i></a></li>
<li><a href="https://pl.pinterest.com/materialdesignf/" target="_blank" class="btn-floating btn-small btn-pin"><i class="fa fa-pinterest"> </i></a></li>
<li><a href="https://www.instagram.com/material_design_for_bootstrap/" target="_blank" class="btn-floating btn-small btn-ins"><i class="fa fa-instagram"> </i></a></li>
</ul>
</div>
<!--/.Social buttons-->
<!--Copyright-->
<div class="footer-copyright">
<div class="container-fluid">
© 2017 Copyright: <a href="http://www.MDBootstrap.com"> MDBootstrap.com </a>
</div>
</div>
<!--/.Copyright-->
</footer>
<!--/.Footer-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="../../../js/jquery-3.1.1.min.js"></script>
<!-- Tooltips -->
<script type="text/javascript" src="../../../js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="../../../js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="../../../js/mdb.min.js"></script>
<script>
// SideNav init
$(".button-collapse").sideNav();
var el = document.querySelector('.custom-scrollbar');
Ps.initialize(el);
// MDB Lightbox Init
$(function() {
$("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html");
});
</script>
<script>
new WOW().init();
</script>
</body>
</html>

1213
html/templates/advanced/Landing Pages/app.html Normal file
View File

File diff suppressed because it is too large Load Diff

906
html/templates/advanced/Landing Pages/cta-buttons.html Normal file
View File

@@ -0,0 +1,906 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap Template</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="../../../css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="../../../css/mdb.min.css" rel="stylesheet">
<style>
/* TEMPLATE STYLES */
html,
body,
header,
.view {
height: 100%;
}
/* Navigation*/
.navbar {
background-color: transparent;
}
.top-nav-collapse {
background-color: #455A64;
}
@media only screen and (max-width: 768px) {
.navbar {
background-color: #0A6A60;
}
}
.full-bg-img {
color: #fff;
}
.view {
background: url("https://mdbootstrap.com/images/regular/people/img%20(63).jpg")no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
footer.page-footer {
background-color: #7E929C;
}
</style>
</head>
<body>
<!--Navigation & Intro-->
<header>
<!--Navbar-->
<nav class="navbar fixed-top navbar-toggleable-md navbar-dark scrolling-navbar">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<img src="https://mdbootstrap.com/img/logo/mdb-transparent-sm-shadows.png" class="d-inline-block align-top" alt="MDBootstrap">
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="nav navbar-nav smooth-scroll mr-auto">
<li class="nav-item">
<a class="nav-link waves-effect waves-light" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect waves-light" href="#best-features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect waves-light" href="#examples-of-use">Examples</a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect waves-light" href="#testimonials">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect waves-light" href="#pricing">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect waves-light" href="#our-team">Team</a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect waves-light" href="#contact">Contact</a>
</li>
</ul>
<ul class="navbar-nav nav-flex-icons">
<li class="nav-item">
<a class="nav-link"><i class="fa fa-facebook"></i></a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="fa fa-twitter"></i></a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="fa fa-instagram"></i></a>
</li>
</ul>
</div>
</div>
</nav>
<!--/.Navbar-->
<!--Mask-->
<div class="view hm-black-strong">
<div class="full-bg-img flex-center" id="home">
<ul>
<li>
<h1 class="h1-responsive wow fadeInUp">Our New Course is Ready</h1></li>
<li>
<p class="wow fadeInUp" data-wow-delay="0.2s">It comes with a lot of new features, easy to follow videos and images. Check it out now!</p>
</li>
<li>
<a class="btn btn-outline-white btn-lg wow fadeInLeft" data-wow-delay="0.2s"><i class="fa fa-user left"></i> Sign up!</a>
<a class="btn btn-outline-white btn-lg wow fadeInRight" data-wow-delay="0.2s"><i class="fa fa-book left"></i>Learn more</a>
</li>
</ul>
</div>
</div>
<!--/.Mask-->
</header>
<!--/Navigation & Intro-->
<!--Main layout-->
<main>
<div class="container">
<!--Projects section v.4-->
<section class="section extra-margins" id="examples-of-use">
<!--Section heading-->
<h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Our best projects</h1>
<!--Section description-->
<p class="section-description wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-md-6 mb-r wow fadeInDown">
<!--Image-->
<img src="https://mdbootstrap.com/images/regular/people/img%20(65).jpg" alt="" class="img-fluid z-depth-2">
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-5 offset-md-1">
<!--First row-->
<div class="row wow fadeInRight" data-wow-delay="0.2s">
<div class="col-1 mr-1">
<i class="fa fa-bank fa-2x cyan-text"></i>
</div>
<div class="col-10">
<h4 class="feature-title">Safety</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
</div>
</div>
<!--/First row-->
<div style="height:20px"></div>
<!--Second row-->
<div class="row wow fadeInRight" data-wow-delay="0.3s">
<div class="col-1 mr-1">
<i class="fa fa-code fa-2x indigo-text"></i>
</div>
<div class="col-10">
<h4 class="feature-title">Technology</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
</div>
</div>
<!--/Second row-->
<div style="height:20px"></div>
<!--Third row-->
<div class="row wow fadeInRight" data-wow-delay="0.4s">
<div class="col-1 mr-1">
<i class="fa fa-money fa-2x blue-text"></i>
</div>
<div class="col-10">
<h4 class="feature-title">Finance</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
</div>
</div>
<!--/Third row-->
</div>
<!--/Second column-->
</div>
<!--/First row-->
<div style="height:70px">
<hr class="hidden-md-up">
</div>
<!--Second row-->
<div class="row">
<!--First column-->
<div class="col-md-5 mb-r">
<!--First row-->
<div class="row wow fadeInLeft" data-wow-delay="0.2s">
<div class="col-1 m-r-1">
<i class="fa fa-eye fa-2x light-green-text"></i>
</div>
<div class="col-10">
<h4 class="feature-title">Followers</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
</div>
</div>
<!--/First row-->
<div style="height:20px"></div>
<!--Second row-->
<div class="row wow fadeInLeft" data-wow-delay="0.3s">
<div class="col-1 mr-1">
<i class="fa fa-heart-o fa-2x pink-text"></i>
</div>
<div class="col-10">
<h4 class="feature-title">Entertainment</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
</div>
</div>
<!--/Second row-->
<div style="height:20px"></div>
<!--Third row-->
<div class="row wow fadeInLeft" data-wow-delay="0.4s">
<div class="col-1 mr-1">
<i class="fa fa-smile-o fa-2x amber-text"></i>
</div>
<div class="col-10">
<h4 class="feature-title">Communication</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
</div>
</div>
<!--/Third row-->
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-6 offset-md-1 mb-2 wow fadeInUp">
<img src="https://mdbootstrap.com/images/regular/people/img%20(61).jpg" alt="" class="img-fluid z-depth-2">
</div>
<!--/Second column-->
</div>
<!--/First row-->
</section>
<!--/Projects section v.4-->
<hr class="between-sections">
<!--Section: Features v.1-->
<section class="section feature-box" id="best-features">
<!--Section heading-->
<h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Why is it so great?</h1>
<!--Section description-->
<p class="section-description lead wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>
<!--First row-->
<div class="row features-big">
<!--First column-->
<div class="col-md-4 mb-r wow zoomIn">
<i class="fa fa-area-chart blue-text"></i>
<h4 class="feature-title">Analytics</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-4 mb-r wow zoomIn">
<i class="fa fa-book green-text"></i>
<h4 class="feature-title">Tutorials</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
</div>
<!--/Second column-->
<!--Third column-->
<div class="col-md-4 mb-r wow zoomIn">
<i class="fa fa-coffee red-text"></i>
<h4 class="feature-title">Relax</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
</div>
<!--/Third column-->
</div>
<!--/First row-->
</section>
<!--/Section: Features v.1-->
<hr class="between-sections">
<!--Section: Testimonials v.3-->
<section class="section team-section" id="testimonials">
<!--Section heading-->
<h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Testimonials</h1>
<!--Section description-->
<p class="section-description wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>
<!--First row-->
<div class="row text-center">
<!--First column-->
<div class="col-md-4 mb-r wow fadeInUp">
<div class="testimonial">
<!--Avatar-->
<div class="avatar">
<img src="https://mdbootstrap.com/images/avatars/img%20(1).jpg" class="rounded-circle img-fluid">
</div>
<!--Content-->
<h4>Anna Deynah</h4>
<h5>Web Designer</h5>
<p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab.</p>
<!--Review-->
<div class="orange-text">
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star-half-full"> </i>
</div>
</div>
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-4 mb-r wow fadeInUp" data-wow-delay="0.2s">
<div class="testimonial">
<!--Avatar-->
<div class="avatar">
<img src="https://mdbootstrap.com/images/avatars/img%20(3).jpg" class="rounded-circle img-fluid">
</div>
<!--Content-->
<h4>John Doe</h4>
<h5>Web Developer</h5>
<p><i class="fa fa-quote-left"></i> Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.</p>
<!--Review-->
<div class="orange-text">
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
</div>
</div>
</div>
<!--/Second column-->
<!--Third column-->
<div class="col-md-4 mb-r wow fadeInUp" data-wow-delay="0.4s">
<div class="testimonial">
<!--Avatar-->
<div class="avatar">
<img src="https://mdbootstrap.com/images/avatars/img%20(2).jpg" class="rounded-circle img-fluid">
</div>
<!--Content-->
<h4>Maria Kate</h4>
<h5>Photographer</h5>
<p><i class="fa fa-quote-left"></i> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.</p>
<!--Review-->
<div class="orange-text">
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star-o"> </i>
</div>
</div>
</div>
<!--/Third column-->
</div>
<!--/First row-->
</section>
<!--/Section: Testimonials v.3-->
<hr class="between-sections">
<!--Section: Pricing v.2-->
<section class="section" id="pricing">
<!--Section heading-->
<h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Our pricing plans</h1>
<!--Section description-->
<p class="section-description wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-lg-4 col-md-6 mb-r wow fadeInRight">
<!--Pricing card-->
<div class="card-overlay pricing-card" style="background-image: url('https://mdbootstrap.com/images/regular/dark/img%20(7).jpg')">
<!--Content-->
<div class="white-text text-center">
<div class="card-block">
<h5>Basic</h5>
<!--Price-->
<div class="price">
<h1>10</h1>
</div>
<!--/.Price-->
<ul class="striped">
<li>
<p><strong>1</strong> project</p>
</li>
<li>
<p><strong>100</strong> components</p>
</li>
<li>
<p><strong>150</strong> features</p>
</li>
<li>
<p><strong>200</strong> members</p>
</li>
<li>
<p><strong>250</strong> messages</p>
</li>
</ul>
<a class="btn btn-lg btn-outline-white"> Buy now</a>
</div>
</div>
</div>
<!--/.Pricing card-->
</div>
<!--/First column-->
<!--Second column-->
<div class="col-lg-4 col-md-6 mb-r wow fadeInRight" data-wow-delay="0.2s">
<!--Pricing card-->
<div class="card-overlay pricing-card" style="background-image: url('https://mdbootstrap.com/images/regular/dark/img%20(8).jpg')">
<!--Content-->
<div class="white-text text-center">
<div class="card-block">
<h5>Pro</h5>
<!--Price-->
<div class="price">
<h1>20</h1>
</div>
<!--/.Price-->
<ul class="striped">
<li>
<p><strong>3</strong> projects</p>
</li>
<li>
<p><strong>200</strong> components</p>
</li>
<li>
<p><strong>250</strong> features</p>
</li>
<li>
<p><strong>300</strong> members</p>
</li>
<li>
<p><strong>350</strong> messages</p>
</li>
</ul>
<a class="btn btn-lg btn-outline-white"> Buy now</a>
</div>
</div>
</div>
<!--/.Pricing card-->
</div>
<!--/Second column-->
<!--Third column-->
<div class="col-lg-4 col-md-6 mb-r wow fadeInRight" data-wow-delay="0.4s">
<!--Pricing card-->
<div class="card-overlay pricing-card" style="background-image: url('https://mdbootstrap.com/images/regular/dark/img%20(9).jpg')">
<!--Content-->
<div class="text-center">
<div class="card-block">
<h5>Enterprise</h5>
<!--Price-->
<div class="price">
<h1>30</h1>
</div>
<!--/.Price-->
<ul class="striped">
<li>
<p><strong>5</strong> projects</p>
</li>
<li>
<p><strong>300</strong> components</p>
</li>
<li>
<p><strong>350</strong> features</p>
</li>
<li>
<p><strong>400</strong> members</p>
</li>
<li>
<p><strong>450</strong> messages</p>
</li>
</ul>
<a class="btn btn-lg btn-outline-white"> Buy now</a>
</div>
</div>
</div>
<!--/.Pricing card-->
</div>
<!--/Third column-->
</div>
<!--/First row-->
</section>
<!--/Section: Pricing v.2-->
<hr class="between-sections">
<!--Section: Team v.3-->
<section class="section team-section" id="our-team">
<!--Section heading-->
<h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Our amazing team</h1>
<!--Section sescription-->
<p class="section-description wow fadeIn" data-wow-delay="0.2s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
<!--First row-->
<div class="row center-on-small-only wow fadeIn" data-wow-delay="0.4s">
<!--First column-->
<div class="col-lg-6 col-md-12 mb-r">
<div class="col-md-6 float-left">
<div class="avatar">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(9).jpg">
</div>
</div>
<div class="col-md-6 ml-auto">
<h4>John Doe</h4>
<h5>Web Developer</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab.</p>
<!--Facebook-->
<a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a>
<!--Twitter-->
<a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a>
<!--GitHub-->
<a class="icons-sm git-ic"><i class="fa fa-github"> </i></a>
</div>
</div>
<!--/First column-->
<!--Second column-->
<div class="col-lg-6 col-md-12 mb-r">
<div class="col-md-6 float-left">
<div class="avatar">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg">
</div>
</div>
<div class="col-md-6 ml-auto">
<h4>Maria Kate</h4>
<h5>Photographer</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab.</p>
<!--Facebook-->
<a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a>
<!--Pinterest-->
<a class="icons-sm pin-ic"><i class="fa fa-pinterest"> </i></a>
<!--Instagram-->
<a class="icons-sm ins-ic"><i class="fa fa-instagram"> </i></a>
</div>
</div>
<!--/Second column-->
</div>
<!--/First row-->
<div style="height:50px" class="hidden-md-down"></div>
<!--Second row-->
<div class="row center-on-small-only wow fadeIn" data-wow-delay="0.4s">
<!--Third column-->
<div class="col-lg-6 col-md-12 mb-r">
<div class="col-md-6 float-left">
<div class="avatar">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(11).jpg">
</div>
</div>
<div class="col-md-6 ml-auto">
<h4>Anna Deynah</h4>
<h5>Web Designer</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab.</p>
<!--Facebook-->
<a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a>
<!--Twitter-->
<a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a>
<!--Dribbble-->
<a class="icons-sm drib-ic"><i class="fa fa-dribbble"> </i></a>
</div>
</div>
<!--/Third column-->
<!--Fourth column-->
<div class="col-lg-6 col-md-12 mb-r">
<div class="col-md-6 float-left">
<div class="avatar">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg">
</div>
</div>
<div class="col-md-6 ml-auto">
<h4>Sarah Melyah</h4>
<h5>Front-end Developer</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab.</p>
<!--Google +-->
<a class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a>
<!--Facebook-->
<a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a>
<!--GitHub-->
<a class="icons-sm git-ic"><i class="fa fa-github"> </i></a>
</div>
</div>
<!--/Fourth column-->
</div>
<!--/Second row-->
</section>
<!--/Section: Team v.3-->
<hr class="between-sections">
<!--Section: Contact v.2-->
<section class="section" id="contact">
<!--Section heading-->
<h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Contact</h1>
<!--Section description-->
<p class="section-description mb-5 wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>
<div class="row wow zoomIn" data-wow-delay="0.4s">
<!--First column-->
<div class="col-md-8">
<form>
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-md-6">
<div class="md-form">
<div class="md-form">
<input type="text" id="form41" class="form-control">
<label for="form41" class="">Your name</label>
</div>
</div>
</div>
<!--Second column-->
<div class="col-md-6">
<div class="md-form">
<div class="md-form">
<input type="text" id="form52" class="form-control">
<label for="form52" class="">Your email</label>
</div>
</div>
</div>
</div>
<!--/.First row-->
<!--Second row-->
<div class="row">
<div class="col-md-12">
<div class="md-form">
<input type="text" id="form51" class="form-control">
<label for="form51" class="">Subject</label>
</div>
</div>
</div>
<!--/Second row-->
<!--Third row-->
<div class="row">
<!--First column-->
<div class="col-md-12">
<div class="md-form">
<textarea type="text" id="form76" class="md-textarea"></textarea>
<label for="form76">Your message</label>
</div>
</div>
</div>
<!--/.Third row-->
</form>
<div class="center-on-small-only">
<a class="btn btn-email">Send</a>
</div>
</div>
<!--.First column-->
<!--Second column-->
<div class="col-md-4">
<ul class="contact-icons">
<li><i class="fa fa-map-marker fa-2x"></i>
<p>New York, NY 10012, USA</p>
</li>
<li><i class="fa fa-phone fa-2x"></i>
<p>+ 01 234 567 89</p>
</li>
<li><i class="fa fa-envelope fa-2x"></i>
<p>contact@mdbootstrap.com</p>
</li>
</ul>
</div>
<!--.Second column-->
</div>
</section>
<!--/Section: Contact v.2-->
</div>
</main>
<!--/Main layout-->
<!--Footer-->
<footer class="page-footer center-on-small-only">
<!--Footer Links-->
<div class="container-fluid">
<div class="row wow fadeIn" data-wow-delay="0.3s">
<!--First column-->
<div class="col-md-3 offset-md-1">
<h5 class="title">ABOUT MATERIAL DESIGN</h5>
<br>
<p>Material Design (codenamed Quantum Paper) is a design language developed by Google. </p>
<p>Material Design for Bootstrap (MDB) is a powerful Material Design UI KIT for most popular HTML, CSS, and JS framework - Bootstrap.</p>
</div>
<!--/.First column-->
<hr class="hidden-md-up">
<!--Second column-->
<div class="col-md-2 offset-md-1">
<h5 class="title">Links</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Second column-->
<hr class="hidden-md-up">
<!--Third column-->
<div class="col-md-2">
<h5 class="title">Links</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Third column-->
<hr class="hidden-md-up">
<!--Fourth column-->
<div class="col-md-2">
<h5 class="title">Links</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Fourth column-->
</div>
</div>
<!--/.Footer Links-->
<hr>
<!--Call to action-->
<div class="call-to-action wow fadeIn" data-wow-delay="0.3s">
<ul>
<li>
<h5>Register for free</h5></li>
<li><a href="" class="btn btn-danger">Sign up!</a></li>
</ul>
</div>
<!--/.Call to action-->
<hr>
<!--Social buttons-->
<div class="social-section wow fadeIn" data-wow-delay="0.3s">
<ul>
<li><a href="https://www.facebook.com/mdbootstrap" target="_blank" class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"> </i></a></li>
<li><a href="https://twitter.com/MDBootstrap" target="_blank" class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"> </i></a></li>
<li><a href="https://plus.google.com/u/0/+Mdbootstrap" target="_blank" class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"> </i></a></li>
<li><a href="https://www.linkedin.com/in/michal-szymanski-9228918a" target="_blank" class="btn-floating btn-small btn-li"><i class="fa fa-linkedin"> </i></a></li>
<li><a class="btn-floating btn-small btn-git"><i class="fa fa-github"> </i></a></li>
<li><a href="https://pl.pinterest.com/materialdesignf/" target="_blank" class="btn-floating btn-small btn-pin"><i class="fa fa-pinterest"> </i></a></li>
<li><a href="https://www.instagram.com/mdbootstrap/" target="_blank" class="btn-floating btn-small btn-ins"><i class="fa fa-instagram"> </i></a></li>
</ul>
</div>
<!--/.Social buttons-->
<!--Copyright-->
<div class="footer-copyright">
<div class="container-fluid">
© 2015 Copyright: <a href="http://www.MDBootstrap.com"> MDBootstrap.com </a>
</div>
</div>
<!--/.Copyright-->
</footer>
<!--/.Footer-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="../../../js/jquery-3.1.1.min.js"></script>
<!-- Tooltips -->
<script type="text/javascript" src="../../../js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="../../../js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="../../../js/mdb.min.js"></script>
<script>
new WOW().init();
</script>
</body>
</html>

851
html/templates/advanced/Landing Pages/form-contact.html Normal file
View File

@@ -0,0 +1,851 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap Template</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="../../../css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="../../../css/mdb.min.css" rel="stylesheet">
<style>
html,
body,
header,
.view {
height: 100%;
}
/* Navigation*/
.navbar {
background-color: transparent;
}
.top-nav-collapse {
background-color: #006296;
}
@media only screen and (max-width: 768px) {
.navbar {
background-color: #006296;
}
}
/*Intro*/
.view {
background: url("https://mdbootstrap.com/images/regular/people/img%20(54).jpg")no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
@media (max-width: 768px) {
.full-bg-img,
.view {
height: 100%;
position: relative;
}
}
.description {
padding-top: 25%;
padding-bottom: 3rem;
color: #fff
}
@media (max-width: 992px) {
.description {
padding-top: 7rem;
text-align: center;
}
}
footer.page-footer {
background-color: #077AB7;
}
</style>
</head>
<body>
<!--Navigation & Intro-->
<header>
<!--Navbar-->
<nav class="navbar fixed-top navbar-toggleable-md navbar-dark scrolling-navbar">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<img src="https://mdbootstrap.com/img/logo/mdb-transparent-sm-shadows.png" class="d-inline-block align-top" alt="MDBootstrap">
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="nav navbar-nav smooth-scroll mr-auto">
<li class="nav-item">
<a class="nav-link waves-effect waves-light" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect waves-light" href="#best-features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect waves-light" href="#examples-of-use">Examples</a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect waves-light" href="#testimonials">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect waves-light" href="#pricing">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect waves-light" href="#our-team">Team</a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect waves-light" href="#contact">Contact</a>
</li>
</ul>
<ul class="navbar-nav nav-flex-icons">
<li class="nav-item">
<a class="nav-link"><i class="fa fa-facebook"></i></a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="fa fa-twitter"></i></a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="fa fa-instagram"></i></a>
</li>
</ul>
</div>
</div>
</nav>
<!--/.Navbar-->
<!--Mask-->
<div class="view hm-black-strong">
<div class="full-bg-img flex-center">
<div class="container">
<div class="row" id="home">
<!--First column-->
<div class="col-lg-6">
<div class="description">
<h2 class="h2-responsive wow fadeInLeft">We like to receive a messages </h2>
<hr class="hr-light wow fadeInLeft">
<p class="wow fadeInLeft" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem repellendus quasi fuga nesciunt dolorum nulla magnam veniam sapiente, fugiat! Commodi sequi non animi ea dolor molestiae, quisquam iste, maiores. Nulla.</p>
<br>
<a class="btn btn-git btn-lg wow fadeInLeft" data-wow-delay="0.7s">Learn more</a>
</div>
</div>
<!--/.First column-->
<!--Second column-->
<div class="col-lg-6 hidden-md-down wow fadeInRight">
<!--Form-->
<div class="card">
<div class="card-block">
<!--Header-->
<div class="text-center">
<h3><i class="fa fa-envelope"></i> Write to us:</h3>
<hr>
</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>
<!--Textarea with icon prefix-->
<div class="md-form">
<i class="fa fa-pencil prefix"></i>
<textarea type="text" id="form8" class="md-textarea"></textarea>
<label for="form8">Your message</label>
</div>
<div class="text-center">
<button class="btn btn-git btn-lg">Send</button>
<hr>
<fieldset class="form-group">
<input type="checkbox" id="checkbox1">
<label for="checkbox1">Subscribe me to the newsletter</label>
</fieldset>
</div>
</div>
</div>
<!--/.Form-->
</div>
<!--/Second column-->
</div>
</div>
</div>
</div>
<!--/.Mask-->
</header>
<!--/Navigation & Intro-->
<!--Main layout-->
<main>
<div class="container">
<!--Section: Features v.2-->
<section class="section feature-box" id="best-features">
<!--Section heading-->
<h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Why is it so great?</h1>
<!--Section description-->
<p class="section-description lead wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>
<!--First row-->
<div class="row features-small">
<!--First column-->
<div class="col-md-4 wow fadeInDown" data-wow-delay="0.2s">
<div class="col-2 float-left">
<i class="fa fa-bullhorn blue-text"></i>
</div>
<div class="col-10 ml-auto">
<h4 class="feature-title">Marketing</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
<a class="btn btn-primary">Learn more</a>
<div style="height:20px"></div>
</div>
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-4 wow fadeInDown" data-wow-delay="0.3s">
<div class="col-2 float-left">
<i class="fa fa-cogs green-text"></i>
</div>
<div class="col-10 ml-auto">
<h4 class="feature-title">Customization</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
<a class="btn btn-default">Learn more</a>
<div style="height:20px"></div>
</div>
</div>
<!--/Second column-->
<!--Third column-->
<div class="col-md-4 wow fadeInDown" data-wow-delay="0.4s">
<div class="col-2 float-left">
<i class="fa fa-dashboard red-text"></i>
</div>
<div class="col-10 ml-auto">
<h4 class="feature-title">Support</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
<a class="btn btn-danger">Learn more</a>
<div style="height:20px"></div>
</div>
</div>
<!--/Third column-->
</div>
<!--/First row-->
</section>
<!--/Section: Features v.2-->
<hr class="between-sections">
<!--Projects section v.3-->
<section class="section text-center" id="examples-of-use">
<!--Section heading-->
<h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Our best projects</h1>
<!--Section description-->
<p class="section-description wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-md-6 mb-r wow fadeInLeft" data-wow-delay="0.3s">
<!--Featured image-->
<div class="view overlay hm-white-slight z-depth-2">
<img src="https://mdbootstrap.com/images/regular/city/img%20(5).jpg">
<a>
<div class="mask"></div>
</a>
</div>
<!--Excerpt-->
<div class="card-block">
<h5 class="red-text"><i class="fa fa-money"></i> Business</h5>
<h3>Project title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam.</p>
<a class="btn btn-git"><i class="fa fa-clone left"></i> View project</a>
</div>
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-6 mb-r wow fadeInRight" data-wow-delay="0.3s">
<!--Featured image-->
<div class="view overlay hm-white-slight z-depth-2">
<img src="https://mdbootstrap.com/images/regular/city/img%20(6).jpg">
<a>
<div class="mask"></div>
</a>
</div>
<!--Excerpt-->
<div class="card-block">
<h5 class="teal-text"><i class="fa fa-pie-chart"></i> Marketing</h5>
<h3>Project title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam.</p>
<a class="btn btn-git"><i class="fa fa-clone left"></i> View project</a>
</div>
</div>
<!--/Second column-->
</div>
<!--/First row-->
<br>
<!--Second row-->
<div class="row">
<!--First column-->
<div class="col-md-6 mb-r wow fadeInLeft" data-wow-delay="0.4s">
<!--Featured image-->
<div class="view overlay hm-white-slight z-depth-2">
<img src="https://mdbootstrap.com/images/regular/city/img%20(26).jpg">
<a>
<div class="mask"></div>
</a>
</div>
<!--Excerpt-->
<div class="card-block">
<h5 class="cyan-text"><i class="fa fa-desktop"></i> Software</h5>
<h3>Project title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam.</p>
<a class="btn btn-git"><i class="fa fa-clone left"></i> View project</a>
</div>
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-6 mb-r wow fadeInRight" data-wow-delay="0.4s">
<!--Featured image-->
<div class="view overlay hm-white-slight z-depth-2">
<img src="https://mdbootstrap.com/images/regular/city/img%20(25).jpg">
<a>
<div class="mask"></div>
</a>
</div>
<!--Excerpt-->
<div class="card-block">
<h5 class="indigo-text"><i class="fa fa-graduation-cap"></i> Education</h5>
<h3>Project title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam.</p>
<a class="btn btn-git"><i class="fa fa-clone left"></i> View project</a>
</div>
</div>
<!--/Second column-->
</div>
<!--/Second row-->
</section>
<!--/Projects section v.3-->
<hr class="between-sections">
<!--Section: Testimonials v.1-->
<section class="section" id="testimonials">
<!--Section heading-->
<h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Testimonials</h1>
<!--Section description-->
<p class="section-description wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>
<div class="row">
<!--First column -->
<div class="col-md-4 mb-r wow fadeInLeft" data-wow-delay="0.2s">
<!--Card-->
<div class="card testimonial-card">
<!--Background color-->
<div class="card-up teal lighten-2">
</div>
<!--Avatar-->
<div class="avatar"><img src="https://mdbootstrap.com/wp-content/uploads/2015/10/avatar-2.jpg" class="rounded-circle img-responsive">
</div>
<div class="card-block">
<!--Name-->
<h4 class="card-title">Anna Doe</h4>
<hr>
<!--Quotation-->
<p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci.</p>
</div>
</div>
<!--/.Card-->
</div>
<!--/First column -->
<!--Second column-->
<div class="col-md-4 mb-r wow fadeInLeft" data-wow-delay="0.3s">
<!--Card-->
<div class="card testimonial-card">
<!--Background color-->
<div class="card-up indigo darken-2">
</div>
<!--Avatar-->
<div class="avatar"><img src="https://mdbootstrap.com/wp-content/uploads/2015/10/avatar-1.jpg" class="rounded-circle img-responsive">
</div>
<div class="card-block">
<!--Name-->
<h4 class="card-title">John Aston</h4>
<hr>
<!--Quotation-->
<p><i class="fa fa-quote-left"></i> Neque cupiditate assumenda in maiores repudiandae mollitia architecto.</p>
</div>
</div>
<!--/.Card-->
</div>
<!--/Second column-->
<!--Third column-->
<div class="col-md-4 mb-r wow fadeInLeft" data-wow-delay="0.4s">
<!--Card-->
<div class="card testimonial-card">
<!--Background color-->
<div class="card-up purple darken-2"></div>
<!--Avatar-->
<div class="avatar"><img src="https://mdbootstrap.com/wp-content/uploads/2015/10/avatar-3.jpg" class="rounded-circle img-responsive">
</div>
<div class="card-block">
<!--Name-->
<h4 class="card-title">Maria Kate</h4>
<hr>
<!--Quotation-->
<p><i class="fa fa-quote-left"></i> Delectus impedit saepe officiis ab aliquam repellat, rem totam unde ducimus.</p>
</div>
</div>
<!--/.Card-->
</div>
<!--/Third column-->
</div>
</section>
<!--Section: Testimonials v.1-->
<hr class="between-sections">
<!--Section: Pricing v.3-->
<section class="section" id="pricing">
<!--Section heading-->
<h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Our pricing plans</h1>
<!--Section description-->
<p class="section-description wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-lg-4 col-md-6 mb-r wow fadeInLeft">
<!--Card-->
<div class="card">
<!--Content-->
<div class="text-center">
<div class="card-block">
<h5>Basic plan</h5>
<div class="flex-center">
<div class="card-circle">
<i class="fa fa-home blue-text"></i>
</div>
</div>
<!--Price-->
<h2><strong>59$</strong></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa pariatur id nobis accusamus deleniti cumque hic laborum.</p>
<a class="btn btn-primary btn-rounded">Buy now</a>
</div>
</div>
</div>
<!--/.Card-->
</div>
<!--/First column-->
<!--Second column-->
<div class="col-lg-4 col-md-6 mb-r wow fadeInUp">
<!--Card-->
<div class="card teal">
<!--Content-->
<div class="text-center white-text">
<div class="card-block">
<h5>Premium plan</h5>
<div class="flex-center">
<div class="card-circle">
<i class="fa fa-group white-text"></i>
</div>
</div>
<!--Price-->
<h2><strong>79$</strong></h2>
<p>Esse corporis saepe laudantium velit adipisci cumque iste ratione facere non distinctio cupiditate sequi atque.</p>
<a class="btn btn-outline-white btn-rounded">Buy now</a>
</div>
</div>
</div>
<!--/.Card-->
</div>
<!--/Second column-->
<!--Third column-->
<div class="col-lg-4 col-md-6 mb-r wow fadeInRight">
<!--Card-->
<div class="card">
<!--Content-->
<div class="text-center">
<div class="card-block">
<h5>Advanced plan</h5>
<div class="flex-center">
<div class="card-circle">
<i class="fa fa-bar-chart blue-text"></i>
</div>
</div>
<!--Price-->
<h2><strong>99$</strong></h2>
<p>At ab ea a molestiae corrupti numquam quo beatae minima ratione magni accusantium repellat eveniet quia vitae.</p>
<a class="btn btn-primary btn-rounded">Buy now</a>
</div>
</div>
</div>
<!--/.Card-->
</div>
<!--/Third column-->
</div>
<!--/First row-->
</section>
<!--/Section: Pricing v.3-->
<hr class="between-sections">
<!--Section: Team v.2-->
<section class="section team-section" id="our-team">
<!--Section heading-->
<h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Meet our amazing team</h1>
<!--Section description-->
<p class="section-description wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>
<div class="row text-center">
<!--First column-->
<div class="col-md-4 mb-r wow fadeIn" data-wow-delay="0.3s">
<div class="avatar">
<img src="https://mdbootstrap.com/images/avatars/img%20(5).jpg">
</div>
<h4>Maria Kate</h4>
<h5>Photographer</h5>
<!--Facebook-->
<a type="button" class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"></i></a>
<!--Pinterest-->
<a type="button" class="btn-floating btn-small btn-pin"><i class="fa fa-pinterest"></i></a>
<!--Instagram-->
<a type="button" class="btn-floating btn-small btn-ins"><i class="fa fa-instagram"></i></a>
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-4 mb-r wow fadeIn" data-wow-delay="0.4s">
<div class="avatar">
<img src="https://mdbootstrap.com/images/avatars/img%20(6).jpg">
</div>
<h4>Sarah Melyah</h4>
<h5>Front-end Developer</h5>
<!--Google +-->
<a type="button" class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"></i></a>
<!--Facebook-->
<a type="button" class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"></i></a>
<!--GitHub-->
<a type="button" class="btn-floating btn-small btn-git"><i class="fa fa-github"></i></a>
</div>
<!--/Second column-->
<!--Third column-->
<div class="col-md-4 mb-r wow fadeIn" data-wow-delay="0.5s">
<div class="avatar">
<img src="https://mdbootstrap.com/images/avatars/img%20(8).jpg">
</div>
<h4>John Doe</h4>
<h5>Web Developer</h5>
<!--Linkedin-->
<a type="button" class="btn-floating btn-small btn-li"><i class="fa fa-linkedin"></i></a>
<!--Twitter-->
<a type="button" class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"></i></a>
<!--Dribbble-->
<a type="button" class="btn-floating btn-small btn-dribbble"><i class="fa fa-dribbble"></i></a>
</div>
<!--/Third column-->
</div>
</section>
<!--/Section: Team v.2-->
<hr class="between-sections">
<!--Section: Contact v.1-->
<section class="section mb-4" id="contact">
<!--Section heading-->
<h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Contact</h1>
<!--Section description-->
<p class="section-description mb-5 wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>
<div class="row">
<!--First column-->
<div class="col-md-5 wow fadeInLeft">
<!--Form with header-->
<div class="card">
<div class="card-block">
<!--Header-->
<div class="form-header btn-git">
<h3><i class="fa fa-envelope"></i> Write to us:</h3>
</div>
<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="form32">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-git">Submit</button>
</div>
</div>
</div>
<!--/Form with header-->
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-7">
<!--Google map-->
<div id="map-container" class="z-depth-1-half map-container wow fadeInRight" style="height: 400px"></div>
<br>
<!--Buttons-->
<div class="row text-center">
<div class="col-md-4 wow fadeIn" data-wow-delay="0.4s">
<a class="btn-floating btn-small btn-git"><i class="fa fa-map-marker"></i></a>
<p>New York, NY 10012</p>
<p>United States</p>
</div>
<div class="col-md-4 wow fadeIn" data-wow-delay="0.5s">
<a class="btn-floating btn-small btn-git"><i class="fa fa-phone"></i></a>
<p>+ 01 234 567 89</p>
<p>Mon - Fri, 8:00-22:00</p>
</div>
<div class="col-md-4 wow fadeIn" data-wow-delay="0.6s">
<a class="btn-floating btn-small btn-git"><i class="fa fa-envelope"></i></a>
<p>info@gmail.com</p>
<p>sale@gmail.com</p>
</div>
</div>
</div>
<!--/Second column-->
</div>
</section>
<!--/Section: Contact v.1-->
</div>
</main>
<!--/Main layout-->
<!--Footer: CTA, Social Media, Additional Info & Links-->
<footer class="page-footer center-on-small-only">
<!--Call to action-->
<div class="call-to-action">
<ul>
<li>
<h5>Register for free</h5></li>
<li><a href="" class="btn btn-danger">Sign up!</a></li>
</ul>
</div>
<!--/.Call to action-->
<hr>
<!--Social buttons-->
<div class="social-section">
<ul>
<li><a href="https://www.facebook.com/mdbootstrap" target="_blank" class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"> </i></a></li>
<li><a href="https://twitter.com/MDBootstrap" target="_blank" class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"> </i></a></li>
<li><a href="https://plus.google.com/u/0/+Mdbootstrap" target="_blank" class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"> </i></a></li>
<li><a href="https://www.linkedin.com/in/dawid-adach-97435534/pl" target="_blank" class="btn-floating btn-small btn-li"><i class="fa fa-linkedin"> </i></a></li>
<li><a class="btn-floating btn-small btn-git"><i class="fa fa-github"> </i></a></li>
<li><a href="https://pl.pinterest.com/materialdesignf/" target="_blank" class="btn-floating btn-small btn-pin"><i class="fa fa-pinterest"> </i></a></li>
<li><a href="https://www.instagram.com/mdbootstrap/" target="_blank" class="btn-floating btn-small btn-ins"><i class="fa fa-instagram"> </i></a></li>
</ul>
</div>
<!--/.Social buttons-->
<!--Copyright-->
<div class="footer-copyright">
<div class="container-fluid">
© 2015 Copyright: <a href="http://www.MDBootstrap.com"> MDBootstrap.com </a>
</div>
</div>
<!--/.Copyright-->
</footer>
<!--/.Footer: CTA, Social Media, Additional Info & Links-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="../../../js/jquery-3.1.1.min.js"></script>
<!-- Tooltips -->
<script type="text/javascript" src="../../../js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="../../../js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="../../../js/mdb.min.js"></script>
<!--Google Maps-->
<script src="http://maps.google.com/maps/api/js"></script>
<script>
function init_map() {
var var_location = new google.maps.LatLng(40.725118, -73.997699);
var var_mapoptions = {
center: var_location,
zoom: 14
};
var var_marker = new google.maps.Marker({
position: var_location,
map: var_map,
title: "New York"
});
var var_map = new google.maps.Map(document.getElementById("map-container"),
var_mapoptions);
var_marker.setMap(var_map);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
<script>
new WOW().init();
</script>
</body>
</html>

1106
html/templates/advanced/Landing Pages/form-minimalist.html Normal file
View File

File diff suppressed because it is too large Load Diff

890
html/templates/advanced/Landing Pages/register-classic.html Normal file
View File

@@ -0,0 +1,890 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap Template</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="../../../css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="../../../css/mdb.min.css" rel="stylesheet">
<style>
html,
body,
header,
.view {
height: 100%;
}
/* Navigation*/
.navbar {
background-color: transparent;
}
.top-nav-collapse {
background-color: #154771;
}
@media only screen and (max-width: 768px) {
.navbar {
background-color: #154771;
}
}
/*Intro*/
.view {
background: url("https://mdbootstrap.com/images/regular/people/img%20(61).jpg")no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
@media (max-width: 768px) {
.full-bg-img,
.view {
height: 100%;
position: relative;
}
}
.description {
padding-top: 25%;
padding-bottom: 3rem;
color: #fff
}
@media (max-width: 992px) {
.description {
padding-top: 7rem;
text-align: center;
}
}
/*Footer*/
@media (max-width: 768px) {
.flex-center {
align-items: center;
}
}
@media (max-width: 1200px) {
.flex-center {
align-items: left;
}
}
footer.page-footer {
background-color: #275C88;
}
</style>
</head>
<body>
<!--Navigation & Intro-->
<header>
<!--Navbar-->
<nav class="navbar navbar-toggleable-md fixed-top navbar-dark bg-faded scrolling-navbar">
<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>
<!--Navbar Brand-->
<a class="navbar-brand waves-effect waves-light" href="https://mdbootstrap.com/material-design-for-bootstrap/" target="_blank">MDB</a>
<div class="collapse navbar-collapse" id="navbarNav2">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#best-features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#examples-of-use">Examples</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#testimonials">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#our-team">Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
<ul class="navbar-nav ml-auto nav-flex-icons">
<li class="nav-item">
<a class="nav-link"><i class="fa fa-facebook"></i></a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="fa fa-twitter"></i></a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="fa fa-instagram"></i></a>
</li>
</ul>
</div>
</div>
</nav>
<!--/.Navbar-->
<!--Mask-->
<div class="view hm-black-strong">
<div class="full-bg-img flex-center">
<div class="container">
<div class="row" id="home">
<!--First column-->
<div class="col-lg-6">
<div class="description">
<h2 class="h2-responsive wow fadeInLeft">Sign up right now! </h2>
<hr class="hr-dark wow fadeInLeft">
<p class="wow fadeInLeft" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem repellendus quasi fuga nesciunt dolorum nulla magnam veniam sapiente, fugiat! Commodi sequi non animi ea dolor molestiae, quisquam iste, maiores. Nulla.</p>
<br>
<a class="btn btn-outline-white btn-lg wow fadeInLeft" data-wow-delay="0.7s">Learn more</a>
</div>
</div>
<!--/.First column-->
<!--Second column-->
<div class="col-lg-6 wow fadeInRight hidden-down">
<!--Form-->
<div class="card wow fadeInRight">
<div class="card-block">
<!--Header-->
<div class="text-center">
<h3><i class="fa fa-user"></i> Register:</h3>
<hr>
</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-ins btn-lg">Sign up</button>
<hr>
<fieldset class="form-group">
<input type="checkbox" id="checkbox1">
<label for="checkbox1">Subscribe me to the newsletter</label>
</fieldset>
</div>
</div>
</div>
<!--/.Form-->
</div>
<!--/Second column-->
</div>
</div>
</div>
</div>
<!--/.Mask-->
</header>
<!--/Navigation & Intro-->
<!--Main layout-->
<main>
<div class="container">
<!--Section: Features v.3-->
<section class="section feature-box" id="best-features">
<!--Section heading-->
<h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Why is it so great?</h1>
<!--Section description-->
<p class="section-description lead wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>
<!--First row-->
<div class="row features-small">
<!--First column-->
<div class="col-md-5 m-b-r center-on-small-only wow pulse" data-wow-delay="0.2s">
<img src="https://mdbootstrap.com/wp-content/uploads/2016/07/img-2-min.jpg" alt="" class="z-depth-0">
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-7 center-on-small">
<!--First row-->
<div class="row wow pulse" data-wow-delay="0.4s">
<div class="col-1">
<i class="fa fa-bank indigo-text"></i>
</div>
<div class="col-10">
<h4 class="feature-title">Safety</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
</div>
</div>
<!--/First row-->
<div style="height:50px"></div>
<!--Second row-->
<div class="row wow pulse" data-wow-delay="0.5s">
<div class="col-1">
<i class="fa fa-code indigo-text"></i>
</div>
<div class="col-10">
<h4 class="feature-title">Technology</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
</div>
</div>
<!--/Second row-->
<div style="height:50px"></div>
<!--Third row-->
<div class="row wow pulse" data-wow-delay="0.6s">
<div class="col-1">
<i class="fa fa-money indigo-text"></i>
</div>
<div class="col-10">
<h4 class="feature-title">Finance</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
</div>
</div>
<!--/Third row-->
</div>
<!--/Second column-->
</div>
<!--/First row-->
</section>
<!--/Section: Features v.3-->
<hr class="between-sections">
<!--Projects section v.2-->
<section class="section" id="examples-of-use">
<!--Section heading-->
<h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Our best projects</h1>
<!--Section description-->
<p class="section-description wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>
<!--First row-->
<div class="row text-center">
<!--First column-->
<div class="col-lg-4 col-md-6 mb-r wow fadeInUp">
<!--Featured image-->
<div class="view overlay hm-white-slight z-depth-2">
<img src="https://mdbootstrap.com/images/regular/city/img%20(21).jpg">
<a>
<div class="mask"></div>
</a>
</div>
<!--Excerpt-->
<div class="card-block">
<h5 class="red-text"><i class="fa fa-money"></i> Business</h5>
<h3>Project title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam.</p>
<a class="btn btn-ins"><i class="fa fa-clone left"></i> View project</a>
</div>
</div>
<!--/First column-->
<!--Second column-->
<div class="col-lg-4 col-md-6 mb-r wow fadeInUp" data-wow-delay="0.2s">
<!--Featured image-->
<div class="view overlay hm-white-slight z-depth-2">
<img src="https://mdbootstrap.com/images/regular/city/img%20(22).jpg">
<a>
<div class="mask"></div>
</a>
</div>
<!--Excerpt-->
<div class="card-block">
<h5 class="teal-text"><i class="fa fa-pie-chart"></i> Marketing</h5>
<h3>Project title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam.</p>
<a class="btn btn-ins"><i class="fa fa-clone left"></i> View project</a>
</div>
</div>
<!--/Second column-->
<!--Third column-->
<div class="col-lg-4 col-md-6 mb-r wow fadeInUp" data-wow-delay="0.4s">
<!--Featured image-->
<div class="view overlay hm-white-slight z-depth-2">
<img src="https://mdbootstrap.com/images/regular/city/img%20(24).jpg">
<a>
<div class="mask"></div>
</a>
</div>
<!--Excerpt-->
<div class="card-block">
<h5 class="cyan-text"><i class="fa fa-desktop"></i> Software</h5>
<h3>Project title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam.</p>
<a class="btn btn-ins"><i class="fa fa-clone left"></i> View project</a>
</div>
</div>
<!--/Third column-->
</div>
<!--/First row-->
</section>
<!--/Projects section v.2-->
<hr class="between-sections">
<!--Section: Testimonials v.2-->
<section class="section" id="testimonials">
<!--Section heading-->
<h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Testimonials</h1>
<!--Section description-->
<!--Carousel Wrapper-->
<div id="carousel-example-1" class="carousel testimonial-carousel no-flex slide carousel-fade wow fadeInLeft" data-wow-delay="0.3s" data-ride="carousel" data-interval="false">
<!--Slides-->
<div class="carousel-inner" role="listbox">
<!--First slide-->
<div class="carousel-item active">
<div class="testimonial">
<!--Avatar-->
<div class="avatar">
<img src="https://mdbootstrap.com/images/avatars/img%20(1).jpg" class="rounded-circle img-fluid">
</div>
<!--Content-->
<p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore cum accusamus eveniet molestias voluptatum inventore laboriosam labore sit, aspernatur praesentium iste impedit quidem dolor veniam vel repudiandae excepturi tenetur illo.</p>
<h4>Anna Deynah</h4>
<h5>Founder at ET Company</h5>
<!--Review-->
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star-half-full"> </i>
</div>
</div>
<!--/First slide-->
<!--Second slide-->
<div class="carousel-item">
<div class="testimonial">
<!--Avatar-->
<div class="avatar">
<img src="https://mdbootstrap.com/images/avatars/img%20(2).jpg" class="rounded-circle img-fluid">
</div>
<!--Content-->
<p><i class="fa fa-quote-left"></i> Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. </p>
<h4>Maria Kate</h4>
<h5>Photographer at Studio LA</h5>
<!--Review-->
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
</div>
</div>
<!--/Second slide-->
<!--Third slide-->
<div class="carousel-item">
<div class="testimonial">
<!--Avatar-->
<div class="avatar">
<img src="https://mdbootstrap.com/images/avatars/img%20(3).jpg" class="rounded-circle img-fluid">
</div>
<!--Content-->
<p><i class="fa fa-quote-left"></i> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium , totam rem aperiam, eaque ipsa quae ab illo.</p>
<h4>John Doe</h4>
<h5>Front-end Developer in NY</h5>
<!--Review-->
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star-o"> </i>
</div>
</div>
<!--/Third slide-->
</div>
<!--/.Slides-->
<!--Controls-->
<a class="carousel-item-prev left carousel-control" href="#carousel-example-1" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-item-next right carousel-control" href="#carousel-example-1" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--/.Controls-->
</div>
<!--/.Carousel Wrapper-->
</section>
<!--Section: Testimonials v.2-->
<hr class="between-sections">
<!--Section: Pricing v.4-->
<section class="section" id="pricing">
<!--Section heading-->
<h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Our pricing plans</h1>
<!--Section description-->
<p class="section-description wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-lg-4 col-md-6 mb-r wow fadeIn" data-wow-delay="0.5s">
<!--Card-->
<div class="card z-depth-0">
<!--Content-->
<div class="text-center">
<div class="card-block">
<h5>Basic plan</h5>
<div class="flex-center">
<div class="card-circle">
<i class="fa fa-home orange-text"></i>
</div>
</div>
<!--Price-->
<h2><strong>59$</strong></h2>
<p>At ab ea a molestiae corrupti numquam quo beatae minima ratione magni accusantium repellat eveniet quia vitae.</p>
<a class="btn btn-warning btn-rounded">Buy now</a>
</div>
</div>
</div>
<!--/.Card-->
</div>
<!--/First column-->
<!--Second column-->
<div class="col-lg-4 col-md-6 mb-r wow fadeIn" data-wow-delay="0.6s">
<!--Card-->
<div class="card deep-orange-gradient">
<!--Content-->
<div class="text-center white-text">
<div class="card-block">
<h5>Premium plan</h5>
<div class="flex-center">
<div class="card-circle">
<i class="fa fa-group white-text"></i>
</div>
</div>
<!--Price-->
<h2><strong>79$</strong></h2>
<p>Esse corporis saepe laudantium velit adipisci cumque iste ratione facere non distinctio cupiditate sequi atque.</p>
<a class="btn btn-outline-white btn-rounded">Buy now</a>
</div>
</div>
</div>
<!--/.Card-->
</div>
<!--/Second column-->
<!--Third column-->
<div class="col-lg-4 col-md-6 mb-r wow fadeIn" data-wow-delay="0.7s">
<!--Card-->
<div class="card z-depth-0">
<!--Content-->
<div class="text-center">
<div class="card-block">
<h5>Advanced plan</h5>
<div class="flex-center">
<div class="card-circle">
<i class="fa fa-line-chart orange-text"></i>
</div>
</div>
<!--Price-->
<h2><strong>99$</strong></h2>
<p>At ab ea a molestiae corrupti numquam quo beatae minima ratione magni accusantium repellat eveniet quia vitae.</p>
<a class="btn btn-warning btn-rounded">Buy now</a>
</div>
</div>
</div>
<!--/.Card-->
</div>
<!--/Third column-->
</div>
<!--/First row-->
</section>
<!--/Section: Pricing v.4-->
<hr class="between-sections">
<!--Section: Team v.1-->
<section class="section team-section" id="our-team">
<!--Section heading-->
<h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Our amazing team</h1>
<!--Section description-->
<p class="section-description wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>
<!--First row-->
<div class="row text-center">
<!--First column-->
<div class="col-lg-3 col-md-6 mb-r wow fadeInDown">
<div class="avatar">
<img src="https://mdbootstrap.com/images/avatars/img%20(1).jpg" class="rounded-circle">
</div>
<h4>Anna Deynah</h4>
<h5>Web Designer</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab.</p>
<!--Facebook-->
<a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a>
<!--Twitter-->
<a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a>
<!--Dribbble-->
<a class="icons-sm drib-ic"><i class="fa fa-dribbble"> </i></a>
</div>
<!--/First column-->
<!--Second column-->
<div class="col-lg-3 col-md-6 mb-r wow fadeInUp">
<div class="avatar">
<img src="https://mdbootstrap.com/images/avatars/img%20(3).jpg" class="rounded-circle">
</div>
<h4>John Doe</h4>
<h5>Web Developer</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab.</p>
<!--Linkedin-->
<a class="icons-sm li-ic"><i class="fa fa-linkedin"> </i></a>
<!--Facebook-->
<a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a>
<!--GitHub-->
<a class="icons-sm git-ic"><i class="fa fa-github"> </i></a>
</div>
<!--/Second column-->
<!--Third column-->
<div class="col-lg-3 col-md-6 mb-r wow fadeInDown">
<div class="avatar">
<img src="https://mdbootstrap.com/images/avatars/img%20(2).jpg" class="rounded-circle">
</div>
<h4>Maria Kate</h4>
<h5>Photographer</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab.</p>
<!--Facebook-->
<a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a>
<!--Pinterest-->
<a class="icons-sm pin-ic"><i class="fa fa-pinterest"> </i></a>
<!--Instagram-->
<a class="icons-sm ins-ic"><i class="fa fa-instagram"> </i></a>
</div>
<!--/Third column-->
<!--Fourth column-->
<div class="col-lg-3 col-md-6 mb-r wow fadeInUp">
<div class="avatar">
<img src="https://mdbootstrap.com/images/avatars/img%20(4).jpg" class="rounded-circle">
</div>
<h4>Sarah Melyah</h4>
<h5>Front-end Developer</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab.</p>
<!--Google +-->
<a class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a>
<!--Facebook-->
<a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a>
<!--GitHub-->
<a class="icons-sm git-ic"><i class="fa fa-github"> </i></a>
</div>
<!--/Fourth column-->
</div>
<!--/First row-->
</section>
<!--/Section: Team v.1-->
<hr class="between-sections">
<!--Section: Contact v.2-->
<section class="section" id="contact">
<!--Section heading-->
<h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Contact</h1>
<!--Section description-->
<p class="section-description mb-5 wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>
<div class="row">
<!--First column-->
<div class="col-md-8 wow pulse" data-wow-delay="0.3s">
<form>
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-md-6">
<div class="md-form">
<div class="md-form">
<input type="text" id="form41" class="form-control">
<label for="form41" class="">Your name</label>
</div>
</div>
</div>
<!--Second column-->
<div class="col-md-6">
<div class="md-form">
<div class="md-form">
<input type="text" id="form52" class="form-control">
<label for="form52" class="">Your email</label>
</div>
</div>
</div>
</div>
<!--/.First row-->
<!--Second row-->
<div class="row">
<div class="col-md-12">
<div class="md-form">
<input type="text" id="form51" class="form-control">
<label for="form51" class="">Subject</label>
</div>
</div>
</div>
<!--/Second row-->
<!--Third row-->
<div class="row">
<!--First column-->
<div class="col-md-12">
<div class="md-form">
<textarea type="text" id="form76" class="md-textarea"></textarea>
<label for="form76">Your message</label>
</div>
</div>
</div>
<!--/.Third row-->
</form>
<div class="center-on-small-only">
<a class="btn btn-ins">Send</a>
</div>
</div>
<!--.First column-->
<!--Second column-->
<div class="col-md-4 wow pulse" data-wow-delay="0.4s">
<ul class="contact-icons">
<li><i class="fa fa-map-marker fa-2x"></i>
<p>New York, NY 10012, USA</p>
</li>
<li><i class="fa fa-phone fa-2x"></i>
<p>+ 01 234 567 89</p>
</li>
<li><i class="fa fa-envelope fa-2x"></i>
<p>contact@mdbootstrap.com</p>
</li>
</ul>
</div>
<!--.Second column-->
</div>
</section>
<!--/Section: Contact v.2-->
</div>
</main>
<!--/Main layout-->
<!--Footer-->
<footer class="page-footer center-on-small-only">
<!--Footer Links-->
<div class="container-fluid">
<div class="row">
<!--First column-->
<div class="col-md-3 offset-md-1">
<h5 class="title">ABOUT MATERIAL DESIGN</h5>
<p>Material Design (codenamed Quantum Paper) is a design language developed by Google. </p>
<p>Material Design for Bootstrap (MDB) is a powerful Material Design UI KIT for most popular HTML, CSS, and JS framework - Bootstrap.</p>
</div>
<!--/.First column-->
<hr class="hidden-md-up">
<!--Second column-->
<div class="col-md-2 offset-md-1">
<h5 class="title">Useful inks</h5>
<ul>
<li><a href="#!">Contact us</a></li>
<li><a href="#!">About company</a></li>
<li><a href="#!">Bug Report</a></li>
<li><a href="#!">License</a></li>
<li><a href="#!">ChangeLog</a></li>
<li><a href="#!">Browsers and devices</a></li>
</ul>
</div>
<!--/.Second column-->
<hr class="hidden-md-up">
<!--Third column-->
<div class="col-md-5">
<h5 class="title">Instagram feed</h5>
<div class="footer-imgs"></div>
<ul class="inline-ul-img">
<li><img src="https://mdbootstrap.com/images/avatars/avatar-1.jpg" alt=""></li>
<li><img src="https://mdbootstrap.com/images/avatars/avatar-2.jpg" alt=""></li>
<li><img src="https://mdbootstrap.com/images/avatars/avatar-8.jpg" alt=""></li>
<li><img src="https://mdbootstrap.com/images/avatars/avatar-5.jpg" alt=""></li>
<br>
<li><img src="https://mdbootstrap.com/images/avatars/avatar-4.jpg" alt=""></li>
<li><img src="https://mdbootstrap.com/images/avatars/avatar-7.jpg" alt=""></li>
<li><img src="https://mdbootstrap.com/images/avatars/avatar-3.jpg" alt=""></li>
<li><img src="https://mdbootstrap.com/images/avatars/avatar-6.jpg" alt=""></li>
</ul>
</div>
<!--/.Third column-->
</div>
</div>
<!--/.Footer Links-->
<hr>
<!--Call to action-->
<div class="call-to-action">
<ul>
<li>
<h5>Register for free</h5></li>
<li><a href="" class="btn btn-danger">Sign up!</a></li>
</ul>
</div>
<!--/.Call to action-->
<hr>
<!--Social buttons-->
<div class="social-section">
<ul>
<li><a class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"> </i></a></li>
<li><a class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"> </i></a></li>
<li><a class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"> </i></a></li>
<li><a class="btn-floating btn-small btn-li"><i class="fa fa-linkedin"> </i></a></li>
<li><a class="btn-floating btn-small btn-git"><i class="fa fa-github"> </i></a></li>
<li><a class="btn-floating btn-small btn-pin"><i class="fa fa-pinterest"> </i></a></li>
<li><a class="btn-floating btn-small btn-ins"><i class="fa fa-instagram"> </i></a></li>
</ul>
</div>
<!--/.Social buttons-->
<!--Copyright-->
<div class="footer-copyright">
<div class="container-fluid">
© 2015 Copyright: <a href="http://www.MDBootstrap.com"> MDBootstrap.com </a>
</div>
</div>
<!--/.Copyright-->
</footer>
<!--/.Footer-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="../../../js/jquery-3.1.1.min.js"></script>
<!-- Tooltips -->
<script type="text/javascript" src="../../../js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="../../../js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="../../../js/mdb.min.js"></script>
<script>
new WOW().init();
</script>
</body>
</html>

925
html/templates/advanced/Landing Pages/register-social.html Normal file
View File

@@ -0,0 +1,925 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap Template</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="../../../css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="../../../css/mdb.min.css" rel="stylesheet">
<style>
html,
body,
header,
.view {
height: 100%;
}
/* Navigation*/
.navbar {
background-color: transparent;
}
.top-nav-collapse {
background-color: #0A6A60;
}
@media only screen and (max-width: 768px) {
.navbar {
background-color: #0A6A60;
}
}
/*Intro*/
.view {
background: url("https://mdbootstrap.com/images/regular/city/img%20(25).jpg")no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
@media (max-width: 768px) {
.full-bg-img,
.view {
height: 100%;
position: relative;
}
}
.description {
padding-top: 25%;
padding-bottom: 3rem;
color: #fff
}
@media (max-width: 992px) {
.description {
padding-top: 7rem;
text-align: center;
}
}
footer.page-footer {
background-color: #2F968B;
}
</style>
</head>
<body>
<!--Navigation & Intro-->
<header>
<!--Navbar-->
<nav class="navbar navbar-toggleable-md fixed-top navbar-dark bg-faded scrolling-navbar">
<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>
<!--Navbar Brand-->
<a class="navbar-brand waves-effect waves-light" href="https://mdbootstrap.com/material-design-for-bootstrap/" target="_blank">MDB</a>
<div class="collapse navbar-collapse" id="navbarNav2">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#best-features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#examples-of-use">Examples</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#testimonials">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#our-team">Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
<ul class="navbar-nav ml-auto nav-flex-icons">
<li class="nav-item">
<a class="nav-link"><i class="fa fa-facebook"></i></a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="fa fa-twitter"></i></a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="fa fa-instagram"></i></a>
</li>
</ul>
</div>
</div>
</nav>
<!--/.Navbar-->
<!--Mask-->
<div class="view hm-black-strong">
<div class="full-bg-img flex-center">
<div class="container">
<div class="row" id="home">
<!--First column-->
<div class="col-lg-6">
<div class="description">
<h2 class="h2-responsive wow fadeInLeft">Sign up right now! </h2>
<hr class="hr-dark wow fadeInLeft">
<p class="wow fadeInLeft" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem repellendus quasi fuga nesciunt dolorum nulla magnam veniam sapiente, fugiat! Commodi sequi non animi ea dolor molestiae, quisquam iste, maiores. Nulla.</p>
<br>
<a class="btn btn-comm btn-lg wow fadeInLeft" data-wow-delay="0.7s">Learn more</a>
</div>
</div>
<!--/.First column-->
<!--Second column-->
<div class="col-lg-6 wow fadeInDown hidden-down" data-wow-delay="0.2s">
<!--Form-->
<div class="card">
<div class="card-block">
<!--Header-->
<div class="text-center">
<h3><i class="fa fa-user"></i> Register with:</h3>
<a href="https://www.facebook.com/mdbootstrap" target="_blank" class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"> </i></a>
<a href="https://twitter.com/MDBootstrap" target="_blank" class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"> </i></a>
<a href="https://plus.google.com/u/0/+Mdbootstrap" target="_blank" class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"> </i></a>
<a href="https://www.linkedin.com/in/michal-szymanski-9228918a" target="_blank" class="btn-floating btn-small btn-li"><i class="fa fa-linkedin"> </i></a>
<a class="btn-floating btn-git btn-small"><i class="fa fa-github"></i></a>
<hr>
<h3>or:</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-comm btn-lg">Sign up</button>
<hr>
<fieldset class="form-group">
<input type="checkbox" id="checkbox1">
<label for="checkbox1">Subscribe me to the newsletter</label>
</fieldset>
</div>
</div>
</div>
<!--/.Form-->
</div>
<!--/Second column-->
</div>
</div>
</div>
</div>
<!--/.Mask-->
</header>
<!--/Navigation & Intro-->
<!--Main layout-->
<main>
<div class="container">
<!--Projects section v.1-->
<section class="section" id="examples-of-use">
<!--Section heading-->
<h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Our best projects</h1>
<!--Section description-->
<p class="section-description wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-md-12 mb-r wow zoomIn">
<!--Card-->
<div class="card-overlay" style="background-image: url('https://mdbootstrap.com/images/regular/dark/img%20(2).jpg')">
<!--Content-->
<div class="white-text text-center">
<div class="card-block">
<h5 class="red-text"><i class="fa fa-money"></i> Business</h5>
<h3>Project title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus quod minima assumenda qui mollitia architecto soluta at ipsa itaque nam, aliquam minus odit expedita voluptatibus fugiat amet, nostrum error dolorum!.</p>
<a class="btn btn-lg btn-outline-white"><i class="fa fa-clone left"></i> View project</a>
</div>
</div>
</div>
<!--/.Card-->
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-6 mb-r wow zoomIn" data-wow-delay="0.2s">
<!--Card-->
<div class="card-overlay" style="background-image: url('https://mdbootstrap.com/images/regular/dark/img%20(7).jpg')">
<!--Content-->
<div class="white-text text-center">
<div class="card-block">
<h5 class="teal-text"><i class="fa fa-pie-chart"></i> Marketing</h5>
<h3>Project title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!.</p>
<a class="btn btn-lg btn-outline-white"><i class="fa fa-clone left"></i> View project</a>
</div>
</div>
</div>
<!--/.Card-->
</div>
<!--/Second column-->
<!--Third column-->
<div class="col-md-6 mb-r wow zoomIn" data-wow-delay="0.4s">
<!--Card-->
<div class="card-overlay" style="background-image: url('https://mdbootstrap.com/images/regular/dark/img%20(8).jpg')">
<!--Content-->
<div class="white-text text-center">
<div class="card-block">
<h5 class="cyan-text"><i class="fa fa-desktop"></i> Software</h5>
<h3>Project title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!.</p>
<a class="btn btn-lg btn-outline-white"><i class="fa fa-clone left"></i> View project</a>
</div>
</div>
</div>
<!--/.Card-->
</div>
<!--/Third column-->
</div>
<!--/First row-->
</section>
<!--/Projects section v.1-->
<hr class="between-sections">
<!--Section: Features v.3-->
<section class="section feature-box" id="best-features">
<!--Section heading-->
<h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Why is it so great?</h1>
<!--Section description-->
<p class="section-description lead wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>
<!--First row-->
<div class="row features-small">
<!--First column-->
<div class="col-md-5 mb-r center-on-small-only wow fadeInLeft">
<img src="https://mdbootstrap.com/wp-content/uploads/2016/07/img-2-min.jpg" alt="" class="z-depth-0">
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-7 center-on-small">
<!--First row-->
<div class="row wow fadeInRightBig" data-wow-delay="0.2s">
<div class="col-1">
<i class="fa fa-bank indigo-text"></i>
</div>
<div class="col-10">
<h4 class="feature-title">Safety</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
</div>
</div>
<!--/First row-->
<div style="height:50px"></div>
<!--Second row-->
<div class="row wow fadeInRight" data-wow-delay="0.3s">
<div class="col-1">
<i class="fa fa-code indigo-text"></i>
</div>
<div class="col-10">
<h4 class="feature-title">Technology</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
</div>
</div>
<!--/Second row-->
<div style="height:50px"></div>
<!--Third row-->
<div class="row wow fadeInRight" data-wow-delay="0.4s">
<div class="col-1">
<i class="fa fa-money indigo-text"></i>
</div>
<div class="col-10">
<h4 class="feature-title">Finance</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
</div>
</div>
<!--/Third row-->
</div>
<!--/Second column-->
</div>
<!--/First row-->
</section>
<!--/Section: Features v.3-->
<hr class="between-sections">
<!--Section: Pricing v.2-->
<section class="section" id="pricing">
<!--Section heading-->
<h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Our pricing plans</h1>
<!--Section description-->
<p class="section-description wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-lg-4 col-md-6 mb-r wow slideInLeft">
<!--Pricing card-->
<div class="card-overlay pricing-card" style="background-image: url('https://mdbootstrap.com/images/regular/dark/img%20(7).jpg')">
<!--Content-->
<div class="white-text text-center">
<div class="card-block">
<h5>Basic</h5>
<!--Price-->
<div class="price">
<h1>10</h1>
</div>
<!--/.Price-->
<ul class="striped">
<li>
<p><strong>1</strong> project</p>
</li>
<li>
<p><strong>100</strong> components</p>
</li>
<li>
<p><strong>150</strong> features</p>
</li>
<li>
<p><strong>200</strong> members</p>
</li>
<li>
<p><strong>250</strong> messages</p>
</li>
</ul>
<a class="btn btn-lg btn-outline-white"> Buy now</a>
</div>
</div>
</div>
<!--/.Pricing card-->
</div>
<!--/First column-->
<!--Second column-->
<div class="col-lg-4 col-md-6 mb-r wow slideInUp">
<!--Pricing card-->
<div class="card-overlay pricing-card" style="background-image: url('https://mdbootstrap.com/images/regular/dark/img%20(8).jpg')">
<!--Content-->
<div class="white-text text-center">
<div class="card-block">
<h5>Pro</h5>
<!--Price-->
<div class="price">
<h1>20</h1>
</div>
<!--/.Price-->
<ul class="striped">
<li>
<p><strong>3</strong> projects</p>
</li>
<li>
<p><strong>200</strong> components</p>
</li>
<li>
<p><strong>250</strong> features</p>
</li>
<li>
<p><strong>300</strong> members</p>
</li>
<li>
<p><strong>350</strong> messages</p>
</li>
</ul>
<a class="btn btn-lg btn-outline-white"> Buy now</a>
</div>
</div>
</div>
<!--/.Pricing card-->
</div>
<!--/Second column-->
<!--Third column-->
<div class="col-lg-4 col-md-6 mb-r wow slideInRight">
<!--Pricing card-->
<div class="card-overlay pricing-card" style="background-image: url('https://mdbootstrap.com/images/regular/dark/img%20(9).jpg')">
<!--Content-->
<div class="text-center">
<div class="card-block">
<h5>Enterprise</h5>
<!--Price-->
<div class="price">
<h1>30</h1>
</div>
<!--/.Price-->
<ul class="striped">
<li>
<p><strong>5</strong> projects</p>
</li>
<li>
<p><strong>300</strong> components</p>
</li>
<li>
<p><strong>350</strong> features</p>
</li>
<li>
<p><strong>400</strong> members</p>
</li>
<li>
<p><strong>450</strong> messages</p>
</li>
</ul>
<a class="btn btn-lg btn-outline-white"> Buy now</a>
</div>
</div>
</div>
<!--/.Pricing card-->
</div>
<!--/Third column-->
</div>
<!--/First row-->
</section>
<!--/Section: Pricing v.2-->
<hr class="between-sections">
<!--Section: Testimonials v.3-->
<section class="section team-section" id="testimonials">
<!--Section heading-->
<h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Testimonials</h1>
<!--Section description-->
<p class="section-description wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>
<!--First row-->
<div class="row text-center">
<!--First column-->
<div class="col-md-4 mb-r wow pulse">
<div class="testimonial">
<!--Avatar-->
<div class="avatar">
<img src="https://mdbootstrap.com/images/avatars/img%20(1).jpg" class="rounded-circle img-fluid">
</div>
<!--Content-->
<h4>Anna Deynah</h4>
<h5>Web Designer</h5>
<p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab.</p>
<!--Review-->
<div class="orange-text">
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star-half-full"> </i>
</div>
</div>
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-4 mb-r wow pulse" data-wow-delay="0.2s">
<div class="testimonial">
<!--Avatar-->
<div class="avatar">
<img src="https://mdbootstrap.com/images/avatars/img%20(3).jpg" class="rounded-circle img-fluid">
</div>
<!--Content-->
<h4>John Doe</h4>
<h5>Web Developer</h5>
<p><i class="fa fa-quote-left"></i> Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.</p>
<!--Review-->
<div class="orange-text">
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
</div>
</div>
</div>
<!--/Second column-->
<!--Third column-->
<div class="col-md-4 mb-r wow pulse" data-wow-delay="0.4s">
<div class="testimonial">
<!--Avatar-->
<div class="avatar">
<img src="https://mdbootstrap.com/images/avatars/img%20(2).jpg" class="rounded-circle img-fluid">
</div>
<!--Content-->
<h4>Maria Kate</h4>
<h5>Photographer</h5>
<p><i class="fa fa-quote-left"></i> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.</p>
<!--Review-->
<div class="orange-text">
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star-o"> </i>
</div>
</div>
</div>
<!--/Third column-->
</div>
<!--/First row-->
</section>
<!--/Section: Testimonials v.3-->
<hr class="between-sections">
<!--Section: Team v.3-->
<section class="section team-section" id="our-team">
<!--Section heading-->
<h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Meet our amazing team</h1>
<!--Section description-->
<p class="section-description wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-md-6 mb-r wow fadeInLeft">
<div class="col-md-6 float-left">
<img src="https://mdbootstrap.com/images/avatars/img%20(9).jpg">
</div>
<br>
<div class="col-md-6 ml-auto">
<h4>John Doe</h4>
<h5>Web Developer</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab.</p>
<!--Facebook-->
<a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a>
<!--Twitter-->
<a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a>
<!--GitHub-->
<a class="icons-sm git-ic"><i class="fa fa-github"> </i></a>
</div>
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-6 mb-r wow fadeInLeft">
<div class="col-md-6 float-left">
<img src="https://mdbootstrap.com/images/avatars/img%20(10).jpg">
</div>
<div class="col-md-6 ml-auto">
<h4>Maria Kate</h4>
<h5>Photographer</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab.</p>
<!--Facebook-->
<a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a>
<!--Pinterest-->
<a class="icons-sm pin-ic"><i class="fa fa-pinterest"> </i></a>
<!--Instagram-->
<a class="icons-sm ins-ic"><i class="fa fa-instagram"> </i></a>
</div>
</div>
<!--/Second column-->
</div>
<!--/First row-->
<div style="height:50px" class="hidden-md-down"></div>
<!--Second row-->
<div class="row">
<!--Third column-->
<div class="col-md-6 mb-r wow fadeInRight" data-wow-delay="0.2s">
<div class="col-md-6 float-left">
<img src="https://mdbootstrap.com/images/avatars/img%20(11).jpg">
</div>
<div class="col-md-6 ml-auto">
<h4>Anna Deynah</h4>
<h5>Web Designer</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab.</p>
<!--Facebook-->
<a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a>
<!--Twitter-->
<a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a>
<!--Dribbble-->
<a class="icons-sm drib-ic"><i class="fa fa-dribbble"> </i></a>
</div>
</div>
<!--/Third column-->
<!--Fourth column-->
<div class="col-md-6 mb-r wow fadeInRight" data-wow-delay="0.2s">
<div class="col-md-6 float-left">
<img src="https://mdbootstrap.com/images/avatars/img%20(1).jpg">
</div>
<div class="col-md-6 ml-auto">
<h4>Sarah Melyah</h4>
<h5>Front-end Developer</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab.</p>
<!--Google +-->
<a class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a>
<!--Facebook-->
<a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a>
<!--GitHub-->
<a class="icons-sm git-ic"><i class="fa fa-github"> </i></a>
</div>
</div>
<!--/Fourth column-->
</div>
<!--/Second row-->
</section>
<!--/Section: Team v.3-->
<hr class="between sections">
<!--Section: Contact v.2-->
<section class="section" id="contact">
<!--Section heading-->
<h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Contact</h1>
<!--Section sescription-->
<p class="section-description mb-5 wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>
<div class="row">
<!--First column-->
<div class="col-md-8">
<form>
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-md-6 wow fadeInLeftBig">
<div class="md-form">
<div class="md-form">
<input type="text" id="form41" class="form-control">
<label for="form41" class="">Your name</label>
</div>
</div>
</div>
<!--Second column-->
<div class="col-md-6 wow fadeInLeftBig">
<div class="md-form">
<div class="md-form">
<input type="text" id="form52" class="form-control">
<label for="form52" class="">Your email</label>
</div>
</div>
</div>
</div>
<!--/.First row-->
<!--Second row-->
<div class="row">
<div class="col-md-12 wow fadeInLeftBig" data-wow-delay="0.2s">
<div class="md-form">
<input type="text" id="form51" class="form-control">
<label for="form51" class="">Subject</label>
</div>
</div>
</div>
<!--/Second row-->
<!--Third row-->
<div class="row">
<!--First column-->
<div class="col-md-12 wow fadeInLeftBig" data-wow-delay="0.3s">
<div class="md-form">
<textarea type="text" id="form76" class="md-textarea"></textarea>
<label for="form76">Your message</label>
</div>
</div>
</div>
<!--/.Third row-->
</form>
<div class="center-on-small-only wow fadeInLeftBig" data-wow-delay="0.4s">
<a class="btn btn-comm">Send</a>
</div>
</div>
<!--.First column-->
<!--Second column-->
<div class="col-md-4">
<ul class="contact-icons">
<li class="wow slideInUp"><i class="fa fa-map-marker fa-2x"></i>
<p>New York, NY 10012, USA</p>
</li>
<li class="wow slideInUp" data-wow-delay="0.2s"><i class="fa fa-phone fa-2x"></i>
<p>+ 01 234 567 89</p>
</li>
<li class="wow slideInUp" data-wow-delay="0.4s"><i class="fa fa-envelope fa-2x"></i>
<p>contact@mdbootstrap.com</p>
</li>
</ul>
</div>
<!--.Second column-->
</div>
</section>
<!--/Section: Contact v.2-->
</div>
</main>
<!--/Main layout-->
<!--Footer-->
<footer class="page-footer center-on-small-only">
<!--Footer Links-->
<div class="container-fluid">
<div class="row">
<!--First column-->
<div class="col-md-3 offset-md-1">
<h5 class="title">ABOUT MATERIAL DESIGN</h5>
<p>Material Design (codenamed Quantum Paper) is a design language developed by Google. </p>
<p>Material Design for Bootstrap (MDB) is a powerful Material Design UI KIT for most popular HTML, CSS, and JS framework - Bootstrap.</p>
</div>
<!--/.First column-->
<hr class="hidden-md-up">
<!--Second column-->
<div class="col-md-2 offset-md-1">
<h5 class="title">Useful inks</h5>
<ul>
<li><a href="#!">Contact us</a></li>
<li><a href="#!">About company</a></li>
<li><a href="#!">Bug Report</a></li>
<li><a href="#!">License</a></li>
<li><a href="#!">ChangeLog</a></li>
<li><a href="#!">Browsers and devices</a></li>
</ul>
</div>
<!--/.Second column-->
<hr class="hidden-md-up">
<!--Third column-->
<div class="col-md-5">
<h5 class="title">Instagram feed</h5>
<div class="footer-imgs"></div>
<ul class="inline-ul-img">
<li><img src="https://mdbootstrap.com/images/avatars/avatar-1.jpg" alt=""></li>
<li><img src="https://mdbootstrap.com/images/avatars/avatar-2.jpg" alt=""></li>
<li><img src="https://mdbootstrap.com/images/avatars/avatar-8.jpg" alt=""></li>
<li><img src="https://mdbootstrap.com/images/avatars/avatar-5.jpg" alt=""></li>
<br>
<li><img src="https://mdbootstrap.com/images/avatars/avatar-4.jpg" alt=""></li>
<li><img src="https://mdbootstrap.com/images/avatars/avatar-7.jpg" alt=""></li>
<li><img src="https://mdbootstrap.com/images/avatars/avatar-3.jpg" alt=""></li>
<li><img src="https://mdbootstrap.com/images/avatars/avatar-6.jpg" alt=""></li>
</ul>
</div>
<!--/.Third column-->
</div>
</div>
<!--/.Footer Links-->
<hr>
<!--Call to action-->
<div class="call-to-action">
<ul>
<li>
<h5>Register for free</h5></li>
<li><a href="" class="btn btn-danger">Sign up!</a></li>
</ul>
</div>
<!--/.Call to action-->
<hr>
<!--Social buttons-->
<div class="social-section">
<ul>
<li><a class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"> </i></a></li>
<li><a class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"> </i></a></li>
<li><a class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"> </i></a></li>
<li><a class="btn-floating btn-small btn-li"><i class="fa fa-linkedin"> </i></a></li>
<li><a class="btn-floating btn-small btn-git"><i class="fa fa-github"> </i></a></li>
<li><a class="btn-floating btn-small btn-pin"><i class="fa fa-pinterest"> </i></a></li>
<li><a class="btn-floating btn-small btn-ins"><i class="fa fa-instagram"> </i></a></li>
</ul>
</div>
<!--/.Social buttons-->
<!--Copyright-->
<div class="footer-copyright">
<div class="container-fluid">
© 2015 Copyright: <a href="http://www.MDBootstrap.com"> MDBootstrap.com </a>
</div>
</div>
<!--/.Copyright-->
</footer>
<!--/.Footer-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="../../../js/jquery-3.1.1.min.js"></script>
<!-- Tooltips -->
<script type="text/javascript" src="../../../js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="../../../js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="../../../js/mdb.min.js"></script>
<script>
new WOW().init();
</script>
</body>
</html>

1056
html/templates/advanced/Landing Pages/video.html Normal file
View File

File diff suppressed because it is too large Load Diff

1020
html/templates/advanced/Magazine/home-page.html Normal file
View File

File diff suppressed because it is too large Load Diff

526
html/templates/blog-post.html Executable file
View File

@@ -0,0 +1,526 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap Template</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="../css/mdb.min.css" rel="stylesheet">
<style>
.navbar {
background-color: #6f7782;
}
footer.page-footer {
background-color: #6f7782;
}
</style>
</head>
<body>
<!--Main Navigation-->
<header>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<a class="navbar-brand" href="#"><strong>Navbar</strong></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Opinions</a>
</li>
</ul>
<ul class="navbar-nav nav-flex-icons">
<li class="nav-item">
<a class="nav-link"><i class="fa fa-facebook"></i></a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="fa fa-twitter"></i></a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="fa fa-instagram"></i></a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!--Main Navigation-->
<!--Main Layout-->
<main>
<div class="container">
<!--Section: Blog v.4-->
<section class="section section-blog-fw mt-5 pb-3 wow fadeIn">
<!--Grid row-->
<div class="row">
<div class="col-md-12">
<!--Featured image-->
<div class="card card-cascade wider reverse">
<div class="view view-cascade overlay">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(134).jpg" alt="Wide sample post image">
<a>
<div class=""></div>
</a>
</div>
<!--Post data-->
<div class="card-body card-body-cascade text-center">
<h2><a><strong>This is title of the news</strong></a></h2>
<p>Written by <a>Abby Madison</a>, 26/08/2016</p>
<!--Social shares-->
<div class="social-counters ">
<!--Facebook-->
<a class="btn btn-fb ">
<i class="fa fa-facebook left "></i>
<span class="hidden-md-down ">Facebook</span>
</a>
<span class="counter ">46</span>
<!--Twitter-->
<a class="btn btn-tw ">
<i class="fa fa-twitter left "></i>
<span class="hidden-md-down ">Twitter</span>
</a>
<span class="counter ">22</span>
<!--Dribbble-->
<a class="btn btn-dribbble ">
<i class="fa fa-dribbble left "></i>
<span class="hidden-md-down ">Dribbble</span>
</a>
<span class="counter ">31</span>
<!--Comments-->
<a class="btn btn-blue-grey ">
<i class="fa fa-comments-o left "></i>
<span class="hidden-md-down ">Comments</span>
</a>
<span class="counter ">18</span>
</div>
<!--Social shares-->
</div>
<!--Post data-->
</div>
<!--Excerpt-->
<div class="excerpt mt-5 wow fadeIn" data-wow-delay="0.3s">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate
non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum
et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
</p>
<p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus
autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates
repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus,
ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus.</p>
<blockquote class="blockquote mt-4 mb-4">
<p class="mb-0"><em>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus.</em></p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit
aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem.
</p>
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit
qui in ea voluptate velit esse quam nihil molestiae consequatur.</p>
<div class="mt-4 d-flex justify-content-end">
<span class="badge pink">Travel</span>
<span class="badge badge-primary mx-1">Adventure</span>
<span class="badge grey mr-1">Photography</span>
<span class="badge badge-info">Education</span>
</div>
</div>
</div>
</div>
<!--Grid row-->
</section>
<!--Section: Blog v.4-->
<hr class="mb-5 mt-4">
<!--Section: Blog v.2-->
<section class="section extra-margins pb-3 wow fadeIn" data-wow-delay="0.3s">
<!--Section heading-->
<h3 class="text-center my-5 text-center h3 pt-3">Recent posts</h3>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Card Light-->
<div class="card">
<!--Card image-->
<div class="view overlay">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20%28147%29.jpg" class="card-img-top" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-body">
<!--Social shares button-->
<a class="activator mr-3"><i class="fa fa-share-alt"></i></a>
<!--Title-->
<h4 class="card-title">Card title</h4>
<hr>
<!--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 class="link-text"><h5>Read more <i class="fa fa-chevron-right"></i></h5></a>
</div>
<!--/.Card content-->
</div>
<!--/.Card Light-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Card Light-->
<div class="card">
<!--Card image-->
<div class="view overlay">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20%2850%29.jpg" class="card-img-top" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-body">
<!--Social shares button-->
<a class="activator mr-3"><i class="fa fa-share-alt"></i></a>
<!--Title-->
<h4 class="card-title">Card title</h4>
<hr>
<!--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 class="link-text"><h5>Read more <i class="fa fa-chevron-right"></i></h5></a>
</div>
<!--/.Card content-->
</div>
<!--/.Card Light-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Card Light-->
<div class="card">
<!--Card image-->
<div class="view overlay">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20%2897%29.jpg" class="card-img-top" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-body">
<!--Social shares button-->
<a class="activator mr-3"><i class="fa fa-share-alt"></i></a>
<!--Title-->
<h4 class="card-title">Card title</h4>
<hr>
<!--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 class="link-text"><h5>Read more <i class="fa fa-chevron-right"></i></h5></a>
</div>
<!--/.Card content-->
</div>
<!--/.Card Light-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Blog v.2-->
<!--Author box-->
<section>
<div class="jumbotron p-5 text-center text-md-left author-box wow fadeIn" data-wow-delay="0.3s">
<!--Name-->
<h4 class="h3-responsive text-center font-weight-bold dark-grey-text">About author</h4>
<hr>
<div class="row">
<!--Avatar-->
<div class="col-12 col-md-2 mb-md-0 mb-4">
<img src="http://mdbootstrap.com/img/Photos/Avatars/img%20(32).jpg" class="img-fluid rounded-circle z-depth-2">
</div>
<!--Author Data-->
<div class="col-12 col-md-10">
<h5 class="font-weight-bold dark-grey-text mb-3">
<strong>John Doe</strong>
</h5>
<div class="personal-sm pb-3">
<a class="fb-ic pr-2"><i class="fa fa-facebook mr-2"> </i></a>
<a class="tw-ic pr-2"><i class="fa fa-twitter mr-2"> </i></a>
<a class="gplus-ic pr-2"><i class="fa fa-google-plus mr-2"> </i></a>
<a class="li-ic pr-2"><i class="fa fa-linkedin mr-2"> </i></a>
</div>
<p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint esse nulla quia quam veniam commodi
dicta, iusto inventore. Voluptatum pariatur eveniet ea, officiis vitae praesentium beatae
quas libero, esse facere.
</p>
</div>
</div>
</div>
</section>
<!--/.Author box-->
<!--Section: Comments list-->
<section class="mb-4 pt-5 wow fadeIn" data-wow-delay="0.3s">
<!--Main wrapper-->
<div class="comments-list text-center text-md-left mb-5">
<div class="text-center mb-4">
<h3 class="font-weight-bold pt-3 mb-5">Comments <span class="badge pink">3</span></h3>
</div>
<!--First row-->
<div class="row mb-4">
<!--Image column-->
<div class="col-sm-2 col-12 mb-md-0 mb-3">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (9).jpg" class="avatar rounded-circle z-depth-1-half">
</div>
<!--/.Image column-->
<!--Content column-->
<div class="col-sm-10 col-12">
<a>
<h4 class="font-weight-bold">Tom Smith</h4>
</a>
<div class="mt-2">
<ul class="list-unstyled">
<li class="comment-date"><i class="fa fa-clock-o"></i> 05/10/2015</li>
</ul>
</div>
<p class="grey-text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
</div>
<!--/.Content column-->
</div>
<!--/.First row-->
<!--Second row-->
<div class="row mb-4">
<!--Image column-->
<div class="col-sm-2 col-12 mb-md-0 mb-3">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (31).jpg" class="avatar rounded-circle z-depth-1-half">
</div>
<!--/.Image column-->
<!--Content column-->
<div class="col-sm-10 col-12">
<a>
<h4 class="font-weight-bold">Marta Tev</h4>
</a>
<div class="mt-2">
<ul class="list-unstyled">
<li class="comment-date"><i class="fa fa-clock-o"></i> 08/10/2015</li>
</ul>
</div>
<p class="grey-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur.</p>
</div>
<!--/.Content column-->
</div>
<!--/.Second row-->
<!--Third row-->
<div class="row mb-4">
<!--Image column-->
<div class="col-sm-2 col-12 mb-md-0 mb-3">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (10).jpg" class="avatar rounded-circle z-depth-1-half">
</div>
<!--/.Image column-->
<!--Content column-->
<div class="col-sm-10 col-12">
<a>
<h4 class="font-weight-bold">Anna Maria</h4>
</a>
<div class="mt-2">
<ul class="list-unstyled">
<li class="comment-date"><i class="fa fa-clock-o"></i> 17/10/2015</li>
</ul>
</div>
<p class="grey-text">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate
non provident, similique sunt in culpa qui officia.
</p>
</div>
<!--/.Content column-->
</div>
<!--/.Third row-->
</div>
<!--/.Main wrapper-->
</section>
<!--/Section: Comments list-->
<!--Section: Leave a reply (Logged In User)-->
<section class="pb-5 mt-5 wow fadeIn" data-wow-delay="0.3s">
<!--Leave a reply form-->
<div class="reply-form">
<h3 class="text-center my-5 h3 pt-3">Leave a reply </h3>
<p class="text-center">(Logged In User)</p>
<!--Third row-->
<div class="row text-center text-md-left">
<!--Image column-->
<div class="col-sm-2 col-12 mb-md-0 mt-4">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (32).jpg" alt="Sample avatar image" class="img-fluid avatar rounded-circle z-depth-2">
</div>
<!--/.Image column-->
<!--Content column-->
<div class="col-sm-10 col-12">
<div class="md-form">
<textarea type="text" id="form-mess" class="md-textarea form-control" rows="3"></textarea>
<label for="form-mess">Your message</label>
</div>
</div>
<div class="col-md-12 text-center mt-4">
<button class="btn btn-pink btn-rounded">Submit</button>
</div>
<!--/.Content column-->
</div>
<!--/.Third row-->
</div>
<!--/.Leave a reply form-->
</section>
<!--/Section: Leave a reply (Logged In User)-->
</div>
</main>
<!--Main Layout-->
<!--Footer-->
<footer class="page-footer pt-0">
<!--Footer Links-->
<div class="container">
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-md-12 wow fadeIn" data-wow-delay="0.3s">
<div class="text-center d-flex justify-content-center my-4">
<!--Facebook-->
<a class="p-2 m-2 fa-lg fb-ic"><i class="fa fa-facebook white-text fa-lg pr-md-4"> </i></a>
<!--Twitter-->
<a class="p-2 m-2 fa-lg tw-ic"><i class="fa fa-twitter white-text fa-lg pr-md-4"> </i></a>
<!--Google +-->
<a class="p-2 m-2 fa-lg gplus-ic"><i class="fa fa-google-plus white-text fa-lg pr-md-4"> </i></a>
<!--Linkedin-->
<a class="p-2 m-2 fa-lg li-ic"><i class="fa fa-linkedin white-text fa-lg pr-md-4"> </i></a>
<!--Instagram-->
<a class="p-2 m-2 fa-lg ins-ic"><i class="fa fa-instagram white-text fa-lg pr-md-4"> </i></a>
<!--Pinterest-->
<a class="p-2 m-2 fa-lg pin-ic"><i class="fa fa-pinterest white-text fa-lg pr-md-4"> </i></a>
</div>
</div>
<!--/First column-->
</div>
<!--/First row-->
</div>
<!--/Footer Links-->
<!--Copyright-->
<div class="footer-copyright py-3 text-center wow fadeIn" data-wow-delay="0.3s">
<div class="container-fluid">
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
</div>
</div>
<!--/.Copyright-->
</footer>
<!--/Footer-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="../js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="../js/mdb.min.js"></script>
<script>
new WOW().init();
</script>
</body>
</html>

498
html/templates/blog-posts.html Executable file
View File

@@ -0,0 +1,498 @@
<!DOCTYPE html>
<html lang="en" class="">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap Template</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="../css/mdb.min.css" rel="stylesheet">
<style>
html,
body,
header,
.jarallax {
height: 700px;
}
@media (max-width: 740px) {
html,
body,
header,
.jarallax {
height: 100vh;
}
}
@media (min-width: 800px) and (max-width: 850px) {
html,
body,
header,
.jarallax {
height: 100vh;
}
}
@media (min-width: 560px) and (max-width: 650px) {
header .jarallax h5 {
margin-bottom: 1.5rem !important;
}
}
.top-nav-collapse {
background-color: #6f7782 !important;
}
.navbar:not(.top-nav-collapse) {
background: transparent !important;
}
@media (max-width: 768px) {
.navbar:not(.top-nav-collapse) {
background: #6f7782 !important;
}
}
@media (min-width: 800px) and (max-width: 850px) {
.navbar:not(.top-nav-collapse) {
background: #6f7782!important;
}
}
h1 {
letter-spacing: 8px;
}
h5 {
letter-spacing: 3px;
}
.hr-light {
border-top: 3px solid #fff;
width: 80px;
}
footer.page-footer {
background-color: #6f7782;
}
@media (max-width: 450px) {
.btn-floating {
margin-left: 0;
margin-right: 0;
}
}
</style>
</head>
<body>
<!--Main Navigation-->
<header>
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
<div class="container">
<a class="navbar-brand" href="#"><strong>MDB</strong></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7" aria-controls="navbarSupportedContent-7" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent-7">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
</ul>
<form class="form-inline">
<div class="md-form my-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
</div>
</form>
</div>
</div>
</nav>
<!-- Intro Section -->
<div class="view jarallax" data-jarallax='{"speed": 0.2}' style="background-image: url(https://mdbootstrap.com/img/Photos/Others/img%20%2848%29.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center;">
<div class="mask rgba-black-light">
<div class="container h-100 d-flex justify-content-center align-items-center">
<div class="row pt-5 mt-3">
<div class="col-md-12">
<div class="text-center">
<h1 class="h1-reponsive white-text text-uppercase font-weight-bold mb-3 wow fadeInDown" data-wow-delay="0.3s"><strong>welcome to my blog</strong></h1>
<hr class="hr-light mt-4 wow fadeInDown" data-wow-delay="0.4s">
<h5 class="text-uppercase mb-5 white-text wow fadeInDown" data-wow-delay="0.4s"><strong>Photography & design</strong></h5>
<a class="btn btn-outline-white wow fadeInDown" data-wow-delay="0.4s">portfolio</a>
<a class="btn btn-outline-white wow fadeInDown" data-wow-delay="0.4s">About me</a>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!--Main Navigation-->
<!--Main Layout-->
<main>
<div class="container">
<!--Section: Blog v.3-->
<section class="section extra-margins pb-3 text-center text-lg-left wow fadeIn" data-wow-delay="0.3s">
<!--Section heading-->
<h2 class="font-weight-bold text-center h1 my-5">Recent posts</h2>
<!--Section description-->
<p class="text-center grey-text mb-5 mx-auto w-responsive">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-4 mb-4">
<!--Featured image-->
<div class="view overlay z-depth-1">
<img src="https://mdbootstrap.com/img/Photos/Others/img (38).jpg" class="img-fluid" alt="First sample image">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-7 mb-4">
<!--Excerpt-->
<a href="" class="teal-text"><h6 class="pb-1"><i class="fa fa-heart"></i><strong> Lifestyle </strong></h6></a>
<h4 class="mb-4"><strong>This is title of the news</strong></h4>
<p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor.</p>
<p>by <a><strong>Jessica Clark</strong></a>, 26/08/2016</p>
<a class="btn btn-primary">Read more</a>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
<hr class="mb-5">
<!--Grid row-->
<div class="row mt-3">
<!--Grid column-->
<div class="col-lg-4 mb-4">
<!--Featured image-->
<div class="view overlay z-depth-1">
<img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Second sample image">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-7 mb-4">
<!--Excerpt-->
<a href="" class="cyan-text"><h6 class="pb-1"><i class="fa fa-plane"></i><strong> Travels</strong></h6></a>
<h4 class="mb-4"><strong>This is title of the news</strong></h4>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati.</p>
<p>by <a><strong>Jessica Clark</strong></a>, 24/08/2016</p>
<a class="btn btn-primary">Read more</a>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
<hr class="mb-5">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-4 mb-4">
<!--Featured image-->
<div class="view overlay z-depth-1">
<img src="https://mdbootstrap.com/img/Photos/Others/img (35).jpg" class="img-fluid" alt="Third sample image">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-7 mb-4">
<!--Excerpt-->
<a href="" class="brown-text"><h6 class="pb-1"><i class="fa fa-camera"></i><strong> Photography</strong></h6></a>
<h4 class="mb-4"><strong>This is title of the news</strong></h4>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p>by <a><strong>Jessica Clark</strong></a>, 21/08/2016</p>
<a class="btn btn-primary">Read more</a>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
<hr class="mb-5">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-4 mb-4">
<!--Featured image-->
<div class="view overlay z-depth-1">
<img src="https://mdbootstrap.com/img/Photos/Others/img (39).jpg" class="img-fluid" alt="Third sample image">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-7 mb-4">
<!--Excerpt-->
<a href="" class="red-text"><h6 class="pb-1"><i class="fa fa-heart"></i><strong> Lifestyle</strong></h6></a>
<h4 class="mb-4"><strong>This is title of the news</strong></h4>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p>by <a><strong>Jessica Clark</strong></a>, 21/08/2016</p>
<a class="btn btn-primary">Read more</a>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
<!--Pagination dark-->
<nav class="wow fadeIn mb-4 mt-5" data-wow-delay="0.4s" style="visibility: visible; animation-delay: 0.4s; animation-name: fadeIn;">
<ul class="pagination pg-dark flex-center">
<!--Arrow left-->
<li class="page-item">
<a class="page-link waves-effect waves-effect" 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 waves-effect waves-effect">1</a></li>
<li class="page-item"><a class="page-link waves-effect waves-effect">2</a></li>
<li class="page-item"><a class="page-link waves-effect waves-effect">3</a></li>
<li class="page-item"><a class="page-link waves-effect waves-effect">4</a></li>
<li class="page-item"><a class="page-link waves-effect waves-effect">5</a></li>
<!--Arrow right-->
<li class="page-item">
<a class="page-link waves-effect waves-effect" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<!--/Pagination dark-->
</section>
<!--Section: Blog v.3-->
<hr class="mb-5">
<!--Section: Blog v.2-->
<section class="section extra-margins text-center pb-3 wow fadeIn" data-wow-delay="0.3s">
<!--Section heading-->
<h2 class="font-weight-bold text-center h1 my-5">Older posts</h2>
<!--Section description-->
<p class="text-center grey-text mb-5 mx-auto w-responsive">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Featured image-->
<div class="view overlay z-depth-1 mb-2">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(131).jpg" class="img-fluid" alt="First sample image">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Excerpt-->
<a href="" class="pink-text"><h6 class="mb-3 mt-3"><i class="fa fa-map "></i><strong> Adventure</strong></h6></a>
<h4 class="mb-3 font-weight-bold">This is title of the news</h4>
<p>by <a><strong>Billy Forester</strong></a>, 15/07/2016</p>
<p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus voluptas.</p>
<a class="btn btn-primary">Read more</a>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay z-depth-1 mb-2">
<img src="https://mdbootstrap.com/img/Photos/Others/img6.jpg" class="img-fluid" alt="Second sample image">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Excerpt-->
<a href="" class="indigo-text"><h6 class="mb-3 mt-3"><i class="fa fa-graduation-cap"></i><strong> Education</strong></h6></a>
<h4 class="mb-3 font-weight-bold">This is title of the news</h4>
<p>by <a><strong>Billy Forester</strong></a>, 12/07/2016</p>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.</p>
<a class="btn btn-primary">Read more</a>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay z-depth-1 mb-2">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(33).jpg" class="img-fluid" alt="Thrid sample image">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Excerpt-->
<a href="" class="cyan-text"><h6 class="mb-3 mt-3"><i class="fa fa-fire "></i><strong> Culture</strong></h6></a>
<h4 class="mb-3 font-weight-bold">This is title of the news</h4>
<p>by <a><strong>Billy Forester</strong></a>, 10/07/2016</p>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, quia consequuntur magni dolores eos qui ratione voluptatem.</p>
<a class="btn btn-primary">Read more</a>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Blog v.2-->
</div>
</main>
<!--Main Layout-->
<!--Footer-->
<footer class="page-footer pt-4 mt-4 text-center text-md-left">
<!--Footer Links-->
<div class="container">
<div class="row">
<!--First column-->
<div class="col-md-3">
<h5 class="text-uppercase font-weight-bold">About author </h5>
<p>Here you can use rows and columns here to organize your footer content.</p>
</div>
<!--/.First column-->
<hr class="w-100 clearfix d-md-none">
<!--Second column-->
<div class="col-md-2 ml-auto">
<h5 class="text-uppercase font-weight-bold">Links</h5>
<ul class="list-unstyled">
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Second column-->
<hr class="w-100 clearfix d-md-none">
<!--Third column-->
<div class="col-md-2 ml-auto">
<h5 class="text-uppercase font-weight-bold">Links</h5>
<ul class="list-unstyled">
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Third column-->
<hr class="w-100 clearfix d-md-none">
<!--Fourth column-->
<div class="col-md-2 ml-auto">
<h5 class="text-uppercase font-weight-bold">Links</h5>
<ul class="list-unstyled">
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Fourth column-->
</div>
</div>
<!--/.Footer Links-->
<hr>
<!--Social buttons-->
<div class="text-center mb-3">
<a class="btn-floating btn-fb"><i class="fa fa-facebook"> </i></a>
<a class="btn-floating btn-tw"><i class="fa fa-twitter"> </i></a>
<a class="btn-floating btn-gplus"><i class="fa fa-google-plus"> </i></a>
<a class="btn-floating btn-li"><i class="fa fa-linkedin"> </i></a>
<a class="btn-floating btn-dribbble"><i class="fa fa-dribbble"> </i></a>
</div>
<!--/.Social buttons-->
<!--Copyright-->
<div class="footer-copyright py-3 text-center">
<div class="container-fluid">
© 2015 Copyright: <a href="https://mdbootstrap.com/material-design-for-bootstrap/"> MDBootstrap.com </a>
</div>
</div>
<!--/.Copyright-->
</footer>
<!--/.Footer-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="../js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="../js/mdb.min.js"></script>
<script>
new WOW().init();
</script>
</body>
</html>

281
html/templates/contact-us.html Executable file
View File

@@ -0,0 +1,281 @@
<!DOCTYPE html>
<html lang="en" class="">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap Template</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="../css/mdb.min.css" rel="stylesheet">
<style>
.btn .fa {
margin-left: 3px;
}
h6 {
line-height: 1.7;
}
footer.page-footer {
margin-top: 0px;
padding-top: 0px;
}
body {
background-color: #eee;
}
.btn.peach-gradient {
color: #fff !important;
}
</style>
</head>
<body>
<!--Main Navigation-->
<header>
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar peach-gradient">
<div class="container">
<a class="navbar-brand" href="#">
<strong>MDB</strong>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7" aria-controls="navbarSupportedContent-7"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent-7">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
</ul>
<form class="form-inline">
<div class="md-form my-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
</div>
</form>
</div>
</div>
</nav>
<section>
<div class="mdb-map">
<div id="map-container" class="z-depth-1-half map-container" style="height: 500px;"></div>
</div>
</section>
</header>
<!--Main Navigation-->
<!--Main Layout-->
<main>
<div class="container-fluid mb-5">
<!--Grid row-->
<div class="row" style="margin-top: -100px;">
<!--Grid column-->
<div class="col-md-12">
<div class="card pb-5">
<div class="card-body">
<div class="container">
<!--Section: Contact v.2-->
<section class="section">
<!--Section heading-->
<h2 class="font-weight-bold text-center h1 my-5">Contact us</h2>
<!--Section description-->
<p class="text-center grey-text mb-5 mx-auto w-responsive">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate
esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
<div class="row pt-5">
<!--Grid column-->
<div class="col-md-8 col-xl-9">
<form>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-6">
<div class="md-form">
<input type="text" id="contact-name" class="form-control">
<label for="contact-name" class="">Your name</label>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6">
<div class="md-form">
<input type="text" id="contact-email" class="form-control">
<label for="contact-email" class="">Your email</label>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row">
<div class="col-md-12">
<div class="md-form">
<input type="text" id="contact-Subject" class="form-control">
<label for="contact-Subject" class="">Subject</label>
</div>
</div>
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-12">
<div class="md-form">
<textarea type="text" id="contact-message" class="md-textarea form-control" rows="3"></textarea>
<label for="contact-message">Your message</label>
</div>
</div>
</div>
<!--Grid row-->
</form>
<div class="text-center text-md-left my-4">
<a class="btn peach-gradient">Send</a>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4 col-xl-3">
<ul class="contact-icons text-center list-unstyled">
<li>
<i class="fa fa-map-marker fa-2x orange-text"></i>
<p>San Francisco, CA 94126, USA</p>
</li>
<li>
<i class="fa fa-phone fa-2x orange-text"></i>
<p>+ 01 234 567 89</p>
</li>
<li>
<i class="fa fa-envelope fa-2x orange-text"></i>
<p>contact@mdbootstrap.com</p>
</li>
</ul>
</div>
<!--Grid column-->
</div>
</section>
<!--Section: Contact v.2-->
</div>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
</div>
</main>
<!--Main Layout-->
<!--Footer-->
<footer class="page-footer pt-4 mt-4 grey lighten-3 text-center text-md-left">
<!--Copyright-->
<div class="footer-copyright text-center py-3 wow fadeIn" data-wow-delay="0.3s">
<div class="container-fluid">
&copy; 2018 Copyright:
<a href="https://mdbootstrap.com/material-design-for-bootstrap/"> MDBootstrap.com </a>
</div>
</div>
<!--/Copyright-->
</footer>
<!--/Footer-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="../js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="../js/mdb.min.js"></script>
<script>
new WOW().init();
</script>
<script src="https://maps.google.com/maps/api/js"></script>
<script>
function init_map() {
var var_location = new google.maps.LatLng(40.725118, -73.997699);
var var_mapoptions = {
center: var_location,
zoom: 14
};
var var_marker = new google.maps.Marker({
position: var_location,
map: var_map,
title: "New York"
});
var var_map = new google.maps.Map(document.getElementById("map-container"),
var_mapoptions);
var_marker.setMap(var_map);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
</body>
</html>

1173
html/templates/ecommerce.html Executable file
View File

File diff suppressed because it is too large Load Diff

674
html/templates/landing-page.html Executable file
View File

@@ -0,0 +1,674 @@
<!DOCTYPE html>
<html lang="en" class="full-height">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap Template</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="../css/mdb.min.css" rel="stylesheet">
<style>
html,
body,
header,
.jarallax {
height: 700px;
}
@media (max-width: 740px) {
html,
body,
header,
.jarallax {
height: 100vh;
}
}
@media (min-width: 800px) and (max-width: 850px) {
html,
body,
header,
.jarallax {
height: 100vh;
}
}
@media (min-width: 560px) and (max-width: 650px) {
header .jarallax h1 {
margin-bottom: .5rem !important;
}
header .jarallax h5 {
margin-bottom: .5rem !important;
}
}
@media (min-width: 660px) and (max-width: 700px) {
header .jarallax h1 {
margin-bottom: 1.5rem !important;
}
header .jarallax h5 {
margin-bottom: 1.5rem !important;
}
}
.top-nav-collapse {
background-color: #9da4b1 !important;
}
.navbar:not(.top-nav-collapse) {
background: transparent !important;
}
@media (max-width: 768px) {
.navbar:not(.top-nav-collapse) {
background: #9da4b1 !important;
}
}
@media (min-width: 800px) and (max-width: 850px) {
.navbar:not(.top-nav-collapse) {
background: #9da4b1!important;
}
}
footer.page-footer {
background-color: #9da4b1;
}
</style>
</head>
<body>
<!--Main Navigation-->
<header>
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
<div class="container">
<a class="navbar-brand" href="#"><strong>MDB</strong></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7" aria-controls="navbarSupportedContent-7" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent-7">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
</ul>
<form class="form-inline">
<div class="md-form my-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
</div>
</form>
</div>
</div>
</nav>
<!-- Intro Section -->
<div class="view jarallax" data-jarallax='{"speed": 0.2}' style="background-image: url('https://mdbootstrap.com/img/Photos/Others/gradient2.png'); background-repeat: no-repeat; background-size: cover; background-position: center center;">
<div class="mask rgba-purple-slight">
<div class="container h-100 d-flex justify-content-center align-items-center">
<div class="row pt-5 mt-3">
<div class="col-md-12 wow fadeIn mb-3">
<div class="text-center">
<h1 class="display-4 font-weight-bold mb-5 wow fadeInUp">Our New Course is Ready</h1></li>
<h5 class="mb-5 wow fadeInUp" data-wow-delay="0.2s">It comes with a lot of new features, easy to follow videos and images. Check it out now!</h5>
<div class="wow fadeInUp" data-wow-delay="0.4s">
<a class="btn btn-purple btn-rounded"><i class="fa fa-user left"></i> Sign up!</a>
<a class="btn btn-outline-purple btn-rounded"><i class="fa fa-book left"></i> Learn more</a>
</div>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!--Main Navigation-->
<!--Main Layout-->
<main>
<div class="container">
<!--Section: Features v.4-->
<section class="section wow fadeIn" data-wow-delay="0.3s">
<!--Section heading-->
<h1 class="font-weight-bold text-center h1 my-5">Why is it so great?</h1>
<!--Section description-->
<p class="text-center grey-text mb-5 mx-auto w-responsive lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-4">
<!--Grid row-->
<div class="row mb-2">
<div class="col-2">
<i class="fa fa-2x fa-flag-checkered indigo-text"></i>
</div>
<div class="col-10">
<h5 class="font-weight-bold mb-4">International</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
</div>
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row mb-2">
<div class="col-2">
<i class="fa fa-2x fa-flask blue-text"></i>
</div>
<div class="col-10">
<h5 class="font-weight-bold mb-4">Experimental</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
</div>
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row mb-2">
<div class="col-2">
<i class="fa fa-2x fa-glass cyan-text"></i>
</div>
<div class="col-10">
<h5 class="font-weight-bold mb-4">Relaxing</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
</div>
</div>
<!--Grid row-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4 mb-2 text-center text-md-left flex-center">
<img src="https://mdbootstrap.com/img/Mockups/Transparent/Small/iphone-portfolio1.png" alt="" class="z-depth-0">
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4">
<!--Grid row-->
<div class="row mb-2">
<div class="col-2">
<i class="fa fa-2x fa-heart deep-purple-text"></i>
</div>
<div class="col-10">
<h5 class="font-weight-bold mb-4">Beloved</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
</div>
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row mb-2">
<div class="col-2">
<i class="fa fa-2x fa-flash purple-text"></i>
</div>
<div class="col-10">
<h5 class="font-weight-bold mb-4">Rapid</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
</div>
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row mb-2">
<div class="col-2">
<i class="fa fa-2x fa-magic pink-text"></i>
</div>
<div class="col-10">
<h5 class="font-weight-bold mb-4">Magical</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
</div>
</div>
<!--Grid row-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--/Section: Features v.4-->
<hr class="mb-5">
<!--Section: Testimonials v.3-->
<section class="section team-section text-center pb-3 wow fadeIn" data-wow-delay="0.3s">
<!--Section heading-->
<h1 class="font-weight-bold text-center h1 my-5">Testimonials</h1>
<!--Section description-->
<p class="text-center grey-text mb-5 mx-auto w-responsive">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
<!--Grid row-->
<div class="row text-center">
<!--Grid column-->
<div class="col-md-4 mb-4">
<div class="testimonial">
<!--Avatar-->
<div class="avatar mx-auto">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg" class="rounded-circle z-depth-1 img-fluid">
</div>
<!--Content-->
<h4 class="font-weight-bold mt-4 mb-3">Anna Deynah</h4>
<h6 class="mb-3 font-weight-bold grey-text">Web Designer</h6>
<p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab hic tenetur.</p>
<!--Review-->
<div class="orange-text">
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star-half-full"> </i>
</div>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4 mb-4">
<div class="testimonial">
<!--Avatar-->
<div class="avatar mx-auto">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(32).jpg" class="rounded-circle z-depth-1 img-fluid">
</div>
<!--Content-->
<h4 class="font-weight-bold mt-4 mb-3">John Doe</h4>
<h6 class="mb-3 font-weight-bold grey-text">Web Developer</h6>
<p><i class="fa fa-quote-left"></i> Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.</p>
<!--Review-->
<div class="orange-text">
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
</div>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4 mb-4">
<div class="testimonial">
<!--Avatar-->
<div class="avatar mx-auto">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg" class="rounded-circle z-depth-1 img-fluid">
</div>
<!--Content-->
<h4 class="font-weight-bold mt-4 mb-3">Maria Kate</h4>
<h6 class="mb-3 font-weight-bold grey-text">Photographer</h6>
<p><i class="fa fa-quote-left"></i> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.</p>
<!--Review-->
<div class="orange-text">
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star-o"> </i>
</div>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Testimonials v.3-->
<hr class="mb-5">
<!-- Section: Pricing v.3 -->
<section class="text-center my-5 wow fadeIn" data-wow-delay="0.3s">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold text-center my-5">Our pricing plans</h2>
<!-- Section description -->
<p class="text-center w-responsive mx-auto mb-5 grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.</p>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-lg-4 col-md-12 mb-lg-0 mb-4">
<!-- Card -->
<div class="card">
<!-- Content -->
<div class="card-body">
<!-- Offer -->
<h5 class="mb-4">Basic plan</h5>
<div class="d-flex justify-content-center">
<div class="card-circle d-flex justify-content-center align-items-center">
<i class="fa fa-home light-blue-text"></i>
</div>
</div>
<!-- Price -->
<h2 class="font-weight-bold my-4">59$</h2>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa pariatur id nobis accusamus deleniti cumque hic laborum.</p>
<a class="btn btn-light-blue btn-rounded">Buy now</a>
</div>
<!-- Content -->
</div>
<!-- Card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 col-md-6 mb-md-0 mb-4">
<!-- Card -->
<div class="card purple-gradient">
<!-- Content -->
<div class="card-body white-text">
<!-- Offer -->
<h5 class="mb-4">Premium plan</h5>
<div class="d-flex justify-content-center">
<div class="card-circle d-flex justify-content-center align-items-center">
<i class="fa fa-group"></i>
</div>
</div>
<!--Price -->
<h2 class="font-weight-bold my-4">79$</h2>
<p>Esse corporis saepe laudantium velit adipisci cumque iste ratione facere non distinctio cupiditate sequi atque.</p>
<a class="btn btn-outline-white btn-rounded">Buy now</a>
</div>
<!-- Content -->
</div>
<!-- Card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 col-md-6">
<!-- Card -->
<div class="card">
<!-- Content -->
<div class="card-body">
<!-- Offer -->
<h5 class="mb-4">Advanced plan</h5>
<div class="d-flex justify-content-center">
<div class="card-circle d-flex justify-content-center align-items-center">
<i class="fa fa-bar-chart light-blue-text"></i>
</div>
</div>
<!--Price -->
<h2 class="font-weight-bold my-4">99$</h2>
<p class="grey-text">At ab ea a molestiae corrupti numquam quo beatae minima ratione magni accusantium repellat eveniet quia vitae.</p>
<a class="btn btn-light-blue btn-rounded">Buy now</a>
</div>
<!-- Content -->
</div>
<!-- Card -->
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</section>
<!-- Section: Pricing v.3 -->
<hr class="mb-5">
<!--Section: Contact v.2-->
<section class="section pb-5 wow fadeIn" data-wow-delay="0.3s">
<!--Section heading-->
<h2 class="font-weight-bold text-center h1 my-5">Contact us</h2>
<!--Section description-->
<p class="text-center grey-text mb-5 mx-auto w-responsive">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>
<div class="row">
<!--Grid column-->
<div class="col-md-8 col-xl-9">
<form>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-6">
<div class="md-form">
<input type="text" id="contact-name" class="form-control">
<label for="contact-name" class="">Your name</label>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6">
<div class="md-form">
<input type="text" id="contact-email" class="form-control">
<label for="contact-email" class="">Your email</label>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row">
<div class="col-md-12">
<div class="md-form">
<input type="text" id="contact-Subject" class="form-control">
<label for="contact-Subject" class="">Subject</label>
</div>
</div>
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-12">
<div class="md-form">
<textarea type="text" id="contact-message" class="md-textarea form-control" rows="3"></textarea>
<label for="contact-message">Your message</label>
</div>
</div>
</div>
<!--Grid row-->
</form>
<div class="text-center text-md-left my-4">
<a class="btn btn-light-blue btn-rounded">Send</a>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4 col-xl-3">
<ul class="contact-icons text-center list-unstyled">
<li><i class="fa fa-map-marker fa-2x"></i>
<p>San Francisco, CA 94126, USA</p>
</li>
<li><i class="fa fa-phone fa-2x"></i>
<p>+ 01 234 567 89</p>
</li>
<li><i class="fa fa-envelope fa-2x"></i>
<p>contact@mdbootstrap.com</p>
</li>
</ul>
</div>
<!--Grid column-->
</div>
</section>
<!--Section: Contact v.2-->
</div>
</main>
<!--Main Layout-->
<!--Footer-->
<footer class="page-footer pt-4 mt-4 text-center text-md-left mt-5">
<!--Footer Links-->
<div class="container">
<div class="row">
<!--First column-->
<div class="col-md-3">
<h5 class="text-uppercase">Footer Content </h5>
<p>Here you can use rows and columns here to organize your footer content.</p>
</div>
<!--/.First column-->
<hr class="w-100 clearfix d-md-none">
<!--Second column-->
<div class="col-md-2 ml-auto">
<h5 class="text-uppercase">Links</h5>
<ul class="list-unstyled">
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Second column-->
<hr class="w-100 clearfix d-md-none">
<!--Third column-->
<div class="col-md-2 ml-auto">
<h5 class="text-uppercase">Links</h5>
<ul class="list-unstyled">
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Third column-->
<hr class="w-100 clearfix d-md-none">
<!--Fourth column-->
<div class="col-md-2 ml-auto">
<h5 class="text-uppercase">Links</h5>
<ul class="list-unstyled">
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Fourth column-->
</div>
</div>
<hr>
<div class="container">
<!--Grid row-->
<div class="row mb-3">
<!--First column-->
<div class="col-md-12">
<ul class="list-unstyled d-flex justify-content-center mb-0 py-4 list-inline">
<li class="list-inline-item"><a class="p-2 m-2 fa-lg fb-ic"><i class="fa fa-facebook white-text fa-lg"> </i></a></li>
<li class="list-inline-item"><a class="p-2 m-2 fa-lg tw-ic"><i class="fa fa-twitter white-text fa-lg"> </i></a></li>
<li class="list-inline-item"><a class="p-2 m-2 fa-lg gplus-ic"><i class="fa fa-google-plus white-text fa-lg"> </i></a></li>
<li class="list-inline-item"><a class="p-2 m-2 fa-lg li-ic"><i class="fa fa-linkedin white-text fa-lg"> </i></a></li>
<li class="list-inline-item"><a class="p-2 m-2 fa-lg ins-ic"><i class="fa fa-instagram white-text fa-lg"> </i></a></li>
<li class="list-inline-item"><a class="p-2 m-2 fa-lg pin-ic"><i class="fa fa-pinterest white-text fa-lg"> </i></a></li>
</ul>
</div>
<!--/First column-->
</div>
<!--/Grid row-->
</div>
<!--/.Footer Links-->
<!--Copyright-->
<div class="footer-copyright py-3 text-center">
<div class="container-fluid">
© 2015 Copyright: <a href="https://mdbootstrap.com/material-design-for-bootstrap/"> MDBootstrap.com </a>
</div>
</div>
<!--/.Copyright-->
</footer>
<!--/.Footer-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="../js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="../js/mdb.min.js"></script>
<script>
new WOW().init();
</script>
</body>
</html>

206
html/templates/login-page.html Executable file
View File

@@ -0,0 +1,206 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap Template</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="../css/mdb.min.css" rel="stylesheet">
<style>
html,
body,
header,
.view {
height: 100vh;
}
@media (max-width: 740px) {
html,
body,
header,
.view {
height: 815px;
}
}
@media (min-width: 800px) and (max-width: 850px) {
html,
body,
header,
.view {
height: 650px;
}
}
.intro-2 {
background: url("http://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img%20(11).jpg")no-repeat center center;
background-size: cover;
}
.top-nav-collapse {
background-color: #3f51b5 !important;
}
.navbar:not(.top-nav-collapse) {
background: transparent !important;
}
@media (max-width: 768px) {
.navbar:not(.top-nav-collapse) {
background: #3f51b5 !important;
}
}
@media (min-width: 800px) and (max-width: 850px) {
.navbar:not(.top-nav-collapse) {
background: #3f51b5!important;
}
}
.card {
background-color: rgba(229, 228, 255, 0.2);
}
.md-form label {
color: #ffffff;
}
h6 {
line-height: 1.7;
}
.card {
margin-top: 30px;
/*margin-bottom: -45px;*/
}
.md-form input[type=text]:focus:not([readonly]),
.md-form input[type=password]:focus:not([readonly]) {
border-bottom: 1px solid #8EDEF8;
box-shadow: 0 1px 0 0 #8EDEF8;
}
.md-form input[type=text]:focus:not([readonly])+label,
.md-form input[type=password]:focus:not([readonly])+label {
color: #8EDEF8;
}
.md-form .form-control {
color: #fff;
}
</style>
</head>
<body>
<!--Main Navigation-->
<header>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
<div class="container">
<a class="navbar-brand" href="#"><strong>MDB</strong></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7" aria-controls="navbarSupportedContent-7" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent-7">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
</ul>
<form class="form-inline">
<div class="md-form my-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
</div>
</form>
</div>
</div>
</nav>
<!--Intro Section-->
<section class="view intro-2">
<div class="mask rgba-stylish-strong h-100 d-flex justify-content-center align-items-center">
<div class="container">
<div class="row">
<div class="col-xl-5 col-lg-6 col-md-10 col-sm-12 mx-auto mt-lg-5">
<!--Form with header-->
<div class="card wow fadeIn" data-wow-delay="0.3s">
<div class="card-body">
<!--Header-->
<div class="form-header purple-gradient">
<h3><i class="fa fa-user mt-2 mb-2"></i> Log in:</h3>
</div>
<!--Body-->
<div class="md-form">
<i class="fa fa-user prefix white-text"></i>
<input type="text" id="orangeForm-name" class="form-control">
<label for="orangeForm-name">Your name</label>
</div>
<div class="md-form">
<i class="fa fa-envelope prefix white-text"></i>
<input type="text" id="orangeForm-email" class="form-control">
<label for="orangeForm-email">Your email</label>
</div>
<div class="md-form">
<i class="fa fa-lock prefix white-text"></i>
<input type="password" id="orangeForm-pass" class="form-control">
<label for="orangeForm-pass">Your password</label>
</div>
<div class="text-center">
<button class="btn purple-gradient btn-lg">Sign up</button>
<hr>
<div class="inline-ul text-center d-flex justify-content-center">
<a class="p-2 m-2 fa-lg tw-ic"><i class="fa fa-twitter white-text"></i></a>
<a class="p-2 m-2 fa-lg li-ic"><i class="fa fa-linkedin white-text"> </i></a>
<a class="p-2 m-2 fa-lg ins-ic"><i class="fa fa-instagram white-text"> </i></a>
</div>
</div>
</div>
</div>
<!--/Form with header-->
</div>
</div>
</div>
</div>
</section>
</header>
<!--Main Navigation-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="../js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="../js/mdb.min.js"></script>
<script>
new WOW().init();
</script>
</body>
</html>

435
html/templates/pricing.html Executable file
View File

@@ -0,0 +1,435 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap Template</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="../css/mdb.min.css" rel="stylesheet">
<style>
html,
body,
header,
.view {
height: 700px;
}
@media (max-width: 740px) {
html,
body,
header,
.view {
height: 1000px;
}
}
@media (min-width: 800px) and (max-width: 1030px) {
html,
body,
header,
.view {
height: 650px;
}
}
.intro-2 {
background: url("https://mdbootstrap.com/img/Photos/Others/architecture.jpg")no-repeat center center;
background-size: cover;
}
.top-nav-collapse {
background-color: #929fba !important;
}
.navbar:not(.top-nav-collapse) {
background: transparent !important;
}
@media (max-width: 768px) {
.navbar:not(.top-nav-collapse) {
background: #929fba !important;
}
}
/*h6 {
line-height: 1.7;
}*/
.rgba-gradient {
background: -moz-linear-gradient(45deg, rgba(42, 27, 161, 0.6), rgba(50, 189, 229, 0.6) 100%);
background: -webkit-linear-gradient(45deg, rgba(42, 27, 161, 0.6), rgba(50, 189, 229, 0.6) 100%);
background: -webkit-gradient(linear, 45deg, from(rgba(42, 27, 161, 0.6)), to(rgba(50, 189, 229, 0.6)));
background: -o-linear-gradient(45deg, rgba(42, 27, 161, 0.6), rgba(50, 189, 229, 0.6) 100%);
background: linear-gradient(to 45deg, rgba(42, 27, 161, 0.6), rgba(50, 189, 229, 0.6) 100%);
}
@media (max-width: 450px) {
.margins {
margin-right: 1rem;
margin-left: 1rem;
}
}
</style>
</head>
<body>
<!--Main Navigation-->
<header>
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
<div class="container">
<a class="navbar-brand" href="#"><strong>MDB</strong></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7" aria-controls="navbarSupportedContent-7" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent-7">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
</ul>
<form class="form-inline">
<div class="md-form my-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
</div>
</form>
</div>
</div>
</nav>
<!--Intro Section-->
<section class="view intro-2">
<div class="mask rgba-gradient"></div>
<div class="container h-100 d-flex justify-content-center align-items-center">
<div class="row flex-center pt-5 mt-3">
<div class="col-md-6 text-center text-md-left margins">
<div class="white-text">
<h1 class="h1-responsive font-weight-bold wow fadeInLeft" data-wow-delay="0.3s">Make purchases with our app </h1>
<hr class="hr-light wow fadeInLeft" data-wow-delay="0.3s">
<h6 class="wow fadeInLeft" data-wow-delay="0.3s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem repellendus quasi fuga nesciunt dolorum nulla magnam veniam sapiente, fugiat! Commodi sequi non animi ea dolor molestiae iste.</h6>
<br>
<a class="btn btn-outline-white wow fadeInLeft" data-wow-delay="0.3s">Learn more</a>
<a class="btn btn-outline-white wow fadeInLeft" data-wow-delay="0.3s">Download
<i class="fa fa-android left right" aria-hidden="true"></i>
<i class="fa fa-apple left" aria-hidden="true"></i>
<i class="fa fa-windows" aria-hidden="true"></i>
</a>
</div>
</div>
<div class="col-md-6 wow fadeInRight d-flex justify-content-center" data-wow-delay="0.3s">
<img src="https://mdbootstrap.com/img/Mockups/Transparent/Small/iphone-admin.png" alt="" class="img-responsive">
</div>
</div>
</div>
</div>
</section>
</header>
<!--Main Navigation-->
<!--Main Layout-->
<main>
<div class="container">
<!--Section: Features v.2-->
<section class="text-center wow fadeIn" data-wow-delay="0.3s">
<!--Section heading-->
<h1 class="font-weight-bold text-center h1 my-5">Why is it so great?</h1>
<!--Section description-->
<p class="text-center grey-text mb-5 mx-auto w-responsive lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum.</p>
<!--Grid row-->
<div class="row text-left">
<!--Grid column-->
<div class="col-md-4 mb-4">
<div class="col-1 col-md-2 float-left">
<i class="fa fa-bullhorn fa-2x blue-text"></i>
</div>
<div class="col-10 col-md-9 col-lg-10 float-right">
<h4 class="font-weight-bold mb-4">Marketing</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
<a class="btn btn-primary btn-sm ml-0">Learn more</a>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4 mb-4">
<div class="col-1 col-md-2 float-left">
<i class="fa fa-cogs fa-2x orange-text"></i>
</div>
<div class="col-10 col-md-9 col-lg-10 float-right">
<h4 class="font-weight-bold mb-4">Customization</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
<a class="btn btn-deep-orange btn-sm ml-0">Learn more</a>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4 mb-4">
<div class="col-1 col-md-2 float-left">
<i class="fa fa-dashboard fa-2x purple-text"></i>
</div>
<div class="col-10 col-md-9 col-lg-10 float-right">
<h4 class="font-weight-bold mb-4">Support</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
<a class="btn btn-secondary btn-sm ml-0">Learn more</a>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Features v.2-->
<hr class="my-5">
<!-- Section: Pricing v.6 -->
<section class="my-5 wow fadeIn" data-wow-delay="0.3s">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold text-center my-5">Our pricing plans</h2>
<!-- Section description -->
<p class="text-center w-responsive mx-auto mb-5 grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.</p>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-lg-4 col-md-12 mb-lg-0 mb-4">
<!-- Pricing card -->
<div class="card pricing-card white-text">
<!-- Price -->
<div class="aqua-gradient rounded-top">
<h4 class="option">BASIC</h4>
</div>
<!-- Features -->
<div class="card-body striped green-striped card-background px-5">
<h2 class="my-4 pb-3 h1">20$</h2>
<ul>
<li>
<p><strong>1</strong> project</p>
</li>
<li>
<p><strong>100</strong> components</p>
</li>
<li>
<p><strong>150</strong> features</p>
</li>
<li>
<p><strong>200</strong> members</p>
</li>
</ul>
<button class="mb-3 mt-3 btn aqua-gradient btn-rounded">Buy now</button>
</div>
<!-- Features -->
</div>
<!-- Pricing card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 col-md-6 mb-md-0 mb-4">
<!-- Pricing card -->
<div class="card pricing-card white-text">
<!-- Price -->
<div class="peach-gradient rounded-top">
<h4 class="option">PRO</h4>
</div>
<!-- Features -->
<div class="card-body striped orange-striped card-background px-5">
<h2 class="my-4 pb-3 h1">80$</h2>
<ul>
<li>
<p><strong>1</strong> project</p>
</li>
<li>
<p><strong>100</strong> components</p>
</li>
<li>
<p><strong>150</strong> features</p>
</li>
<li>
<p><strong>200</strong> members</p>
</li>
</ul>
<button class="mb-3 mt-3 btn peach-gradient btn-rounded">Buy now</button>
</div>
<!-- Features -->
</div>
<!-- Pricing card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 col-md-6">
<!-- Pricing card -->
<div class="card pricing-card white-text">
<!-- Price -->
<div class="purple-gradient rounded-top">
<h4 class="option">ENTERPRISE</h4>
</div>
<!-- Features -->
<div class="card-body striped purple-striped card-background px-5">
<h2 class="my-4 pb-3 h1">100$</h2>
<ul>
<li>
<p><strong>1</strong> project</p>
</li>
<li>
<p><strong>100</strong> components</p>
</li>
<li>
<p><strong>150</strong> features</p>
</li>
<li>
<p><strong>200</strong> members</p>
</li>
</ul>
<button class="mb-3 mt-3 btn purple-gradient btn-rounded">Buy now</button>
</div>
<!-- Features -->
</div>
<!-- Pricing card -->
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</section>
<!-- Section: Pricing v.6 -->
</div>
</main>
<!--Main Layout-->
<!--Footer-->
<footer class="page-footer pt-4 mt-4 mdb-color lighten-3 text-center text-md-left">
<!--Footer Links-->
<div class="container wow fadeIn" data-wow-delay="0.3s">
<!--First row-->
<div class="row mt-3 mb-4">
<!--Grid column-->
<div class="col-lg-4 text-center">
<h5 class="font-weight-bold">MDBootstrap</h5>
</div>
<!--Grid column-->
<hr class="w-100 clearfix d-lg-none">
<div class="col-lg-4">
<ul class="list-unstyled d-flex justify-content-center mb-0">
<li>
<p class="font-weight-bold text-uppercase pr-4">about</p>
</li>
<li>
<p class="font-weight-bold text-uppercase pr-4">contact</p>
</li>
<li>
<p class="font-weight-bold text-uppercase pr-4">blog</p>
</li>
<li>
<p class="font-weight-bold text-uppercase pr-4">team</p>
</li>
</ul>
</div>
<hr class="w-100 clearfix d-lg-none">
<!--Grid column-->
<div class="col-lg-4">
<ul class="list-unstyled d-flex justify-content-center">
<li><a class="p-2 m-2 fa-lg fb-ic"><i class="fa fa-facebook white-text"></i></a></li>
<li><a class="p-2 m-2 fa-lg tw-ic"><i class="fa fa-twitter white-text"></i></a></li>
<li><a class="p-2 m-2 fa-lg gplus-ic"><i class="fa fa-google-plus white-text"></i></a></li>
<li><a class="p-2 m-2 fa-lg li-ic"><i class="fa fa-linkedin white-text"></i></a></li>
</ul>
</div>
<!--/Grid column-->
</div>
<!--/First row-->
</div>
<!--/Footer Links-->
<!--Copyright-->
<div class="footer-copyright text-center py-3 wow fadeIn" data-wow-delay="0.3s">
<div class="container-fluid">
&copy; 2018 Copyright: <a href="https://mdbootstrap.com/material-design-for-bootstrap/"> MDBootstrap.com </a>
</div>
</div>
<!--/Copyright-->
</footer>
<!--/Footer-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="../js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="../js/mdb.min.js"></script>
<script>
new WOW().init();
</script>
</body>
</html>

567
html/templates/profile-page.html Executable file
View File

@@ -0,0 +1,567 @@
<!DOCTYPE html>
<html lang="en" class="">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap Template</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="../css/mdb.min.css" rel="stylesheet">
<style>
html,
body,
header,
.jarallax {
height: 700px;
}
@media (max-width: 740px) {
html,
body,
header,
.jarallax {
height: 100vh;
}
}
@media (min-width: 800px) and (max-width: 850px) {
html,
body,
header,
.jarallax {
height: 100vh;
}
}
@media (min-width: 560px) and (max-width: 660px) {
header .jarallax h5 {
display: none !important;
}
}
.page-footer {
margin-top: 0px;
padding-top: 0px;
}
</style>
</head>
<body>
<!--Main Navigation-->
<header>
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar aqua-gradient">
<div class="container">
<a class="navbar-brand" href="#">
<strong>MDB</strong>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7" aria-controls="navbarSupportedContent-7"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent-7">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
</ul>
<form class="form-inline">
<div class="md-form my-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
</div>
</form>
</div>
</div>
</nav>
<!-- Intro Section -->
<div class="view jarallax" data-jarallax='{"speed": 0.2}' style="background-image: url(https://mdbootstrap.com/img/Photos/Others/gradient3.png); background-repeat: no-repeat; background-size: cover; background-position: center center;">
<div class="mask rgba-indigo-slight">
<div class="container h-100 d-flex justify-content-center align-items-center">
<div class="row pt-5 mt-3">
<div class="col-md-12 mb-3">
<div class="intro-info-content text-center">
<h1 class="display-3 blue-text mb-5 wow fadeInDown" data-wow-delay="0.3s">ABOUT
<a class="blue-text font-weight-bold">ME</a>
</h1>
<h5 class="text-uppercase blue-text mb-5 mt-1 font-weight-bold wow fadeInDown" data-wow-delay="0.3s">Lorem ipsum dolor sit amet</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!--Main Navigation-->
<!--Main Layout-->
<main>
<div class="container">
<!--Section: Team v.1-->
<section class="text-center team-section">
<!--Grid row-->
<div class="row text-center">
<!--Grid column-->
<div class="col-md-12 mb-4" style="margin-top: -100px;">
<div class="avatar mx-auto">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg" class="img-fluid rounded-circle z-depth-1" alt="First sample avatar image">
</div>
<h3 class="my-3 font-weight-bold">
<strong>Anna Deynah</strong>
</h3>
<h6 class="font-weight-bold teal-text mb-4">Web Designer</h6>
<!--Facebook-->
<a class="p-2 m-2 fa-lg fb-ic">
<i class="fa fa-facebook grey-text"> </i>
</a>
<!--Twitter-->
<a class="p-2 m-2 fa-lg tw-ic">
<i class="fa fa-twitter grey-text"> </i>
</a>
<!--Instagram-->
<a class="p-2 m-2 fa-lg ins-ic">
<i class="fa fa-instagram grey-text"> </i>
</a>
<p class="mt-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</p>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Team v.1-->
<!--Section: Tabs-->
<section>
<ul class="nav md-pills pills-default d-flex justify-content-center">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#panel11" role="tab">
<strong>Work</strong>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#panel12" role="tab">
<strong>My team</strong>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#panel13" role="tab">
<strong>Portfolio</strong>
</a>
</li>
</ul>
<!-- Tab panels -->
<div class="tab-content">
<!--Panel 1-->
<div class="tab-pane fade show active" id="panel11" role="tabpanel">
<br>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-12">
<!--Projects section v.4-->
<section class="text-center mb-5">
<!--Grid row-->
<div class="row mb-4">
<!--Grid column-->
<div class="col-md-6 mb-4">
<div class="card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(41).jpg');">
<!-- Content -->
<div class="text-white text-center d-flex align-items-center rgba-blue-strong py-5 px-4">
<div>
<h3 class="mb-4 mt-4 font-weight-bold">
<strong>Project title</strong>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem,
optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos.
Odit sed qui, dolorum!.</p>
<a class="btn btn-outline-white btn-sm">
<i class="fa fa-clone left"></i> View project</a>
</div>
</div>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6 mb-4">
<div class="card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(14).jpg');">
<!-- Content -->
<div class="text-white text-center d-flex align-items-center rgba-teal-strong py-5 px-4">
<div>
<h3 class="mb-4 mt-4 font-weight-bold">
<strong>Project title</strong>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem,
optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos.
Odit sed qui, dolorum!.</p>
<a class="btn btn-outline-white btn-sm">
<i class="fa fa-clone left"></i> View project</a>
</div>
</div>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-6 mb-4">
<div class="card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(11).jpg');">
<!-- Content -->
<div class="text-white text-center d-flex align-items-center rgba-green-strong py-5 px-4">
<div>
<h3 class="mb-4 mt-4 font-weight-bold">
<strong>Project title</strong>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem,
optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos.
Odit sed qui, dolorum!.</p>
<a class="btn btn-outline-white btn-sm">
<i class="fa fa-clone left"></i> View project</a>
</div>
</div>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6 mb-4">
<div class="card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(42).jpg');">
<!-- Content -->
<div class="text-white text-center d-flex align-items-center rgba-stylish-strong py-5 px-4">
<div>
<h3 class="mb-4 mt-4 font-weight-bold">
<strong>Project title</strong>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem,
optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos.
Odit sed qui, dolorum!.</p>
<a class="btn btn-outline-white btn-sm">
<i class="fa fa-clone left"></i> View project</a>
</div>
</div>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Projects section v.4-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!--/.Panel 1-->
<!--Panel 2-->
<div class="tab-pane fade" id="panel12" role="tabpanel">
<br>
<!-- Section: Team v.3 -->
<section id="team" class="section team-section pb-4">
<!-- Section heading -->
<h2 class="font-weight-bold text-center h1 my-5">Our amazing team</h2>
<!-- Section description -->
<p class="text-center grey-text mb-5 mx-auto w-responsive">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
<!-- Grid row -->
<div class="row mb-lg-4 text-center text-md-left">
<!-- Grid column -->
<div class="col-lg-6 col-md-12 mb-4">
<div class="col-md-6 float-left">
<div class="avatar mx-auto mb-md-0 mb-3">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg" class="z-depth-1" alt="First sample avatar image">
</div>
</div>
<div class="col-md-6 float-right">
<h4><strong>John Doe</strong></h4>
<h6 class="font-weight-bold grey-text mb-4">Web Designer</h6>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur.</p>
<!-- Facebook -->
<a class="p-2 m-2 fa-lg fb-ic"><i class="fa fa-facebook"> </i></a>
<!-- Twitter -->
<a class="p-2 m-2 fa-lg tw-ic"><i class="fa fa-twitter"> </i></a>
<!-- Dribbble -->
<a class="p-2 m-2 fa-lg dribbble-ic"><i class="fa fa-dribbble"> </i></a>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-6 col-md-12 mb-4">
<div class="col-md-6 float-left">
<div class="avatar mx-auto mb-md-0 mb-3">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(31).jpg" class="z-depth-1" alt="Second sample avatar image">
</div>
</div>
<div class="col-md-6 float-right">
<h4><strong>Maria Kate</strong></h4>
<h6 class="font-weight-bold grey-text mb-4">Photographer</h6>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur.</p>
<!-- Facebook -->
<a class="p-2 m-2 fa-lg fb-ic"><i class="fa fa-facebook"> </i></a>
<!-- YouTube -->
<a class="p-2 m-2 fa-lg yt-ic"><i class="fa fa-youtube"> </i></a>
<!-- Instagram -->
<a class="p-2 m-2 fa-lg ins-ic"><i class="fa fa-instagram"> </i></a>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="row text-center text-md-left">
<!-- Grid column -->
<div class="col-lg-6 col-md-12 mb-4">
<div class="col-md-6 float-left">
<div class="avatar mx-auto mb-md-0 mb-3">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(26).jpg" class="z-depth-1" alt="Fourth sample avatar image">
</div>
</div>
<div class="col-md-6 float-right">
<h4><strong>Anna Deynah</strong></h4>
<h6 class="font-weight-bold grey-text mb-4">Web Developer</h6>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur.</p>
<!-- Facebook -->
<a class="p-2 m-2 fa-lg fb-ic"><i class="fa fa-facebook"> </i></a>
<!-- Twitter -->
<a class="p-2 m-2 fa-lg tw-ic"><i class="fa fa-twitter"> </i></a>
<!-- GitHub -->
<a class="p-2 m-2 fa-lg git-ic"><i class="fa fa-github"> </i></a>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-6 col-md-12 mb-4">
<div class="col-md-6 float-left">
<div class="avatar mx-auto mb-md-0 mb-3">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(29).jpg" class="z-depth-1" alt="Fifth sample avatar image">
</div>
</div>
<div class="col-md-6 float-right">
<h4><strong>Sarah Melyah</strong></h4>
<h6 class="font-weight-bold grey-text mb-4">Front-end Developer</h6>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur.</p>
<!-- Google + -->
<a class="p-2 m-2 fa-lg gplus-ic"><i class="fa fa-google-plus"> </i></a>
<!-- LinkedIn -->
<a class="p-2 m-2 fa-lg li-ic"><i class="fa fa-linkedin"> </i></a>
<!-- Email -->
<a class="p-2 m-2 fa-lg email-ic"><i class="fa fa-envelope"> </i></a>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</section>
<!-- Section: Team v.3 -->
</div>
<!--/.Panel 2-->
<!--Panel 3-->
<div class="tab-pane fade" id="panel13" role="tabpanel">
<br>
<div class="row d-flex justify-content-center">
<div class="col-md-12">
<div id="mdb-lightbox-ui"></div>
<div class="mdb-lightbox no-gutters">
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(71).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(71).jpg" class="img-fluid">
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(65).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(65).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(84).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(84).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(88).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(88).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(79).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(79).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(81).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(81).jpg" class="img-fluid" />
</a>
</figure>
</div>
</div>
</div>
</div>
<!--/.Panel 3-->
<!--Panel 4-->
<div class="tab-pane fade" id="panel14" role="tabpanel">
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis
molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate
odit minima.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis
molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate
odit minima.</p>
</div>
<!--/.Panel 4-->
</div>
</section>
<!--Section: Tabs-->
</div>
</main>
<!--Main Layout-->
<!--Footer-->
<footer class="page-footer mdb-color lighten-3 text-center text-md-left">
<!--Footer Links-->
<div class="container">
<!--First row-->
<div class="row">
<div class="col-md-12">
<h5 class="my-5 d-flex justify-content-center">If you want to cooperate with me just send me a message at office@mdbootstrap.com</h5>
</div>
</div>
<!--/First row-->
</div>
<!--/Footer Links-->
<!--Copyright-->
<div class="footer-copyright text-center py-3 wow fadeIn" data-wow-delay="0.3s">
<div class="container-fluid">
&copy; 2018 Copyright:
<a href="https://mdbootstrap.com/material-design-for-bootstrap/"> MDBootstrap.com </a>
</div>
</div>
<!--/Copyright-->
</footer>
<!--/Footer-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="../js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="../js/mdb.min.js"></script>
<script>
new WOW().init();
// MDB Lightbox Init
$(function () {
$("#mdb-lightbox-ui").load("../mdb-addons/mdb-lightbox-ui.html");
});
</script>
</body>
</html>

304
html/templates/signup-page.html Executable file
View File

@@ -0,0 +1,304 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap Template</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="../css/mdb.min.css" rel="stylesheet">
<style>
html,
body,
header,
.view {
height: 100%;
}
@media (min-width: 851px) and (max-width: 1440px) {
html,
body,
header,
.view {
height: 850px;
}
}
@media (min-width: 800px) and (max-width: 850px) {
html,
body,
header,
.view {
height: 1000px;
}
}
@media (min-width: 451px) and (max-width: 740px) {
html,
body,
header,
.view {
height: 1200px;
}
}
@media (max-width: 450px) {
html,
body,
header,
.view {
height: 1400px;
}
}
.intro-2 {
background: url("http://mdbootstrap.com/img/Photos/Others/forest1.jpg")no-repeat center center;
background-size: cover;
}
.top-nav-collapse {
background-color: #3f51b5 !important;
}
.navbar:not(.top-nav-collapse) {
background: transparent !important;
}
@media (max-width: 768px) {
.navbar:not(.top-nav-collapse) {
background: #3f51b5 !important;
}
}
@media (min-width: 800px) and (max-width: 850px) {
.navbar:not(.top-nav-collapse) {
background: #3f51b5!important;
}
}
.rgba-gradient {
background: -webkit-linear-gradient(98deg, rgba(22, 91, 231, 0.5), rgba(255, 32, 32, 0.5) 100%);
background: -webkit-gradient(linear, 98deg, from(rgba(22, 91, 231, 0.5)), to(rgba(255, 32, 32, 0.5)));
background: linear-gradient(to 98deg, rgba(22, 91, 231, 0.5), rgba(255, 32, 32, 0.5) 100%);
}
.card {
background-color: rgba(255, 255, 255, 0.85);
}
h6 {
line-height: 1.7;
}
</style>
</head>
<body>
<!--Main Navigation-->
<header>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
<div class="container">
<a class="navbar-brand" href="#">
<strong>MDB</strong>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7" aria-controls="navbarSupportedContent-7"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent-7">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
</ul>
<form class="form-inline">
<div class="md-form my-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
</div>
</form>
</div>
</div>
</nav>
<!-- Navbar -->
<!--Intro Section-->
<section class="view intro-2">
<div class="mask rgba-gradient">
<div class="container h-100 d-flex justify-content-center align-items-center">
<!--Grid row-->
<div class="row pt-5 mt-3">
<!--Grid column-->
<div class="col-md-12">
<div class="card">
<div class="card-body">
<h2 class="font-weight-bold my-4 text-center mb-5 mt-4 font-weight-bold">
<strong>REGISTER</strong>
</h2>
<hr>
<!--Grid row-->
<div class="row mt-5">
<!--Grid column-->
<div class="col-md-6 ml-lg-5 ml-md-3">
<!--Grid row-->
<div class="row pb-4">
<div class="col-2 col-lg-1">
<i class="fa fa-bank indigo-text fa-lg"></i>
</div>
<div class="col-10">
<h4 class="font-weight-bold mb-4">
<strong>Safety</strong>
</h4>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam
minima assumenda deleniti hic.</p>
</div>
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row pb-4">
<div class="col-2 col-lg-1">
<i class="fa fa-desktop deep-purple-text fa-lg"></i>
</div>
<div class="col-10">
<h4 class="font-weight-bold mb-4">
<strong>Technology</strong>
</h4>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam
minima assumenda deleniti hic.</p>
</div>
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row pb-4">
<div class="col-2 col-lg-1">
<i class="fa fa-money purple-text fa-lg"></i>
</div>
<div class="col-10">
<h4 class="font-weight-bold mb-4">
<strong>Finance</strong>
</h4>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam
minima assumenda deleniti hic.</p>
</div>
</div>
<!--Grid row-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-5">
<!--Grid row-->
<div class="row pb-4 d-flex justify-content-center mb-4">
<h4 class="mt-3 mr-4">
<strong>Login with</strong>
</h4>
<div class="inline-ul text-center d-flex justify-content-center">
<a class="p-2 m-2 fa-lg tw-ic">
<i class="fa fa-twitter fa-lg indigo-text"></i>
</a>
<a class="p-2 m-2 fa-lg li-ic">
<i class="fa fa-linkedin fa-lg indigo-text"> </i>
</a>
<a class="p-2 m-2 fa-lg ins-ic">
<i class="fa fa-instagram fa-lg indigo-text"> </i>
</a>
</div>
<h4 class="mt-3 ml-4">
<strong>or:</strong>
</h4>
</div>
<!--/Grid row-->
<!--Body-->
<div class="md-form">
<i class="fa fa-user prefix"></i>
<input type="text" id="orangeForm-name" class="form-control">
<label for="orangeForm-name">Your name</label>
</div>
<div class="md-form">
<i class="fa fa-envelope prefix"></i>
<input type="text" id="orangeForm-email" class="form-control">
<label for="orangeForm-email">Your email</label>
</div>
<div class="md-form">
<i class="fa fa-lock prefix"></i>
<input type="password" id="orangeForm-pass" class="form-control">
<label for="orangeForm-pass">Your password</label>
</div>
<div class="text-center">
<button class="btn btn-indigo btn-rounded mt-5">Sign up</button>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
</div>
</section>
<!--Intro Section-->
</header>
<!--Main Navigation-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="../js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="../js/mdb.min.js"></script>
<script>
new WOW().init();
</script>
</body>
</html>

366
html/templates/starters/1-column listing.html Normal file
View File

@@ -0,0 +1,366 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="../../css/mdb.min.css" rel="stylesheet">
<!-- Template styles -->
<style rel="stylesheet">
/* TEMPLATE STYLES */
main {
margin-top: 3rem;
}
.lead {
text-align: justify;
}
@media only screen and (max-width: 768px) {
.post-title {
margin-top: 1rem;
}
}
@media only screen and (max-width: 768px) {
.read-more {
text-align: center;
}
}
.extra-margin {
margin-top: 2rem;
margin-bottom: 2rem;
}
</style>
</head>
<body>
<header>
<!--Navbar-->
<nav class="navbar navbar-toggleable-md navbar-dark bg-primary primary-color-dark">
<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 waves-effect waves-light" href="https://mdbootstrap.com/material-design-for-bootstrap/" target="_blank">MDB</a>
<div class="collapse navbar-collapse" id="navbarNav1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">Features</a>
</li>
<li class="nav-item">
<a class="nav-link">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link">About</a>
</li>
</ul>
<form class="form-inline waves-effect waves-light">
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
</div>
</nav>
<!--/.Navbar-->
</header>
<main>
<!--Main layout-->
<div class="container">
<!--Page heading-->
<div class="row">
<div class="col-md-12">
<h1 class="h1-responsive">Page heading
<small class="text-muted">secondary text</small>
</h1>
</div>
</div>
<!--/.Page heading-->
<hr>
<!--First row-->
<div class="row">
<!--Featured image-->
<div class="col-lg-7">
<div class="view overlay hm-white-light z-depth-1-half">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(25).jpg" class="img-fluid" alt="">
<div class="mask"></div>
</div>
</div>
<!--/.Featured image-->
<!--Post excerpt-->
<div class="col-lg-5">
<a href="#!"><h2 class="post-title">Post title</h2></a>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit molestias voluptates incidunt tempora ducimus! At cum iusto necessitatibus sed omnis nemo natus. iure magni quasi dolores similique aspernatur.</p>
<div class="read-more">
<a href="#!" class="btn btn-primary">Learn more</a>
</div>
</div>
<!--/.Post excerpt-->
</div>
<!--/.First row-->
<hr class="extra-margin">
<!--Second row-->
<div class="row">
<!--Featured image-->
<div class="col-lg-7">
<div class="view overlay hm-white-light z-depth-1-half">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(22).jpg" class="img-fluid" alt="">
<div class="mask"></div>
</div>
</div>
<!--Featured image-->
<!--/.Post excerpt-->
<div class="col-lg-5">
<a href="#!"><h2 class="post-title">Post title</h2></a>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit molestias voluptates incidunt tempora ducimus! At cum iusto necessitatibus sed omnis nemo natus. iure magni quasi dolores similique aspernatur.</p>
<div class="read-more">
<a href="#!" class="btn btn-primary">Learn more</a>
</div>
</div>
<!--/.Post excerpt-->
</div>
<!--/.Second row-->
<hr class="extra-margin">
<!--Third row-->
<div class="row">
<!--Featured image-->
<div class="col-lg-7">
<div class="view overlay hm-white-light z-depth-1-half">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(23).jpg" class="img-fluid" alt="">
<div class="mask"></div>
</div>
</div>
<!--Featured image-->
<!--/.Post excerpt-->
<div class="col-lg-5">
<a href="#!"><h2 class="post-title">Post title</h2></a>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit molestias voluptates incidunt tempora ducimus! At cum iusto necessitatibus sed omnis nemo natus. iure magni quasi dolores similique aspernatur.</p>
<div class="read-more">
<a href="#!" class="btn btn-primary">Learn more</a>
</div>
</div>
<!--/.Post excerpt-->
</div>
<!--/.Third row-->
<hr class="extra-margin">
<!--Fourth row-->
<div class="row">
<!--Featured image-->
<div class="col-lg-7">
<div class="view overlay hm-white-light z-depth-1-half">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(13).jpg" class="img-fluid" alt="">
<div class="mask"></div>
</div>
</div>
<!--Featured image-->
<!--/.Post excerpt-->
<div class="col-lg-5">
<a href="#!"><h2 class="post-title">Post title</h2></a>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit molestias voluptates incidunt tempora ducimus! At cum iusto necessitatibus sed omnis nemo natus. iure magni quasi dolores similique aspernatur.</p>
<div class="read-more">
<a href="#!" class="btn btn-primary">Learn more</a>
</div>
</div>
<!--/.Post excerpt-->
</div>
<!--/.Fourth row-->
<hr class="extra-margin">
<!--Fifth row-->
<div class="row">
<!--Featured image-->
<div class="col-lg-7">
<div class="view overlay hm-white-light z-depth-1-half">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(31).jpg" class="img-fluid">
<div class="mask"></div>
</div>
</div>
<!--Featured image-->
<!--/.Post excerpt-->
<div class="col-lg-5">
<a href="#!"><h2 class="post-title">Post title</h2></a>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit molestias voluptates incidunt tempora ducimus! At cum iusto necessitatibus sed omnis nemo natus. iure magni quasi dolores similique aspernatur.</p>
<div class="read-more">
<a href="#!" class="btn btn-primary">Learn more</a>
</div>
</div>
<!--/.Post excerpt-->
</div>
<!--/.Fifth row-->
<br>
<hr>
<!--Pagination-->
<nav class="row text-center">
<ul class="pagination m-auto">
<li class="page-item disabled">
<a class="page-link" href="#!" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item active">
<a class="page-link" href="#!">1 <span class="sr-only">(current)</span></a>
</li>
<li class="page-item"><a class="page-link" href="#!">2</a></li>
<li class="page-item"><a class="page-link" href="#!">3</a></li>
<li class="page-item"><a class="page-link" href="#!">4</a></li>
<li class="page-item"><a class="page-link" href="#!">5</a></li>
<li class="page-item">
<a class="page-link" href="#!" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<!--/.Pagination-->
<hr>
</div>
<!--/.Main layout-->
</main>
<!--Footer-->
<footer class="page-footer center-on-small-only primary-color-dark">
<!--Footer Links-->
<div class="container-fluid">
<div class="row">
<!--First column-->
<div class="col-md-3 offset-lg-1 hidden-lg-down">
<h5 class="title">ABOUT MATERIAL DESIGN</h5>
<p>Material Design (codenamed Quantum Paper) is a design language developed by Google. </p>
<p>Material Design for Bootstrap (MDB) is a powerful Material Design UI KIT for most popular HTML, CSS, and JS framework - Bootstrap.</p>
</div>
<!--/.First column-->
<hr class="hidden-md-up">
<!--Second column-->
<div class="col-lg-2 col-md-4 offset-lg-1">
<h5 class="title">First column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Second column-->
<hr class="hidden-md-up">
<!--Third column-->
<div class="col-lg-2 col-md-4">
<h5 class="title">Second column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Third column-->
<hr class="hidden-md-up">
<!--Fourth column-->
<div class="col-lg-2 col-md-4">
<h5 class="title">Third column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Fourth column-->
</div>
</div>
<!--/.Footer Links-->
<hr>
<!--Call to action-->
<div class="call-to-action">
<h4>Material Design for Bootstrap</h4>
<ul>
<li>
<h5>Get our UI KIT for free</h5></li>
<li><a target="_blank" href="https://mdbootstrap.com/getting-started/" class="btn btn-danger">Sign up!</a></li>
<li><a target="_blank" href="https://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-default">Learn more</a></li>
</ul>
</div>
<!--/.Call to action-->
<!--Copyright-->
<div class="footer-copyright">
<div class="container-fluid">
© 2015 Copyright: <a href="http://www.MDBootstrap.com"> MDBootstrap.com </a>
</div>
</div>
<!--/.Copyright-->
</footer>
<!--/.Footer-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="../../js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="../../js/mdb.min.js"></script>
</body>
</html>

367
html/templates/starters/2-columns listing.html Normal file
View File

@@ -0,0 +1,367 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="../../css/mdb.min.css" rel="stylesheet">
<!-- Template styles -->
<style rel="stylesheet">
/* TEMPLATE STYLES */
main {
margin-top: 3rem;
;
}
main .card {
margin-bottom: 2rem;
}
@media only screen and (max-width: 768px) {
.read-more {
text-align: center;
}
}
</style>
</head>
<body>
<header>
<!--Navbar-->
<nav class="navbar navbar-toggleable-md navbar-dark bg-primary primary-color-dark">
<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 waves-effect waves-light" href="https://mdbootstrap.com/material-design-for-bootstrap/" target="_blank">MDB</a>
<div class="collapse navbar-collapse" id="navbarNav1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">Features</a>
</li>
<li class="nav-item">
<a class="nav-link">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link">About</a>
</li>
</ul>
<form class="form-inline waves-effect waves-light">
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
</div>
</nav>
<!--/.Navbar-->
</header>
<main>
<!--Main layout-->
<div class="container">
<!--Page heading-->
<div class="row">
<div class="col-md-12">
<h1 class="h1-responsive">Page heading
<small class="text-muted">secondary text</small>
</h1>
</div>
</div>
<!--/.Page heading-->
<hr>
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-lg-6">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/City/6-col/img%20(2).jpg" class="img-fluid" alt="">
<a href="#!">
<div class="mask"></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>
<div class="read-more">
<a href="#!" class="btn btn-primary">Read more</a>
</div>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--/.First column-->
<!--Second column-->
<div class="col-lg-6">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/City/6-col/img%20(8).jpg" class="img-fluid" alt="">
<a href="#!">
<div class="mask"></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>
<div class="read-more">
<a href="#!" class="btn btn-primary">Read more</a>
</div>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--/.Second column-->
</div>
<!--/.First row-->
<!--Second row-->
<div class="row">
<!--First column-->
<div class="col-lg-6">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/City/6-col/img%20(3).jpg" class="img-fluid" alt="">
<a href="#!">
<div class="mask"></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>
<div class="read-more">
<a href="#!" class="btn btn-primary">Read more</a>
</div>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--/.First column-->
<!--Second column-->
<div class="col-lg-6">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/City/6-col/img%20(13).jpg" class="img-fluid" alt="">
<a href="#!">
<div class="mask"></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>
<div class="read-more">
<a href="#!" class="btn btn-primary">Read more</a>
</div>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--Second column-->
</div>
<!--/.Second row-->
<hr>
<!--Pagination-->
<nav class="row text-center">
<ul class="pagination m-auto">
<li class="page-item disabled">
<a class="page-link" href="#!" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item active">
<a class="page-link" href="#!">1 <span class="sr-only">(current)</span></a>
</li>
<li class="page-item"><a class="page-link" href="#!">2</a></li>
<li class="page-item"><a class="page-link" href="#!">3</a></li>
<li class="page-item"><a class="page-link" href="#!">4</a></li>
<li class="page-item"><a class="page-link" href="#!">5</a></li>
<li class="page-item">
<a class="page-link" href="#!" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<!--/.Pagination-->
<hr>
</div>
<!--/.Main layout-->
</main>
<!--Footer-->
<footer class="page-footer center-on-small-only primary-color-dark">
<!--Footer Links-->
<div class="container-fluid">
<div class="row">
<!--First column-->
<div class="col-md-3 offset-lg-1 hidden-lg-down">
<h5 class="title">ABOUT MATERIAL DESIGN</h5>
<p>Material Design (codenamed Quantum Paper) is a design language developed by Google. </p>
<p>Material Design for Bootstrap (MDB) is a powerful Material Design UI KIT for most popular HTML, CSS, and JS framework - Bootstrap.</p>
</div>
<!--/.First column-->
<hr class="hidden-md-up">
<!--Second column-->
<div class="col-lg-2 col-md-4 offset-lg-1">
<h5 class="title">First column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Second column-->
<hr class="hidden-md-up">
<!--Third column-->
<div class="col-lg-2 col-md-4">
<h5 class="title">Second column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Third column-->
<hr class="hidden-md-up">
<!--Fourth column-->
<div class="col-lg-2 col-md-4">
<h5 class="title">Third column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Fourth column-->
</div>
</div>
<!--/.Footer Links-->
<hr>
<!--Call to action-->
<div class="call-to-action">
<h4>Material Design for Bootstrap</h4>
<ul>
<li>
<h5>Get our UI KIT for free</h5></li>
<li><a target="_blank" href="https://mdbootstrap.com/getting-started/" class="btn btn-danger">Sign up!</a></li>
<li><a target="_blank" href="https://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-default">Learn more</a></li>
</ul>
</div>
<!--/.Call to action-->
<!--Copyright-->
<div class="footer-copyright">
<div class="container-fluid">
© 2015 Copyright: <a href="http://www.MDBootstrap.com"> MDBootstrap.com </a>
</div>
</div>
<!--/.Copyright-->
</footer>
<!--/.Footer-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="../../js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="../../js/mdb.min.js"></script>
</body>
</html>

429
html/templates/starters/3-columns listing.html Normal file
View File

@@ -0,0 +1,429 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="../../css/mdb.min.css" rel="stylesheet">
<!-- Template styles -->
<style rel="stylesheet">
/* TEMPLATE STYLES */
main {
margin-top: 3rem;
}
main .card {
margin-bottom: 2rem;
}
@media only screen and (max-width: 768px) {
.read-more {
text-align: center;
}
}
</style>
</head>
<body>
<header>
<!--Navbar-->
<nav class="navbar navbar-toggleable-md navbar-dark bg-primary primary-color-dark">
<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 waves-effect waves-light" href="https://mdbootstrap.com/material-design-for-bootstrap/" target="_blank">MDB</a>
<div class="collapse navbar-collapse" id="navbarNav1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link">Features</a>
</li>
<li class="nav-item">
<a class="nav-link">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link">About</a>
</li>
</ul>
<form class="form-inline waves-effect waves-light">
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
</div>
</nav>
<!--/.Navbar-->
</header>
<main>
<!--Main layout-->
<div class="container">
<!--Page heading-->
<div class="row">
<div class="col-md-12">
<h1 class="h1-responsive">Page heading
<small class="text-muted">secondary text</small>
</h1>
</div>
</div>
<!--/.Page heading-->
<hr>
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-lg-4">
<!--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(13).jpg" class="img-fluid" alt="">
<a href="#!">
<div class="mask"></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>
<div class="read-more">
<a href="#!" class="btn btn-primary">Read more</a>
</div>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--/.First column-->
<!--Second column-->
<div class="col-lg-4">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/People/4-col/img%20(1)" class="img-fluid" alt="">
<a href="#!">
<div class="mask"></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>
<div class="read-more">
<a href="#!" class="btn btn-primary">Read more</a>
</div>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--/.Second column-->
<!--Third column-->
<div class="col-lg-4">
<!--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(4).jpg" class="img-fluid" alt="">
<a href="#!">
<div class="mask"></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>
<div class="read-more">
<a href="#!" class="btn btn-primary">Read more</a>
</div>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--/.Third column-->
</div>
<!--/.First row-->
<!--Second row-->
<div class="row">
<!--First column-->
<div class="col-lg-4">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/People/4-col/img%20(18)" class="img-fluid" alt="">
<a href="#!">
<div class="mask"></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>
<div class="read-more">
<a href="#!" class="btn btn-primary">Read more</a>
</div>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--/.First column-->
<!--Second column-->
<div class="col-lg-4">
<!--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(49)" class="img-fluid" alt="">
<a href="#!">
<div class="mask"></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>
<div class="read-more">
<a href="#!" class="btn btn-primary">Read more</a>
</div>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--Second column-->
<!--Third column-->
<div class="col-lg-4">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/People/4-col/img%20(16)" class="img-fluid" alt="">
<a href="#!">
<div class="mask"></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>
<div class="read-more">
<a href="#!" class="btn btn-primary">Read more</a>
</div>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--/.Third column-->
</div>
<!--/.Second row-->
<hr>
<!--Pagination-->
<nav class="row text-center">
<ul class="pagination m-auto">
<li class="page-item disabled">
<a class="page-link" href="#!" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item active">
<a class="page-link" href="#!">1 <span class="sr-only">(current)</span></a>
</li>
<li class="page-item"><a class="page-link" href="#!">2</a></li>
<li class="page-item"><a class="page-link" href="#!">3</a></li>
<li class="page-item"><a class="page-link" href="#!">4</a></li>
<li class="page-item"><a class="page-link" href="#!">5</a></li>
<li class="page-item">
<a class="page-link" href="#!" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<!--/.Pagination-->
<hr>
</div>
<!--/.Main layout-->
</main>
<!--Footer-->
<footer class="page-footer center-on-small-only primary-color-dark">
<!--Footer Links-->
<div class="container-fluid">
<div class="row">
<!--First column-->
<div class="col-md-3 offset-lg-1 hidden-lg-down">
<h5 class="title">ABOUT MATERIAL DESIGN</h5>
<p>Material Design (codenamed Quantum Paper) is a design language developed by Google. </p>
<p>Material Design for Bootstrap (MDB) is a powerful Material Design UI KIT for most popular HTML, CSS, and JS framework - Bootstrap.</p>
</div>
<!--/.First column-->
<hr class="hidden-md-up">
<!--Second column-->
<div class="col-lg-2 col-md-4 offset-lg-1">
<h5 class="title">First column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Second column-->
<hr class="hidden-md-up">
<!--Third column-->
<div class="col-lg-2 col-md-4">
<h5 class="title">Second column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Third column-->
<hr class="hidden-md-up">
<!--Fourth column-->
<div class="col-lg-2 col-md-4">
<h5 class="title">Third column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Fourth column-->
</div>
</div>
<!--/.Footer Links-->
<hr>
<!--Call to action-->
<div class="call-to-action">
<h4>Material Design for Bootstrap</h4>
<ul>
<li>
<h5>Get our UI KIT for free</h5></li>
<li><a target="_blank" href="https://mdbootstrap.com/getting-started/" class="btn btn-danger">Sign up!</a></li>
<li><a target="_blank" href="https://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-default">Learn more</a></li>
</ul>
</div>
<!--/.Call to action-->
<!--Copyright-->
<div class="footer-copyright">
<div class="container-fluid">
© 2015 Copyright: <a href="http://www.MDBootstrap.com"> MDBootstrap.com </a>
</div>
</div>
<!--/.Copyright-->
</footer>
<!--/.Footer-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="../../js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="../../js/mdb.min.js"></script>
</body>
</html>

461
html/templates/starters/basic-landing-page.html Normal file
View File

@@ -0,0 +1,461 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="../../css/mdb.min.css" rel="stylesheet">
<!-- Template styles -->
<style>
/* TEMPLATE STYLES */
html,
body,
.view {
height: 100%;
}
/* Navigation*/
.navbar {
background-color: transparent;
}
.scrolling-navbar {
-webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
transition: background .5s ease-in-out, padding .5s ease-in-out;
}
.top-nav-collapse {
background-color: #1C2331;
}
footer.page-footer {
background-color: #1C2331;
margin-top: 2rem;
}
@media only screen and (max-width: 768px) {
.navbar {
background-color: #1C2331;
}
}
/*Call to action*/
.flex-center {
color: #fff;
}
.view {
background: url("https://mdbootstrap.com/images/regular/city/img%20(17).jpg")no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*Contact section*/
#contact .fa {
font-size: 2.5rem;
margin-bottom: 1rem;
color: #1C2331;
}
</style>
</head>
<body>
<!--Navbar-->
<nav class="navbar navbar-toggleable-md fixed-top navbar-dark bg-faded scrolling-navbar">
<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 waves-effect waves-light" href="https://mdbootstrap.com/material-design-for-bootstrap/" target="_blank">MDB</a>
<div class="collapse navbar-collapse" id="navbarNav1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">About</a>
</li>
<li class="nav-item">
<a class="nav-link">Features</a>
</li>
<li class="nav-item">
<a class="nav-link">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!--/.Navbar-->
<!--Mask-->
<div class="view hm-black-strong">
<div class="full-bg-img flex-center">
<ul>
<li>
<h1 class="h1-responsive wow fadeInDown" data-wow-delay="0.2s">Material Design for Bootstrap 4</h1></li>
<li>
<p class="wow fadeInDown">The most powerful and free UI KIT for Bootstrap</p>
</li>
<li>
<a target="_blank" href="https://mdbootstrap.com/getting-started/" class="btn btn-primary btn-lg wow fadeInLeft" data-wow-delay="0.2s">Sign up!</a>
<a target="_blank" href="https://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-default btn-lg wow fadeInRight" data-wow-delay="0.2s">Learn more</a>
</li>
</ul>
</div>
</div>
<!--/.Mask-->
<!-- Main container-->
<div class="container">
<div class="divider-new">
<h2 class="h2-responsive wow bounceIn">About us</h2>
</div>
<!--Section: About-->
<section id="about" class="text-center wow bounceIn" data-wow-delay="0.2s">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit explicabo assumenda eligendi ex exercitationem harum deleniti quaerat beatae ducimus dolor voluptates magnam, reiciendis pariatur culpa tempore quibusdam quidem, saepe eius.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit explicabo assumenda eligendi ex exercitationem harum deleniti quaerat beatae ducimus dolor voluptates magnam, reiciendis pariatur culpa tempore quibusdam quidem, saepe eius.</p>
</section>
<!--Section: About-->
<div class="divider-new">
<h2 class="h2-responsive wow fadeInDown">Best features</h2>
</div>
<!--Section: Best features-->
<section id="best-features">
<div class="row">
<!--First columnn-->
<div class="col-lg-3">
<!--Card-->
<div class="card wow fadeInUp mb-2">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(3).jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block text-center">
<!--Title-->
<h4 class="card-title">Card title</h4>
<hr>
<!--Text-->
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident fuga animi architecto dolores dicta cum quo velit.</p>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--First columnn-->
<!--Second columnn-->
<div class="col-lg-3">
<!--Card-->
<div class="card wow fadeInUp mb-2" data-wow-delay="0.2s">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(15).jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block text-center">
<!--Title-->
<h4 class="card-title">Card title</h4>
<hr>
<!--Text-->
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident fuga animi architecto dolores dicta cum quo velit.</p>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--Second columnn-->
<!--Third columnn-->
<div class="col-lg-3">
<!--Card-->
<div class="card wow fadeInUp mb-2" data-wow-delay="0.4s">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(18).jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block text-center">
<!--Title-->
<h4 class="card-title">Card title</h4>
<hr>
<!--Text-->
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident fuga animi architecto dolores dicta cum quo velit.</p>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--Third columnn-->
<!--First columnn-->
<div class="col-lg-3">
<!--Card-->
<div class="card wow fadeInUp mb-2" data-wow-delay="0.6s">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(20).jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block text-center">
<!--Title-->
<h4 class="card-title">Card title</h4>
<hr>
<!--Text-->
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident fuga animi architecto dolores dicta cum quo velit.</p>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--First columnn-->
</div>
</section>
<!--/Section: Best features-->
<div class="divider-new">
<h2 class="h2-responsive wow fadeInUp">Contact us</h2>
</div>
<!--Section: Contact-->
<section id="contact">
<div class="row">
<!--First column-->
<div class="col-md-8">
<div id="map-container" class="z-depth-1 wow fadeInUp" style="height: 300px"></div>
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-4">
<ul class="text-center">
<li class="wow fadeInUp" data-wow-delay="0.2s"><i class="fa fa-map-marker"></i>
<p>New York, NY 10012, USA</p>
</li>
<li class="wow fadeInUp" data-wow-delay="0.3s"><i class="fa fa-phone"></i>
<p>+ 01 234 567 89</p>
</li>
<li class="wow fadeInUp" data-wow-delay="0.4s"><i class="fa fa-envelope"></i>
<p>contact@mdbootstrap.com</p>
</li>
</ul>
</div>
<!--/Second column-->
</div>
</section>
<!--Section: Contact-->
</div>
<!--/ Main container-->
<!--Footer-->
<footer class="page-footer center-on-small-only">
<!--Footer Links-->
<div class="container-fluid">
<div class="row">
<!--First column-->
<div class="col-md-3 offset-lg-1 hidden-lg-down">
<h5 class="title">ABOUT MATERIAL DESIGN</h5>
<p>Material Design (codenamed Quantum Paper) is a design language developed by Google. </p>
<p>Material Design for Bootstrap (MDB) is a powerful Material Design UI KIT for most popular HTML, CSS, and JS framework - Bootstrap.</p>
</div>
<!--/.First column-->
<hr class="hidden-md-up">
<!--Second column-->
<div class="col-lg-2 col-md-4 offset-lg-1">
<h5 class="title">First column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Second column-->
<hr class="hidden-md-up">
<!--Third column-->
<div class="col-lg-2 col-md-4">
<h5 class="title">Second column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Third column-->
<hr class="hidden-md-up">
<!--Fourth column-->
<div class="col-lg-2 col-md-4">
<h5 class="title">Third column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Fourth column-->
</div>
</div>
<!--/.Footer Links-->
<hr>
<!--Call to action-->
<div class="call-to-action">
<h4>Material Design for Bootstrap</h4>
<ul>
<li>
<h5>Get our UI KIT for free</h5></li>
<li><a target="_blank" href="https://mdbootstrap.com/getting-started/" class="btn btn-danger">Sign up!</a></li>
<li><a target="_blank" href="https://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-default">Learn more</a></li>
</ul>
</div>
<!--/.Call to action-->
<!--Copyright-->
<div class="footer-copyright">
<div class="container-fluid">
© 2015 Copyright: <a href="http://www.MDBootstrap.com"> MDBootstrap.com </a>
</div>
</div>
<!--/.Copyright-->
</footer>
<!--/.Footer-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="../../js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="../../js/mdb.min.js"></script>
<!--Google Maps-->
<script src="http://maps.google.com/maps/api/js"></script>
<script>
function init_map() {
var var_location = new google.maps.LatLng(40.725118, -73.997699);
var var_mapoptions = {
center: var_location,
zoom: 14
};
var var_marker = new google.maps.Marker({
position: var_location,
map: var_map,
title: "New York"
});
var var_map = new google.maps.Map(document.getElementById("map-container"),
var_mapoptions);
var_marker.setMap(var_map);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
<!-- Animations init-->
<script>
new WOW().init();
</script>
</body>
</html>

357
html/templates/starters/blog-home-page.html Normal file
View File

@@ -0,0 +1,357 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="../../css/mdb.min.css" rel="stylesheet">
<!-- Template styles -->
<style rel="stylesheet">
/* TEMPLATE STYLES */
main {
padding-top: 3rem;
padding-bottom: 2rem;
}
.widget-wrapper {
padding-bottom: 2rem;
border-bottom: 1px solid #e0e0e0;
margin-bottom: 2rem;
}
</style>
</head>
<body>
<header>
<!--Navbar-->
<nav class="navbar navbar-toggleable-md navbar-dark bg-primary primary-color-dark">
<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="https://mdbootstrap.com/material-design-for-bootstrap/" target="_blank">MDB</a>
<div class="collapse navbar-collapse" id="navbarNav1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">Features</a>
</li>
<li class="nav-item">
<a class="nav-link">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link">About</a>
</li>
</ul>
<form class="form-inline waves-effect waves-light">
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
</div>
</nav>
<!--/.Navbar-->
</header>
<main>
<!--Main layout-->
<div class="container">
<div class="row">
<!--Main column-->
<div class="col-lg-8">
<!--Post-->
<div class="post-wrapper">
<!--Post data-->
<h1 class="h1-responsive">Post title <small class="text-muted">Secondary text</small></h1>
<h5>Written by <a href="">John Doe</a>, 30.04.2016</h5>
<br>
<!--Featured image -->
<div class="view overlay hm-white-light z-depth-1-half">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(22).jpg" class="img-fluid " alt="">
<div class="mask">
</div>
</div>
<br>
<!--Post excerpt-->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, officia omnis. Vero nihil neque dignissimos hic voluptas quisquam amet porro, similique libero ullam veritatis tempora cumque voluptates harum. Repellendus, impedit.</p>
<!--"Read more" button-->
<button class="btn btn-primary">Read more</button>
</div>
<!--/.Post-->
<hr>
<!--Post-->
<div class="post-wrapper">
<!--Post data-->
<h1 class="h1-responsive">Post title <small class="text-muted">Secondary text</small></h1>
<h5>Written by <a href="">John Doe</a>, 30.04.2016</h5>
<br>
<!--Featured image -->
<div class="view overlay hm-white-light z-depth-1-half">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(23).jpg" class="img-fluid " alt="">
<div class="mask">
</div>
</div>
<br>
<!--Post excerpt-->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, officia omnis. Vero nihil neque dignissimos hic voluptas quisquam amet porro, similique libero ullam veritatis tempora cumque voluptates harum. Repellendus, impedit.</p>
<!--"Read more" button-->
<button class="btn btn-primary">Read more</button>
</div>
<!--/.Post-->
<hr>
<!--Post-->
<div class="post-wrapper">
<!--Post data-->
<h1 class="h1-responsive">Post title <small class="text-muted">Secondary text</small></h1>
<h5>Written by <a href="">John Doe</a>, 30.04.2016</h5>
<br>
<!--Featured image -->
<div class="view overlay hm-white-light z-depth-1-half">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(35).jpg" class="img-fluid" alt="">
<div class="mask">
</div>
</div>
<br>
<!--Post excerpt-->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, officia omnis. Vero nihil neque dignissimos hic voluptas quisquam amet porro, similique libero ullam veritatis tempora cumque voluptates harum. Repellendus, impedit.</p>
<!--"Read more" button-->
<button class="btn btn-primary">Read more</button>
</div>
<!--/.Post-->
<hr>
<!--Pagination-->
<nav class="row text-center">
<ul class="pagination m-auto">
<li class="page-item disabled">
<a class="page-link" href="#!" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item active">
<a class="page-link" href="#!">1 <span class="sr-only">(current)</span></a>
</li>
<li class="page-item"><a class="page-link" href="#!">2</a></li>
<li class="page-item"><a class="page-link" href="#!">3</a></li>
<li class="page-item"><a class="page-link" href="#!">4</a></li>
<li class="page-item"><a class="page-link" href="#!">5</a></li>
<li class="page-item">
<a class="page-link" href="#!" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<!--/.Pagination-->
<hr>
</div>
<!--Sidebar-->
<div class="col-lg-4">
<div class="widget-wrapper">
<h4>Categories:</h4>
<br>
<div class="list-group">
<a href="#" class="list-group-item active">Sport</a>
<a href="#" class="list-group-item">Music</a>
<a href="#" class="list-group-item">Travels</a>
<a href="#" class="list-group-item">Fashion</a>
<a href="#" class="list-group-item">Parties</a>
</div>
</div>
<div class="widget-wrapper">
<h4>Subscription form:</h4>
<br>
<div class="card">
<div class="card-block">
<p><strong>Subscribe to our newsletter</strong></p>
<p>Once a week we will send you a summary of the most useful news</p>
<div class="md-form">
<i class="fa fa-user prefix"></i>
<input type="text" id="form1" class="form-control">
<label for="form1">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>
<button class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
<!--/.Sidebar-->
</div>
</div>
<!--/.Main layout-->
</main>
<!--Footer-->
<footer class="page-footer center-on-small-only primary-color-dark">
<!--Footer Links-->
<div class="container-fluid">
<div class="row">
<!--First column-->
<div class="col-md-3 offset-lg-1 hidden-lg-down">
<h5 class="title">ABOUT MATERIAL DESIGN</h5>
<p>Material Design (codenamed Quantum Paper) is a design language developed by Google. </p>
<p>Material Design for Bootstrap (MDB) is a powerful Material Design UI KIT for most popular HTML, CSS, and JS framework - Bootstrap.</p>
</div>
<!--/.First column-->
<hr class="hidden-md-up">
<!--Second column-->
<div class="col-lg-2 col-md-4 offset-lg-1">
<h5 class="title">First column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Second column-->
<hr class="hidden-md-up">
<!--Third column-->
<div class="col-lg-2 col-md-4">
<h5 class="title">Second column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Third column-->
<hr class="hidden-md-up">
<!--Fourth column-->
<div class="col-lg-2 col-md-4">
<h5 class="title">Third column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Fourth column-->
</div>
</div>
<!--/.Footer Links-->
<hr>
<!--Call to action-->
<div class="call-to-action">
<h4>Material Design for Bootstrap</h4>
<ul>
<li>
<h5>Get our UI KIT for free</h5></li>
<li><a target="_blank" href="https://mdbootstrap.com/getting-started/" class="btn btn-danger">Sign up!</a></li>
<li><a target="_blank" href="https://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-default">Learn more</a></li>
</ul>
</div>
<!--/.Call to action-->
<!--Copyright-->
<div class="footer-copyright">
<div class="container-fluid">
© 2015 Copyright: <a href="http://www.MDBootstrap.com"> MDBootstrap.com </a>
</div>
</div>
<!--/.Copyright-->
</footer>
<!--/.Footer-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="../../js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="../../js/mdb.min.js"></script>
</body>
</html>

311
html/templates/starters/corporate-style.html Normal file
View File

@@ -0,0 +1,311 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="../../css/mdb.min.css" rel="stylesheet">
<!-- Template styles -->
<style rel="stylesheet">
/* TEMPLATE STYLES */
main {
padding-top: 3rem;
padding-bottom: 2rem;
}
.extra-margins {
margin-top: 1rem;
margin-bottom: 2.5rem;
}
</style>
</head>
<body>
<header>
<!--Navbar-->
<nav class="navbar navbar-toggleable-md navbar-dark bg-primary primary-color-dark">
<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="https://mdbootstrap.com/material-design-for-bootstrap/" target="_blank">MDB</a>
<div class="collapse navbar-collapse" id="navbarNav1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">Features</a>
</li>
<li class="nav-item">
<a class="nav-link">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link">About</a>
</li>
</ul>
<form class="form-inline waves-effect waves-light">
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
</div>
</nav>
<!--/.Navbar-->
</header>
<main>
<!--Main layout-->
<div class="container">
<!--First row-->
<div class="row">
<div class="col-lg-7">
<!--Featured image -->
<div class="view overlay hm-white-light z-depth-1-half">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20%2879%29.jpg" class="img-fluid " alt="">
<div class="mask">
</div>
</div>
<br>
</div>
<!--Main information-->
<div class="col-lg-5">
<h2 class="h2-responsive">We are professionals</h2>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis pariatur quod ipsum atque quam dolorem voluptate officia sunt placeat consectetur alias fugit cum praesentium ratione sint mollitia, perferendis natus quaerat!</p>
<a href="" class="btn btn-primary">Get it now!</a>
</div>
</div>
<!--/.First row-->
<hr class="extra-margins">
<!--Second row-->
<div class="row">
<!--First columnn-->
<div class="col-lg-4">
<!--Card-->
<div class="card mb-2">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(2).jpg" class="img-fluid" alt="">
<a href="#">
<div class="mask"></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">Read more</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--First columnn-->
<!--Second columnn-->
<div class="col-lg-4">
<!--Card-->
<div class="card mb-2">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(4).jpg" class="img-fluid" alt="">
<a href="#">
<div class="mask"></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">Read more</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--Second columnn-->
<!--Third columnn-->
<div class="col-lg-4">
<!--Card-->
<div class="card mb-2">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(8).jpg" class="img-fluid" alt="">
<a href="#">
<div class="mask"></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">Read more</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--Third columnn-->
</div>
<!--/.Second row-->
</div>
<!--/.Main layout-->
</main>
<!--Footer-->
<footer class="page-footer center-on-small-only primary-color-dark">
<!--Footer Links-->
<div class="container-fluid">
<div class="row">
<!--First column-->
<div class="col-md-3 offset-lg-1 hidden-lg-down">
<h5 class="title">ABOUT MATERIAL DESIGN</h5>
<p>Material Design (codenamed Quantum Paper) is a design language developed by Google. </p>
<p>Material Design for Bootstrap (MDB) is a powerful Material Design UI KIT for most popular HTML, CSS, and JS framework - Bootstrap.</p>
</div>
<!--/.First column-->
<hr class="hidden-md-up">
<!--Second column-->
<div class="col-lg-2 col-md-4 offset-lg-1">
<h5 class="title">First column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Second column-->
<hr class="hidden-md-up">
<!--Third column-->
<div class="col-lg-2 col-md-4">
<h5 class="title">Second column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Third column-->
<hr class="hidden-md-up">
<!--Fourth column-->
<div class="col-lg-2 col-md-4">
<h5 class="title">Third column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Fourth column-->
</div>
</div>
<!--/.Footer Links-->
<hr>
<!--Call to action-->
<div class="call-to-action">
<h4>Material Design for Bootstrap</h4>
<ul>
<li>
<h5>Get our UI KIT for free</h5></li>
<li><a target="_blank" href="https://mdbootstrap.com/getting-started/" class="btn btn-danger">Sign up!</a></li>
<li><a target="_blank" href="https://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-default">Learn more</a></li>
</ul>
</div>
<!--/.Call to action-->
<!--Copyright-->
<div class="footer-copyright">
<div class="container-fluid">
© 2015 Copyright: <a href="http://www.MDBootstrap.com"> MDBootstrap.com </a>
</div>
</div>
<!--/.Copyright-->
</footer>
<!--/.Footer-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="../../js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="../../js/mdb.min.js"></script>
</body>
</html>

405
html/templates/starters/e-commerce-home-page.html Normal file
View File

@@ -0,0 +1,405 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="../../css/mdb.min.css" rel="stylesheet">
<!-- Template styles -->
<style rel="stylesheet">
/* TEMPLATE STYLES */
main {
padding-top: 3rem;
padding-bottom: 2rem;
}
.widget-wrapper {
padding-bottom: 2rem;
border-bottom: 1px solid #e0e0e0;
margin-bottom: 2rem;
}
.extra-margins {
margin-top: 1rem;
margin-bottom: 2.5rem;
}
.divider-new {
margin-top: 0;
}
</style>
</head>
<body>
<header>
<!--Navbar-->
<nav class="navbar navbar-toggleable-md navbar-dark bg-primary primary-color-dark">
<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="https://mdbootstrap.com/material-design-for-bootstrap/" target="_blank">MDB</a>
<div class="collapse navbar-collapse" id="navbarNav1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">Features</a>
</li>
<li class="nav-item">
<a class="nav-link">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link">About</a>
</li>
</ul>
<form class="form-inline waves-effect waves-light">
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
</div>
</nav>
<!--/.Navbar-->
</header>
<main>
<!--Main layout-->
<div class="container">
<div class="row">
<!--Sidebar-->
<div class="col-lg-4">
<div class="widget-wrapper">
<h4>Categories:</h4>
<br>
<div class="list-group">
<a href="#" class="list-group-item active">Woman</a>
<a href="#" class="list-group-item">Man</a>
<a href="#" class="list-group-item">Shoes</a>
<a href="#" class="list-group-item">T-shirt</a>
<a href="#" class="list-group-item">Jewellery</a>
</div>
</div>
<div class="widget-wrapper">
<h4>Subscription form:</h4>
<br>
<div class="card">
<div class="card-block">
<p><strong>Subscribe to our newsletter</strong></p>
<p>Once a week we will send you a summary of the most useful news</p>
<div class="md-form">
<i class="fa fa-user prefix"></i>
<input type="text" id="form1" class="form-control">
<label for="form1">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>
<button class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
<!--/.Sidebar-->
<!--Main column-->
<div class="col-lg-8">
<!--First row-->
<div class="row">
<div class="col-lg-12">
<div class="divider-new">
<h2 class="h2-responsive">What's new?</h2>
</div>
<!--Carousel Wrapper-->
<div id="carousel-example-2" class="carousel slide carousel-fade no-flex" 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(56).jpg" alt="First slide" class="d-block img-fluid">
<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(38).jpg" alt="Second slide" class="d-block img-fluid">
<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(43).jpg" alt="Third slide" class="d-block img-fluid">
<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-->
</div>
</div>
<!--/.First row-->
<br>
<hr class="extra-margins">
<!--Second row-->
<div class="row">
<!--First columnn-->
<div class="col-lg-4">
<!--Card-->
<div class="card mb-2">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(3).jpg" class="img-fluid" alt="">
<a href="#">
<div class="mask"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title">Product title</h4>
<!--Text-->
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<a href="#" class="btn btn-primary">Buy now for 10$</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--First columnn-->
<!--Second columnn-->
<div class="col-lg-4">
<!--Card-->
<div class="card mb-2">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(2).jpg" class="img-fluid" alt="">
<a href="#">
<div class="mask"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title">Product title</h4>
<!--Text-->
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<a href="#" class="btn btn-primary">Buy now for 20$</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--Second columnn-->
<!--Third columnn-->
<div class="col-lg-4">
<!--Card-->
<div class="card mb-2">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(1).jpg" class="img-fluid" alt="">
<a href="#">
<div class="mask"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title">Product title</h4>
<!--Text-->
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<a href="#" class="btn btn-primary">Buy now for 30$</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--Third columnn-->
</div>
<!--/.Second row-->
</div>
<!--/.Main column-->
</div>
</div>
<!--/.Main layout-->
</main>
<!--Footer-->
<footer class="page-footer center-on-small-only primary-color-dark">
<!--Footer Links-->
<div class="container-fluid">
<div class="row">
<!--First column-->
<div class="col-md-3 offset-lg-1 hidden-lg-down">
<h5 class="title">ABOUT MATERIAL DESIGN</h5>
<p>Material Design (codenamed Quantum Paper) is a design language developed by Google. </p>
<p>Material Design for Bootstrap (MDB) is a powerful Material Design UI KIT for most popular HTML, CSS, and JS framework - Bootstrap.</p>
</div>
<!--/.First column-->
<hr class="hidden-md-up">
<!--Second column-->
<div class="col-lg-2 col-md-4 offset-lg-1">
<h5 class="title">First column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Second column-->
<hr class="hidden-md-up">
<!--Third column-->
<div class="col-lg-2 col-md-4">
<h5 class="title">Second column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Third column-->
<hr class="hidden-md-up">
<!--Fourth column-->
<div class="col-lg-2 col-md-4">
<h5 class="title">Third column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Fourth column-->
</div>
</div>
<!--/.Footer Links-->
<hr>
<!--Call to action-->
<div class="call-to-action">
<h4>Material Design for Bootstrap</h4>
<ul>
<li>
<h5>Get our UI KIT for free</h5></li>
<li><a target="_blank" href="https://mdbootstrap.com/getting-started/" class="btn btn-danger">Sign up!</a></li>
<li><a target="_blank" href="https://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-default">Learn more</a></li>
</ul>
</div>
<!--/.Call to action-->
<!--Copyright-->
<div class="footer-copyright">
<div class="container-fluid">
© 2015 Copyright: <a href="http://www.MDBootstrap.com"> MDBootstrap.com </a>
</div>
</div>
<!--/.Copyright-->
</footer>
<!--/.Footer-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="../../js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="../../js/mdb.min.js"></script>
</body>
</html>

237
html/templates/starters/full-background-image.html Normal file
View File

@@ -0,0 +1,237 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="../../css/mdb.min.css" rel="stylesheet">
<!-- Template styles -->
<style rel="stylesheet">
/* TEMPLATE STYLES */
html,
body,
.view {
height: 100%;
}
/* Navigation*/
.navbar {
background-color: transparent;
}
.scrolling-navbar {
-webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
transition: background .5s ease-in-out, padding .5s ease-in-out;
}
.top-nav-collapse {
background-color: #1C2331;
}
footer.page-footer {
background-color: #1C2331;
margin-top: -1px;
}
@media only screen and (max-width: 768px) {
.navbar {
background-color: #1C2331;
}
}
/*Call to action*/
.flex-center {
color: #fff;
}
.view {
background: url("https://mdbootstrap.com/img/Photos/Horizontal/City/full%20page/img%20(1).jpg")no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
<!--Navbar-->
<nav class="navbar navbar-toggleable-md fixed-top navbar-dark bg-faded scrolling-navbar">
<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 waves-effect waves-light" href="https://mdbootstrap.com/material-design-for-bootstrap/" target="_blank">MDB</a>
<div class="collapse navbar-collapse" id="navbarNav1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">About</a>
</li>
<li class="nav-item">
<a class="nav-link">Features</a>
</li>
<li class="nav-item">
<a class="nav-link">Contact</a>
</li>
</ul>
<form class="form-inline waves-effect waves-light">
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
</div>
</nav>
<!--/.Navbar-->
<!--Mask-->
<div class="view hm-black-strong">
<div class="full-bg-img flex-center">
<ul class="animated fadeInUp">
<li>
<h1 class="h1-responsive">Material Design for Bootstrap 4</h1></li>
<li>
<p>The most powerful and free UI KIT for Bootstrap</p>
</li>
<li>
<a target="_blank" href="https://mdbootstrap.com/getting-started/" class="btn btn-primary btn-lg">Sign up!</a>
<a target="_blank" href="https://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-default btn-lg">Learn more</a>
</li>
</ul>
</div>
</div>
<!--/.Mask-->
<!--Footer-->
<footer class="page-footer center-on-small-only">
<!--Footer Links-->
<div class="container-fluid">
<div class="row">
<!--First column-->
<div class="col-md-3 offset-lg-1 hidden-lg-down">
<h5 class="title">ABOUT MATERIAL DESIGN</h5>
<p>Material Design (codenamed Quantum Paper) is a design language developed by Google. </p>
<p>Material Design for Bootstrap (MDB) is a powerful Material Design UI KIT for most popular HTML, CSS, and JS framework - Bootstrap.</p>
</div>
<!--/.First column-->
<hr class="hidden-md-up">
<!--Second column-->
<div class="col-lg-2 col-md-4 offset-lg-1">
<h5 class="title">First column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Second column-->
<hr class="hidden-md-up">
<!--Third column-->
<div class="col-lg-2 col-md-4">
<h5 class="title">Second column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Third column-->
<hr class="hidden-md-up">
<!--Fourth column-->
<div class="col-lg-2 col-md-4">
<h5 class="title">Third column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Fourth column-->
</div>
</div>
<!--/.Footer Links-->
<hr>
<!--Call to action-->
<div class="call-to-action">
<h4>Material Design for Bootstrap</h4>
<ul>
<li>
<h5>Get our UI KIT for free</h5></li>
<li><a target="_blank" href="https://mdbootstrap.com/getting-started/" class="btn btn-danger">Sign up!</a></li>
<li><a target="_blank" href="https://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-default">Learn more</a></li>
</ul>
</div>
<!--/.Call to action-->
<!--Copyright-->
<div class="footer-copyright">
<div class="container-fluid">
© 2015 Copyright: <a href="http://www.MDBootstrap.com"> MDBootstrap.com </a>
</div>
</div>
<!--/.Copyright-->
</footer>
<!--/.Footer-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="../../js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="../../js/mdb.min.js"></script>
</body>
</html>

349
html/templates/starters/full-image-carousel.html Normal file
View File

@@ -0,0 +1,349 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="../../css/mdb.min.css" rel="stylesheet">
<!-- Template styles -->
<style rel="stylesheet">
/* TEMPLATE STYLES */
/* Necessary for full page carousel*/
html,
body,
.view {
height: 100%;
}
/* Navigation*/
.navbar {
background-color: transparent;
}
.scrolling-navbar {
-webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
transition: background .5s ease-in-out, padding .5s ease-in-out;
}
.top-nav-collapse {
background-color: #1C2331;
}
footer.page-footer {
background-color: #1C2331;
margin-top: 0;
}
@media only screen and (max-width: 768px) {
.navbar {
background-color: #1C2331;
}
}
/* Carousel*/
.carousel,
.carousel-item,
.active {
height: 100%;
}
.carousel-inner {
height: 100%;
}
.carousel-item:nth-child(1) {
background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full%20page/img%20(1).jpg");
background-repeat: no-repeat;
background-size: cover;
}
.carousel-item:nth-child(2) {
background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full%20page/img%20(2).jpg");
background-repeat: no-repeat;
background-size: cover;
}
.carousel-item:nth-child(3) {
background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full%20page/img%20(3).jpg");
background-repeat: no-repeat;
background-size: cover;
}
/*Caption*/
.flex-center {
color: #fff;
}
@media (min-width: 776px) {
.carousel .view ul li {
display: inline;
}
.carousel .view .full-bg-img ul li .flex-item {
margin-bottom: 1.5rem;
}
}
</style>
</head>
<body>
<!--Navbar-->
<nav class="navbar navbar-toggleable-md fixed-top navbar-dark bg-faded scrolling-navbar">
<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 waves-effect waves-light" href="https://mdbootstrap.com/material-design-for-bootstrap/" target="_blank">MDB</a>
<div class="collapse navbar-collapse" id="navbarNav1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">About</a>
</li>
<li class="nav-item">
<a class="nav-link">Features</a>
</li>
<li class="nav-item">
<a class="nav-link">Contact</a>
</li>
</ul>
<form class="form-inline waves-effect waves-light">
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
</div>
</nav>
<!--/.Navbar-->
<!--Carousel Wrapper-->
<div id="carousel-example-2" class="carousel slide carousel-fade" 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">
<!--First slide-->
<div class="carousel-item active">
<!--Mask-->
<div class="view hm-black-light">
<div class="full-bg-img flex-center">
<ul class="animated fadeInUp col-md-12">
<li>
<h1 class="h1-responsive flex-item">Material Design for Bootstrap 4</h1>
<li>
<p class="flex-item">The most powerful and free UI KIT for Bootstrap</p>
</li>
<li>
<a target="_blank" href="https://mdbootstrap.com/getting-started/" class="btn btn-primary btn-lg flex-item">Sign up!</a>
</li>
<li>
<a target="_blank" href="https://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-default btn-lg flex-item">Learn more</a>
</li>
</ul>
</div>
</div>
<!--/.Mask-->
</div>
<!--/.First slide-->
<!--Second slide -->
<div class="carousel-item">
<!--Mask-->
<div class="view hm-black-light">
<div class="full-bg-img flex-center">
<ul class="animated fadeInUp col-md-12">
<li>
<h1 class="h1-responsive">Lots of tutorials at your disposal</h1>
</li>
<li>
<p>And all of them are FREE!</p>
</li>
<li>
<a target="_blank" href="https://mdbootstrap.com/bootstrap-tutorial/" class="btn btn-primary btn-lg">Start learning</a>
</li>
</ul>
</div>
</div>
<!--/.Mask-->
</div>
<!--/.Second slide -->
<!--Third slide-->
<div class="carousel-item">
<!--Mask-->
<div class="view hm-black-light">
<div class="full-bg-img flex-center">
<ul class="animated fadeInUp col-md-12">
<li>
<h1 class="h1-responsive">Visit our support forum</h1></li>
<li>
<p>Our community can help you with any question</p>
</li>
<li>
<a target="_blank" href="https://mdbootstrap.com/forums/forum/support/" class="btn btn-default btn-lg">Support forum</a>
</li>
</ul>
</div>
</div>
<!--/.Mask-->
</div>
<!--/.Third slide-->
</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-->
<!--/.Main layout-->
<!--Footer-->
<footer class="page-footer center-on-small-only">
<!--Footer Links-->
<div class="container-fluid">
<div class="row">
<!--First column-->
<div class="col-md-3 offset-lg-1 hidden-lg-down">
<h5 class="title">ABOUT MATERIAL DESIGN</h5>
<p>Material Design (codenamed Quantum Paper) is a design language developed by Google. </p>
<p>Material Design for Bootstrap (MDB) is a powerful Material Design UI KIT for most popular HTML, CSS, and JS framework - Bootstrap.</p>
</div>
<!--/.First column-->
<hr class="hidden-md-up">
<!--Second column-->
<div class="col-lg-2 col-md-4 offset-lg-1">
<h5 class="title">First column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Second column-->
<hr class="hidden-md-up">
<!--Third column-->
<div class="col-lg-2 col-md-4">
<h5 class="title">Second column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Third column-->
<hr class="hidden-md-up">
<!--Fourth column-->
<div class="col-lg-2 col-md-4">
<h5 class="title">Third column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Fourth column-->
</div>
</div>
<!--/.Footer Links-->
<hr>
<!--Call to action-->
<div class="call-to-action">
<h4>Material Design for Bootstrap</h4>
<ul>
<li>
<h5>Get our UI KIT for free</h5></li>
<li><a target="_blank" href="https://mdbootstrap.com/getting-started/" class="btn btn-danger">Sign up!</a></li>
<li><a target="_blank" href="https://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-default">Learn more</a></li>
</ul>
</div>
<!--/.Call to action-->
<!--Copyright-->
<div class="footer-copyright">
<div class="container-fluid">
© 2015 Copyright: <a href="http://www.MDBootstrap.com"> MDBootstrap.com </a>
</div>
</div>
<!--/.Copyright-->
</footer>
<!--/.Footer-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="../../js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="../../js/mdb.min.js"></script>
</body>
</html>

352
html/templates/starters/full-video-carousel.html Normal file
View File

@@ -0,0 +1,352 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="../../css/mdb.min.css" rel="stylesheet">
<!-- Template styles -->
<style rel="stylesheet">
/* TEMPLATE STYLES */
/* Necessary for full page carousel*/
html,
body,
.view {
height: 100%;
}
/* Navigation*/
.navbar {
background-color: transparent;
}
.scrolling-navbar {
-webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
transition: background .5s ease-in-out, padding .5s ease-in-out;
}
.top-nav-collapse {
background-color: #1C2331;
}
footer.page-footer {
background-color: #1C2331;
margin-top: 0;
}
@media only screen and (max-width: 768px) {
.navbar {
background-color: #1C2331;
}
}
/* Carousel*/
.carousel,
.carousel-item,
.active {
height: 100%;
}
.carousel-inner {
height: 100%;
}
.flex-center {
color: #fff;
}
.carousel-caption {
height: 100%;
padding-top: 7rem;
}
</style>
</head>
<body>
<!--Navbar-->
<nav class="navbar navbar-toggleable-md fixed-top navbar-dark bg-faded scrolling-navbar">
<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 waves-effect waves-light" href="https://mdbootstrap.com/material-design-for-bootstrap/" target="_blank">MDB</a>
<div class="collapse navbar-collapse" id="navbarNav1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">About</a>
</li>
<li class="nav-item">
<a class="nav-link">Features</a>
</li>
<li class="nav-item">
<a class="nav-link">Contact</a>
</li>
</ul>
<form class="form-inline waves-effect waves-light">
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
</div>
</nav>
<!--/.Navbar-->
<!--Carousel Wrapper-->
<div id="video-carousel-example" class="carousel slide carousel-fade" 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">
<!--First slide-->
<div class="carousel-item active">
<!--Mask color-->
<div class="view hm-black-light">
<!--Video source-->
<video class="video-full" autoplay loop>
<source src="https://mdbootstrap.com/img/video/Strum-Away.mp4" type="video/mp4" />
</video>
<div class="full-bg-img"></div>
</div>
<!--Caption-->
<div class="carousel-caption">
<div class="flex-center animated fadeInDown">
<ul>
<li>
<h1 class="h1-responsive">Material Design for Bootstrap 4</h1></li>
<li>
<p>The most powerful and free UI KIT for Bootstrap</p>
</li>
<li>
<a target="_blank" href="https://mdbootstrap.com/getting-started/" class="btn btn-primary btn-lg">Sign up!</a>
<a target="_blank" href="https://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-default btn-lg">Learn more</a>
</li>
</ul>
</div>
</div>
<!--Caption-->
</div>
<!--/First slide-->
<!--Second slide-->
<div class="carousel-item">
<!--Mask color-->
<div class="view hm-black-light">
<!--Video source-->
<video class="video-full" autoplay loop>
<source src="https://mdbootstrap.com/img/video/Beach-Ball.mp4" type="video/mp4" />
</video>
<div class="mask"></div>
</div>
<!--Caption-->
<div class="carousel-caption">
<div class="flex-center animated fadeInDown">
<ul>
<li>
<h1 class="h1-responsive">Lots of tutorials at your disposal</h1>
</li>
<li>
<p>And all of them are FREE!</p>
</li>
<li>
<a target="_blank" href="https://mdbootstrap.com/bootstrap-tutorial/" class="btn btn-primary btn-lg">Start learning</a>
</li>
</ul>
</div>
</div>
<!--/.Caption-->
</div>
<!--/Second slide-->
<!--Third slide-->
<div class="carousel-item">
<!--Mask color-->
<div class="view hm-black-strong">
<!--Video source-->
<video class="video-full" autoplay loop>
<source src="https://mdbootstrap.com/img/video/Nature-Sunset.mp4" type="video/mp4" />
</video>
<div class="mask"></div>
</div>
<!--Caption-->
<div class="carousel-caption">
<div class="flex-center animated fadeInDown">
<ul>
<li>
<h1 class="h1-responsive">Visit our support forum</h1></li>
<li>
<p>Our community can help you with any question</p>
</li>
<li>
<a target="_blank" href="https://mdbootstrap.com/forums/forum/support/" class="btn btn-default btn-lg">Support forum</a>
</li>
</ul>
</div>
</div>
<!--/.Caption-->
</div>
<!--/Third slide-->
</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-->
<!--/.Main layout-->
<!--Footer-->
<footer class="page-footer center-on-small-only">
<!--Footer Links-->
<div class="container-fluid">
<div class="row">
<!--First column-->
<div class="col-lg-3 offset-lg-1 hidden-lg-down">
<h5 class="title">ABOUT MATERIAL DESIGN</h5>
<p>Material Design (codenamed Quantum Paper) is a design language developed by Google. </p>
<p>Material Design for Bootstrap (MDB) is a powerful Material Design UI KIT for most popular HTML, CSS, and JS framework - Bootstrap.</p>
</div>
<!--/.First column-->
<hr class="hidden-md-up">
<!--Second column-->
<div class="col-lg-2 col-md-4 offset-lg-1">
<h5 class="title">First column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Second column-->
<hr class="hidden-md-up">
<!--Third column-->
<div class="col-lg-2 col-md-4">
<h5 class="title">Second column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Third column-->
<hr class="hidden-md-up">
<!--Fourth column-->
<div class="col-lg-2 col-md-4">
<h5 class="title">Third column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Fourth column-->
</div>
</div>
<!--/.Footer Links-->
<hr>
<!--Call to action-->
<div class="call-to-action">
<h4>Material Design for Bootstrap</h4>
<ul>
<li>
<h5>Get our UI KIT for free</h5></li>
<li><a target="_blank" href="https://mdbootstrap.com/getting-started/" class="btn btn-danger">Sign up!</a></li>
<li><a target="_blank" href="https://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-default">Learn more</a></li>
</ul>
</div>
<!--/.Call to action-->
<!--Copyright-->
<div class="footer-copyright">
<div class="container-fluid">
© 2015 Copyright: <a href="http://www.MDBootstrap.com"> MDBootstrap.com </a>
</div>
</div>
<!--/.Copyright-->
</footer>
<!--/.Footer-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="../../js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="../../js/mdb.min.js"></script>
</body>
</html>

426
html/templates/starters/half-image-carousel.html Normal file
View File

@@ -0,0 +1,426 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="../../css/mdb.min.css" rel="stylesheet">
<!-- Template styles -->
<style rel="stylesheet">
/* TEMPLATE STYLES */
/* Necessary for full page carousel*/
html,
body {
height: 100%;
}
/* Navigation*/
.navbar {
background-color: transparent;
}
.top-nav-collapse {
background-color: #4285F4;
}
footer.page-footer {
background-color: #4285F4;
}
@media only screen and (max-width: 768px) {
.navbar {
background-color: #4285F4;
}
}
/* Carousel*/
.carousel {
height: 50%;
}
@media (max-width: 776px) {
.carousel {
height: 100%;
}
}
.carousel-item,
.active {
height: 100%;
}
.carousel-inner {
height: 100%;
}
.carousel-item:nth-child(1) {
background-image: url("https://mdbootstrap.com/img/Photos/Slides/img%20(4).jpg");
background-repeat: no-repeat;
background-size: cover;
opacity: 0.4;
}
.carousel-item:nth-child(2) {
background-image: url("https://mdbootstrap.com/img/Photos/Slides/img%20(22).jpg");
background-repeat: no-repeat;
background-size: cover;
}
.carousel-item:nth-child(3) {
background-image: url("https://mdbootstrap.com/img/Photos/Slides/img%20(67).jpg");
background-repeat: no-repeat;
background-size: cover;
}
/*Caption*/
.flex-center {
color: #fff;
}
</style>
</head>
<body>
<!--Navbar-->
<nav class="navbar navbar-toggleable-md fixed-top navbar-dark bg-faded scrolling-navbar">
<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 waves-effect waves-light" href="https://mdbootstrap.com/material-design-for-bootstrap/" target="_blank">MDB</a>
<div class="collapse navbar-collapse" id="navbarNav1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">About</a>
</li>
<li class="nav-item">
<a class="nav-link">Features</a>
</li>
<li class="nav-item">
<a class="nav-link">Contact</a>
</li>
</ul>
<form class="form-inline waves-effect waves-light">
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
</div>
</nav>
<!--/.Navbar-->
<!--Carousel Wrapper-->
<div id="carousel-example-2" class="carousel slide carousel-fade no-flex" 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">
<!--First slide-->
<div class="carousel-item active">
<!--Caption-->
<div class="flex-center animated fadeInDown">
<ul>
<li>
<h1 class="h1-responsive">Material Design for Bootstrap 4</h1></li>
<li>
<p>The most powerful and free UI KIT for the newest Bootstrap</p>
</li>
<li>
<a target="_blank" href="https://mdbootstrap.com/getting-started/" class="btn btn-primary btn-lg">Sign up!</a>
<a target="_blank" href="https://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-default btn-lg">Learn more</a>
</li>
</ul>
</div>
<!--Caption-->
</div>
<!--/.First slide-->
<!--Second slide -->
<div class="carousel-item">
<!--Caption-->
<div class="flex-center animated fadeInDown">
<ul>
<li>
<h1 class="h1-responsive">Lots of tutorials at your disposal</h1>
</li>
<li>
<p>And all of them are FREE!</p>
</li>
<li>
<a target="_blank" href="https://mdbootstrap.com/bootstrap-tutorial/" class="btn btn-primary btn-lg">Start learning</a>
</li>
</ul>
</div>
<!--Caption-->
</div>
<!--/.Second slide -->
<!--Third slide-->
<div class="carousel-item">
<!--Caption-->
<div class="flex-center animated fadeInDown">
<ul>
<li>
<h1 class="h1-responsive">Visit our support forum</h1></li>
<li>
<p>Our community can help you with any question</p>
</li>
<li>
<a target="_blank" href="https://mdbootstrap.com/forums/forum/support/" class="btn btn-default btn-lg">Support forum</a>
</li>
</ul>
</div>
<!--Caption-->
</div>
<!--/.Third slide-->
</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-->
<br>
<!--Content-->
<div class="container">
<div class="row">
<!--First columnn-->
<div class="col-lg-4 mb-2">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(2).jpg" class="img-fluid" alt="">
<a href="#">
<div class="mask"></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">Read more</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--First columnn-->
<!--Second columnn-->
<div class="col-lg-4 mb-2">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(4).jpg" class="img-fluid" alt="">
<a href="#">
<div class="mask"></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">Read more</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--Second columnn-->
<!--Third columnn-->
<div class="col-lg-4 mb-2">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(8).jpg" class="img-fluid" alt="">
<a href="#">
<div class="mask"></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">Read more</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--Third columnn-->
</div>
</div>
<!--/.Content-->
<!--Footer-->
<footer class="page-footer center-on-small-only">
<!--Footer Links-->
<div class="container-fluid">
<div class="row">
<!--First column-->
<div class="col-lg-3 offset-lg-1 hidden-lg-down">
<h5 class="title">ABOUT MATERIAL DESIGN</h5>
<p>Material Design (codenamed Quantum Paper) is a design language developed by Google. </p>
<p>Material Design for Bootstrap (MDB) is a powerful Material Design UI KIT for most popular HTML, CSS, and JS framework - Bootstrap.</p>
</div>
<!--/.First column-->
<hr class="hidden-md-up">
<!--Second column-->
<div class="col-lg-2 col-md-4 offset-lg-1">
<h5 class="title">First column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Second column-->
<hr class="hidden-md-up">
<!--Third column-->
<div class="col-lg-2 col-md-4">
<h5 class="title">Second column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Third column-->
<hr class="hidden-md-up">
<!--Fourth column-->
<div class="col-lg-2 col-md-4">
<h5 class="title">Third column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Fourth column-->
</div>
</div>
<!--/.Footer Links-->
<hr>
<!--Call to action-->
<div class="call-to-action">
<h4>Material Design for Bootstrap</h4>
<ul>
<li>
<h5>Get our UI KIT for free</h5></li>
<li><a target="_blank" href="https://mdbootstrap.com/getting-started/" class="btn btn-danger">Sign up!</a></li>
<li><a target="_blank" href="https://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-default">Learn more</a></li>
</ul>
</div>
<!--/.Call to action-->
<!--Copyright-->
<div class="footer-copyright">
<div class="container-fluid">
© 2015 Copyright: <a href="http://www.MDBootstrap.com"> MDBootstrap.com </a>
</div>
</div>
<!--/.Copyright-->
</footer>
<!--/.Footer-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="../../js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="../../js/mdb.min.js"></script>
</body>
</html>

309
html/templates/starters/jumbotron.html Normal file
View File

@@ -0,0 +1,309 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="../../css/mdb.min.css" rel="stylesheet">
<!-- Template styles -->
<style rel="stylesheet">
/* TEMPLATE STYLES */
main {
padding-top: 3rem;
padding-bottom: 2rem;
}
.extra-margins {
margin-top: 1rem;
margin-bottom: 2.5rem;
}
.jumbotron {
text-align: center;
}
</style>
</head>
<body>
<header>
<!--Navbar-->
<nav class="navbar navbar-toggleable-md navbar-dark bg-primary primary-color-dark">
<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="https://mdbootstrap.com/material-design-for-bootstrap/" target="_blank">MDB</a>
<div class="collapse navbar-collapse" id="navbarNav1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">Features</a>
</li>
<li class="nav-item">
<a class="nav-link">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link">About</a>
</li>
</ul>
<form class="form-inline waves-effect waves-light">
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
</div>
</nav>
<!--/.Navbar-->
</header>
<main>
<!--Main layout-->
<div class="container">
<!--First row-->
<div class="row">
<div class="col-md-12">
<div class="jumbotron">
<h2 class="h2-responsive">Material Design for Bootstrap</h2>
<br>
<p>Powerful and free Material Design UI KIT</p>
<hr>
<p>Register for free and get access to amazing framework and beautiful components</p>
<a target="_blank" href="https://mdbootstrap.com/getting-started/" type="button" class="btn btn-primary btn-stc">Download <i class="fa fa-download right"></i></a>
<a target="_blank" href="https://mdbootstrap.com/material-design-for-bootstrap/" type="button" class="btn btn-default btn-ptc">Learn more <i class="fa fa-book right"></i></a>
</div>
</div>
</div>
<!--/.First row-->
<hr class="extra-margins">
<!--Second row-->
<div class="row">
<!--First columnn-->
<div class="col-lg-4">
<!--Card-->
<div class="card mb-2">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(2).jpg" class="img-fluid" alt="">
<a href="#">
<div class="mask"></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">Read more</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--First columnn-->
<!--Second columnn-->
<div class="col-lg-4">
<!--Card-->
<div class="card mb-2">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(8).jpg" class="img-fluid" alt="">
<a href="#">
<div class="mask"></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">Read more</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--Second columnn-->
<!--Third columnn-->
<div class="col-lg-4">
<!--Card-->
<div class="card mb-2">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(3).jpg" class="img-fluid" alt="">
<a href="#">
<div class="mask"></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">Read more</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--Third columnn-->
</div>
<!--/.Second row-->
</div>
<!--/.Main layout-->
</main>
<!--Footer-->
<footer class="page-footer center-on-small-only primary-color-dark">
<!--Footer Links-->
<div class="container-fluid">
<div class="row">
<!--First column-->
<div class="col-lg-3 offset-lg-1 hidden-lg-down">
<h5 class="title">ABOUT MATERIAL DESIGN</h5>
<p>Material Design (codenamed Quantum Paper) is a design language developed by Google. </p>
<p>Material Design for Bootstrap (MDB) is a powerful Material Design UI KIT for most popular HTML, CSS, and JS framework - Bootstrap.</p>
</div>
<!--/.First column-->
<hr class="hidden-md-up">
<!--Second column-->
<div class="col-lg-2 col-md-4 offset-lg-1">
<h5 class="title">First column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Second column-->
<hr class="hidden-md-up">
<!--Third column-->
<div class="col-lg-2 col-md-4">
<h5 class="title">Second column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Third column-->
<hr class="hidden-md-up">
<!--Fourth column-->
<div class="col-lg-2 col-md-4">
<h5 class="title">Third column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Fourth column-->
</div>
</div>
<!--/.Footer Links-->
<hr>
<!--Call to action-->
<div class="call-to-action">
<h4>Material Design for Bootstrap</h4>
<ul>
<li>
<h5>Get our UI KIT for free</h5></li>
<li><a target="_blank" href="https://mdbootstrap.com/getting-started/" class="btn btn-danger">Sign up!</a></li>
<li><a target="_blank" href="https://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-default">Learn more</a></li>
</ul>
</div>
<!--/.Call to action-->
<!--Copyright-->
<div class="footer-copyright">
<div class="container-fluid">
© 2015 Copyright: <a href="http://www.MDBootstrap.com"> MDBootstrap.com </a>
</div>
</div>
<!--/.Copyright-->
</footer>
<!--/.Footer-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="../../js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="../../js/mdb.min.js"></script>
</body>
</html>

372
html/templates/starters/product-page.html Normal file
View File

@@ -0,0 +1,372 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="../../css/mdb.min.css" rel="stylesheet">
<!-- Template styles -->
<style rel="stylesheet">
/* TEMPLATE STYLES */
main {
padding-top: 3rem;
padding-bottom: 2rem;
}
.widget-wrapper {
padding-bottom: 2rem;
border-bottom: 1px solid #e0e0e0;
margin-bottom: 2rem;
}
.reviews {
width: 100%;
text-align: center;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
padding: 1rem;
margin-top: 1rem;
margin-bottom: 2rem;
}
.price {
position: absolute;
left: 0;
top: 0;
margin-top: -2px;
}
.price .tag {
margin: 0;
}
</style>
</head>
<body>
<header>
<!--Navbar-->
<nav class="navbar navbar-toggleable-md navbar-dark bg-primary primary-color-dark">
<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 waves-effect waves-light" href="https://mdbootstrap.com/material-design-for-bootstrap/" target="_blank">MDB</a>
<div class="collapse navbar-collapse" id="navbarNav1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link">Features</a>
</li>
<li class="nav-item">
<a class="nav-link">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link">About</a>
</li>
</ul>
<form class="form-inline waves-effect waves-light">
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
</div>
</nav>
<!--/.Navbar-->
</header>
<main>
<!--Main layout-->
<div class="container">
<div class="row">
<!--Sidebar-->
<div class="col-lg-4">
<div class="widget-wrapper">
<h4>Categories:</h4>
<br>
<div class="list-group">
<a href="#" class="list-group-item active">Woman</a>
<a href="#" class="list-group-item">Man</a>
<a href="#" class="list-group-item">Shoes</a>
<a href="#" class="list-group-item">T-shirt</a>
<a href="#" class="list-group-item">Jewellery</a>
</div>
</div>
<div class="widget-wrapper">
<h4>Subscription form:</h4>
<br>
<div class="card">
<div class="card-block">
<p><strong>Subscribe to our newsletter</strong></p>
<p>Once a week we will send you a summary of the most useful news</p>
<div class="md-form">
<i class="fa fa-user prefix"></i>
<input type="text" id="form1" class="form-control">
<label for="form1">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>
<button class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
<!--/.Sidebar-->
<!--Main column-->
<div class="col-lg-8">
<!--First row-->
<div class="row">
<div class="col-md-12">
<!--Product-->
<div class="product-wrapper">
<!--Featured image-->
<div class="view overlay hm-white-light z-depth-1-half">
<img src="https://mdbootstrap.com/images/ecommerce/slides/slide%20(3).jpg" class="img-fluid " alt="">
<div class="mask">
</div>
<h3 class="price"><span class="badge rgba-green-strong">10 $</span></h3>
</div>
<!--/.Featured image-->
<br>
<!--Product data-->
<h2 class="h2-responsive">Product title</h2>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius totam, officiis doloremque velit nobis dolor nulla unde architecto alias praesentium, soluta error omnis sint, impedit, delectus ipsam eveniet debitis nemo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius totam, officiis doloremque velit nobis dolor nulla unde architecto alias praesentium, soluta error omnis sint, impedit, delectus ipsam eveniet debitis nemo.</p>
<ul class="rating inline-ul">
<li><i class="fa fa-star amber-text"></i></li>
<li><i class="fa fa-star amber-text"></i></li>
<li><i class="fa fa-star amber-text"></i></li>
<li><i class="fa fa-star amber-text"></i></li>
<li><i class="fa fa-star"></i></li>
</ul>
</div>
<!--Product-->
</div>
</div>
<!--/.First row-->
<!--Second row-->
<div class="row">
<!--Heading-->
<div class="reviews mx-auto">
<h2 class="h2-responsive">Reviews</h2>
</div>
<!--First review-->
<div class="media">
<a class="media-left" href="#">
<img class="rounded-circle" src="https://mdbootstrap.com/wp-content/uploads/2015/10/team-avatar-1.jpg" alt="Generic placeholder image">
</a>
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<ul class="rating inline-ul">
<li><i class="fa fa-star amber-text"></i></li>
<li><i class="fa fa-star amber-text"></i></li>
<li><i class="fa fa-star amber-text"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi cupiditate temporibus iure soluta. Quasi mollitia maxime nemo quam accusamus possimus, voluptatum expedita assumenda. Earum sit id ullam eum vel delectus!</p>
</div>
</div>
<!--Second review-->
<div class="media">
<a class="media-left" href="#">
<img class="rounded-circle" src="https://mdbootstrap.com/wp-content/uploads/2015/10/team-avatar-2.jpg" alt="Generic placeholder image">
</a>
<div class="media-body">
<h4 class="media-heading">Nathan Casie</h4>
<ul class="rating inline-ul">
<li><i class="fa fa-star amber-text"></i></li>
<li><i class="fa fa-star amber-text"></i></li>
<li><i class="fa fa-star amber-text"></i></li>
<li><i class="fa fa-star amber-text"></i></li>
<li><i class="fa fa-star amber-text"></i></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi cupiditate temporibus iure soluta. Quasi mollitia maxime nemo quam accusamus possimus, voluptatum expedita assumenda. Earum sit id ullam eum vel delectus!</p>
</div>
</div>
<!--Second review-->
<div class="media">
<a class="media-left" href="#">
<img class="rounded-circle" src="https://mdbootstrap.com/wp-content/uploads/2015/10/team-avatar-3.jpg" alt="Generic placeholder image">
</a>
<div class="media-body">
<h4 class="media-heading">Dave Snow</h4>
<ul class="rating inline-ul">
<li><i class="fa fa-star amber-text"></i></li>
<li><i class="fa fa-star amber-text"></i></li>
<li><i class="fa fa-star amber-text"></i></li>
<li><i class="fa fa-star amber-text"></i></li>
<li><i class="fa fa-star"></i></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi cupiditate temporibus iure soluta. Quasi mollitia maxime nemo quam accusamus possimus, voluptatum expedita assumenda. Earum sit id ullam eum vel delectus!</p>
</div>
</div>
</div>
<!--/.Second row-->
</div>
<!--/.Main column-->
</div>
</div>
<!--/.Main layout-->
</main>
<!--Footer-->
<footer class="page-footer center-on-small-only primary-color-dark">
<!--Footer Links-->
<div class="container-fluid">
<div class="row">
<!--First column-->
<div class="col-md-3 offset-lg-1 hidden-lg-down">
<h5 class="title">ABOUT MATERIAL DESIGN</h5>
<p>Material Design (codenamed Quantum Paper) is a design language developed by Google. </p>
<p>Material Design for Bootstrap (MDB) is a powerful Material Design UI KIT for most popular HTML, CSS, and JS framework - Bootstrap.</p>
</div>
<!--/.First column-->
<hr class="hidden-md-up">
<!--Second column-->
<div class="col-lg-2 col-md-4 offset-lg-1">
<h5 class="title">First column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Second column-->
<hr class="hidden-md-up">
<!--Third column-->
<div class="col-lg-2 col-md-4">
<h5 class="title">Second column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Third column-->
<hr class="hidden-md-up">
<!--Fourth column-->
<div class="col-lg-2 col-md-4">
<h5 class="title">Third column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Fourth column-->
</div>
</div>
<!--/.Footer Links-->
<hr>
<!--Call to action-->
<div class="call-to-action">
<h4>Material Design for Bootstrap</h4>
<ul>
<li>
<h5>Get our UI KIT for free</h5></li>
<li><a target="_blank" href="https://mdbootstrap.com/getting-started/" class="btn btn-danger">Sign up!</a></li>
<li><a target="_blank" href="https://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-default">Learn more</a></li>
</ul>
</div>
<!--/.Call to action-->
<!--Copyright-->
<div class="footer-copyright">
<div class="container-fluid">
© 2015 Copyright: <a href="http://www.MDBootstrap.com"> MDBootstrap.com </a>
</div>
</div>
<!--/.Copyright-->
</footer>
<!--/.Footer-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="../../js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="../../js/mdb.min.js"></script>
</body>
</html>