-
Notifications
You must be signed in to change notification settings - Fork 0
/
Encontre.html
195 lines (191 loc) · 11.4 KB
/
Encontre.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
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="encontre-estilo.css">
<script src="https://kit.fontawesome.com/289fb0f140.js" crossorigin="anonymous"></script>
<title>Perdi mi mascota</title> <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,600;0,700;0,800;1,600;1,700;1,800&display=swap" rel="stylesheet">
</head>
<body>
<main>
<form action="get">
<div class="datos-mascota">
<div class="selec-especie info-mascota">
<p class="titulo">Mi mascota es un/una...</p>
<div class="especie-lista">
<div class="especie">
<i class="fas fa-dog"></i>
<input type="radio" id="perro" name="especie" value="">
<label for="perro">Perro</label>
</div>
<div class="especie">
<i class="fas fa-cat"></i>
<input type="radio" id="gato" name="especie" value="">
<label for="gato">Gato</label>
</div>
<div class="especie">
<i class="fas fa-kiwi-bird"></i>
<input type="radio" id="ave" name="especie" value="">
<label for="ave">Ave</label>
</div>
<div class="especie">
<i class="fas fa-hippo"></i>
<input type="radio" id="tortuga" name="especie" value="">
<label for="tortuga">Tortuga</label>
</div>
<div class="especie">
<i class="fas fa-otter"></i>
<input type="radio" id="roedor" name="especie" value="">
<label for="roedor">Roedor</label>
</div>
<div class="especie">
<i class="fas fa-frog"></i>
<input type="radio" id="lagarto" name="especie" value="">
<label for="lagarto">Lagarto</label>
</div>
<div class="especie">
<i class="fas fa-dragon"></i>
<input type="radio" id="serpiente" name="especie" value="">
<label for="serpiente">Serpiente</label>
</div>
</div>
</div>
<hr>
<div class="raza info-mascota">
<p class="titulo">¿Es de raza?</p>
<input type="radio" id="nose" name="siono">
<label for="nose">No lo se/No recuerdo</label>
<input type="radio" id="no" name="siono">
<label for="no">No es de raza, es mestizo</label>
<label for="raza">Su raza es...</label>
<select name="raza" id="">
<option value="elige" disabled selected>Selecciona aqui</option>
<option value="akita">Akita inu</option>
<option value="american-staffordshire-terrier">American staffordshire terrier</option>
<option value="beagle">Beagle</option>
<option value="border-collie">Border collie</option>
<option value="boxer">Boxer</option>
<option value="bull-terrier">Bull terrier</option>
<option value="bulldog frances">Bulldog francés</option>
<option value="caniche">Caniche</option>
<option value="chihuahua">Chihuahua</option>
<option value="chow-chow">Chow chow</option>
<option value="cockeringles">Cocker ingles</option>
<option value="cockerspaniel">Cocker spaniel</option>
<option value="salchica">Dachshund o perro salchicha</option>
<option value="doberman">Doberman</option>
<option value="dogoarg">Dogo Argentino</option>
<option value="dogodeburdeos">Dogo de burdeos</option>
<option value="filabrasileño">Fila brasileño</option>
<option value="fox-terrier-pelo-duro">Fox terrier pelo duro</option>
<option value="fox-terrier-pelo-liso">Fox terrier pelo liso</option>
<option value="goldenretriver">Golden retriver</option>
<option value="grandanes">Gran danes</option>
<option value="husky">Husky o siveriano</option>
<option value="labrador">Labrador</option>
<option value="maltes">Maltes</option>
<option value="Mastinnapolitano">Mastin napolitano</option>
<option value="ovejero">Ovejero aleman / perro policia / manto negro</option>
<option value="pinscher">Pinscher</option>
<option value="rottweiller">Rottweiller</option>
<option value="yorkshire">Yorkshire</option>
</select>
<label for="noaparece">Si la raza de tu perro no aparece en la lista, escribela aqui.</label>
<input type="text" id="noaparece" name="noaparece">
<div class="norecuerdo">
<label for="norecuerdoraza">No se / No recuerdo en este momento</label>
<input type="checkbox" id="norecuerdoraza" name="norecuerdoraza">
</div>
</div>
<hr>
<div class="identificacion info-mascota">
<div class="nombre">
<label for="nombre" class="titulo">Responde al nombre de...</label>
<input type="text">
</div>
<div class="norecuerdo">
<label for="norecuerdonombre">No se / No recuerdo en este momento</label>
<input type="checkbox" id="norecuerdonombre" name="norecuerdonombre">
</div>
</div>
<hr>
<div class="cuando info-mascota">
<div class="fecha"></div>
<label for="fecha" class="titulo">Se perdio en la fecha de</label>
<input type="datetime-local" id="fecha" name="fecha">
<em>La hora no necesariamente debe ser exacta</em>
</div>
<hr>
<div class="norecuerdo info-mascota">
<label for="norecuerdocuando">No se / No recuerdo en este momento</label>
<input type="checkbox" id="norecuerdocuando" name="norecuerdocuando">
</div>
<hr>
<div class="castrado info-mascota">
<p class="titulo">¿Esta castrad@?</p>
<input type="radio" id="siesta" name="castrado-pregunta">
<label for="siesta">Si, si lo esta</label>
<input type="radio" id="noesta" name="castrado-pregunta">
<label for="noesta">No, no lo esta</label>
<input type="radio" id="nolose" name="castrado-pregunta">
<label for="nolose">No se / No recuerdo</label>
</div>
<hr>
<div class="correa info-mascota">
<p class="titulo">¿Llevaba algo de la siguiente lista la ultima vez que lo vio?</p>
<em>Seleccione todas las que correspondan.</em>
<input type="checkbox" id="collar" name="collar">
<label for="collar">Collar</label>
<input type="checkbox" id="pechera" name="pechera">
<label for="pechera">Pechera</label>
<input type="checkbox" id="correa" name="correa">
<label for="correa">Correa</label>
<input type="checkbox" id="identificador" name="identificador">
<label for="identificador">Identificador*</label>
<input type="checkbox" id="ropa" name="ropa">
<label for="ropa">Ropa</label>
<em>*Alguna clase de "chapita" con el nombre y/o direccion de la mascota.</em>
</div>
<hr>
<div class="fotos info-mascota">
<p class="titulo">Suba hasta 10 fotos, la primera debe ser la principal. Se recomienda que sea una foto cuerpo completo de su mascota</p>
<div class="cuadro">
<span></span><span></span><span></span>
</div>
<input name="uploadedfile" type="file" />
<input type="submit" value="Subir archivo" />
<label for="caracteristica" class="titulo">Su su mascota tenia alguna caracteristica especial que desee detallar, hagalo en el cuadro de abajo.</label>
<textarea name="caracteristica" id="caracteristica" cols="30" rows="10" placeholder="Ejemplo: mancha con forma de corazon en al pecho, cicatriz de castracion"></textarea>
</div>
</div>
<div class="mapa">
<p class="titulo">Señala donde lo viste por ultima vez</p>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7121.571392862076!2d-65.2181429166667!3d-26.814951499999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1ses!2sar!4v1622657261533!5m2!1ses!2sar" width="900" height="400" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="datos-duenio">
<p class="titulo">¿Con quien comunicarse en caso de tener informacion sobre tu mascota?</p>
<div class="opcion">
<label for="">Opcion 1</label>
<label for="duenio">Nombre</label>
<input type="text" id="duenio" name="duenio">
<label for="celular">Celular</label>
<input type="number" id="celular" name="celular">
<label for="fijo">Tel. fijo</label>
<input type="number" id="fijo" name="fijo">
</div>
<div class="opcion">
<label for="">Opcion 2</label>
<label for="duenio2">Nombre</label>
<input type="text" id="duenio2" name="duenio2">
<label for="celular2">Celular</label>
<input type="number" id="celular2" name="celular2">
<label for="fijo2">Tel. fijo</label>
<input type="number" id="fijo2" name="fijo2">
</div>
</div>
</form>
</main>
</body>
</html>