-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
89 lines (81 loc) · 3.58 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animate On Scroll </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
</head>
<body>
<header class="main-header">
<h1>
<span>Master Make Up</span> Skills
</h1>
<p>
A FREE Webinar On learning Makeup for yourselves Or for your Clients
</p>
</header>
<main class="container">
<section class="card">
<img src="images/bg-1.png" alt="">
<div>
<h3>SPA & Wellness</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel esse voluptates, veritatis tempora eius reprehenderit nisi eum dignissimos cumque dolorum perspiciatis animi, quas asperiores. Dolorum aperiam ullam officia harum repellendus accusantium consequatur reprehenderit. Repellendus, reprehenderit?
</p>
<a href="#" class="btn">READ MORE</a>
</div>
</section>
<section class="card" data-aos="fade-left">
<img src="images/bg-2.png" alt="">
<div>
<h3>List of SPA Salons</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel esse voluptates, veritatis tempora eius reprehenderit nisi eum dignissimos cumque dolorum perspiciatis animi, quas asperiores. Dolorum aperiam ullam officia harum repellendus accusantium consequatur reprehenderit. Repellendus, reprehenderit?
</p>
<a href="#" class="btn">READ MORE</a>
</div>
</section>
<section class="card" data-aos="fade-right">
<img src="images/bg-3.png" alt="">
<div>
<h3>Everyday Glam Makeup</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel esse voluptates, veritatis tempora eius reprehenderit nisi eum dignissimos cumque dolorum perspiciatis animi, quas asperiores. Dolorum aperiam ullam officia harum repellendus accusantium consequatur reprehenderit. Repellendus, reprehenderit?
</p>
<a href="#" class="btn">READ MORE</a>
</div>
</section>
<section class="card" data-aos="fade-left">
<img src="images/bg-4.png" alt="">
<div>
<h3>Beauty Sutra Hair SPA</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel esse voluptates, veritatis tempora eius reprehenderit nisi eum dignissimos cumque dolorum perspiciatis animi, quas asperiores. Dolorum aperiam ullam officia harum repellendus accusantium consequatur reprehenderit. Repellendus, reprehenderit?
</p>
<a href="#" class="btn">READ MORE</a>
</div>
</section>
<section class="card" data-aos="fade-right">
<img src="images/bg-5.png" alt="">
<div>
<h3>Beauty Sutra Facial</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel esse voluptates, veritatis tempora eius reprehenderit nisi eum dignissimos cumque dolorum perspiciatis animi, quas asperiores. Dolorum aperiam ullam officia harum repellendus accusantium consequatur reprehenderit. Repellendus, reprehenderit?
</p>
<a href="#" class="btn">READ MORE</a>
</div>
</section>
</main>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init({
offset: 400, // offset (in px) from the original trigger point
delay: 0, // values from 0 to 3000, with step 50ms
duration: 1000 // values from 0 tp 3000, with step 50ms
});
</script>
</body>
</html>