mdbootstrap4-pro
Version:
MDBootstrap 4 PRO
326 lines (262 loc) • 13.1 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">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown
</a>
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
</form>
</div>
</nav>
<!--Mask-->
<div class="view hm-black-strong">
<div class="full-bg-img flex-center">
<ul>
<li>
<h1 class="h1-responsive">New York Advertising Agency</h1>
</li>
<li>
<p>Digital advertising agency focused on today's consumers</p>
</li>
<li>
<a href="" class="btn btn-primary btn-lg">Sign up!</a>
<a href="" class="btn btn-default btn-lg">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">About us</h2>
<!--Section: About-->
<section id="about" class="text-center">
<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">
<!--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">
<!--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>
</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>
</body>
</html>