-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontacto.html
141 lines (123 loc) · 8.15 KB
/
contacto.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
<!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">
<link rel="shortcut icon" href="./img/Logo.ico">
<title> Rincon Botanico - Formulario de Contacto</title>
<link rel="stylesheet" href="./css/estilos.css">
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 640px)">
<link rel="stylesheet" href="tablet.css" media="screen and (min-width: 640px) and (max-width: 1280px)">
<link rel="stylesheet" href="desktop.css" media="screen and (min-width: 1280px)">
<script src="./js/script.js" defer></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<script src="https://kit.fontawesome.com/947538507c.js" crossorigin="anonymous"></script>
<style>
input[type="submit"] {
margin-top: 10px;
/* Agregar un poco de espacio sobre el botón */
text-align: center;
/* Centrar horizontalmente el botón */
}
</style>
</head>
<body>
<header class="header">
</header>
<main>
<h1>Formulario de Contacto</h1>
<div class="form-location-section">
<div class="form-section">
<form id="contact-form" action="#" method="POST" onsubmit="return validation()">
<label for="nombre">* Nombre y Apellido:</label>
<input type="text" id="nombre" placeholder="Acá tu nombre" name="nombre"><br><br>
<label for="email">* Email:</label>
<input type="email" id="email" placeholder="Tu email válido" name="email"><br><br>
<label for="direccion">* Dirección:</label>
<input type="text" id="direccion" placeholder="Escribe tu dirección física" name="direccion"><br><br>
<label for="telefono">* Teléfono Celular:</label>
<input type="tel" id="telefono"
placeholder="Escribe el código de área y número de celular (sin 0 ni 15)" name="telefono"><br><br>
<label for="area">* Área que desea contactar:</label>
<select id="area" name="area" >
<option value="" disabled selected>Seleccionar área</option>
<option value="1">Oficina de Socios</option>
<option value="2">Oficina de Voluntarios</option>
<option value="3">Clubes de Observadores</option>
<option value="4">Conservación</option>
<option value="5">Cursos</option>
<option value="6">Casa Central Buenos Aires</option>
<option value="7">Oficina del Litoral - Santa Fe</option>
<option value="8">Oficina Centro - La Plata</option>
<option value="9">Biblioteca</option>
</select><br><br>
<div class="form-group">
<label for="mensaje">* Mensaje:</label>
<textarea id="mensaje" name="mensaje" rows="5" placeholder="Escribe tu mensaje aquí"></textarea>
</div>
<div class="form-group">
<label for="archivo">Adjuntar archivo (opcional):</label>
<input type="file" name="archivo" id="archivo" multiple>
</div>
<div class="form-group">
<label for="politica_privacidad">
<input type="checkbox" id="politica_privacidad" name="politica_privacidad">
<span>Acepto la política de <a id="politica"
href="https://www.argentina.gob.ar/sites/default/files/5554233a01.pdf">privacidad</a>.
*</span>
<span class="info-privacidad"><br>Información sobre protección de datos: el responsable del
tratamiento es Rincon Botanico. La finalidad del tratamiento de los datos facilitados en
este formulario será responder a su solicitud de información. Puede ejercer los derechos
que le reconoce la normativa de protección de datos mediante un correo electrónico a
[email protected]. Puede obtener más información sobre el tratamiento de sus
datos en nuestra politica de privacidad.</span>
</label>
</div>
<p id="obligatorios">Los campos marcados con * son obligatorios. Confirme que no hayan quedado sin
completar antes de presionar 'Enviar'.</p>
<div>
<button type="submit" id="submitBtn" class="submit-btn" disabled>Enviar</button>
</div>
</form>
</div>
<nav class="location">
<div class="location">
<p><b>CASA CENTRAL - BUENOS AIRES</b></p>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d29703.11430456864!2d-58.382259439463354!3d-34.603875098950695!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95a3351f97fbdf97%3A0xc0a4d539dc2254f!2sReserva%20Ecol%C3%B3gica%20Costanera%20Sur!5e0!3m2!1ses!2sar!4v1712682519585!5m2!1ses!2sar"
width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="location">
<p><b>OFICINA DEL LITORAL - SANTA FE</b></p>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12018.161377135999!2d-60.69107072385232!3d-31.636011380812693!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95b5a98821ae15d3%3A0x1a77cfe7b4ecf9bd!2sReserva%20Ecol%C3%B3gica%20de%20la%20Ciudad%20Universitaria%20-%20UNL!5e0!3m2!1ses!2sar!4v1712682168161!5m2!1ses!2sar"
width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="location">
<p><b>OFICINA CENTRO - LA PLATA</b></p>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d209551.34934840674!2d-58.43164560546878!3d-34.850200599999994!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95a2d8e9e5d9748b%3A0x16ea9515cac86c9b!2sReserva%20de%20Biosfera%20Pereyra%20Iraola!5e0!3m2!1ses!2sar!4v1712682697040!5m2!1ses!2sar"
width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</nav>
</div>
</main>
<footer class="footer">
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<script src="./js/script.js"></script>
</body>
</html>