-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
165 lines (149 loc) · 6.92 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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adote</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap" rel="stylesheet">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
</head>
<body>
<div>
<div class="nav">
<div>
<h4>ASPA - Associação de Socorro e Proteção aos Animais<span style="color: #3f51b5;">.</span></h4>
</div>
<div class="links">
<a href="index.html">Home</a>
<a href="doe.html">Doe</a>
<a href="sobre-nos.html">Sobre-nós</a>
<a href="adotar.html" class="adotar">Adotar</a>
</div>
</div>
<!--LANDING PAGE-->
<div class="landing">
<div class="landingText" data-aos="fade-up" data-aos-duration="1000">
<h1>ASPA<span style="color: #3f51b5; font-size: 3vw;">.</span></h1>
<h3>Adotar é de graça e alimenta nossa alma.</h3>
<div class="btn">
<a href="./adotar.html">Adotar</a>
</div>
</div>
<div class="landingImage" data-aos="fade-down" data-aos-duration="2000">
<img src="img/dog-carinho-mulher.svg">
</div>
</div>
<!--INFO SECTION ABOUT-->
<div class="about">
<div class="aboutText" data-aos="fade-up" data-aos-duration="1000">
<h1>Por que é importante <br> <span style="color: #3f51b5;font-size: 3vw;">Você adotar
</span> </h1>
<img src="img/logo-sem-fundo.png" class="sonhe">
</div>
<div class="aboutList" data-aos="fade-left" data-aos-duration="1000">
<ol>
<li>
<span>01</span>
<p>Você não financia o sofrimento do mercado de pets</p>
</li>
<li>
<span>02</span>
<p>Ter um pet em casa = felicidade para o lar</p>
</li>
<li>
<span>03</span>
<p>Ter um pet em casa faz bem para a saúde</p>
</li>
<li>
<span>04</span>
<p>Você estará resgatando uma vida</p>
</li>
</ol>
</div>
</div>
<!--INFO SECTION CARDS-->
<div class="infoSection">
<div class="infoHeader" data-aos="fade-up" data-aos-duration="1000">
<h1>Curiosidades que você precisa saber<br> <span style="color: #3f51b5;">Adote</span><span
style="color: #0E0D0D;">.</span></h1>
</div>
<div class="infoCards">
<div class="card one" data-aos="fade-up" data-aos-duration="1000">
<img src="img/dog-comida.svg" class="cardoneImg" data-aos="fade-up" data-aos-duration="1100">
<div class="cardbgone"></div>
<div class="cardContent">
<h2>Dados de abandono no Brasil</h2>
<p>De acordo com a OMS, aqui no país existem mais de 30 milhões de cães abandonados.</p>
<a href="https://www.paho.org/pt/brasil" target="_blank">
<div class="cardBtn">
<img src="img/next.png" class="cardIcon">
</div>
</a>
</div>
</div>
<div class="card two" data-aos="fade-up" data-aos-duration="1300">
<img src="img/dog-homem-passeio.svg" class="cardtwoImg" data-aos="fade-up" data-aos-duration="1200">
<div class="cardbgtwo"></div>
<div class="cardContent">
<h2>Aumigos no Brasil</h2>
<p>Por outro lado, 44,13% dos lares brasileiros possui ao menos um cão, segundo o IBGE.</p>
<a href="https://www.ibge.gov.br/" target="_blank">
<div class="cardBtn">
<img src="img/next.png" class="cardIcon">
</div>
</a>
</div>
</div>
<div class="card three" data-aos="fade-up" data-aos-duration="1600">
<img src="img/dog-praia.svg" class="cardthreeImg" data-aos="fade-up" data-aos-duration="1300">
<div class="cardbgthree"></div>
<div class="cardContent">
<h2>Qualidade de Vida</h2>
<p>Estudos indicam longevidade para tutores. Mitigando doenças físicas e psicológicas.</p>
<a href="https://www.ahajournals.org/doi/10.1161/CIRCOUTCOMES.118.005342" target="_blank">
<div class="cardBtn">
<img src="img/next.png" class="cardIcon">
</div>
</a>
</div>
</div>
</div>
</div>
<!--BANNER-->
<div class="banner">
<div class="bannerText" data-aos="fade-right" data-aos-duration="1000">
<h1>Entre em contato:<br> <span style="font-size: 1.6vw;">
contato@aspa.com.br</span>
</h1>
<a href="https://www.facebook.com/" target="_blank"><img src="img/facebook.png"></a>
<a href="https://www.instagram.com/" target="_blank"><img src="img/instagram.png"></a>
<a href="https://web.whatsapp.com/" target="_blank"><img src="img/whatsapp.png"></a>
</div>
<div class="bannerImg" data-aos="fade-up" data-aos-duration="1000">
<img src="img/mulher-celular.svg">
</div>
</div>
<!-- FOOTER -->
<div class="footer">
<h2>ASPA<span style="color: #3f51b5;">.</span></h2>
<div class="footerlinks">
<a href="index.html">Home</a>
<a href="doe.html">Doe</a>
<a href="sobre-nos.html" onclick=addImagetoCard()>Sobre-nós</a>
<a href="adotar.html" class="adotar">Adotar</a>
</div>
</div>
</div>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init();
</script>
<!-- Referência -->
<!-- https://michalsnik.github.io/aos/ -->
<!-- https://github.com/michalsnik/aos -->
<!-- https://undraw.co/illustrations -->
</body>
<script src="main.js"></script>
</html>