Skip to content

Commit c362644

Browse files
ibrahimhc19ibrahimhc19
committed
cambiando estilos
1 parent cf2350e commit c362644

4 files changed

Lines changed: 37 additions & 27 deletions

File tree

‎02 - Login Form/index.html‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,19 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<!-- Favicon -->
7+
<link rel="icon" type="image/png" sizes="32x32" href="../favicon/ms-icon-32x32.png">
8+
<link rel="apple-touch-icon" sizes="60x60" href="../favicon/apple-icon-60x60.png">
9+
<!-- Hojas de estilo -->
610
<link rel="stylesheet" href="./styles.css">
7-
<title>Document</title>
11+
<title>Login card</title>
812
</head>
913
<body>
1014

1115
<div class="form-container">
1216
<h1 class="titulo">Login</h1>
13-
<input type="text" name="text" class="userName" placeholder="username">
14-
<input type="password" placeholder="password" class="password">
17+
<input type="text" name="text" class="userName" placeholder="username" required>
18+
<input type="password" placeholder="password" class="password" minlength="8" maxlength="12">
1519
<button class="loginBtn">Login</button>
1620
</div>
1721

‎02 - Login Form/styles.css‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,9 @@
1414
--bg-color: linear-gradient(217deg, #F1B6E0, rgba(255, 0, 0, 0) 70.71%),
1515
linear-gradient(127deg, #B3B0F8, rgba(0, 255, 0, 0) 70.71%),
1616
linear-gradient(336deg, #8ADDF8, rgba(0, 0, 255, 0) 70.71%);
17-
--altura: 5rem;
1817
}
1918

2019
body{
21-
/* background-color: #dbcce9; */
2220
background: var(--bg-color);
2321
display: flex;
2422
justify-content: center;
@@ -31,7 +29,6 @@ body{
3129
.form-container{
3230
width: 350px;
3331
height: 450px;
34-
/* background: var(--bg-color); */
3532
background: var(--bg-color);
3633
border-radius: 1rem;
3734
display: flex;
@@ -42,33 +39,41 @@ body{
4239

4340
.userName, .password{
4441
padding: .7rem 2rem .7rem 0;
45-
/* border-radius: 2rem; */
4642
margin: 1rem;
4743
outline: none;
4844
border: none;
49-
/* text-align: center; */
50-
/* width: 15rem; */
5145
background: transparent;
5246
border-bottom: solid 1px white;
47+
font-size: 1rem;
48+
width: 14rem;
49+
transition: all .3s;
5350
}
5451

5552
.titulo{
56-
margin-bottom: 2rem;
53+
margin-bottom: 1rem;
54+
user-select: none;
5755
}
5856

5957
.loginBtn{
60-
padding: 1rem 3rem;
61-
/* border-radius: 6rem; */
58+
padding: .5rem 2rem;
6259
border: none;
6360
outline: none;
6461
background: transparent;
6562
font-size: 1rem;
6663
cursor: pointer;
6764
border: solid 1px white;
6865
margin-top: 1rem;
69-
transition: all .5s;
66+
transition: all .3s;
7067
}
7168

7269
.loginBtn:hover{
7370
transform: scale(1.1);
71+
}
72+
73+
.userName::placeholder, .password::placeholder{
74+
color: white;
75+
}
76+
77+
.userName:focus, .password:focus{
78+
width: 15rem;
7479
}

‎index.html‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,11 @@ <h2 class="my-5 text-center fw-bold">Índice</h2>
3232
<li class="list-group-item list-group-item-action"><a href="./01-NavBar - Bootstrap - Offcanvas/index.html" target="_blank">Proyecto 1 HTML, CSS y BOOTSTRAP (Offcanvas)</a></li>
3333
</ul>
3434
</div>
35-
<!-- <div class="mt-3">
35+
<div class="mt-3">
3636
<ul class="list-group">
37-
<li class="list-group-item list-group-item-action"><a href="./01-NavBar/index.html" target="_blank">Proyecto 1 HTML, CSS</a></li>
38-
<li class="list-group-item list-group-item-action"><a href="./01-NavBar - Javascript/index.html" target="_blank">Proyecto 1 HTML, CSS y JS</a></li>
39-
<li class="list-group-item list-group-item-action"><a href="./01-NavBar - Bootstrap//index.html" target="_blank">Proyecto 1 HTML, CSS y BOOTSTRAP</a></li>
40-
<li class="list-group-item list-group-item-action"><a href="./01-NavBar - Bootstrap - Offcanvas/index.html" target="_blank">Proyecto 1 HTML, CSS y BOOTSTRAP (Offcanvas)</a></li>
37+
<li class="list-group-item list-group-item-action"><a href="./02 - Login Form/index.html" target="_blank">Proyecto 2 HTML, CSS y JS</a></li>
4138
</ul>
42-
</div> -->
39+
</div>
4340

4441

4542
</div>

‎styles.css‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,30 @@
33
padding: 0;
44
color: #1c2ed496;
55
list-style: none;
6-
text-decoration: none!important;
6+
text-decoration: none !important;
77
box-sizing: border-box;
8-
font-family: 'Ubuntu', sans-serif;
8+
font-family: "Ubuntu", sans-serif;
99
-webkit-tap-highlight-color: transparent;
1010
user-select: none;
1111
}
12-
12+
:root {
13+
--bg-color: linear-gradient(217deg, #f1b6e0, rgba(255, 0, 0, 0) 70.71%),
14+
linear-gradient(127deg, #b3b0f8, rgba(0, 255, 0, 0) 70.71%),
15+
linear-gradient(336deg, #8addf8, rgba(0, 0, 255, 0) 70.71%);
16+
}
1317

1418
body {
1519
background-color: #dbcce9;
1620
}
1721

1822
.list-group-item {
19-
margin: .3rem;
23+
margin: 0.3rem;
2024
}
2125

22-
.list-group-item a{
23-
padding: .2rem;
26+
.list-group-item a {
27+
padding: 0.2rem;
2428
}
2529

26-
.list-group-item{
30+
.list-group-item {
2731
background-color: #f0dfff;
28-
}
32+
}

0 commit comments

Comments
 (0)