Archive: Namaste PHP AMQP framework v1.0 (2017-2020)
952 days continuous production uptime, 40k+ tp/s single node. Original corpo Bitbucket history not included — clean archive commit.
This commit is contained in:
1213
html/templates/advanced/Landing Pages/app.html
Normal file
1213
html/templates/advanced/Landing Pages/app.html
Normal file
File diff suppressed because it is too large
Load Diff
906
html/templates/advanced/Landing Pages/cta-buttons.html
Normal file
906
html/templates/advanced/Landing Pages/cta-buttons.html
Normal 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
851
html/templates/advanced/Landing Pages/form-contact.html
Normal 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
1106
html/templates/advanced/Landing Pages/form-minimalist.html
Normal file
File diff suppressed because it is too large
Load Diff
890
html/templates/advanced/Landing Pages/register-classic.html
Normal file
890
html/templates/advanced/Landing Pages/register-classic.html
Normal 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
925
html/templates/advanced/Landing Pages/register-social.html
Normal 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
1056
html/templates/advanced/Landing Pages/video.html
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user