mdbootstrap4-pro
Version:
MDBootstrap 4 PRO
361 lines (290 loc) • 14.2 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Custom styles -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!--Main Navigation-->
<header>
<nav class="navbar navbar-expand-lg navbar-dark indigo fixed-top">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!--New links-->
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</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="#contact">Contact</a>
</li>
</ul>
<!--New links-->
</div>
</div>
</nav>
<!--Mask-->
<div class="view hm-black-strong">
<div class="full-bg-img flex-center">
<ul>
<li>
<h1 class="h1-responsive wow fadeInDown">New York Advertising Agency</h1>
</li>
<li>
<p class=" wow fadeInDown" data-wow-delay="0.2s">Digital advertising agency focused on today's consumers</p>
</li>
<li>
<a href="" class="btn btn-primary btn-lg wow fadeInLeft" data-wow-delay="0.4s">Sign up!</a>
<a href="" class="btn btn-default btn-lg wow fadeInRight" data-wow-delay="0.4s">Learn more</a>
</li>
</ul>
</div>
</div>
<!--/.Mask-->
</header>
<!--Main Navigation-->
<!--Main layout-->
<main class="text-center">
<div class="container">
<h2 class="h2-responsive my-5 wow fadeInDown">About us</h2>
<!--Section: About-->
<section id="about" class="text-center wow fadeInDown">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed eaque ipsum totam quisquam eum tenetur perferendis
rem incidunt sapiente perspiciatis tempora, aliquam, eius autem nisi quas, cumque distinctio saepe ab.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed eaque ipsum totam quisquam eum tenetur perferendis
rem incidunt sapiente perspiciatis tempora, aliquam, eius autem nisi quas, cumque distinctio saepe ab.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed eaque ipsum totam quisquam eum tenetur
perferendis rem incidunt sapiente perspiciatis tempora, aliquam, eius autem nisi quas, cumque distinctio
saepe ab.</p>
</section>
<!--Section: About-->
<h2 class="h2-responsive my-5">Best features</h2>
<!--Section: Best features-->
<section id="best-features">
<div class="row wow fadeInDown">
<!--First columnn-->
<div class="col-md-3">
<!--Card-->
<div class="card hoverable">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/images/regular/city/img%20(2).jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">Card title</h4>
<hr>
<!--Text-->
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident fuga animi architecto
dolores dicta cum quo velit.</p>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--First columnn-->
<!--Second columnn-->
<div class="col-md-3">
<!--Card-->
<div class="card hoverable">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/images/regular/city/img%20(3).jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">Card title</h4>
<hr>
<!--Text-->
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident fuga animi architecto
dolores dicta cum quo velit.</p>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--Second columnn-->
<!--Third columnn-->
<div class="col-md-3">
<!--Card-->
<div class="card hoverable">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/images/regular/city/img%20(4).jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">Card title</h4>
<hr>
<!--Text-->
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident fuga animi architecto
dolores dicta cum quo velit.</p>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--Third columnn-->
<!--Fourth columnn-->
<div class="col-md-3">
<!--Card-->
<div class="card hoverable">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/images/regular/city/img%20(5).jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">Card title</h4>
<hr>
<!--Text-->
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident fuga animi architecto
dolores dicta cum quo velit.</p>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--Fourth columnn-->
</div>
</section>
<!--/Section: Best features-->
<h2 class="h2-responsive my-5">Contact us</h2>
<!--Section: Contact-->
<section id="contact">
<div class="row wow fadeInDown">
<!--First column-->
<div class="col-md-8">
<!--Map container-->
<div id="map-container" class="z-depth-1" style="height: 300px"></div>
</div>
<!--/First column-->
<!--Second column-->
<div class="col-md-4">
<ul class="list-unstyled">
<li class="mb-4"><i class="fa fa-2x mb-3 fa-map-marker"></i>
<p>New York, NY 10012, USA</p>
</li>
<li class="mb-4"><i class="fa fa-2x mb-3 fa-phone"></i>
<p>+ 01 234 567 89</p>
</li>
<li class="mb-4"><i class="fa fa-2x mb-3 fa-envelope"></i>
<p>contact@mdbootstrap.com</p>
</li>
</ul>
</div>
<!--/Second column-->
</div>
</section>
<!--Section: Contact-->
</div>
</main>
<!--Main layout-->
<!--Footer-->
<footer class="page-footer indigo center-on-small-only">
<!--Footer Links-->
<div class="container">
<div class="row wow fadeInDown">
<!--First column-->
<div class="col-md-6">
<h5 class="title">Footer Content</h5>
<p>Here you can use rows and columns here to organize your footer content.</p>
</div>
<!--/.First column-->
<!--Second column-->
<div class="col-md-6">
<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-->
</div>
</div>
<!--/.Footer Links-->
<!--Copyright-->
<div class="footer-copyright">
<div class="container-fluid">
© 2015 Copyright: <a href="https://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>
<!-- Popper -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!--Google Maps-->
<script src="https://maps.google.com/maps/api/js"></script>
<!--Google Maps Settings-->
<script>
function init_map() {
var var_location = new google.maps.LatLng(40.725118, -73.997699);
var var_mapoptions = {
center: var_location,
zoom: 14
};
var var_marker = new google.maps.Marker({
position: var_location,
map: var_map,
title: "New York"
});
var var_map = new google.maps.Map(document.getElementById("map-container"),
var_mapoptions);
var_marker.setMap(var_map);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
<!--Animations' initialization-->
<script>
new WOW().init();
</script>
</body>
</html>