bootstrap-v4.0_demo
/
frontend2.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- Meta tags -->
		<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">
		<meta name="description" content="">
		<meta name="author" content="">

		<!-- Title -->
		<title>Neptune</title>

		<!-- Vendor CSS -->
		<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="vendor/themify-icons/themify-icons.css">
		<link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="vendor/animate.css/animate.min.css">
		<link rel="stylesheet" href="vendor/waves/waves.min.css">
		<link rel="stylesheet" href="vendor/ionicons/css/ionicons.min.css">
		<link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">

		<!-- Neptune CSS -->
		<link rel="stylesheet" href="css/core.css">

		<!-- HTML5 Shiv and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
		<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
		<![endif]-->
	</head>
	<body>

		<div class="frontend-wrapper frontend-max-width bg-white">

			<div class="block-5 img-cover img-fixed" style="background-image: url(img/photos-1/10.jpg);">
				<div class="container-fluid">
					<div class="b-content">
						<div class="clearfix">
							<div class="b-logo pull-xs-left"><a class="text-white" href="#">Logo</a></div>
							<button type="submit" class="btn btn-outline-white btn-rounded pull-xs-right">Sign Up</button>
						</div>
						<div class="row">
							<div class="col-md-6 animate" data-gen="fadeInRight" data-gen-offset="90%">
								<div class="b-title">Lorem ipsum dolor</div>
								<div class="b-text">Sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="block-6">
				<div class="container-fluid">
					<div class="row">
						<div class="col-md-3 col-sm-6">
							<div class="b-item animate" data-gen="fadeInBottom" data-gen-offset="90%">
								<div class="bi-icon"><i class="ti-vector"></i></div>
								<div class="bi-title">Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus.</div>
							</div>
						</div>
						<div class="col-md-3 col-sm-6">
							<div class="b-item animate" data-gen="fadeInBottom" data-gen-offset="90%">
								<div class="bi-icon"><i class="ti-mouse-alt"></i></div>
								<div class="bi-title">Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus.</div>
							</div>
						</div>
						<div class="col-md-3 col-sm-6">
							<div class="b-item animate" data-gen="fadeInBottom" data-gen-offset="90%">
								<div class="bi-icon"><i class="ti-music-alt"></i></div>
								<div class="bi-title">Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus.</div>
							</div>
						</div>
						<div class="col-md-3 col-sm-6">
							<div class="b-item animate" data-gen="fadeInBottom" data-gen-offset="90%">
								<div class="bi-icon"><i class="ti-brush-alt"></i></div>
								<div class="bi-title">Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus.</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="block-7">
				<div class="row no-gutter">
					<div class="col-lg-6">
						<a class="b-item d-block" href="#">
							<div class="bi-content">
								<span>
									<h6>Lorem ipsum</h6>
									<h4>Dolor sit amet, consectetur</h4>
									<div class="separator"></div>
									<p>Sed diam sem, imperdiet at mollis vestibulum.</p>
									<button class="btn btn-outline-white btn-rounded">Read More</button>
								</span>
							</div>
							<img src="img/photos-1/4.jpg" class="img-fluid">
						</a>
					</div>
					<div class="col-lg-6">
						<a class="b-item d-block" href="#">
							<div class="bi-content">
								<span>
									<h6>Lorem ipsum</h6>
									<h4>Dolor sit amet, consectetur</h4>
									<div class="separator"></div>
									<p>Sed diam sem, imperdiet at mollis vestibulum.</p>
									<button class="btn btn-outline-white btn-rounded">Read More</button>
								</span>
							</div>
							<img src="img/photos-1/6.jpg" class="img-fluid">
						</a>
					</div>
				</div>
			</div>

			<div class="block-8">
				<div class="container-fluid">
					<div class="row">
						<div class="col-md-4 m-md-t-3 animate" data-gen="fadeInLeft" data-gen-offset="90%">
							<h4>Dolor sit amet, consectetur adipiscing elit.</h4>
							<div class="separator"></div>
							<p>Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus. Aliquam molestie, leo sed molestie condimentum, massa enim lobortis massa, in vulputate diam lorem quis justo.</p>
							<p>Nullam nec dignissim mi. In non varius nibh.</p>
						</div>
						<div class="col-md-6 offset-md-2 animate" data-gen="fadeInRight" data-gen-offset="90%">
							<div class="row">
								<div class="col-md-4">
									<div class="b-img">
										<img src="img/avatars/1.jpg" class="img-fluid">
										<div class="bi-title">John Doe</div>
									</div>
								</div>
								<div class="col-md-4">
									<div class="b-img">
										<img src="img/avatars/2.jpg" class="img-fluid">
										<div class="bi-title">John Doe</div>
									</div>
								</div>
								<div class="col-md-4">
									<div class="b-img">
										<img src="img/avatars/3.jpg" class="img-fluid">
										<div class="bi-title">John Doe</div>
									</div>
								</div>
								<div class="col-md-4">
									<div class="b-img">
										<img src="img/avatars/4.jpg" class="img-fluid">
										<div class="bi-title">John Doe</div>
									</div>
								</div>
								<div class="col-md-4">
									<div class="b-img">
										<img src="img/avatars/5.jpg" class="img-fluid">
										<div class="bi-title">John Doe</div>
									</div>
								</div>
								<div class="col-md-4">
									<div class="b-img">
										<img src="img/avatars/6.jpg" class="img-fluid">
										<div class="bi-title">John Doe</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="block-9 img-cover img-fixed" style="background-image: url(img/photos-1/3.jpg);">
				<div class="container-fluid">
					<div class="row">
						<div class="col-md-4 animate" data-gen="fadeInUp" data-gen-offset="90%">
							<div class="b-number">+250</div>
							<div class="b-title">Dolor sit amet</div>
							<div class="b-text">Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus.</div>
						</div>
						<div class="col-md-4 animate" data-gen="fadeInBottom" data-gen-offset="90%">
							<div class="b-number">7,175</div>
							<div class="b-title">Dolor sit amet</div>
							<div class="b-text">Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus.</div>
						</div>
						<div class="col-md-4 animate" data-gen="fadeInUp" data-gen-offset="90%">
							<div class="b-number">9.5m.</div>
							<div class="b-title">Dolor sit amet</div>
							<div class="b-text">Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus.</div>
						</div>
					</div>
				</div>
			</div>

			<footer class="p-y-3">
				<div class="container-fluid">
					<div class="box-block b-b">
						<div class="row">
							<div class="col-sm-4">
								<div class="f-menu">
									<div class="f-title">Menu</div>
									<div class="row">
										<div class="col-xs-6">
											<ul class="list-unstyled">
												<li><a href="#">First</a></li>
												<li><a href="#">Second</a></li>
												<li><a href="#">Sales</a></li>
												<li><a href="#">News</a></li>
												<li><a href="#">Brands</a></li>
											</ul>
										</div>
										<div class="col-xs-6">
											<ul class="list-unstyled">
												<li><a href="#">Company</a></li>
												<li><a href="#">Blog</a></li>
												<li><a href="#">Support</a></li>
												<li><a href="#">Categories</a></li>
												<li><a href="#">License</a></li>
											</ul>
										</div>
									</div>
								</div>
							</div>
							<div class="col-sm-4">
								<div class="f-title">Contacts</div>
								<address>
									<strong>Neptune, Inc.</strong><br>
									1796 First Street, Suite 350<br>
									San Francisco, CA 69807<br>
									<abbr title="Phone">P:</abbr> (123) 456-7890
								</address>
								<address>
									<strong>Support</strong><br>
									<a class="text-primary" href="mailto:#"><span class="underline">tech@example.com</span></a>
								</address>
							</div>
							<div class="col-sm-4">
								<div class="f-title">Newsletter</div>
								<div class="f-form m-b-1">
									<form class="form-inline">
										<div class="form-group l-h-1-5 m-a-0">
											<div class="input-group">
												<input type="text" class="form-control b-a" placeholder="Enter your email">
												<span class="input-group-btn">
													<button type="submit" class="btn btn-secondary b-a">
														Subscribe
													</button>
												</span>
											</div>
										</div>
									</form>
								</div>
								<button type="button" class="btn bg-facebook btn-sm btn-circle m-r-0-5">
									<i class="fa fa-facebook"></i>
								</button>
								<button type="button" class="btn bg-twitter btn-sm btn-circle m-r-0-5">
									<i class="fa fa-twitter"></i>
								</button>
								<button type="button" class="btn bg-instagram btn-sm btn-circle">
									<i class="fa fa-instagram"></i>
								</button>
							</div>
						</div>
					</div>
				</div>
				<div class="box-block text-xs-center">
					&copy; 2016 Neptune, All Rights Reserved
				</div>
			</footer>

		</div>

		<!-- Vendor JS -->
		<script type="text/javascript" src="vendor/jquery/jquery-1.12.3.min.js"></script>
		<script type="text/javascript" src="vendor/tether/js/tether.min.js"></script>
		<script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="vendor/detectmobilebrowser/detectmobilebrowser.js"></script>
		<script type="text/javascript" src="vendor/waves/waves.min.js"></script>
		<script type="text/javascript" src="vendor/waypoints/lib/jquery.waypoints.min.js"></script>
		<script type="text/javascript" src="vendor/owl.carousel/owl.carousel.min.js"></script>
		<script src="http://maps.google.com/maps/api/js?key=AIzaSyBvUrUti-n6JiOxxR0rGFAaCKVIiGimqx0"></script>
		<script type="text/javascript" src="vendor/gmaps/gmaps.min.js"></script>

		<!-- Neptune JS -->
		<script type="text/javascript" src="js/frontend2.js"></script>
	</body>
</html>