-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
59 lines (59 loc) · 4.79 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
<!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>Parallax Scrolling Effect with CSS & Vanilla Javascript</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<a href="#" class="logo">LOGO</a>
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
<section>
<img src="images/stars.png" id="stars" >
<img src="images/moon.png" id="moon" >
<img src="images/mountains_behind.png" id="mountains_behind" >
<h2 id="text">Moon Light</h2>
<a href="#sec" id="explore">Explore</a>
<img src="images/mountains_front.png" id="mountains_front">
</section>
<div class="sec" id="sec">
<h2>Parallax Scrolling Effect</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem quod vel eveniet repellendus?
Consequuntur laudantium facere delectus sint a, doloremque cumque. Optio praesentium repellat perferendis nisi totam aliquid illo magnam!,
Lorem ipsum dolor sit amet consectetur adipisicing elit.Dignissimos recusandae at minima dolores, et laborum quod.Atque sit quis id,
commodi ipsa reprehenderit ipsam, ullam ipsum vel odio, consequatur recusandae. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Atque aut necessitatibus nostrum nemo velit deleniti saepe nulla,similique vero consequatur adipisci nam facere quo doloremque molestias.
Dignissimos praesentium fuga earum. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ratione, veniam, dicta culpa cumque possimus
iste quaerat odit nisi distinctio deleniti cum odio necessitatibus, quidem excepturi soluta hic corrupti molestias similique. <br><br>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem quod vel eveniet repellendus?Consequuntur laudantium facere delectus sint a,
doloremque cumque. Optio praesentium repellat perferendis nisi totam aliquid illo magnam!,Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dignissimos recusandae at minima dolores, et laborum quod.Atque sit quis id, commodi ipsa reprehenderit ipsam, ullam ipsum vel odio, consequatur recusandae.
Lorem ipsum dolor sit amet consectetur adipisicing elit.Atque aut necessitatibus nostrum nemo velit deleniti saepe nulla,similique vero consequatur adipisci
nam facere quo doloremque molestias.Dignissimos praesentium fuga earum. Lorem ipsum, dolor sit amet consectetur adipisicing elit.<br><br>
Consequuntur laudantium facere delectus sint a, doloremque cumque. Optio praesentium repellat perferendis nisi totam aliquid illo magnam!,
Lorem ipsum dolor sit amet consectetur adipisicing elit.Dignissimos recusandae at minima dolores, et laborum quod.Atque sit quis id,
commodi ipsa reprehenderit ipsam, ullam ipsum vel odio, consequatur recusandae. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Atque aut necessitatibus nostrum nemo velit deleniti saepe nulla,similique vero consequatur adipisci nam facere quo doloremque molestias.
Dignissimos praesentium fuga earum. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ratione, veniam, dicta culpa cumque possimus
iste quaerat odit nisi distinctio deleniti cum odio necessitatibus, quidem excepturi soluta hic corrupti molestias similique. <br><br>
Lorem ipsum dolor sit amet consectetur adipisicing elit.Atque aut necessitatibus nostrum nemo velit deleniti saepe nulla,similique vero consequatur adipisci
nam facere quo doloremque molestias.Dignissimos praesentium fuga earum. Lorem ipsum, dolor sit amet consectetur adipisicing elit.<br><br>
Consequuntur laudantium facere delectus sint a, doloremque cumque. Optio praesentium repellat perferendis nisi totam aliquid illo magnam!,
Lorem ipsum dolor sit amet consectetur adipisicing elit.Dignissimos recusandae at minima dolores, et laborum quod.Atque sit quis id,
commodi ipsa reprehenderit ipsam, ullam ipsum vel odio, consequatur recusandae. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Atque aut necessitatibus nostrum nemo velit deleniti saepe nulla,similique vero consequatur adipisci nam facere quo doloremque molestias.
Dignissimos praesentium fuga earum. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ratione, veniam, dicta culpa cumque possimus
iste quaerat odit nisi distinctio deleniti cum odio necessitatibus, quidem excepturi soluta hic corrupti molestias similique.</p>
</div>
<script src="js.js"></script>
</body>
</html>