Skip to content

Commit e6cea92

Browse files
armincanoarmincano
committed
feat: add bootstrap form
1 parent 8d7b4f8 commit e6cea92

File tree

4 files changed

+158
-7
lines changed

4 files changed

+158
-7
lines changed

‎m2-front-end-101/s4-responsive-and-mobile-first/mobile-first-kid-pix-users-manual/assets/styles.css

+11-3
Original file line numberDiff line numberDiff line change
@@ -264,7 +264,15 @@ nav ul {
264264
grid-area: tool-options;
265265
}
266266

267-
.wacky-tv {
267+
.img-grid-description {
268+
width: 44px;
269+
}
270+
271+
.img-grid-icon {
272+
width: 30px;
273+
}
274+
275+
.img-hidden {
268276
display: none;
269277
width: 100%;
270278
}
@@ -344,7 +352,7 @@ nav ul {
344352
display: none;
345353
}
346354

347-
.wacky-tv {
355+
.img-hidden {
348356
display: block;
349357
}
350358

@@ -464,7 +472,7 @@ nav ul {
464472
display: none;
465473
}
466474

467-
.wacky-tv {
475+
.img-hidden {
468476
display: block;
469477
}
470478

‎m2-front-end-101/s4-responsive-and-mobile-first/mobile-first-kid-pix-users-manual/index.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ <h1>Users Guide</h1>
6969
<img
7070
src="./assets/img/wacky-pencil-icon.png"
7171
alt="wacky pencil icon"
72-
width="44px"
72+
class="img-grid-description"
7373
/>
7474
</div>
7575
<div class="grid-item item-b">
@@ -97,7 +97,7 @@ <h2>Wacky Pencil</h2>
9797
<img
9898
src="./assets/img/cross-icon.png"
9999
alt="cross icon"
100-
width="30px"
100+
class="img-grid-icon"
101101
/>
102102
</div>
103103
<p class="col-xs-10 col-sm-10 col-md-4 col-lg-10 col-xl-11">
@@ -109,7 +109,7 @@ <h2>Wacky Pencil</h2>
109109
<img
110110
src="./assets/img/secret-icon.png"
111111
alt="cross icon"
112-
width="30px"
112+
class="img-grid-icon"
113113
/>
114114
</div>
115115
<p class="col-xs-10 col-sm-10 col-md-4 col-lg-10 col-xl-11">
@@ -120,7 +120,7 @@ <h2>Wacky Pencil</h2>
120120
<img
121121
src="./assets/img/wacky-color-2000.png"
122122
alt="clip of wacky pencil in action"
123-
class="wacky-tv"
123+
class="img-hidden"
124124
/>
125125
</div>
126126
</div>

‎m2-front-end-101/s5-s6-bootstrap/form/filled-form.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="es-cl">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Respuesta enviada</title>
7+
<link
8+
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
9+
rel="stylesheet"
10+
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
11+
crossorigin="anonymous"
12+
/>
13+
</head>
14+
<body>
15+
<div class="container-fluid vh-100 d-flex justify-content-center align-items-center bg-primary">
16+
<div class="card" style="width: 38rem">
17+
<div class="card-body">
18+
<h1 class="card-title">Recibirás una respuesta por correo 😃</h1>
19+
<p class="card-text">
20+
Si no la recibes en 15 minutos intente nuevamente.
21+
</p>
22+
</div>
23+
</div>
24+
</div>
25+
26+
<script
27+
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
28+
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
29+
crossorigin="anonymous"
30+
></script>
31+
</body>
32+
</html>

‎m2-front-end-101/s5-s6-bootstrap/form/form.html

+111
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<!DOCTYPE html>
2+
<html lang="es-cl">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Formulario Bootstrap</title>
7+
<link
8+
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
9+
rel="stylesheet"
10+
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
11+
crossorigin="anonymous"
12+
/>
13+
</head>
14+
<body>
15+
<main>
16+
<div class="container my-4">
17+
<form action="./filled-form.html" class="row g-3" id="userForm">
18+
<div class="col-md-4">
19+
<label for="userName" class="form-label">Nombre</label>
20+
<input
21+
type="text"
22+
class="form-control"
23+
id="userName"
24+
placeholder="Armin"
25+
required
26+
/>
27+
</div>
28+
29+
<div class="col-md-4">
30+
<label for="userSurname" class="form-label">Apellido</label>
31+
<input
32+
type="text"
33+
class="form-control"
34+
id="userSurname"
35+
placeholder="Cano"
36+
required
37+
/>
38+
</div>
39+
40+
<div class="col-md-4">
41+
<label for="userNameOfUser" class="form-label"
42+
>Nombre de usuario</label
43+
>
44+
<div class="input-group mb-3">
45+
<span class="input-group-text">@</span>
46+
<input
47+
type="text"
48+
class="form-control"
49+
id="userNameOfUser"
50+
placeholder="armincano"
51+
aria-label="nombre de usuario"
52+
required
53+
/>
54+
</div>
55+
</div>
56+
57+
<div class="col-md-6">
58+
<label for="userCity" class="form-label">Ciudad</label>
59+
<input
60+
type="text"
61+
class="form-control"
62+
id="userCity"
63+
placeholder="Villarrica"
64+
required
65+
/>
66+
</div>
67+
68+
<div class="col-md-3">
69+
<label for="reasonSelect" class="form-label">Motivo</label>
70+
<select
71+
class="form-select"
72+
id="reasonSelect"
73+
aria-label="Default select example"
74+
>
75+
<option selected>Depósito</option>
76+
<option value="1">Giro</option>
77+
<option value="2">Consulta de Saldo</option>
78+
</select>
79+
</div>
80+
81+
<div class="col-md-5">
82+
<label class="form-check-label" for="areAnswersShown">
83+
¿Desea ver la respuesta en pantalla?
84+
</label>
85+
<div class="form-check">
86+
<input
87+
class="form-check-input"
88+
type="checkbox"
89+
value="showAnswers"
90+
id="areAnswersShown"
91+
checked
92+
/>Si
93+
</div>
94+
</div>
95+
96+
<div class="col-md-12">
97+
<button type="submit" class="btn btn-primary mb-3">
98+
Solicitar
99+
</button>
100+
</div>
101+
</form>
102+
</div>
103+
</main>
104+
105+
<script
106+
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
107+
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
108+
crossorigin="anonymous"
109+
></script>
110+
</body>
111+
</html>

0 commit comments

Comments
 (0)