-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathcontacto.html
161 lines (147 loc) · 7.97 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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--agregar bs5-->
<link href="css/style.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<!--fin bs5-->
<title>Contacto</title>
</head>
<body>
<section class="barra-nav">
<!--navbar-->
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">Huella Compartida</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll"
aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="nosotros.html">Nosotros</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="tienda.html" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Tienda
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="tiendaPerros.html">Perros</a></li>
<li><a class="dropdown-item" href="tiendaGatos.html">Gatos</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="fundacionNuestraHuella.html">Fundación Nuestra Huella</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="contacto.html">Contacto</a>
</li>
<li class="nav-item">
<a class="nav-link" href="donaciones.html">Donaciones</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Somos parte de Fundación Nuestra Huella</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="¿Qué deseas buscar?"
aria-label="Búsqueda">
<button class="btn btn-outline-success" type="submit">Buscar</button>
</form>
</div>
</div>
</nav>
<!--fin navbar-->
</section>
<section class="imagen-seccion">
<div class="imagen-container">
<!-- Imagen que ocupa el ancho completo del viewport -->
<img src="img/header2.jpg">
</div>
</section>
<section class="fondo-seccion">
<div class="container-text">
<h1 class="h1-personalizado">Conecta con nosotros</h1>
<p class="parrafo-personalizado">¡Nos encantaría saber de ti! En Huella Compartida, tu voz es esencial para fortalecer nuestra comunidad y mejorar la
vida de nuestras mascotas y las de la fundación Nuestra Huella. Si tienes preguntas, sugerencias o simplemente quieres
compartir la historia de tu mascota con nosotros, no dudes en escribirnos. Tu participación es clave para que sigamos
creciendo y ofreciendo lo mejor para nuestros amigos de cuatro patas. Contáctanos y juntos podemos hacer una diferencia
significativa. ¡Tu apoyo y tus ideas son siempre bienvenidos en nuestra gran familia animal!
</p>
</div>
</section>
<section class="form-section">
<div class="container-form">
<form>
<!--Selección de acciones-->
<div class="container form-floating">
<select class="form-select" id="floatingSelect" aria-label="Floating label select example">
<option selected>¿Qué deseas hacer?</option>
<option value="1">Sugerencias</option>
<option value="2">Preguntas</option>
<option value="3">Comentarios</option>
</select>
<label for="floatingSelect">Opciones</label>
</div>
<!--Nombre y apellido-->
<div class="container input-group">
<span class="input-group-text">Nombre y apellido</span>
<input type="text" aria-label="Nombre" class="form-control">
<input type="text" aria-label="Apellido" class="form-control">
</div>
<!--Ciudad y comuna-->
<select class="container form-select" aria-label="Default select example">
<option selected>Región</option>
<option value="1">Metropolitana</option>
<option value="2">Bío - Bío</option>
<option value="3">Maule</option>
</select>
<select class="container form-select" aria-label="Default select example">
<option selected>Ciudad</option>
<option value="1">Santiago</option>
<option value="2">Valparaiso</option>
<option value="3">Concepción</option>
</select>
<select class="container form-select" aria-label="Default select example">
<option selected>Comuna</option>
<option value="1">Las Condes</option>
<option value="2">La Frorida</option>
<option value="3">San Bernardo</option>
</select>
<!--Teléfono y mail-->
<div class="row">
<div class="col">
<label for="exampleFormControlInput1" class="form-label">Teléfono</label>
<input type="number" class="form-control" id="exampleFormControlInput1" placeholder="56993937474" aria-label="Teléfono">
</div>
<div class="col">
<label for="exampleFormControlInput2" class="form-label">Email</label>
<input type="email" class="form-control" id="exampleFormControlInput2" placeholder="[email protected]" aria-label="Email">
</div>
</div>
<!--Mensaje-->
<div class="container mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Mensaje</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
<br>
<button type="reset">Enviar</button>
</div>
</form>
</div>
</section>
<!--formulario de contacto-->
</body>
</html>