-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfive-edit-account.html
134 lines (131 loc) · 4.59 KB
/
five-edit-account.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
<!DOCTYPE html>
<html lang="en">
<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">
<!--Esto viene de google fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap" rel="stylesheet">
<!--Ver la linea __ de estilos, body para agregar esa fuente al html-->
<title>Document</title>
<style>
:root { /*Esto dice que van a haber variables en css*/
--black: #000000;
--white:#FFFFFF;
--very-light-pink:#C7C7C7;
--text-input-field:#f7f7f7;
--hospital-green:#ACD9B2;
--lg:18px; /*tamaño de letras*/
--md:16px;
--sm:14px;
/*Estas variables ya están predeterminadas por los standars del proyecto*/
}
@media (max-width:640px){
.form-container {
height: 100%;
}
.form {
justify-content: space-between;
}
}
body {
font-family: 'Quicksand', sans-serif; /*Así no se repite lo mismo en n
cantidad de etiquetas, y es más especifico*/
margin: 0;
}
.login {
width: 100%;
height: 100vh;
display: grid; /*Con esto se centra todo lo que haya en un div*/
place-items: center;
}
.form-container {
display: grid; /*Se organizan los objetos en forma de celdas*/
grid-template-rows:auto 1fr auto; /*Hace que el icono y el botón se acomoden con el
espacio que sobre. Mientras que el formulario ocupe una fracción. Así no se dañará el
formulario cuando salgan las advertencias*/
width: 300px;
}
.title {
font-size: var(--lg); /*Así se usan las variables :D*/
margin-bottom: 36px;
text-align: start;
}
.form {
display: flex; /*Esto hace que todo se acomode hacia abajo, sin necesidad de <br> y eso*/
flex-direction: column;
}
/* .form div {
display: flex;
flex-direction: column;
} */
.label {
font-size: var(--sm);
font-weight: bold;
margin-bottom: 4px;
}
/*.input {
background-color: var(--white);
border:none;
border-radius: 8px;
height:32px;
width: 100%;
font-size: var(--md);
padding: 4px;
margin-bottom: 20px;
}
.input-name,
.input-mail,
.input-passwrd {
margin-bottom: 22px;
}*/
.value {
height: 32px;
width: 100%;
font-size: var(--md);
color: var(--very-light-pink);
margin: 8px 0 32px 0;
}
.secondary-button {
background-color: var(--white);
border-radius: 8px;
border: 1px solid var(--hospital-green);
color: var(--hospital-green);
font-size: var(--md);
font-weight: bold;
width: 100%;
height: 48px;
cursor:pointer;
margin-top: 30px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="login"> <!--Contiene el view-->
<div class="form-container"> <!--Contiene logos, labels y demás-->
<h1 class="title">My account</h1>
<form action="/" class="form">
<div>
<label for="name" class="label">
Name
</label>
<p id="name" class="value">Camila Yoko</p>
<label for="email-adress" class="label">
Email adress
</label>
<p id="email-adress" class="value">[email protected]</p>
<label for="input-password" class="label">
Password
</label>
<p id="input-password" class="value">********</p>
</div>
<input type="submit"
value="Edit account" class="secondary-button edit-button"> <!--la primera clase, es la general. La segunda, es la clase para agregarle cosas al botón-->
</form>
</div>
</div>
</body>
</html>