Skip to content

Commit 0d0ecbd

Browse files
author
Marie Nei
committed
add lesson 05-02-specific-child-pattern
1 parent c2bab6c commit 0d0ecbd

22 files changed

+15469
-0
lines changed

‎05-Selector-patterns/02-specific-child-pattern/.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
css
3+
dist

‎05-Selector-patterns/02-specific-child-pattern/.stylelintrc.json

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"overrides": [
3+
{
4+
"files": ["**/*.scss"]
5+
}
6+
],
7+
"extends": [
8+
"stylelint-config-standard-scss",
9+
"stylelint-config-rational-order"
10+
],
11+
"rules": {
12+
"indentation": "tab",
13+
"scss/dollar-variable-pattern": null,
14+
"scss/dollar-variable-empty-line-before": null,
15+
"selector-id-pattern": null,
16+
"selector-class-pattern": null,
17+
"declaration-empty-line-before": null,
18+
"plugin/rational-order": [
19+
true,
20+
{
21+
"empty-line-between-groups": true
22+
}
23+
]
24+
}
25+
}

‎05-Selector-patterns/02-specific-child-pattern/README.md

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# css-selectors-best-practices
2+
3+
## To run this project
4+
5+
```bash
6+
npm install
7+
# To watch scss files
8+
npm run watch
9+
# To compile scss files
10+
npm run build
11+
```

‎05-Selector-patterns/02-specific-child-pattern/img/conferences/AldaLovers.jpeg

6.21 KB
Loading

‎05-Selector-patterns/02-specific-child-pattern/img/conferences/BilboStack.jpeg

3.79 KB
Loading

‎05-Selector-patterns/02-specific-child-pattern/img/conferences/LicorcaConf.png

79.3 KB
Loading

‎05-Selector-patterns/02-specific-child-pattern/img/conferences/SCPNA.jpeg

4.48 KB
Loading

‎05-Selector-patterns/02-specific-child-pattern/img/conferences/T3chFest.jpeg

9.09 KB
Loading

‎05-Selector-patterns/02-specific-child-pattern/img/conferences/Zurracapote.png

118 KB
Loading

‎05-Selector-patterns/02-specific-child-pattern/img/socialMedia/codely.jpeg

4.85 KB
Loading

‎05-Selector-patterns/02-specific-child-pattern/img/socialMedia/twitter.png

3.87 KB
Loading

‎05-Selector-patterns/02-specific-child-pattern/index.html

+324
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,324 @@
1+
<!DOCTYPE html>
2+
<html lang="es">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="referrer" content="no-referrer-when-downgrade" />
6+
<title>📡 Tech Conferences</title>
7+
<meta name="description" content="Space related news" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
9+
<link rel="preconnect" href="https://fonts.googleapis.com" />
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
11+
<link
12+
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap"
13+
rel="stylesheet"
14+
/>
15+
<link href="css/index.css" rel="stylesheet" type="text/css" media="all" />
16+
</head>
17+
18+
<body>
19+
<div class="page_container">
20+
<header class="page_header">
21+
<span class="page_header__title">📡 Tech Conferences</span>
22+
<ul class="social_media">
23+
<li>
24+
<a
25+
href="https://twitter.com/codelyTV"
26+
rel="noopener noreferrer"
27+
target="_blank"
28+
>
29+
<img
30+
class="social_media__logo"
31+
src="img/socialMedia/twitter.png"
32+
alt="Twitter de Codely"
33+
/>
34+
</a>
35+
</li>
36+
<li>
37+
<a
38+
href="https://codely.com/"
39+
rel="noopener noreferrer"
40+
target="_blank"
41+
>
42+
<img
43+
class="social_media__logo"
44+
src="img/socialMedia/codely.jpeg"
45+
alt="Web de Codely"
46+
/>
47+
</a>
48+
</li>
49+
</ul>
50+
</header>
51+
<main>
52+
<h1 class="sr-only">Spanish tech conference</h1>
53+
<section class="conference_list">
54+
<article class="card">
55+
<span class="card__tag">Sold out</span>
56+
<figure class="card__media">
57+
<img
58+
class="card__image"
59+
src="img/conferences/BilboStack.jpeg"
60+
alt="BilboStack"
61+
/>
62+
<figcaption class="card__caption">Enero</figcaption>
63+
</figure>
64+
<section class="card__content">
65+
<div>
66+
<input type="checkbox" id="bilbostack" />
67+
<label for="bilbostack">Bilbostack</label>
68+
</div>
69+
<a
70+
class="card__link"
71+
href="https://bilbostack.com/"
72+
rel="noopener noreferrer"
73+
target="_blank"
74+
>
75+
+info
76+
</a>
77+
</section>
78+
</article>
79+
<article class="card">
80+
<span class="card__tag">Sold out</span>
81+
<figure class="card__media">
82+
<img
83+
class="card__image"
84+
src="img/conferences/T3chFest.jpeg"
85+
alt="T3chFest"
86+
/>
87+
<figcaption class="card__caption">Marzo</figcaption>
88+
</figure>
89+
<section class="card__content">
90+
<div>
91+
<input type="checkbox" id="t3chfest" />
92+
<label for="t3chfest">T3chFest</label>
93+
</div>
94+
<a
95+
class="card__link"
96+
href="https://t3chfest.es/2023/"
97+
rel="noopener noreferrer"
98+
target="_blank"
99+
>
100+
+Info
101+
</a>
102+
</section>
103+
</article>
104+
<article class="card">
105+
<figure class="card__media">
106+
<img
107+
class="card__image"
108+
src="img/conferences/Zurracapote.png"
109+
alt="Zurracapote"
110+
/>
111+
<figcaption class="card__caption">Marzo</figcaption>
112+
</figure>
113+
<section class="card__content">
114+
<div>
115+
<input type="checkbox" id="zurracapote" />
116+
<label for="zurracapote">Zurracapote</label>
117+
</div>
118+
<a
119+
class="card__link"
120+
href="https://zurracapoteconf.appspot.com/"
121+
rel="noopener noreferrer"
122+
target="_blank"
123+
>
124+
+Info
125+
</a>
126+
</section>
127+
</article>
128+
<article class="card">
129+
<figure class="card__media">
130+
<img
131+
class="card__image"
132+
src="img/conferences/SCPNA.jpeg"
133+
alt="pamplona Sofware Crafters"
134+
/>
135+
<figcaption class="card__caption">Junio</figcaption>
136+
</figure>
137+
<section class="card__content">
138+
<div>
139+
<input type="checkbox" id="SCPNA" />
140+
<label for="SCPNA">Pamplona Software Crafter</label>
141+
</div>
142+
<a
143+
class="card__link"
144+
href="https://pamplonaswcraft.com/"
145+
rel="noopener noreferrer"
146+
target="_blank"
147+
>
148+
+Info
149+
</a>
150+
</section>
151+
</article>
152+
<article class="card">
153+
<figure class="card__media">
154+
<img
155+
class="card__image"
156+
src="img/conferences/AldaLovers.jpeg"
157+
alt="AdaLovers"
158+
/>
159+
<figcaption class="card__caption card__caption--pending">
160+
Pendiente
161+
</figcaption>
162+
</figure>
163+
<section class="card__content">
164+
<div>
165+
<input type="checkbox" id="adaLoversConf" />
166+
<label for="adaLoversConf">Ada Lovers Conf</label>
167+
</div>
168+
<a
169+
class="card__link"
170+
href="https://www.adaloversconf.es/"
171+
rel="noopener noreferrer"
172+
target="_blank"
173+
>
174+
+Info
175+
</a>
176+
</section>
177+
</article>
178+
<article class="card">
179+
<figure class="card__media">
180+
<img
181+
class="card__image"
182+
src="img/conferences/LicorcaConf.png"
183+
alt="licorcaConf"
184+
/>
185+
<figcaption class="card__caption card__caption--pending">
186+
Pendiente
187+
</figcaption>
188+
</figure>
189+
<section class="card__content">
190+
<div>
191+
<input type="checkbox" id="licorcaconf" />
192+
<label for="licorcaconf">LicorcaConf</label>
193+
</div>
194+
<a
195+
class="card__link"
196+
href="https://mobile.twitter.com/licorcaconf"
197+
rel="noopener noreferrer"
198+
target="_blank"
199+
>
200+
+Info
201+
</a>
202+
</section>
203+
</article>
204+
</section>
205+
<section>
206+
<h2 class="form-title">¿Quiéres enterarte de nuevas conferencias?</h2>
207+
<form
208+
action="mailto:[email protected]"
209+
method="post"
210+
enctype="text/plain"
211+
>
212+
<div class="form-item">
213+
<label for="name">Nombre y Apellidos</label>
214+
<input
215+
type="text"
216+
id="name"
217+
name="nombre"
218+
pattern="[\sa-zA-Z]+"
219+
aria-describedby="onlyLettersError"
220+
/>
221+
<div class="error-message" id="onlyLettersError">
222+
Utiliza solo letras para indicar tu nombre
223+
</div>
224+
</div>
225+
<div class="form-item">
226+
<label for="age">Edad *</label>
227+
<input
228+
type="number"
229+
id="age"
230+
name="edad"
231+
min="18"
232+
max="99"
233+
value="18"
234+
required
235+
aria-required="true"
236+
aria-describedby="ageRangeError"
237+
/>
238+
<div class="error-message" id="ageRangeError">
239+
La edad debería de ser entre 18 y 99 años
240+
</div>
241+
</div>
242+
<div class="form-item">
243+
<label for="email">Email *</label>
244+
<input
245+
type="email"
246+
id="mail"
247+
name="mail"
248+
pattern="^((?!hotmail\.com).)*$"
249+
placeholder="[email protected]"
250+
aria-describedby="formatEmail"
251+
aria-required="true"
252+
required
253+
/>
254+
<div class="error-message" id="formatEmail">
255+
Usa un formato correcto de email: [email protected]
256+
</div>
257+
</div>
258+
<div class="form-item">
259+
<label for="suggestions">Sugerencias</label>
260+
<textarea
261+
type="text"
262+
id="suggestions"
263+
name="suggestions"
264+
rows="4"
265+
>
266+
</textarea>
267+
</div>
268+
<fieldset class="form-item">
269+
<legend>¿Cuál es tu rol en la empresa?</legend>
270+
<div class="radio_item">
271+
<input
272+
id="ProductManager"
273+
type="radio"
274+
name="workArea"
275+
value="ProductManager"
276+
/>
277+
<label for="ProductManager">Product manager</label>
278+
</div>
279+
<div class="radio_item">
280+
<input
281+
id="engineeringManager"
282+
type="radio"
283+
name="workArea"
284+
value="engineeringManager"
285+
/>
286+
<label for="engineeringManager">Engineering manager</label>
287+
</div>
288+
<div class="radio_item">
289+
<input
290+
id="softwareDeveloper"
291+
type="radio"
292+
name="workArea"
293+
value="softwareDeveloper"
294+
/>
295+
<label for="softwareDeveloper">Software Developer</label>
296+
</div>
297+
<div class="radio_item">
298+
<input id="UX" type="radio" name="workArea" value="UX" />
299+
<label for="UX">UX Designer</label>
300+
</div>
301+
<div class="radio_item">
302+
<input id="UX" type="radio" name="workArea" value="UX" />
303+
<label for="UX">UI Designer</label>
304+
</div>
305+
</fieldset>
306+
<div class="form-item">
307+
<input
308+
type="checkbox"
309+
id="acceptTerms"
310+
name="acceptTerms"
311+
required
312+
/>
313+
<label for="acceptTerms"
314+
>Acepto los terminos y las condiciones de uso</label
315+
>
316+
</div>
317+
<button class="form-item" type="submit">¡Ávisame!</button>
318+
</form>
319+
</section>
320+
</main>
321+
<footer class="page_footer">EL MUNDO REAL™️</footer>
322+
</div>
323+
</body>
324+
</html>

0 commit comments

Comments
 (0)