-
Notifications
You must be signed in to change notification settings - Fork 0
/
orphanage.html
131 lines (107 loc) · 4.39 KB
/
orphanage.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
<!DOCTYPE html>
<html lang="pt_BR">
<head>
<meta charset="UTF-8" />
<!-- charset: conjunto de carcateres -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- adptar a pagina para dispositivos de telas menores -->
<title>Lar das Meninas | Happy</title>
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""
/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script
src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""
></script>
<link rel="icon" href="./public/images/logo-icon.png" />
<!-- colocando o icone do lado do titulo da pagina -->
<link rel="stylesheet" href="./public/css/main.css" />
<link rel="stylesheet" href="./public/css/animation.css" />
<link rel="stylesheet" href="./public/css/sidebar.css" />
<link rel="stylesheet" href="./public/css/map.css" />
<link rel="stylesheet" href="./public/css/page-orphanage.css" />
<link
href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div id="page-orphanage">
<aside class="animate-right sidebar">
<img src="./public/images/map-marker.svg" alt="Happy">
<footer>
<button onclick="history.back()">
<img src="./public/images/arrow-back.svg" alt="Voltar">
</button>
</footer>
</aside>
<main class="animate-appear with-sidebar">
<div class="orphanage-details">
<img src="./public/images/home.jpg" alt="Lar das meninas" />
<div class="images">
<button onclick="selectImage(event)" class="active" type="button">
<img src="https://source.unsplash.com/random?id=1" alt="Lar das meninas" />
</button>
<button onclick="selectImage(event)" type="button">
<img src="https://source.unsplash.com/random?id=2" alt="Lar das meninas" />
</button>
<button onclick="selectImage(event)" type="button">
<img src="https://source.unsplash.com/random?id=3" alt="Lar das meninas" />
</button>
<button onclick="selectImage(event)" type="button">
<img src="https://source.unsplash.com/random?id=4" alt="Lar das meninas" />
</button>
<button onclick="selectImage(event)" type="button">
<img src="https://source.unsplash.com/random?id=5" alt="Lar das meninas" />
</button>
<button onclick="selectImage(event)" type="button">
<img src="https://source.unsplash.com/random?id=6" alt="Lar das meninas" />
</button>
</div>
<div class="orphanage-details-content">
<h1>Lar das Meninas</h1>
<p>
Presta assistência a crianças de 06 a 15 anos que se encontre em
situação de risco e/ou vunerabilidade social.
</p>
<div class="map-container">
<div id="mapid"></div>
<footer>
<a href="">Ver rotas no Google Mapas</a>
</footer>
</div>
<hr />
<h2>Instruções para visita</h2>
<p>
Venha como se sentir a vontade e traga muito amor e paciencia para
doar.
</p>
<div class="open-details">
<div class="hour">
<img src="./public/images/clock.svg" alt="Horarios" />
Horarios de visitas das 8hrs as 18hrs
</div>
<div class="open-on-weekends">
<img src="./public/images/info.svg" alt="Informações" />
Atendemos fim de semana
</div>
</div>
<button class="primary-button" type="button">
<img
src="./public/images/whatsapp.svg"
alt="Chamar no Whatsapp"
/>
Entrar em contato
</button>
</div>
</div>
</main>
</div>
<script src="./public/scripts/page-orphanage.js"></script>
</body>
</html>