-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
40 lines (40 loc) · 4.82 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="https://png.pngtree.com/png-clipart/20231003/original/pngtree-cartoon-illustration-of-moon-png-image_13245733.png" type="image/x-icon">
<title>Parallax Website</title>
</head>
<body>
<!-- I want to create a parallax effect with 2 pictures -->
<div class="parallax">
<h1 id="parallax-text">Parallax Effect</h1>
<button id="parallax-button">
<a href="#text-section">Click me</a>
</button>
<img src="./Mountain.webp" alt="">
</div>
<div id="text-section" class="text-section">
<h1 class="text-section-center">Lorem ipsum dolor sit amet</h1>
<div class="text-section-grid">
<p>
Eiusmod dolor est eiusmod non Lorem occaecat laboris proident anim. Sint enim minim Lorem labore irure ut ex. Consequat ipsum cillum laboris sint reprehenderit amet anim in ipsum pariatur quis. Pariatur esse ullamco Lorem consequat sunt non ex. Est eiusmod do incididunt elit laboris labore do laborum dolore.
Dolor non eu nisi proident aliquip voluptate cillum incididunt. Ullamco ea ullamco sint ea amet id quis nulla consectetur sit. Nisi fugiat id fugiat ad nulla nostrud veniam in nisi. Exercitation non ex tempor elit.
Excepteur et et elit incididunt enim veniam enim velit. Veniam aute dolore laboris duis nisi aliquip amet adipisicing consectetur non eu cupidatat culpa. Elit voluptate veniam elit non consequat. Ea nisi anim dolore esse deserunt et aliquip consequat laborum ipsum nostrud exercitation proident.
Nostrud mollit do ut consectetur elit quis ullamco. Sit ad esse laborum incididunt veniam consectetur laboris pariatur do mollit in et. Commodo eiusmod culpa duis consequat ut ullamco in fugiat nisi ullamco voluptate. Ad do excepteur ipsum nostrud occaecat officia aute pariatur deserunt exercitation quis. Est fugiat tempor irure consectetur. Duis mollit ullamco eiusmod sint eiusmod irure incididunt fugiat velit magna officia. Excepteur cupidatat excepteur cupidatat laboris officia ea nulla eiusmod aliqua.
Sit do esse adipisicing eiusmod eiusmod voluptate laboris cillum incididunt. Nostrud pariatur commodo dolore dolor ipsum in sint dolore deserunt in. Veniam laborum Lorem esse Lorem dolor ad. Id dolore aute amet ipsum reprehenderit reprehenderit aliqua reprehenderit velit consequat. Mollit dolor voluptate in pariatur deserunt dolor. Fugiat quis sint excepteur incididunt Lorem eiusmod esse excepteur velit consequat labore consequat id sint. Laboris mollit irure aliqua tempor mollit labore sint commodo aute ipsum dolor Lorem irure nulla.
</p>
<p>
Tempor esse consectetur id eu sunt voluptate ea consectetur ea. Ipsum culpa amet elit fugiat fugiat cillum voluptate est amet consequat culpa Lorem commodo. Ad laborum ad velit officia irure est. Magna aute dolore cupidatat est. Dolor duis id fugiat do incididunt sit fugiat consectetur nisi magna. Consequat voluptate mollit laborum dolor. Adipisicing quis id excepteur officia enim anim.
Elit consectetur aute sunt cillum qui ullamco enim enim do. Excepteur ipsum non nisi voluptate laborum dolore cupidatat incididunt commodo ullamco adipisicing. Tempor magna minim anim laboris adipisicing. Laboris in non ea ea id esse. Elit minim reprehenderit cupidatat anim incididunt aliqua sint ea reprehenderit irure velit sint quis irure.
Id adipisicing laborum mollit veniam fugiat dolore eu ea ex excepteur ullamco excepteur sunt aliquip. In irure Lorem aute est culpa irure. In deserunt velit eiusmod consequat eu aliquip anim proident magna non. Pariatur ex aute cupidatat ullamco. Fugiat esse laborum nulla minim id consequat duis magna incididunt sit et nulla duis aliquip. Sit adipisicing id sint veniam magna.
Nostrud magna exercitation mollit anim cillum enim nostrud Lorem. Proident aliqua commodo deserunt consequat labore nisi nostrud quis excepteur cillum exercitation. Mollit magna consectetur voluptate duis elit culpa aliquip Lorem. Cillum exercitation sit eiusmod excepteur labore id ipsum voluptate sint. Excepteur id ipsum excepteur velit nisi ut veniam eu labore veniam consequat. Aliquip fugiat voluptate ut magna magna officia nostrud nostrud ut. Qui proident duis nulla eu dolore Lorem consequat ex.
Ea nostrud culpa pariatur et pariatur ad ullamco nostrud exercitation. Id in nostrud commodo proident tempor id. Ex laboris cillum minim amet esse ex eiusmod occaecat mollit. Officia et officia consequat aliqua labore eu non est et laborum ipsum officia cillum dolore.
</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>