From 1684387a97fa081cc0329c9fa3ce0ea88a4ab0a3 Mon Sep 17 00:00:00 2001
From: Yigit S <55548182+yigitsr@users.noreply.github.com>
Date: Mon, 31 Jan 2022 23:52:30 +0300
Subject: [PATCH] Add files via upload

Added data-aos-once="true" so animations on scroll happen only once
---
 index.html | 473 ++++++++++++++++++++++++++---------------------------
 1 file changed, 230 insertions(+), 243 deletions(-)
diff --git a/index.html b/index.html
index 3987f89..8c6c963 100644
--- a/index.html
+++ b/index.html
@@ -1,10 +1,11 @@
 <!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://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>
@@ -13,294 +14,280 @@
 	<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>
+	<!-- 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>
-	</div>
-</nav>
+	</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>
+	<!--- 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" data-aos-once="true">
+		<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 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
+	<!--- Jumbotron -->
+	<div class="container-fluid" data-aos="fade-up" data-aos-offset="200" data-aos-delay="50" data-aos-duration="1000"
+		data-aos-once="true">
+		<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>
-</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>
+	<!--- Welcome Section -->
+	<div class="container-fluid padding" data-aos="fade-up" data-aos-offset="200" data-aos-delay="50"
+		data-aos-duration="1000" data-aos-once="true">
+		<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>
-</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>
+	<!--- Three Column Section -->
+	<div class="container-fluid padding" data-aos="fade-up" data-aos-offset="200" data-aos-delay="50"
+		data-aos-duration="1000" data-aos-once="true">
+		<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>
-	<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>
+	<!--- Two Column Section -->
+	<div class="container-fluid padding" data-aos="fade-up" data-aos-offset="200" data-aos-delay="50"
+		data-aos-duration="1000" data-aos-once="true">
+		<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 class="col-lg-6">
+				<img src="img/desk.png" class="img-fluid">
+			</div>
 		</div>
 	</div>
-</div>
 
-<hr class="my-4">
+	<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>
+	<!--- 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>
-</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>
+	<!--- Cards -->
+	<div class="container-fluid padding" data-aos="fade-up" data-aos-offset="200" data-aos-delay="50"
+		data-aos-duration="1000" data-aos-once="true">
+		<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>
-		<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 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>
-		<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 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>
-</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>
+	<!--- Two Column Section -->
+	<div class="container-fluid padding" data-aos="fade-up" data-aos-offset="200" data-aos-delay="50"
+		data-aos-duration="1000" data-aos-once="true">
+		<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>
-		<div class="col-lg-6">
-			<img src="img/bootstrap2.png" class="img-fluid">
-		</div>
+		<hr class="my-4">
 	</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>
+	<!--- 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>
-</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>
+	<!--- Footer -->
+	<footer>
+		<div class="container-fluid padding" data-aos="fade-up" data-aos-offset="200" data-aos-delay="50"
+			data-aos-duration="1000" data-aos-once="true">
+			<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>
-	</div>
-</footer>
+	</footer>
 
-<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
-<script>
-AOS.init();
-</script>
+	<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
+	<script>
+		AOS.init();
+	</script>
 
 </body>
-</html>
+
+</html>
\ No newline at end of file
