-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
103 lines (101 loc) · 6.18 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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parallax Effect</title>
<link rel="icon" href="favicon.png">
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<!-- breakdown the webpage in div and section -->
<!-- It is good practice to wrap all the content inside a wbpage in a wrapper -->
<!-- We have made another div to conain that part of webpage which is shouwing parallax effect -->
<div id="wrapper">
<div class="container">
<img src="background.png" class="background">
<img src="foreground.png" class="foreground">
<h1>ADVENTURE</h1>
</div>
<section>
<h2 class="secheading">ADVENTURE TIME!</h2>
<p class="text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Qui necessitatibus commodi alias? Veritatis, eligendi nisi. Amet exercitationem,
recusandae dolore corrupti laborum aperiam repellendus natus voluptatem quam atque
aliquam beatae. Odit deserunt nisi optio eveniet? Aliquam possimus molestiae,
ullam illum accusamus autem accusantium! Voluptate laboriosam eum saepe ex veritatis est?
Numquam eaque autem labore provident dolorum, velit omnis mollitia eos adipisci!
<br><br>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Ad, itaque hic tempore rem eveniet sed repudiandae molestiae magnam aut quod consequatur,
harum, totam beatae fugiat ipsam? Explicabo,
blanditiis quod similique fugiat fugit ea expedita deleniti doloribus,
delectus perferendis, tempore amet maiores libero sapiente voluptatem reprehenderit?
Illum alias commodi cupiditate corporis mollitia ab quaerat,
ipsum est excepturi vitae a sunt optio.
</p>
<div class="bg bg1">
<!-- bg bg1 are used as separate classes for same element -->
<h2 class="desc">BIKING</h2>
</div>
<p class="text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Qui necessitatibus commodi alias? Veritatis, eligendi nisi.
Amet exercitationem, recusandae dolore corrupti laborum aperiam repellendus natus voluptatem quam atque aliquam beatae.
Odit deserunt nisi optio eveniet? Aliquam possimus molestiae,
ullam illum accusamus autem accusantium! Voluptate laboriosam eum saepe ex veritatis est?
Numquam eaque autem labore provident dolorum, velit omnis mollitia eos adipisci!
<br><br>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Ad, itaque hic tempore rem eveniet sed repudiandae molestiae magnam aut quod consequatur,
harum, totam beatae fugiat ipsam? Explicabo,
blanditiis quod similique fugiat fugit ea expedita deleniti doloribus,
delectus perferendis, tempore amet maiores libero sapiente voluptatem reprehenderit?
Illum alias commodi cupiditate corporis mollitia ab quaerat,
ipsum est excepturi vitae a sunt optio.
</p>
<div class="bg bg2">
<h2 class="desc">PARA GLIDING</h2>
</div>
<p class="text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Qui necessitatibus commodi alias? Veritatis, eligendi nisi. Amet exercitationem,
recusandae dolore corrupti laborum aperiam repellendus natus voluptatem quam atque aliquam beatae.
Odit deserunt nisi optio eveniet? Aliquam possimus molestiae,
ullam illum accusamus autem accusantium! Voluptate laboriosam eum saepe ex veritatis est?
Numquam eaque autem labore provident dolorum, velit omnis mollitia eos adipisci!
<br><br>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad,
itaque hic tempore rem eveniet sed repudiandae molestiae magnam aut quod consequatur,
harum, totam beatae fugiat ipsam? Explicabo,
blanditiis quod similique fugiat fugit ea expedita deleniti doloribus, delectus perferendis,
tempore amet maiores libero sapiente voluptatem reprehenderit?
Illum alias commodi cupiditate corporis mollitia ab quaerat,
ipsum est excepturi vitae a sunt optio.
</p>
<div class="bg bg3">
<h2 class="desc">SURFING</h2>
</div>
<p class="text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Qui necessitatibus commodi alias? Veritatis, eligendi nisi. Amet exercitationem,
recusandae dolore corrupti laborum aperiam repellendus natus voluptatem quam atque aliquam beatae.
Odit deserunt nisi optio eveniet? Aliquam possimus molestiae,
ullam illum accusamus autem accusantium! Voluptate laboriosam eum saepe ex veritatis est?
Numquam eaque autem labore provident dolorum, velit omnis mollitia eos adipisci!
<br><br>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad,
itaque hic tempore rem eveniet sed repudiandae molestiae magnam aut quod consequatur,
harum, totam beatae fugiat ipsam? Explicabo,
blanditiis quod similique fugiat fugit ea expedita deleniti doloribus,
delectus perferendis, tempore amet maiores libero sapiente voluptatem reprehenderit?
Illum alias commodi cupiditate corporis mollitia ab quaerat, ipsum est excepturi vitae a sunt optio.
</p>
</section>
</div>
</body>
</html>