-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
99 lines (90 loc) · 4.28 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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="pt-br">
<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="stylesheet" href="assets/css/variaveis.css">
<link rel="stylesheet" href="assets/css/styles.css">
<title>Codelândia</title>
</head>
<body>
<header>
<article class="article-head">
<nav>
<h1>Codelândia</h1>
<p>blog</p>
</nav>
<input class="search" type="text" placeholder="Pesquisar no blog">
</article>
</header>
<main>
<div class="container">
<article class="first-article card">
<div class="date-icon">
<p class="datetime">02 de jul, 2021</p>
<img src="assets/icons/icon-heart.svg" alt="Icone de coração">
</div>
<div class="article-info">
<h2 class="article-title">Agora é oficial: o Windows 11 está vindo</h2>
<p class="article-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
vestibulum auctor est. Nam
vitae finibus ante. Duis lobortis tellus vel diam fringilla, eu ullamcorper ex iaculis.</p>
</div>
</article>
<article class="card">
<div class="date-icon">
<p class="datetime">02 de jul, 2021</p>
<img src="assets/icons/icon-heart.svg" alt="Icone de coração">
</div>
<div class="article-info">
<h2 class="article-title">Tim Berners-Lee vai leiloar código-fonte da web</h2>
<p class="article-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
vestibulum auctor est. Nam
vitae finibus ante. Duis lobortis tellus vel diam fringilla, eu ullamcorper ex iaculis. Praesent
et auctor justo. Vestibulum nisl orci, lacinia venenatis leo sit amet, pulvinar tincidunt risus.
Phasellus nisl dui, cursus a lectus et, interdum ullamcorper libero.</p>
</div>
</article>
<article class="card">
<div class="date-icon">
<p class="datetime">02 de jul, 2021</p>
<img src="assets/icons/icon-heart.svg" alt="Icone de coração">
</div>
<div class="article-info">
<h2 class="article-title">Tem Firefox novo no pedaço e você vai querer migrar</h2>
<p class="article-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
vestibulum auctor est.</p>
</div>
</article>
<article class="card">
<div class="date-icon">
<p class="datetime">02 de jul, 2021</p>
<img src="assets/icons/icon-heart.svg" alt="Icone de coração">
</div>
<div class="article-info">
<h2 class="article-title">John McAfee, criador do antivírus McAfee, morre</h2>
<p class="article-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
vestibulum auctor est. Nam
vitae finibus ante. Duis lobortis tellus vel diam fringilla, eu ullamcorper ex iaculis. Praesent
et auctor justo. Vestibulum nisl orci, lacinia venenatis leo sit amet, pulvinar tincidunt risus.
Phasellus nisl dui, cursus a lectus et, interdum ullamcorper libero.</p>
</div>
</article>
</div>
</main>
</body>
<script src="https://unpkg.com/scrollreveal"></script>
<script>
const sr = ScrollReveal({
origin: 'top',
distance: '50px',
duration: 2000,
reset: true
});
ScrollReveal().reveal('.card', { delay: 200 });
ScrollReveal().reveal('.date-icon', { delay: 400 });
ScrollReveal().reveal('.article-title', { delay: 500 });
ScrollReveal().reveal('.article-description', { delay: 600 });
</script>
</html>