Skip to content

Commit 5d24707

Browse files
arvind37arvind37
authored
Merge pull request #1 from codekarsatvik/master
added scroll in up animations
2 parents 23f1e5a + 1f17449 commit 5d24707

File tree

1 file changed

+48
-19
lines changed

1 file changed

+48
-19
lines changed

‎index.html

+48-19
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,13 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<title>Complete Website Layout</title>
7+
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
78
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
89
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
910
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
1011
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
1112
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
13+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
1214
<link href="style.css" rel="stylesheet">
1315
</head>
1416
<body>
@@ -43,7 +45,10 @@
4345
</nav>
4446

4547
<!--- Image Slider -->
46-
<div id="slides" class="carousel slide" data-ride="carousel">
48+
<div id="slides" class="carousel slide" data-ride="carousel" data-aos="fade-up"
49+
data-aos-offset="200"
50+
data-aos-delay="50"
51+
data-aos-duration="1000">
4752
<ul class="carousel-indicators">
4853
<li data-target="#slides" data-slide-to="0" class="active"></li>
4954
<li data-target="#slides" data-slide-to="1"></li>
@@ -70,11 +75,14 @@ <h3>Complete Website Layout</h3>
7075
</div>
7176

7277
<!--- Jumbotron -->
73-
<div class="container-fluid">
78+
<div class="container-fluid" data-aos="fade-up"
79+
data-aos-offset="200"
80+
data-aos-delay="50"
81+
data-aos-duration="1000">
7482
<div class="row jumbotron">
7583
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10">
76-
<p class="lead">A web hosting service allows individuals and
77-
organizations to make their website accessible via the World
84+
<p class="lead">A web hosting service allows individuals and
85+
organizations to make their website accessible via the World
7886
Wide Web.</p>
7987
</div>
8088
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-2">
@@ -85,7 +93,10 @@ <h3>Complete Website Layout</h3>
8593
</div>
8694

8795
<!--- Welcome Section -->
88-
<div class="container-fluid padding">
96+
<div class="container-fluid padding"data-aos="fade-up"
97+
data-aos-offset="200"
98+
data-aos-delay="50"
99+
data-aos-duration="1000">
89100
<div class="row welcome text-center">
90101
<div class="col-12">
91102
<h1 class="display-4">Built with ease.</h1>
@@ -100,7 +111,10 @@ <h1 class="display-4">Built with ease.</h1>
100111
</div>
101112

102113
<!--- Three Column Section -->
103-
<div class="container-fluid padding">
114+
<div class="container-fluid padding"data-aos="fade-up"
115+
data-aos-offset="200"
116+
data-aos-delay="50"
117+
data-aos-duration="1000">
104118
<div class="row text-center padding">
105119
<div class="col-xs-12 col-sm-6 col-md-4">
106120
<i class="fas fa-code"></i>
@@ -122,16 +136,19 @@ <h3>CSS3</h3>
122136
</div>
123137

124138
<!--- Two Column Section -->
125-
<div class="container-fluid padding">
139+
<div class="container-fluid padding"data-aos="fade-up"
140+
data-aos-offset="200"
141+
data-aos-delay="50"
142+
data-aos-duration="1000">
126143
<div class="row padding">
127144
<div class="col-md-12 col-lg-6">
128145
<h2>If you build it...</h2>
129-
<p>The columns will automatically stack on each other when
146+
<p>The columns will automatically stack on each other when
130147
the screen is less than 576px wide.</p>
131-
<p>Resize the browserwindow to see the effect. Responsive web
132-
design has become more important as the amount of mobile traffic now
148+
<p>Resize the browserwindow to see the effect. Responsive web
149+
design has become more important as the amount of mobile traffic now
133150
accounts for more than half of total internet traffic.</p>
134-
<p>It can also display the web page differently depending on the
151+
<p>It can also display the web page differently depending on the
135152
screen size or viewing device.</p>
136153
<br>
137154
<a href="#" class="btn btn-primary">Learn More</a>
@@ -144,25 +161,28 @@ <h2>If you build it...</h2>
144161

145162
<hr class="my-4">
146163

147-
164+
148165
<!--- Meet the team -->
149166
<div class="container-fluid padding">
150167
<div class="row welcome text-center">
151168
<div class="col-12">
152-
<h1 class="display-4">Meet the Team </h1>
169+
<h1 class="display-4">Meet the Team </h1>
153170
</div>
154171
</div>
155172
</div>
156173

157174
<!--- Cards -->
158-
<div class="container-fluid padding">
175+
<div class="container-fluid padding" data-aos="fade-up"
176+
data-aos-offset="200"
177+
data-aos-delay="50"
178+
data-aos-duration="1000">
159179
<div class="row padding">
160180
<div class="col-md-4">
161181
<div class="card">
162182
<img class="card-img-top" src="img/team1.png">
163183
<div class="card-body">
164184
<h4 class="card-title">John Doe</h4>
165-
<p class="card-text">John is an Interent
185+
<p class="card-text">John is an Interent
166186
entrepreneur with almost 20 years of experience.
167187
</p>
168188
<a href="#" class="btn btn-outline-secondary">See Profile</a>
@@ -195,14 +215,17 @@ <h4 class="card-title">Phil Ho</h4>
195215
</div>
196216

197217
<!--- Two Column Section -->
198-
<div class="container-fluid padding">
218+
<div class="container-fluid padding" data-aos="fade-up"
219+
data-aos-offset="200"
220+
data-aos-delay="50"
221+
data-aos-duration="1000">
199222
<div class="row padding">
200223
<div class="col-md-12 col-lg-6">
201224
<h2>Our Philosophy</h2>
202225
<p>We know that greatness in a disruptive era requires bold
203226
ambition, curious talent and a culture that believes we're
204227
smarter together.</p>
205-
<p>We approach every challenge hostically, with best-in-class
228+
<p>We approach every challenge hostically, with best-in-class
206229
expertise in data, creativity, media, technology, search, social and
207230
more. We call this Alchemy. It has the power to build our clients'
208231
brands and transform their business. And white it may seem like
@@ -235,7 +258,10 @@ <h2>Connect</h2>
235258

236259
<!--- Footer -->
237260
<footer>
238-
<div class="container-fluid padding">
261+
<div class="container-fluid padding" data-aos="fade-up"
262+
data-aos-offset="200"
263+
data-aos-delay="50"
264+
data-aos-duration="1000">
239265
<div class="row text-center">
240266
<div class="col-md-4 pt-0">
241267
<div class="footer-image">
@@ -271,7 +297,10 @@ <h5>&copy; Website Learning </h5>
271297
</div>
272298
</footer>
273299

274-
300+
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
301+
<script>
302+
AOS.init();
303+
</script>
275304

276305
</body>
277306
</html>

0 commit comments

Comments
 (0)