-
Notifications
You must be signed in to change notification settings - Fork 8
/
index.html
62 lines (61 loc) · 5.34 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
<!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" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./style.css" />
<title>Beautiful Website</title>
</head>
<body>
<header>
<a href="#" class="logo">Arpit</a>
<ul>
<li><a href="#">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="stars.png" id="stars">
<img src="moon.png" id="moon">
<img src="mountains_behind.png" id="mountains_behind">
<h2 id="text">Starry Night</h2>
<a href="#" id="btn">Explore</a>
<img src="mountains_front.png" id="mountains_front">
</section>
<div class="sec" id="sec">
<h2>Really Cool Website...</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim aut iure distinctio earum officia, odit excepturi architecto, molestias minima aperiam voluptate eius asperiores saepe modi necessitatibus totam optio explicabo reiciendis debitis obcaecati quos ullam. Id repellendus magni at, nisi asperiores ratione quia voluptatem libero. Provident possimus suscipit omnis pariatur accusantium esse natus officia eius aliquid fuga temporibus, quaerat est ducimus totam tenetur placeat assumenda facilis animi blanditiis atque nulla. Cum, quos ipsum at nesciunt qui error aspernatur quas ullam nulla.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ipsam quidem ea vel totam animi itaque cumque quam autem earum repellat, pariatur culpa consequatur, ab architecto id iusto tempora similique, adipisci atque dolores hic nisi repudiandae. Architecto, iure quia similique beatae debitis doloremque assumenda eos neque optio voluptatem labore quisquam omnis unde. Reiciendis iste ab assumenda error nam aliquam nihil odit modi, ullam praesentium. Hic nemo non nobis obcaecati, harum officia eveniet vel rem nam earum laboriosam quaerat molestias quidem fugit cupiditate dolor ut impedit perferendis sed minima porro. Odio atque et dignissimos, nesciunt quis eum explicabo officia reiciendis nemo enim, qui nihil vitae cupiditate, laborum voluptate non odit quia dolores possimus corrupti. Quaerat tenetur nesciunt in earum molestiae dolorem.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis similique laboriosam magnam dolor omnis. Labore ullam, assumenda error hic nulla dolor vel vero laborum corrupti fugiat, possimus deleniti aut quibusdam tenetur excepturi ea, asperiores soluta eveniet nihil harum quas dicta! Perspiciatis corporis asperiores laborum nulla! Iure, quas blanditiis tempora incidunt a tempore aspernatur laborum, commodi atque voluptatem accusamus nulla quaerat ullam. Incidunt pariatur voluptatibus ducimus itaque aliquid expedita consectetur! Facilis, consectetur ad similique aliquam labore eos at nostrum laboriosam enim minus? Nihil ex esse, voluptatibus quibusdam qui reprehenderit cupiditate tempora consequatur in ad praesentium assumenda, maxime officiis unde ut nam quos. Velit dignissimos repudiandae necessitatibus doloremque quaerat ullam maxime modi eius. Deserunt, delectus enim sed dignissimos nostrum quaerat consequuntur culpa.<br><br>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo error at ea ex! Temporibus hic in iste est, itaque, enim vitae omnis neque qui eos fuga similique, nisi magni vero. Iste a itaque delectus sint provident repellat, nihil quos hic suscipit ab perspiciatis enim facere blanditiis assumenda, est repellendus adipisci aperiam deserunt atque alias deleniti neque quas harum aut! Numquam in consequatur aut culpa nemo neque aspernatur sint eligendi earum ut maxime nisi, beatae, totam aliquam commodi itaque optio impedit et ab at quas molestias unde blanditiis possimus. Eaque vel consequuntur corporis voluptas similique non nostrum minima ad natus rerum.</p>
</div>
<script>
let stars = document.getElementById('stars');
let moon = document.getElementById('moon');
let mountains_behind = document.getElementById('mountains_behind');
let text = document.getElementById('text');
let btn = document.getElementById('btn');
let mountains_front = document.getElementById('mountains_front');
let header = document.querySelector('header');
window.addEventListener('scroll', function(){
let value = window.scrollY;
stars.style.left = value * 0.25 + 'px';
moon.style.top = value * 1.05 + 'px';
mountains_behind.style.top = value * 0.5 + 'px';
mountains_front.style.top = value * 0 + 'px';
text.style.marginRight = value * 4 + 'px';
text.style.marginTop = value * 1.5 + 'px';
btn.style.marginTop = value * 1.5 + 'px';
header.style.top = value * 0.5 + 'px';
})
</script>
</body>
</html>