index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Complete Website Layout</title>
		<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
	<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
	<link href="style.css" rel="stylesheet">
</head>
<body>

<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
	<div class="container-fluid">
		<a class="navbar-brand" href="#"><img src="img/logo6.jpg"></a>
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarResponsive">
			<ul class="navbar-nav ml-auto">
				<li class="nav-item active">
					<a class="nav-link" href="#">Home</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">About</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">Services</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">Team</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">Connect</a>
				</li>
			</ul>
		</div>
	</div>
</nav>

<!--- Image Slider -->
<div id="slides" class="carousel slide" data-ride="carousel" data-aos="fade-up"
		data-aos-offset="200"
		data-aos-delay="50"
		data-aos-duration="1000">
	<ul class="carousel-indicators">
		<li data-target="#slides" data-slide-to="0" class="active"></li>
		<li data-target="#slides" data-slide-to="1"></li>
		<li data-target="#slides" data-slide-to="2"></li>
	</ul>
	<div class="carousel-inner">
		<div class="carousel-item active">
			<img class="image" src="img/background.png">
			<div class="carousel-caption">
				<h1 class="display-2">Website</h1>
				<h3>Complete Website Layout</h3>
				<button type="button" class="btn btn-outline-light btn-lg">VIEW
				DEMO</button>
				<button type="button" class="btn btn-primary btn-lg">Get Started</button>
			</div>
		</div>
		<div class="carousel-item">
			<img class="image" src="img/background2.png">
		</div>
		<div class="carousel-item">
			<img class="image" src="img/background3.png">
		</div>
	</div>
</div>

<!--- Jumbotron -->
<div class="container-fluid" data-aos="fade-up"
		data-aos-offset="200"
		data-aos-delay="50"
		data-aos-duration="1000">
	<div class="row jumbotron">
		<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10">
			<p class="lead">A web hosting service allows individuals and
				organizations to make their website accessible via the World
				Wide Web.</p>
		</div>
		<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-2">
			<a href="#"><button type="button" class="btn btn-outline-secondary
			btn-lg">Web Hosting</button></a>
		</div>
	</div>
</div>

<!--- Welcome Section -->
<div class="container-fluid padding"data-aos="fade-up"
		data-aos-offset="200"
		data-aos-delay="50"
		data-aos-duration="1000">
	<div class="row welcome text-center">
		<div class="col-12">
			<h1 class="display-4">Built with ease.</h1>
		</div>
		<hr>
		<div class="col-12">
			<p class="lead">Welcome to my website tutorial!
				Bootstrap is a free and open-source front-end library with HTML and
				CSS based designs.</p>
		</div>
	</div>
</div>

<!--- Three Column Section -->
<div class="container-fluid padding"data-aos="fade-up"
		data-aos-offset="200"
		data-aos-delay="50"
		data-aos-duration="1000">
	<div class="row text-center padding">
		<div class="col-xs-12 col-sm-6 col-md-4">
			<i class="fas fa-code"></i>
			<h3>HTML5</h3>
			<p>Built with the latest version of HTML, HTML5.</p>
		</div>
		<div class="col-xs-12 col-sm-6 col-md-4">
			<i class="fas fa-bold"></i>
			<h3>BOOTSTRAP</h3>
			<p>Built with the latest version of Bootstrap, Bootstrap 4.</p>
		</div>
		<div class="col-xs-12 col-md-4">
			<i class="fab fa-css3"></i>
			<h3>CSS3</h3>
			<p>Built with the latest version of CSS, CSS3.</p>
		</div>
	</div>
	<hr class="my-4">
</div>

<!--- Two Column Section -->
<div class="container-fluid padding"data-aos="fade-up"
		data-aos-offset="200"
		data-aos-delay="50"
		data-aos-duration="1000">
	<div class="row padding">
		<div class="col-md-12 col-lg-6">
			<h2>If you build it...</h2>
			<p>The columns will automatically stack on each other when
				the screen is less than 576px wide.</p>
			<p>Resize the browserwindow to see the effect. Responsive web
				design has become more important as the amount of mobile traffic now
				accounts for more than half of total internet traffic.</p>
			<p>It can also display the web page differently depending on the
				screen size or viewing device.</p>
				<br>
				<a href="#" class="btn btn-primary">Learn More</a>
		</div>
		<div class="col-lg-6">
			<img src="img/desk.png" class="img-fluid">
		</div>
	</div>
</div>

<hr class="my-4">


<!--- Meet the team -->
<div class="container-fluid padding">
	<div class="row welcome text-center">
		<div class="col-12">
			<h1 class="display-4">Meet the Team </h1>
		</div>
	</div>
</div>

<!--- Cards -->
<div class="container-fluid padding" data-aos="fade-up"
		data-aos-offset="200"
		data-aos-delay="50"
		data-aos-duration="1000">
	<div class="row padding">
		<div class="col-md-4">
			<div class="card">
				<img class="card-img-top" src="img/team1.png">
				<div class="card-body">
					<h4 class="card-title">John Doe</h4>
					<p class="card-text">John is an Interent
						entrepreneur with almost 20 years of experience.
					</p>
					<a href="#" class="btn btn-outline-secondary">See Profile</a>
				</div>
			</div>
		</div>
		<div class="col-md-4">
			<div class="card">
				<img class="card-img-top" src="img/team2.png">
				<div class="card-body">
					<h4 class="card-title">Mary Jo</h4>
					<p class="card-text">Mary is a designer with a almost 10 years
					of digital design experience.</p>
					<a href="#" class="btn btn-outline-secondary">See Profile</a>
				</div>
			</div>
		</div>
		<div class="col-md-4">
			<div class="card">
				<img class="card-img-top" src="img/team3.png">
				<div class="card-body">
					<h4 class="card-title">Phil Ho</h4>
					<p class="card-text">Phil is an developer with over 5 years
					of web development experience.</p>
					<a href="#" class="btn btn-outline-secondary">See Profile</a>
				</div>
			</div>
		</div>
	</div>
</div>

<!--- Two Column Section -->
<div class="container-fluid padding" data-aos="fade-up"
		data-aos-offset="200"
		data-aos-delay="50"
		data-aos-duration="1000">
	<div class="row padding">
		<div class="col-md-12 col-lg-6">
			<h2>Our Philosophy</h2>
			<p>We know that greatness in a disruptive era requires bold
				ambition, curious talent and a culture that believes we're
			    smarter together.</p>
			<p>We approach every challenge hostically, with best-in-class
				expertise in data, creativity, media, technology, search, social and
				more. We call this Alchemy. It has the power to build our clients'
				brands and transform their business. And white it may seem like
				magic, we've got it down to a science.
			</p>

		</div>
		<div class="col-lg-6">
			<img src="img/bootstrap2.png" class="img-fluid">
		</div>
	</div>
	<hr class="my-4">
</div>

<!--- Connect -->
<div class="container-fluid padding">
	<div class="row text-center padding">
		<div class="col-12">
			<h2>Connect</h2>
		</div>
		<div class="col-12 social padding">
			<a href="#"><i class="fab fa-facebook"></i></a>
			<a href="#"><i class="fab fa-twitter"></i></a>
			<a href="#"><i class="fab fa-google-plus-g"></i></a>
			<a href="#"><i class="fab fa-instagram"></i></a>
			<a href="#"><i class="fab fa-youtube"></i></a>
		</div>
	</div>
</div>

<!--- Footer -->
<footer>
	<div class="container-fluid padding" data-aos="fade-up"
		data-aos-offset="200"
		data-aos-delay="50"
		data-aos-duration="1000">
		<div class="row text-center">
			<div class="col-md-4 pt-0">
				<div class="footer-image">
				<img src="img/logo6.jpg"></div>
				<hr class="light">
				<p>555-555-5555</p>
				<p>email@hhemail.com</p>
				<p>69 Street Name</p>
				<p>City, State, 888</p>
			</div>
			<div class="col-md-4">
				<hr class="light">
				<h5>Our hours</h5>
				<hr class="light">
				<p>Monday: 9am - 5pm</p>
				<p>Saturday: 10am - 4pm</p>
				<p>Sunday: Closed</p>
			</div>
			<div class="col-md-4">
				<hr class="light">
				<h5>Service Area</h5>
				<hr class="light">
				<p>City, State, 900</p>
				<p>City, State, 800</p>
				<p>City, State, 700</p>
				<p>City, State, 600</p>
			</div>
			<div class="col-12">
				<hr class="light-100">
				<h5>&copy; Website Learning </h5>
			</div>
		</div>
	</div>
</footer>

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>

</body>
</html>