Skip to content

Commit a389cae

Browse files
ismanapaismanapa
committed
lesson 1-2: grid and flex
1 parent dfa8720 commit a389cae

14 files changed

+2901
-0
lines changed

‎12-flex-and-grid/.gitignore

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

‎12-flex-and-grid/.stylelintrc.json

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"plugins": [
3+
"stylelint-scss"
4+
],
5+
"extends": [
6+
"stylelint-config-standard"
7+
],
8+
"rules": {
9+
"at-rule-no-unknown": null,
10+
"scss/at-rule-no-unknown": true
11+
}
12+
}

‎12-flex-and-grid/examples/flex-and-grid.html

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<!DOCTYPE html>
2+
<html lang="es">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="referrer" content="no-referrer-when-downgrade" />
7+
<title>Flex and Grid</title>
8+
<meta name="description" content="Flex and Grid" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
10+
<link href="../css/index.css" rel="stylesheet" type="text/css" media="all" />
11+
</head>
12+
13+
<body>
14+
<main class="container">
15+
<h3>Grid with flex layout</h3>
16+
<div class="grid-layout">
17+
<div class="header">Header</div>
18+
<div class="sidebar">
19+
Sidebar
20+
</div>
21+
<div class="content">
22+
<article class="card">
23+
<div class="card__img">
24+
<img alt="Captura del programa GameMaker" src="https://i.blogs.es/a52d06/gamemaker/1366_2000.jpg" />
25+
</div>
26+
27+
<h4 class="card__title">
28+
<a href="https://www.genbeta.com/desarrollo/motor-creacion-videojuegos-gamemaker-ofrece-version-gratuita-limite-tiempo-anuncia-su-llegada-a-linux?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+genbeta+%28Genbeta%29"
29+
target="_blank">
30+
Actualización en GameMaker
31+
</a>
32+
</h4>
33+
<p>
34+
El motor de creación de videojuegos GameMaker ofrece una versión gratuita sin límite de tiempo y anuncia su
35+
llegada a Linux
36+
</p>
37+
</article>
38+
<article class="card">
39+
<div class="card__img">
40+
<img alt="Captura de un tema de VSCode con colores ocuros" src="https://i.redd.it/unyodjbxmqs21.png" />
41+
</div>
42+
43+
<h4 class="card__title">
44+
<a href="https://www.reddit.com/r/vscode/comments/be2qr3/for_those_of_you_who_didnt_like_my_light_theme/"
45+
target="_blank">
46+
Nuevo tema oscuro de VS Code
47+
</a>
48+
</h4>
49+
<p>El nuevo tema que le gusta mucho a Rafa.</p>
50+
</article>
51+
<article class="card">
52+
<div class="card__img">
53+
<img alt="Captura de la home page de Babel"
54+
src="https://pbs.twimg.com/profile_banners/2958823554/1491134069/1500x500" />
55+
</div>
56+
57+
<h4 class="card__title">
58+
<a href="https://babeljs.io/blog/2021/07/26/7.15.0" target="_blank">
59+
Nueva versión de Babel: 7.15.0
60+
</a>
61+
</h4>
62+
<p>
63+
La nueva versión incluye cosas molonas como "top level await", "TypeScript const enums supports" y
64+
"Hash-style
65+
pipeline operator".
66+
</p>
67+
</article>
68+
<article class="card">
69+
<div class="card__img">
70+
<img alt="Imagen del nuevo DNI 4.0" src="https://i.blogs.es/5d012b/dni-4.0/1366_2000.jpg" />
71+
</div>
72+
73+
<h4 class="card__title">
74+
<a href="https://www.xataka.com/empresas-y-economia/dni-4-0-entra-hoy-vigor-esta-aqui-nuevo-formato-europeo-que-se-integrara-movil"
75+
target="_blank">
76+
Llega el DNI 4.0
77+
</a>
78+
</h4>
79+
<p>
80+
81+
El DNI 4.0 entra hoy en vigor: ya está aquí el nuevo formato europeo que se integrará en el móvil
82+
</p>
83+
</article>
84+
</div>
85+
<div class="ads">Ads</div>
86+
<div class="footer">
87+
Footer
88+
</div>
89+
</div>
90+
</main>
91+
</body>
92+
93+
</html>

‎12-flex-and-grid/examples/flex.html

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<html lang="es">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="referrer" content="no-referrer-when-downgrade" />
7+
<title>Flex</title>
8+
<meta name="description" content="Flex and Grid" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
10+
<link href="../css/index.css" rel="stylesheet" type="text/css" media="all" />
11+
</head>
12+
13+
<body>
14+
<main class="container">
15+
<h3>Flex layout</h3>
16+
<div class="flex">
17+
<article class="card">
18+
<div class="card__img">
19+
<img alt="Captura del programa GameMaker" src="https://i.blogs.es/a52d06/gamemaker/1366_2000.jpg" />
20+
</div>
21+
22+
<h4 class="card__title">
23+
<a href="https://www.genbeta.com/desarrollo/motor-creacion-videojuegos-gamemaker-ofrece-version-gratuita-limite-tiempo-anuncia-su-llegada-a-linux?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+genbeta+%28Genbeta%29"
24+
target="_blank">
25+
Actualización en GameMaker
26+
</a>
27+
</h4>
28+
<p>
29+
El motor de creación de videojuegos GameMaker ofrece una versión gratuita sin límite de tiempo y anuncia su
30+
llegada a Linux
31+
</p>
32+
</article>
33+
<article class="card">
34+
<div class="card__img">
35+
<img alt="Captura de un tema de VSCode con colores ocuros" src="https://i.redd.it/unyodjbxmqs21.png" />
36+
</div>
37+
38+
<h4 class="card__title">
39+
<a href="https://www.reddit.com/r/vscode/comments/be2qr3/for_those_of_you_who_didnt_like_my_light_theme/"
40+
target="_blank">
41+
Nuevo tema oscuro de VS Code
42+
</a>
43+
</h4>
44+
<p>El nuevo tema que le gusta mucho a Rafa.</p>
45+
</article>
46+
<article class="card">
47+
<div class="card__img">
48+
<img alt="Captura de la home page de Babel"
49+
src="https://pbs.twimg.com/profile_banners/2958823554/1491134069/1500x500" />
50+
</div>
51+
52+
<h4 class="card__title">
53+
<a href="https://babeljs.io/blog/2021/07/26/7.15.0" target="_blank">
54+
Nueva versión de Babel: 7.15.0
55+
</a>
56+
</h4>
57+
<p>
58+
La nueva versión incluye cosas molonas como "top level await", "TypeScript const enums supports" y "Hash-style
59+
pipeline operator".
60+
</p>
61+
</article>
62+
<article class="card">
63+
<div class="card__img">
64+
<img alt="Imagen del nuevo DNI 4.0" src="https://i.blogs.es/5d012b/dni-4.0/1366_2000.jpg" />
65+
</div>
66+
67+
<h4 class="card__title">
68+
<a href="https://www.xataka.com/empresas-y-economia/dni-4-0-entra-hoy-vigor-esta-aqui-nuevo-formato-europeo-que-se-integrara-movil"
69+
target="_blank">
70+
Llega el DNI 4.0
71+
</a>
72+
</h4>
73+
<p>
74+
75+
El DNI 4.0 entra hoy en vigor: ya está aquí el nuevo formato europeo que se integrará en el móvil
76+
</p>
77+
</article>
78+
</div>
79+
</main>
80+
</body>
81+
82+
</html>

‎12-flex-and-grid/examples/grid.html

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<html lang="es">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="referrer" content="no-referrer-when-downgrade" />
7+
<title>Grid</title>
8+
<meta name="description" content="Flex and Grid" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
10+
<link href="../css/index.css" rel="stylesheet" type="text/css" media="all" />
11+
</head>
12+
13+
<body>
14+
<main class="container">
15+
<h3>Grid layout</h3>
16+
<div class="grid">
17+
<article class="card">
18+
<div class="card__img">
19+
<img alt="Captura del programa GameMaker" src="https://i.blogs.es/a52d06/gamemaker/1366_2000.jpg" />
20+
</div>
21+
22+
<h4 class="card__title">
23+
<a href="https://www.genbeta.com/desarrollo/motor-creacion-videojuegos-gamemaker-ofrece-version-gratuita-limite-tiempo-anuncia-su-llegada-a-linux?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+genbeta+%28Genbeta%29"
24+
target="_blank">
25+
Actualización en GameMaker
26+
</a>
27+
</h4>
28+
<p>
29+
El motor de creación de videojuegos GameMaker ofrece una versión gratuita sin límite de tiempo y anuncia su
30+
llegada a Linux
31+
</p>
32+
</article>
33+
<article class="card">
34+
<div class="card__img">
35+
<img alt="Captura de un tema de VSCode con colores ocuros" src="https://i.redd.it/unyodjbxmqs21.png" />
36+
</div>
37+
38+
<h4 class="card__title">
39+
<a href="https://www.reddit.com/r/vscode/comments/be2qr3/for_those_of_you_who_didnt_like_my_light_theme/"
40+
target="_blank">
41+
Nuevo tema oscuro de VS Code
42+
</a>
43+
</h4>
44+
<p>El nuevo tema que le gusta mucho a Rafa.</p>
45+
</article>
46+
<article class="card">
47+
<div class="card__img">
48+
<img alt="Captura de la home page de Babel"
49+
src="https://pbs.twimg.com/profile_banners/2958823554/1491134069/1500x500" />
50+
</div>
51+
52+
<h4 class="card__title">
53+
<a href="https://babeljs.io/blog/2021/07/26/7.15.0" target="_blank">
54+
Nueva versión de Babel: 7.15.0
55+
</a>
56+
</h4>
57+
<p>
58+
La nueva versión incluye cosas molonas como "top level await", "TypeScript const enums supports" y "Hash-style
59+
pipeline operator".
60+
</p>
61+
</article>
62+
<article class="card">
63+
<div class="card__img">
64+
<img alt="Imagen del nuevo DNI 4.0" src="https://i.blogs.es/5d012b/dni-4.0/1366_2000.jpg" />
65+
</div>
66+
67+
<h4 class="card__title">
68+
<a href="https://www.xataka.com/empresas-y-economia/dni-4-0-entra-hoy-vigor-esta-aqui-nuevo-formato-europeo-que-se-integrara-movil"
69+
target="_blank">
70+
Llega el DNI 4.0
71+
</a>
72+
</h4>
73+
<p>
74+
75+
El DNI 4.0 entra hoy en vigor: ya está aquí el nuevo formato europeo que se integrará en el móvil
76+
</p>
77+
</article>
78+
</div>
79+
</main>
80+
</body>
81+
82+
</html>

‎12-flex-and-grid/index.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="es">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="referrer" content="no-referrer-when-downgrade" />
7+
<title>Flex and Grid</title>
8+
<meta name="description" content="Flex and Grid" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
10+
<link href="css/index.css" rel="stylesheet" type="text/css" media="all" />
11+
</head>
12+
13+
<body>
14+
<main class="container">
15+
16+
</main>
17+
</body>
18+
19+
</html>

0 commit comments

Comments
 (0)