-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
106 lines (106 loc) · 6.36 KB
/
index.html
File metadata and controls
106 lines (106 loc) · 6.36 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="en" class="html">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Site Meta Data -->
<meta name="author" content="Zahid Hasan Munna">
<meta name="description" content="My name is Zahid Hasan Munna. I'm a Front-End Developer. I created these Intersection Observer Effects with vanilla JavaScript and pure CSS.">
<!-- Site Title -->
<title>Intersection Observer Effect | Vanilla JavaScript</title>
<!-- Favicon Link -->
<link rel="icon" type="image/x-icon" href="./assets/images/favicon.ico">
<!-- Font Awesome Icon Link -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- All CSS -->
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<section class="section" style="--bg-color: #6f6182;">
<h1 class="heading">Intersection Observer Effect</h1>
</section>
<section class="section" style="--bg-color: #fb6767;">
<div class="container">
<div class="col col--4 observer slide-in slide-in--left">
<div class="section__image">
<img src="./assets/images/img1.jpg" alt="img1">
</div>
</div>
<div class="col col--8 observer fade-in">
<h1 class="section__title observer reveal reveal--left">Section One</h1>
<p class="section__text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora aut veniam amet illum debitis veritatis dolorum necessitatibus aliquid ipsa earum a quae optio, suscipit mollitia harum provident impedit blanditiis consequuntur quis natus nihil ducimus voluptates. Repellat, velit omnis nulla consectetur asperiores id, incidunt perspiciatis iusto neque distinctio provident aperiam voluptate.</p>
<ul class="section__social observer">
<li class="social__item" style="--i:1;">
<a href="#!" class="social__link"><i class="fa fa-facebook" aria-hidden="true"></i></a>
</li>
<li class="social__item" style="--i:2;">
<a href="#!" class="social__link"><i class="fa fa-twitter" aria-hidden="true"></i></a>
</li>
<li class="social__item" style="--i:3;">
<a href="#!" class="social__link"><i class="fa fa-instagram" aria-hidden="true"></i></a>
</li>
<li class="social__item" style="--i:4;">
<a href="#!" class="social__link"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</li>
</ul>
</div>
</div>
</section>
<section class="section" style="--bg-color: #3a6668;">
<div class="container">
<div class="col col--8 observer fade-in">
<h1 class="section__title observer reveal reveal--right">Section Two</h1>
<p class="section__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat eum maiores nobis magni vel hic nam nihil deleniti, beatae tenetur perferendis quos distinctio quidem dolorem soluta accusantium atque et exercitationem doloremque quas veritatis unde? Doloremque neque, delectus quia possimus repudiandae nisi. Vel, explicabo repudiandae? Totam sed minus ab itaque aperiam!</p>
<ul class="section__social observer">
<li class="social__item" style="--i:1;">
<a href="#!" class="social__link"><i class="fa fa-facebook" aria-hidden="true"></i></a>
</li>
<li class="social__item" style="--i:2;">
<a href="#!" class="social__link"><i class="fa fa-twitter" aria-hidden="true"></i></a>
</li>
<li class="social__item" style="--i:3;">
<a href="#!" class="social__link"><i class="fa fa-instagram" aria-hidden="true"></i></a>
</li>
<li class="social__item" style="--i:4;">
<a href="#!" class="social__link"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</li>
</ul>
</div>
<div class="col col--4 reverse observer slide-in slide-in--right">
<div class="section__image">
<img src="./assets/images/img2.jpg" alt="img2">
</div>
</div>
</div>
</section>
<section class="section" style="--bg-color: #845ec2;">
<div class="container">
<div class="col col--4 observer slide-in slide-in--left">
<div class="section__image">
<img src="./assets/images/img3.jpg" alt="img3">
</div>
</div>
<div class="col col--8 observer fade-in">
<h1 class="section__title observer reveal reveal--left">Section Three</h1>
<p class="section__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat eum maiores nobis magni vel hic nam nihil deleniti, beatae tenetur perferendis quos distinctio quidem dolorem soluta accusantium atque et exercitationem doloremque quas veritatis unde? Doloremque neque, delectus quia possimus repudiandae nisi. Vel, explicabo repudiandae? Totam sed minus ab itaque aperiam!</p>
<ul class="section__social observer">
<li class="social__item" style="--i:1;">
<a href="#!" class="social__link"><i class="fa fa-facebook" aria-hidden="true"></i></a>
</li>
<li class="social__item" style="--i:2;">
<a href="#!" class="social__link"><i class="fa fa-twitter" aria-hidden="true"></i></a>
</li>
<li class="social__item" style="--i:3;">
<a href="#!" class="social__link"><i class="fa fa-instagram" aria-hidden="true"></i></a>
</li>
<li class="social__item" style="--i:4;">
<a href="#!" class="social__link"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</li>
</ul>
</div>
</div>
</section>
<!-- All Script -->
<script src="./assets/js/script.js"></script>
</body>
</html>