gramps
373ebc8c93
952 days continuous production uptime, 40k+ tp/s single node. Original corpo Bitbucket history not included — clean archive commit.
906 lines
39 KiB
HTML
906 lines
39 KiB
HTML
<!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> |