-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
35 lines (35 loc) · 3.06 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parallax Website | Vanilla JS</title>
<link rel="stylesheet" href="src/css/style.css">
<link rel="shortcut icon" href="https://img.icons8.com/external-wanicon-lineal-color-wanicon/64/000000/external-moon-nature-wanicon-lineal-color-wanicon.png" type="image/x-icon">
</head>
<body>
<header>
<a href="#" class="logo">Logo</a>
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Contato</a></li>
<li><a href="#">Trabalhos</a></li>
<li><a href="#">Contato</a></li>
</ul>
</header>
<section>
<img src="src/imagens/stars.png" alt="estrelas" id="stars">
<img src="src/imagens/moon.png" alt="lua" id="moon">
<h2 id="text">Moon Light</h2>
<a href="#sec" id="btn">Explore</a>
<img src="src/imagens/mountains_behind.png" alt="montanhas atrás" id="mountains_behind">
<img src="src/imagens/mountains_front.png" alt="montanhas frente" id="mountains_front">
</section>
<div class="sec" id="sec">
<h2>Parallax Scrolling Effect</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates nemo accusantium omnis aut officia, esse veritatis eaque ratione vel fugit! Provident labore reiciendis laudantium molestiae libero rem voluptatem tempora sunt? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestiae soluta sit veritatis eaque ea laboriosam unde, quas illum ullam qui cum temporibus voluptatum a deserunt fugiat, fuga modi officiis rem. Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam odio molestiae sequi. Ad blanditiis natus omnis labore, perspiciatis veritatis adipisci, impedit, ipsa quasi fuga officiis ut laudantium alias sed tenetur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto quis temporibus adipisci neque quod, facere at obcaecati tempore vero minus asperiores dicta iure nostrum molestiae saepe laudantium culpa. Atque, temporibus! <br><br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad assumenda magni vel est neque architecto animi accusamus quos doloremque! Enim harum omnis minima fugiat deserunt sapiente vero ut, blanditiis labore! Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, neque veritatis! Modi beatae provident vel perspiciatis recusandae impedit dignissimos et, minus nihil alias ut eaque omnis rerum corrupti accusamus aspernatur <br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad assumenda magni vel est neque architecto animi accusamus quos doloremque! Enim harum omnis minima fugiat deserunt sapiente vero ut, blanditiis labore! Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, neque veritatis! Modi beatae provident vel perspiciatis recusandae impedit dignissimos et, minus nihil alias ut eaque omnis rerum corrupti accusamus aspernatur</p>
</div>
<script src="src/js/index.js"></script>
</body>
</html>