Skip to content

Commit 467de1f

Browse files
author
Marie Nei
committed
add lesson 05-03-specific-tag-pattern
1 parent 0d0ecbd commit 467de1f

22 files changed

+15484
-0
lines changed

‎05-Selector-patterns/03-specific-tag-patterns/.gitignore

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

‎05-Selector-patterns/03-specific-tag-patterns/.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/03-specific-tag-patterns/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/03-specific-tag-patterns/img/conferences/AldaLovers.jpeg

6.21 KB
Loading

‎05-Selector-patterns/03-specific-tag-patterns/img/conferences/BilboStack.jpeg

3.79 KB
Loading

‎05-Selector-patterns/03-specific-tag-patterns/img/conferences/LicorcaConf.png

79.3 KB
Loading

‎05-Selector-patterns/03-specific-tag-patterns/img/conferences/SCPNA.jpeg

4.48 KB
Loading

‎05-Selector-patterns/03-specific-tag-patterns/img/conferences/T3chFest.jpeg

9.09 KB
Loading

‎05-Selector-patterns/03-specific-tag-patterns/img/conferences/Zurracapote.png

118 KB
Loading

‎05-Selector-patterns/03-specific-tag-patterns/img/socialMedia/codely.jpeg

4.85 KB
Loading

‎05-Selector-patterns/03-specific-tag-patterns/img/socialMedia/twitter.png

3.87 KB
Loading

‎05-Selector-patterns/03-specific-tag-patterns/index.html

+330
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,330 @@
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+
<p>
208+
Rellena el siguiente formulario y te informaremos de las nuevas
209+
conferencias que se vayan organizando.
210+
</p>
211+
<p>!No te pierdas ninguna!</p>
212+
<form
213+
class="form-group"
214+
action="mailto:[email protected]"
215+
method="post"
216+
enctype="text/plain"
217+
>
218+
<div>
219+
<label for="name">Nombre y Apellidos</label>
220+
<input
221+
type="text"
222+
id="name"
223+
name="nombre"
224+
pattern="[\sa-zA-Z]+"
225+
aria-describedby="onlyLettersError"
226+
/>
227+
<div class="error-message" id="onlyLettersError">
228+
Utiliza solo letras para indicar tu nombre
229+
</div>
230+
</div>
231+
<div>
232+
<label for="age">Edad *</label>
233+
<input
234+
type="number"
235+
id="age"
236+
name="edad"
237+
min="18"
238+
max="99"
239+
value="18"
240+
required
241+
aria-required="true"
242+
aria-describedby="ageRangeError"
243+
/>
244+
<div class="error-message" id="ageRangeError">
245+
La edad debería de ser entre 18 y 99 años
246+
</div>
247+
</div>
248+
<div>
249+
<label for="email">Email *</label>
250+
<input
251+
type="email"
252+
id="mail"
253+
name="mail"
254+
pattern="^((?!hotmail\.com).)*$"
255+
placeholder="[email protected]"
256+
aria-describedby="formatEmail"
257+
aria-required="true"
258+
required
259+
/>
260+
<div class="error-message" id="formatEmail">
261+
Usa un formato correcto de email: [email protected]
262+
</div>
263+
</div>
264+
<div>
265+
<label for="suggestions">Sugerencias</label>
266+
<textarea
267+
type="text"
268+
id="suggestions"
269+
name="suggestions"
270+
rows="4"
271+
>
272+
</textarea>
273+
</div>
274+
<fieldset>
275+
<legend>¿Cuál es tu rol en la empresa?</legend>
276+
<div class="radio_item">
277+
<input
278+
id="ProductManager"
279+
type="radio"
280+
name="workArea"
281+
value="ProductManager"
282+
/>
283+
<label for="ProductManager">Product manager</label>
284+
</div>
285+
<div class="radio_item">
286+
<input
287+
id="engineeringManager"
288+
type="radio"
289+
name="workArea"
290+
value="engineeringManager"
291+
/>
292+
<label for="engineeringManager">Engineering manager</label>
293+
</div>
294+
<div class="radio_item">
295+
<input
296+
id="softwareDeveloper"
297+
type="radio"
298+
name="workArea"
299+
value="softwareDeveloper"
300+
/>
301+
<label for="softwareDeveloper">Software Developer</label>
302+
</div>
303+
<div class="radio_item">
304+
<input id="UX" type="radio" name="workArea" value="UX" />
305+
<label for="UX">UX Designer</label>
306+
</div>
307+
<div class="radio_item">
308+
<input id="UX" type="radio" name="workArea" value="UX" />
309+
<label for="UX">UI Designer</label>
310+
</div>
311+
</fieldset>
312+
<div>
313+
<input
314+
type="checkbox"
315+
id="acceptTerms"
316+
name="acceptTerms"
317+
required
318+
/>
319+
<label for="acceptTerms"
320+
>Acepto los terminos y las condiciones de uso</label
321+
>
322+
</div>
323+
<button type="submit">¡Ávisame!</button>
324+
</form>
325+
</section>
326+
</main>
327+
<footer class="page_footer">EL MUNDO REAL™️</footer>
328+
</div>
329+
</body>
330+
</html>

0 commit comments

Comments
 (0)