-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy patheditar_cuenta.html
158 lines (152 loc) · 8.99 KB
/
editar_cuenta.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
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/estilos_menu.css">
<link rel="icon" href="images/favicon_sylard3.svg" sizes="any" type="image/svg+xml">
<link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="fonts/style.css">
<link rel="stylesheet" href="css/bootstrap-grid.css"> <!--GRID SOLAMENTE-->
<title>SYLARD Editar Cuenta</title>
</head>
<body>
<header>
<div class="container-fluid back_aqua">
<!--INICIA barra de navegacion superior-->
<nav class="container contenedor_ancho_area_principal ">
<div class="contenedor_switch float_left">
<label class="texto" for="checkbox">ESP</label>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span></label>
<label class="texto" for="checkbox">ENG</label>
</div>
<div class="barra_superior_elemento float_left "><a href="#" ><span class="icono icon-home1"></span> SYLARD</a></div>
<!-- la clase "ACTIVE" se usa en la sección que esta activa--> <!-- En el caso de HOME este elemento desaparece, ya que hay un icono en la barra publico-->
<!-- <div class="barra_superior_elemento float_right"><a class="" href="login.html">ACCESAR <span class="icono icon-login"></span></a></div>
<div class="barra_superior_elemento float_right"><a href="registro.html" class="active_a">REGISTRO <span class="icono icon-person"></span></a></div>-->
<div class="barra_superior_elemento dropdown_menu_usuario float_right">
<button class="dropbtn_barra_superior">
<div class="contenedor_icono_usuario"><img src="images/iconousuario.svg" class="imagen_icono_usuario" alt="Ícono de venado usuario"></div>
Emiliano Zapata <span class="icono icon-angle-down" id="flecha_dropdow_barra_superior"></span>
</button>
<div class="contenido_dropdown_menu_usuario">
<a href="#"><span class="icono_dropdown_menu_usuario_item icon-edit"></span> Editar cuenta</a>
<a href="#"><span class="icono_dropdown_menu_usuario_item icon-key1"></span> Editar contraseña</a>
<a href="#"><span class="icono_dropdown_menu_usuario_item icon-folder-open-o"></span> Mis colecciones</a>
<a href="#">Link 1 </a>
<a href="#">Link 2</a>
<a class="dropdown_menu_usuario_logout" href="#"><span class="icono_dropdown_menu_usuario_item icon-log-out"></span> Cerrar sesión</a>
</div>
</div>
</nav>
<!--TERMINA barra de navegacion superior-->
</div>
</header>
<main>
<div class="container-fluid" id="contenedor_editar_cuenta">
<div class="extension_fondo_blanco_izquierdo d-sm-none d-md-block"></div>
<div class="container">
<div class="row contenedor-90vh" id="fila1_editar_cuenta">
<div class="col-md-7" id="columna_izquierda_editar_cuenta">
<div class="" id="columna_izquierda_editar_cuenta_anidada">
<h1 class=""><span class="icono_principal_mensaje icon-edit" id="icono_principal_editar_cuenta"></span></h1>
<h1>Editar cuenta</h1>
<h3>Edita los campos y pulsa el botón de guardar</h3>
<form method="post" action="#" role="form" class="formulario_contenedor">
<div id="selector_colaborador">
<p class="label">Actualiza tus privilegios de usuario:*</p>
<div class="contenedor_switch_formularios">
<label class="swich_etiqueta_opcion1" for="checkbox" id="switch_usuario_visitante">Visitante</label>
<label class="switch_general">
<input type="checkbox" class="checkbox_colaborador" requiered>
<span class="slider_general round"></span></label>
<label class="swich_etiqueta_opcion2" for="checkbox" id="switch_usuario_colaborador">Colaborador</label>
</div>
</div>
<div class="contenedor_inputs">
<label class="label" for="name">Nombre:</label>
<input type="text" id="name" placeholder="Emiliano" required>
<div class="contenedor_icono_correcto_input"><p><span class="icono_correcto_input icon-check_circle"></span></p></div>
<div class="contenedor_icono_error_input"><p><span class="icono_error_input icon-error"></span></p></div>
</div>
<div class="contenedor_inputs">
<label class="label" for="last_name">Apellido paterno:</label>
<input type="text" id="last_name" placeholder="Zapata" required>
<div class="contenedor_icono_correcto_input"><p><span class="icono_correcto_input icon-check_circle"></span></p></div>
<div class="contenedor_icono_error_input"><p><span class="icono_error_input icon-error"></span></p></div>
</div>
<div class="contenedor_inputs">
<label class="label" for="mothers_last_name">Apellido materno:</label>
<input type="text" id="mothers_last_name" placeholder="Salazar" required>
<div class="contenedor_icono_correcto_input"><p><span class="icono_correcto_input icon-check_circle"></span></p></div>
<div class="contenedor_icono_error_input"><p><span class="icono_error_input icon-error"></span></p></div>
</div>
<div class="contenedor_inputs">
<label class="label" for="email"><span class="icon-email"></span> Correo electrónico:</label>
<input type="email" id="email" placeholder="Email" required>
<div class="contenedor_icono_correcto_input"><p><span class="icono_correcto_input icon-check_circle"></span></p></div>
<div class="contenedor_icono_error_input"><p><span class="icono_error_input icon-error"></span></p></div>
</div>
<div class="contenedor_inputs">
<label class="label" for="country">País de origen</label>
<input type="search" id="country" list="countries" placeholder="Selecciona tu país de origen" role="listbox" required>
<div class="contenedor_icono_correcto_input"><p><span class="icono_correcto_input icon-check_circle"></span></p></div>
<div class="contenedor_icono_error_input"><p><span class="icono_error_input icon-error"></span></p></div>
<datalist id="countries">
<option value="" disabled selected>Selecciona país</option>
<option value="México">México</option>
<option value="Estados Unidos">Estados Unidos</option>
<option value="Panama">Panama</option>
</datalist>
</div>
<div class="contenedor_inputs" id="lenguas_habladas_input">
<label class="label" for="lenguas_habladas">Lenguas habladas</label>
<input type="search" class="input_con_boton_derecha" id="langSearch" list="languages" placeholder="Selecciona la lengua y agrega" role="listbox">
<datalist id="languages">
<option value="" disabled selected>Selecciona lengua</option>
<option value="Mixteco">Mixteco</option>
<option value="Yoloxochitl">Yoloxochitl</option>
<option value="Amuzgo">Amuzgo</option>
</datalist>
<button class="btn btn-predeterminado btn_input_derecha" id="boton_agregar"><span class="icon-plus"></span></button>
</div>
<div class="contenedor_inputs" id="contenedor_inputs_con_boton">
<label class="label" for="about_you">Cuentanos acerca de ti</label>
<textarea id="about_you" name="aboutyou" placeholder="¿A qué te dedicas? ¿Para qué usarías SYLARD?" rows="3"></textarea>
</div>
<div class="contenedor_inputs" id="lenguas_agregadas_input_seleccionadas">
<label class="label" for="lenguas_agregadas">Lenguas agregadas</label>
<textarea id="lenguas_agregadas_input" name="lenguas_agregadas" class="" placeholder="Aquí aparecen las lenguas que agregaste" rows="3"></textarea>
</div>
<div class="">
<button class="btn btn_input_derecha" id="boton_quitar"><span class="icon-minus"></span></button>
</div>
<div class="contenedor_botones_registro">
<p class="secundario float_left">*Sólo puedes solicitar promoción a colaborador</p>
<button type="submit" class="btn btn-primario float_right">Guardar</button>
<!--<button type="reset" class="btn btn-secundario float_right">Restablecer</button>-->
</div>
</form>
</div>
</div>
<div class="" id="columna_derecha_editar_cuenta_anidada">
<img class="" src="images/cactus_tudela.svg" id="img_editar_cuenta" alt="Cactus códice Tudela">
</div>
</div>
</div>
</div>
</main>
<footer>
<div class="container-fluid contenedor_ancho_total back_aqua_0">
<div class="container contenedor_footer">
<a href="#">Terminos y condiciones</a>
<a href="#">Aviso de privacidad</a>
<a href="#" target="_blank"><span class="icono_footer icon-github"></span></a>
<p>© Derechos reservados SYLARD</p><img src="images/favicon_sylard3.svg" alt="Logo SYLARD">
</div>
</div>
</footer>
</body>
</html>