-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
152 lines (133 loc) · 9.88 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
<!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">
<!--IMPORTAR CSS-->
<link rel="stylesheet" href="./Styles/normalize.css" >
<link rel="stylesheet" href="./Styles/styleNav.css" >
<link rel="stylesheet" href="./Styles/styleRedes.css">
<link rel="stylesheet" href="./Styles/styleHero.css" >
<link rel="stylesheet" href="./Styles/styleFooter.css" >
<link rel="stylesheet" href="./Styles/styleQuienesSomos.css">
<link rel="stylesheet" href="./Styles/styleSectionImg.css">
<!--LINK FAVICON-->
<link rel="shortcut icon" href="./img/icono.png" type="image/x-icon">
<!--FONT AWESOME-->
<script src="https://kit.fontawesome.com/55575aacf2.js" crossorigin="anonymous"></script>
<!-- IMPORTAR FUENTE -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100&family=Libre+Bodoni:ital,wght@0,400;0,500;1,400&family=Roboto:wght@100&display=swap" rel="stylesheet">
<!---->
<title>SweetHome</title>
</head>
<body>
<header>
<nav class="nav">
<ul class="nav_ul">
<li><a href="#inicio">Inicio</a></li>
<li><a href="#quienes_somos">Sobre nosotros</a></li>
<li><a href="historias.html">Historias</a></li>
<li><a href="historias.html#como_ayudar">Cómo ayudar</a> </li>
<li><a href="contacto.html">Contacto</a> </li>
</ul>
</nav>
</header>
<main>
<div class="redes">
<div class="facebook">
<h3>facebook</h3>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="imagen"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z"/></svg>
</div>
<div class="instagram">
<h3>instagram</h3>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="imagen"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>
</div>
<div class="twitter">
<h3>twitter</h3>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="imagen"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
</div>
<div class="whatsapp">
<h3>whatsapp</h3>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="imagen"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M224 122.8c-72.7 0-131.8 59.1-131.9 131.8 0 24.9 7 49.2 20.2 70.1l3.1 5-13.3 48.6 49.9-13.1 4.8 2.9c20.2 12 43.4 18.4 67.1 18.4h.1c72.6 0 133.3-59.1 133.3-131.8 0-35.2-15.2-68.3-40.1-93.2-25-25-58-38.7-93.2-38.7zm77.5 188.4c-3.3 9.3-19.1 17.7-26.7 18.8-12.6 1.9-22.4.9-47.5-9.9-39.7-17.2-65.7-57.2-67.7-59.8-2-2.6-16.2-21.5-16.2-41s10.2-29.1 13.9-33.1c3.6-4 7.9-5 10.6-5 2.6 0 5.3 0 7.6.1 2.4.1 5.7-.9 8.9 6.8 3.3 7.9 11.2 27.4 12.2 29.4s1.7 4.3.3 6.9c-7.6 15.2-15.7 14.6-11.6 21.6 15.3 26.3 30.6 35.4 53.9 47.1 4 2 6.3 1.7 8.6-1 2.3-2.6 9.9-11.6 12.5-15.5 2.6-4 5.3-3.3 8.9-2 3.6 1.3 23.1 10.9 27.1 12.9s6.6 3 7.6 4.6c.9 1.9.9 9.9-2.4 19.1zM400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM223.9 413.2c-26.6 0-52.7-6.7-75.8-19.3L64 416l22.5-82.2c-13.9-24-21.2-51.3-21.2-79.3C65.4 167.1 136.5 96 223.9 96c42.4 0 82.2 16.5 112.2 46.5 29.9 30 47.9 69.8 47.9 112.2 0 87.4-72.7 158.5-160.1 158.5z"/></svg>
</div>
<div class="messenger">
<h3>messenger</h3>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="imagen"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M256.55 8C116.52 8 8 110.34 8 248.57c0 72.3 29.71 134.78 78.07 177.94 8.35 7.51 6.63 11.86 8.05 58.23A19.92 19.92 0 0 0 122 502.31c52.91-23.3 53.59-25.14 62.56-22.7C337.85 521.8 504 423.7 504 248.57 504 110.34 396.59 8 256.55 8zm149.24 185.13l-73 115.57a37.37 37.37 0 0 1-53.91 9.93l-58.08-43.47a15 15 0 0 0-18 0l-78.37 59.44c-10.46 7.93-24.16-4.6-17.11-15.67l73-115.57a37.36 37.36 0 0 1 53.91-9.93l58.06 43.46a15 15 0 0 0 18 0l78.41-59.38c10.44-7.98 24.14 4.54 17.09 15.62z"/></svg>
</div>
</div>
<section id="inicio">
<div class="heroContainer">
<div class="hero_img">
<img src="./img/heroImg.jpg" alt="" >
</div>
<div class="hero_h1">
<h1>
Bienvenido a SweetHome, el lugar donde el amor más puro te está esperando.
</h1>
<a href="./contacto.html" target="_blank" rel="noopener noreferrer">Contactanos</a>
</div>
</div>
</section>
<section id="quienes_somos">
<div>
<div class="h2">
<h2>Quienes somos</h2>
</div>
<p>
SweetHome es una asociación protectora sin fines de
lucro destinada a dar en adopción mascotas para hacer familias y animales más felices.
</p>
</div>
</section>
<section id="img">
<div class="div-img">
<h2>Ellos te esperan...vení a conocerlos!!</h2>
</div>
<div class="div_img">
<div class="container">
<img src="./img/perro1.png" alt="perro1">
<div class="text_photos">
<h2>Charlie</h2>
<img src="./img/perro1.png" alt="perro1">
<p>Tiene 3 años de edad y es de tamaño grande, por lo que necesita un espacio adecuado para moverse en libertad. Se lleva muy bien con otros perros y gatos y es muy cariñoso con los niños.</p>
</div>
</div>
<div class="container">
<img src="./img/gatitoo1.jpg" alt="gato1">
<div class="text_photos">
<h2>Lolo</h2>
<img src="./img/gatitoo1.jpg" alt="gato1">
<p>Llegó al refugio perdido, atraído por el alimento y la compañía. Tiene aproximadamente 7 meses y acepta los mimos de todos los que lo acarician sin problemas.</p>
</div>
</div>
<div class="container">
<img src="./img/perro2.jpg" alt="perro2">
<div class="text_photos">
<h2>Betún</h2>
<img src="./img/perro2.jpg">
<p>Es un cachorro juguetón y cariñoso, de tamaño mediano(en su adultez), que se lleva muy bien con otros animales. Necesita una cirugía en su patita trasera(no urgente, pero necesaria)que estamos gestionando actualmente.</p>
</div>
</div>
<div class="container">
<img src="img/gatos.jpeg" alt="gato2">
<div class="text_photos">
<h2>Tati, Mía y Teo</h2>
<img src="./img/gatos.jpeg" alt="gatos2">
<p>Ellos son tres hermanitos que fueron traídos al refugio por el hijo de su dueña, que por problemas de salud ya no podía hacerse cargo de ellos. Están acostumbrados a estar acompañados, son mimosos y les gusta mantenerse relativamente juntos.</p>
</div>
</div>
<!-- <img src="./img/gato.jpg" alt="gato1">
<img src="./img/perro2.jpg" alt="perro2">
<img src="img/gatos.jpeg" alt="gato2"> -->
</div>
</section>
</main>
<footer>
<p>@2022 Desarrollado por Evelyn Lucca</p>
</footer>
<script src="./js/index.js"></script>
</body>
</html>