-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
59 lines (58 loc) · 6.45 KB
/
index.html
File metadata and controls
59 lines (58 loc) · 6.45 KB
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="es">
<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>Moon Light</title>
<link rel="stylesheet" href="/css/reset.css">
<link rel="stylesheet" type="text/css" href="/css/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="/imagenes/stars.png" alt="stars" id="stars">
<img src="/imagenes/moon.png" alt="moon" id="moon">
<img src="/imagenes/mountains_behind.png" alt="mountains_behind" id="mountains_behind">
<h2 id="text">Moon Light</h2>
<a href="#sec" class="btn" id="btn">Explore</a>
<img src="/imagenes/mountains_front.png" alt="mountains_front" id="mountains_front">
</section>
<div class="sec" id="sec">
<h2>Llevo 4 meses de programación</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit laboriosam earum tempore voluptatibus accusamus necessitatibus neque ipsa similique voluptatem libero recusandae aperiam asperiores reprehenderit culpa voluptate mollitia omnis, esse ipsum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore illo modi velit, commodi obcaecati pariatur est laborum iusto, rem voluptas magni nesciunt dolorem nulla odio earum dignissimos doloremque aspernatur? Dolorem!. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum cum ipsa tempora, corporis labore repudiandae eaque vero reiciendis, modi nostrum hic a nemo excepturi nam veritatis ex voluptatum iure at.<br><br>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nisi officia officiis ex alias natus aliquid consequuntur repellendus cupiditate consequatur veritatis nemo, ad, culpa magni voluptatem unde temporibus! Enim, ipsum amet?Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum nihil, tempora ipsam fugiat consectetur quae non molestias. Ea iusto porro quas id architecto, distinctio, quae impedit ab deleniti, natus atque?<br><br>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit laboriosam earum tempore voluptatibus accusamus necessitatibus neque ipsa similique voluptatem libero recusandae aperiam asperiores reprehenderit culpa voluptate mollitia omnis, esse ipsum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore illo modi velit, commodi obcaecati pariatur est laborum iusto, rem voluptas magni nesciunt dolorem nulla odio earum dignissimos doloremque aspernatur? Dolorem!. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum cum ipsa tempora, corporis labore repudiandae eaque vero reiciendis, modi nostrum hic a nemo excepturi nam veritatis ex voluptatum iure at.<br><br>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nisi officia officiis ex alias natus aliquid consequuntur repellendus cupiditate consequatur veritatis nemo, ad, culpa magni voluptatem unde temporibus! Enim, ipsum amet?Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum nihil, tempora ipsam fugiat consectetur quae non molestias. Ea iusto porro quas id architecto, distinctio, quae impedit ab deleniti, natus atque?<br><br>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit laboriosam earum tempore voluptatibus accusamus necessitatibus neque ipsa similique voluptatem libero recusandae aperiam asperiores reprehenderit culpa voluptate mollitia omnis, esse ipsum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore illo modi velit, commodi obcaecati pariatur est laborum iusto, rem voluptas magni nesciunt dolorem nulla odio earum dignissimos doloremque aspernatur? Dolorem!. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum cum ipsa tempora, corporis labore repudiandae eaque vero reiciendis, modi nostrum hic a nemo excepturi nam veritatis ex voluptatum iure at.<br><br>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nisi officia officiis ex alias natus aliquid consequuntur repellendus cupiditate consequatur veritatis nemo, ad, culpa magni voluptatem unde temporibus! Enim, ipsum amet?Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum nihil, tempora ipsam fugiat consectetur quae non molestias. Ea iusto porro quas id architecto, distinctio, quae impedit ab deleniti, natus atque?<br><br>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit laboriosam earum tempore voluptatibus accusamus necessitatibus neque ipsa similique voluptatem libero recusandae aperiam asperiores reprehenderit culpa voluptate mollitia omnis, esse ipsum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore illo modi velit, commodi obcaecati pariatur est laborum iusto, rem voluptas magni nesciunt dolorem nulla odio earum dignissimos doloremque aspernatur? Dolorem!. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum cum ipsa tempora, corporis labore repudiandae eaque vero reiciendis, modi nostrum hic a nemo excepturi nam veritatis ex voluptatum iure at.</p>
</div>
<div class="pie__de__pagina">
<p class="thanks">Agradecimiento a <a href="https://www.youtube.com/watch?v=1wfeqDyMUx4" target="_blank" class="redireccion"> Online tutorials </a> por el tutorial.</p>
<a href="https://github.com/mispuri" class="copy" target="_blank">© Camilo Charry</a>
</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>