-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathregistro.html
144 lines (134 loc) · 5.85 KB
/
registro.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
<!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" />
<meta name="description" content="Petinder es una organizacion que fomenta la adopcion de perros y gatos" />
<link rel="stylesheet" href="css/estilos.css" />
<title>Hazte socio</title>
<link rel="icon" type="image/x-icon" href="images/icon.ico" />
</head>
<body class="page-registro">
<header>
<nav class="container">
<a class="link-logo" href="index.html">
<img class="logo" src="images/logo.svg" alt="Logo de Petinder" />
</a>
<ul class="menu-links">
<li><a href="about.html">Sobre Petinder</a></li>
<li><a href="tshirt.html">Camiseta</a></li>
<li class="active"><a href="">Hazte socio</a></li>
</ul>
</nav>
</header>
<main>
<div class="container">
<h1 class="title">Hazte socio</h1>
<p>
Colabora con Petinder haciéndote socio por 15 euros mensuales. Con muy
poco puedes ayudar mucho a nuestros amigos peludos. Además puedes
comprar nuestra exclusiva camiseta por solo 10 euros que se añadirán
al primer pago. Rellena el siguiente formulario para unirte a
nosotros:
</p>
<form>
<fieldset>
<legend>Datos personales</legend>
<label for="name" class="required">Nombre</label>
<input id="name" type="text" name="name" placeholder="Nombre" required />
<label for="apellidos" class="required">Apellidos</label>
<input id="apellidos" type="text" name="apellidos" placeholder="Apellidos" required />
<label for="mail" class="required">Correo electrónico</label>
<input id="mail" type="text" name="mail" placeholder="Correo electrónico" required />
<label for="dni" class="required">DNI</label>
<input id="dni" type="text" name="dni" placeholder="DNI" required />
<label for="fecha">Fecha de nacimiento</label>
<input id="fecha" type="text" name="fecha" placeholder="dd/mm/aaaa" class="date-control"
pattern="\d{2}/\d{2}/\d{4}" title="Formato válido: dd/mm/aaaa" required />
</fieldset>
<fieldset>
<legend>Dirección</legend>
<label for="calle" class="required">Calle y número</label>
<input id="calle" type="text" name="calle" placeholder="Calle y número" required />
<label for="ciudad" class="required">Ciudad</label>
<input id="ciudad" type="text" name="ciudad" placeholder="Ciudad" required />
<label for="provincia" class="required">Provincia</label>
<input id="provincia" type="text" name="provincia" placeholder="Provincia" required />
<label for="cod_postal" class="required">Código Postal</label>
<input id="cod_postal" type="text" name="cod_postal" placeholder="Código postal" required />
<label for="pais">País</label>
<div class="pais-dropdown">
<select id="pais" name="pais">
<option value="" selected>Seleccionar</option>
<option value="seleccionar">✓ Seleccionar</option>
<option value="andorra">Andorra</option>
<option value="españa">España</option>
<option value="francia">Francia</option>
<option value="otro">Otro</option>
</select>
</div>
</fieldset>
<fieldset>
<legend>Datos de pago y camiseta</legend>
<h3>Método de pago</h3>
<div class="opciones-pago">
<input id="transfer" type="radio" name="pago" value="transferencia" checked required />
<label for="transfer">Transferencia</label>
<input id="tarjeta" type="radio" name="pago" value="tarjeta" />
<label for="tarjeta">Tarjeta de crédito</label>
<input id="paypal" type="radio" name="pago" value="paypal" />
<label for="paypal">Paypal</label>
</div>
<h3>Camiseta</h3>
<p>
Si quieres que te enviemos la camiseta Petinder por 10€ más,
selecciona la talla a continuación:
</p>
<p class="talla-camiseta">Talla camiseta</p>
<div class="camiseta-dropdown">
<select id="tallaCamiseta" name="tallaCamiseta">
<option value="" selected>No quiero camiseta</option>
<option value="XL">✓ No quiero camiseta</option>
<optgroup label="Mujeres">
<option value="XL">XL</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
</optgroup>
<optgroup label="Hombres">
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="XL">XXL</option>
<option value="XL">XXXL</option>
</optgroup>
</select>
</div>
</fieldset>
</form>
<p class="camposObligatorios">
* Todos los campos marcados son obligatorios
</p>
<p>
<input type="checkbox" name="suscribirse" /> He leido y acepto la
política de privacidad y las condiciones de uso.
</p>
<button id="enviar" type="submit">Enviar</button>
</div>
</main>
<footer>
<div class="container">
<span> 2021 © Petinder - Sara Ares Goycolea</span>
<ul class="legal-links">
<li><a href="">Términos y condiciones de uso</a></li>
<li><a href="">Política y privacidad</a></li>
<li><a href="">Cookies</a></li>
<li><a href="">FAQ</a></li>
</ul>
</div>
</footer>
</body>
</html>