diff --git a/Unidad_03_HTML/Flexbox/Ejercicio02_Flex_direction/index.css b/Unidad_03_HTML/Flexbox/Ejercicio02_Flex_direction/index.css new file mode 100644 index 0000000..622ea9b --- /dev/null +++ b/Unidad_03_HTML/Flexbox/Ejercicio02_Flex_direction/index.css @@ -0,0 +1,33 @@ +/* Diferentes navegadores utilizan diferentes márgenes por defecto */ +body{ + margin:0; /* Igualo los márgenes por defecto de cualquier navegador*/ +} + +/* Contenedor principal. Tendrá Flexbox */ +.container { + display: flex; /* flex es igual a inline-flex. Los elementos dentro de un flex son flex-items */ + border: 10px solid red; + box-sizing: border-box; /* Unifica en un único valor de cada div los siguientes: margin, padding y border*/ + flex-direction: column-reverse; +} + +/* Cada box tiene unas propiedades, son simplemente estéticas*/ +.box { + color: #fff; + font-size: 100px; + text-align: center; + text-shadow: 4px 4px 0 rgba(0, 0, 0, .1); + padding: 10px; +} + +/* Colores de cada box */ +.box1 { background:#1abc9c;} +.box2 { background:#3498db;} +.box3 { background:#9b59b6;} +.box4 { background:#34495e;} +.box5 { background:#f1c40f;} +.box6 { background:#e67e22;} +.box7 { background:#e74c3c;} +.box8 { background:#bdc3c7;} +.box9 { background:#2ecc71;} +.box10 { background:#16a085;} \ No newline at end of file diff --git a/Unidad_03_HTML/Flexbox/Ejercicio02_Flex_direction/index.html b/Unidad_03_HTML/Flexbox/Ejercicio02_Flex_direction/index.html new file mode 100644 index 0000000..9808cc3 --- /dev/null +++ b/Unidad_03_HTML/Flexbox/Ejercicio02_Flex_direction/index.html @@ -0,0 +1,27 @@ + + + + + + FlexBox Tutorial + + + + + +
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
+ + + + \ No newline at end of file diff --git a/Unidad_03_HTML/Flexbox/Ejercicio03_Flex-wrap/index.css b/Unidad_03_HTML/Flexbox/Ejercicio03_Flex-wrap/index.css new file mode 100644 index 0000000..318ea0c --- /dev/null +++ b/Unidad_03_HTML/Flexbox/Ejercicio03_Flex-wrap/index.css @@ -0,0 +1,35 @@ +/* Diferentes navegadores utilizan diferentes márgenes por defecto */ +body{ + margin:0; /* Igualo los márgenes por defecto de cualquier navegador*/ +} + +/* Contenedor principal. Tendrá Flexbox */ +.container { + display: flex; /* flex es igual a inline-flex. Los elementos dentro de un flex son flex-items */ + border: 10px solid red; + box-sizing: border-box; /* Unifica en un único valor de cada div los siguientes: margin, padding y border*/ + flex-wrap: wrap; + min-height: 100vh; +} + +/* Cada box tiene unas propiedades, son simplemente estéticas*/ +.box { + color: #fff; + font-size: 100px; + text-align: center; + text-shadow: 4px 4px 0 rgba(0, 0, 0, .1); + padding: 0; + width: 33.33333%; +} + +/* Colores de cada box */ +.box1 { background:#1abc9c;} +.box2 { background:#3498db;} +.box3 { background:#9b59b6;} +.box4 { background:#34495e;} +.box5 { background:#f1c40f;} +.box6 { background:#e67e22;} +.box7 { background:#e74c3c;} +.box8 { background:#bdc3c7;} +.box9 { background:#2ecc71;} +.box10 { background:#16a085;} \ No newline at end of file diff --git a/Unidad_03_HTML/Flexbox/Ejercicio03_Flex-wrap/index.html b/Unidad_03_HTML/Flexbox/Ejercicio03_Flex-wrap/index.html new file mode 100644 index 0000000..9808cc3 --- /dev/null +++ b/Unidad_03_HTML/Flexbox/Ejercicio03_Flex-wrap/index.html @@ -0,0 +1,27 @@ + + + + + + FlexBox Tutorial + + + + + +
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
+ + + + \ No newline at end of file diff --git a/Unidad_03_HTML/Flexbox/Ejercicio04_Flex-ordering/index.css b/Unidad_03_HTML/Flexbox/Ejercicio04_Flex-ordering/index.css new file mode 100644 index 0000000..3400f7c --- /dev/null +++ b/Unidad_03_HTML/Flexbox/Ejercicio04_Flex-ordering/index.css @@ -0,0 +1,33 @@ +/* Diferentes navegadores utilizan diferentes márgenes por defecto */ +body{ + margin:0; /* Igualo los márgenes por defecto de cualquier navegador*/ +} + +/* Contenedor principal. Tendrá Flexbox */ +.container { + display: flex; /* flex es igual a inline-flex. Los elementos dentro de un flex son flex-items */ + border: 10px solid red; + box-sizing: border-box; /* Unifica en un único valor de cada div los siguientes: margin, padding y border*/ +} + +/* Cada box tiene unas propiedades, son simplemente estéticas*/ +.box { + color: #fff; + font-size: 100px; + text-align: center; + text-shadow: 4px 4px 0 rgba(0, 0, 0, .1); + padding: 0; + flex: 1; +} + +/* Colores de cada box */ +.box1 { background:#1abc9c;} +.box2 { background:#3498db;} +.box3 { background:#9b59b6;} +.box4 { background:#34495e;} +.box5 { background:#f1c40f; order: -1;} +.box6 { background:#e67e22; order: 10;} +.box7 { background:#e74c3c;} +.box8 { background:#bdc3c7;} +.box9 { background:#2ecc71;} +.box10 { background:#16a085;} \ No newline at end of file diff --git a/Unidad_03_HTML/Flexbox/Ejercicio04_Flex-ordering/index.html b/Unidad_03_HTML/Flexbox/Ejercicio04_Flex-ordering/index.html new file mode 100644 index 0000000..9808cc3 --- /dev/null +++ b/Unidad_03_HTML/Flexbox/Ejercicio04_Flex-ordering/index.html @@ -0,0 +1,27 @@ + + + + + + FlexBox Tutorial + + + + + +
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
+ + + + \ No newline at end of file diff --git a/Unidad_03_HTML/Flexbox/Ejercicio05_Alignment-and-center/index.css b/Unidad_03_HTML/Flexbox/Ejercicio05_Alignment-and-center/index.css new file mode 100644 index 0000000..4808759 --- /dev/null +++ b/Unidad_03_HTML/Flexbox/Ejercicio05_Alignment-and-center/index.css @@ -0,0 +1,35 @@ +/* Diferentes navegadores utilizan diferentes márgenes por defecto */ +body{ + margin:0; /* Igualo los márgenes por defecto de cualquier navegador*/ +} + +/* Contenedor principal. Tendrá Flexbox */ +.container { + display: flex; /* flex es igual a inline-flex. Los elementos dentro de un flex son flex-items */ + border: 10px solid red; + box-sizing: border-box; /* Unifica en un único valor de cada div los siguientes: margin, padding y border*/ + min-height: 100vh; + flex-direction: column; + justify-content: space-between; +} + +/* Cada box tiene unas propiedades, son simplemente estéticas*/ +.box { + color: #fff; + font-size: 10px; + text-align: center; + padding: 10px; + text-shadow:4px 4px 0 rgba(0,0,0,0.1); +} + +/* Colores de cada box */ +.box1 { background:#1abc9c;} +.box2 { background:#3498db;} +.box3 { background:#9b59b6;} +.box4 { background:#34495e;} +.box5 { background:#f1c40f;} +.box6 { background:#e67e22;} +.box7 { background:#e74c3c;} +.box8 { background:#bdc3c7;} +.box9 { background:#2ecc71;} +.box10 { background:#16a085;} \ No newline at end of file diff --git a/Unidad_03_HTML/Flexbox/Ejercicio05_Alignment-and-center/index.html b/Unidad_03_HTML/Flexbox/Ejercicio05_Alignment-and-center/index.html new file mode 100644 index 0000000..9808cc3 --- /dev/null +++ b/Unidad_03_HTML/Flexbox/Ejercicio05_Alignment-and-center/index.html @@ -0,0 +1,27 @@ + + + + + + FlexBox Tutorial + + + + + +
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
+ + + + \ No newline at end of file diff --git a/Unidad_03_HTML/Flexbox/Ejercicio06_Align-items/index.css b/Unidad_03_HTML/Flexbox/Ejercicio06_Align-items/index.css new file mode 100644 index 0000000..b070317 --- /dev/null +++ b/Unidad_03_HTML/Flexbox/Ejercicio06_Align-items/index.css @@ -0,0 +1,40 @@ +/* Diferentes navegadores utilizan diferentes márgenes por defecto */ +body{ + margin:0; /* Igualo los márgenes por defecto de cualquier navegador*/ +} + +/* Contenedor principal. Tendrá Flexbox */ +.container { + display: flex; /* flex es igual a inline-flex. Los elementos dentro de un flex son flex-items */ + border: 10px solid red; + box-sizing: border-box; /* Unifica en un único valor de cada div los siguientes: margin, padding y border*/ + min-height: 100vh; + align-items: baseline; +} + +/* Cada box tiene unas propiedades, son simplemente estéticas*/ +.box { + color: #fff; + font-size: 100px; + text-align: center; + padding: 10px; + text-shadow:4px 4px 0 rgba(0,0,0,0.1); +} + +/* Colores de cada box */ +.box1 { background:#1abc9c;} +.box2 { background:#3498db;} +.box3 { background:#9b59b6;} +.box4 { background:#34495e;} +.box5 { background:#f1c40f;} +.box6 { background:#e67e22;} +.box7 { background:#e74c3c;} +.box8 { background:#bdc3c7;} +.box9 { background:#2ecc71;} +.box10 { background:#16a085;} + +.box1 { font-size: 30px; } +.box3 { font-size: 130px; } +.box4 { font-size: 200px; } +.box5 { font-size: 10px; } +.box10 { font-size: 90px; } \ No newline at end of file diff --git a/Unidad_03_HTML/Flexbox/Ejercicio06_Align-items/index.html b/Unidad_03_HTML/Flexbox/Ejercicio06_Align-items/index.html new file mode 100644 index 0000000..9808cc3 --- /dev/null +++ b/Unidad_03_HTML/Flexbox/Ejercicio06_Align-items/index.html @@ -0,0 +1,27 @@ + + + + + + FlexBox Tutorial + + + + + +
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
+ + + + \ No newline at end of file diff --git a/Unidad_03_HTML/Flexbox/Ejercicio07_Align-content/index.css b/Unidad_03_HTML/Flexbox/Ejercicio07_Align-content/index.css new file mode 100644 index 0000000..78b9d78 --- /dev/null +++ b/Unidad_03_HTML/Flexbox/Ejercicio07_Align-content/index.css @@ -0,0 +1,38 @@ +/* Diferentes navegadores utilizan diferentes márgenes por defecto */ +body{ + margin:0; /* Igualo los márgenes por defecto de cualquier navegador*/ +} + +/* Contenedor principal. Tendrá Flexbox */ +.container { + display: flex; /* flex es igual a inline-flex. Los elementos dentro de un flex son flex-items */ + border: 10px solid red; + box-sizing: border-box; /* Unifica en un único valor de cada div los siguientes: margin, padding y border*/ + min-height: 100vh; + align-content: center; + justify-content: center; + flex-wrap: wrap; + +} + +/* Cada box tiene unas propiedades, son simplemente estéticas*/ +.box { + color: #fff; + font-size: 100px; + text-align: center; + padding: 0px; + text-shadow:4px 4px 0 rgba(0,0,0,0.1); + width: 33.33333%; +} + +/* Colores de cada box */ +.box1 { background:#1abc9c;} +.box2 { background:#3498db;} +.box3 { background:#9b59b6;} +.box4 { background:#34495e;} +.box5 { background:#f1c40f;} +.box6 { background:#e67e22;} +.box7 { background:#e74c3c;} +.box8 { background:#bdc3c7;} +.box9 { background:#2ecc71;} +.box10 { background:#16a085;} diff --git a/Unidad_03_HTML/Flexbox/Ejercicio07_Align-content/index.html b/Unidad_03_HTML/Flexbox/Ejercicio07_Align-content/index.html new file mode 100644 index 0000000..9808cc3 --- /dev/null +++ b/Unidad_03_HTML/Flexbox/Ejercicio07_Align-content/index.html @@ -0,0 +1,27 @@ + + + + + + FlexBox Tutorial + + + + + +
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
+ + + + \ No newline at end of file diff --git a/Unidad_03_HTML/Flexbox/Ejercicio08_Align-self/index.css b/Unidad_03_HTML/Flexbox/Ejercicio08_Align-self/index.css new file mode 100644 index 0000000..1f2da0d --- /dev/null +++ b/Unidad_03_HTML/Flexbox/Ejercicio08_Align-self/index.css @@ -0,0 +1,51 @@ +/* Diferentes navegadores utilizan diferentes márgenes por defecto */ +body{ + margin:0; /* Igualo los márgenes por defecto de cualquier navegador*/ +} + +/* Contenedor principal. Tendrá Flexbox */ +.container { + display: flex; /* flex es igual a inline-flex. Los elementos dentro de un flex son flex-items */ + border: 10px solid red; + box-sizing: border-box; /* Unifica en un único valor de cada div los siguientes: margin, padding y border*/ + min-height: 100vh; + align-items: flex-start; +} + +/* Cada box tiene unas propiedades, son simplemente estéticas*/ +.box { + color: #fff; + font-size: 100px; + text-align: center; + padding: 0px; + text-shadow:4px 4px 0 rgba(0,0,0,0.1); + flex: 1; +} + +/* Colores de cada box */ +.box1 { background:#1abc9c;} +.box2 { background:#3498db;} +.box3 { background:#9b59b6;} +.box4 { background:#34495e;} +.box5 { background:#f1c40f;} +.box6 { background:#e67e22;} +.box7 { background:#e74c3c;} +.box8 { background:#bdc3c7;} +.box9 { background:#2ecc71;} +.box10 { background:#16a085;} + + +.box2 { + padding-bottom: 200px; + align-self: stretch; +} + +.box6 { + padding-bottom: 0; + align-self: center; +} + +.box9 { + padding-bottom: 50px; + align-self: flex-end; +} \ No newline at end of file diff --git a/Unidad_03_HTML/Flexbox/Ejercicio08_Align-self/index.html b/Unidad_03_HTML/Flexbox/Ejercicio08_Align-self/index.html new file mode 100644 index 0000000..9808cc3 --- /dev/null +++ b/Unidad_03_HTML/Flexbox/Ejercicio08_Align-self/index.html @@ -0,0 +1,27 @@ + + + + + + FlexBox Tutorial + + + + + +
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
+ + + + \ No newline at end of file diff --git a/Unidad_03_HTML/Flexbox/Ejercicio09_Flex-property/index.css b/Unidad_03_HTML/Flexbox/Ejercicio09_Flex-property/index.css new file mode 100644 index 0000000..dd0daa5 --- /dev/null +++ b/Unidad_03_HTML/Flexbox/Ejercicio09_Flex-property/index.css @@ -0,0 +1,37 @@ +/* Diferentes navegadores utilizan diferentes márgenes por defecto */ +body{ + margin:0; /* Igualo los márgenes por defecto de cualquier navegador*/ +} + +/* Contenedor principal. Tendrá Flexbox */ +.container { + display: flex; /* flex es igual a inline-flex. Los elementos dentro de un flex son flex-items */ + box-sizing: border-box; /* Unifica en un único valor de cada div los siguientes: margin, padding y border*/ + align-items: flex-start; +} + +/* Cada box tiene unas propiedades, son simplemente estéticas*/ +.box { + color: #fff; + font-size: 50px; + text-align: center; + padding: 0px; + text-shadow:4px 4px 0 rgba(0,0,0,0.1); + flex: 1; + line-height: 100px; +} + +/* Colores de cada box */ +.box1 { background:#1abc9c;} +.box2 { background:#3498db;} +.box3 { background:#9b59b6;} +.box4 { background:#34495e;} +.box5 { background:#f1c40f;} +.box6 { background:#e67e22;} +.box7 { background:#e74c3c;} +.box8 { background:#bdc3c7;} +.box9 { background:#2ecc71;} +.box10 { background:#16a085;} + +.box2 { flex-grow: 2;} +.box5 { flex-grow: 3;} \ No newline at end of file diff --git a/Unidad_03_HTML/Flexbox/Ejercicio09_Flex-property/index.html b/Unidad_03_HTML/Flexbox/Ejercicio09_Flex-property/index.html new file mode 100644 index 0000000..ca30fcf --- /dev/null +++ b/Unidad_03_HTML/Flexbox/Ejercicio09_Flex-property/index.html @@ -0,0 +1,23 @@ + + + + + + FlexBox Tutorial + + + + + +
+
Uno 🦁
+
Dos 😜
+
Tres 😴
+
Cuatro ⛱
+
Cinco 🍕
+
Seis 🍀
+
+ + + + \ No newline at end of file diff --git a/Unidad_03_HTML/Flexbox/Ejercicio10_More-flex-property/index.css b/Unidad_03_HTML/Flexbox/Ejercicio10_More-flex-property/index.css new file mode 100644 index 0000000..41da309 --- /dev/null +++ b/Unidad_03_HTML/Flexbox/Ejercicio10_More-flex-property/index.css @@ -0,0 +1,40 @@ +/* Diferentes navegadores utilizan diferentes márgenes por defecto */ +body{ + margin:0; /* Igualo los márgenes por defecto de cualquier navegador*/ +} + +/* Contenedor principal. Tendrá Flexbox */ +.container { + display: flex; /* flex es igual a inline-flex. Los elementos dentro de un flex son flex-items */ + box-sizing: border-box; /* Unifica en un único valor de cada div los siguientes: margin, padding y border*/ + flex-direction: column; + flex-wrap: wrap; + border: 10px solid red; + height: 100vh; +} + +/* Cada box tiene unas propiedades, son simplemente estéticas*/ +.box { + color: #fff; + font-size: 50px; + text-align: center; + padding: 0px; + text-shadow:4px 4px 0 rgba(0,0,0,0.1); + flex-basis: 250px; +} + +/* Colores de cada box */ +.box1 { background:#1abc9c;} +.box2 { background:#3498db;} +.box3 { background:#9b59b6;} +.box4 { background:#34495e;} +.box5 { background:#f1c40f;} +.box6 { background:#e67e22;} +.box7 { background:#e74c3c;} +.box8 { background:#bdc3c7;} +.box9 { background:#2ecc71;} +.box10 { background:#16a085;} + +.box3 {flex-grow: 5;} +.box4 {flex-basis: 100px;} +.box5, .box6 { flex-grow: 6;} diff --git a/Unidad_03_HTML/Flexbox/Ejercicio10_More-flex-property/index.html b/Unidad_03_HTML/Flexbox/Ejercicio10_More-flex-property/index.html new file mode 100644 index 0000000..ca30fcf --- /dev/null +++ b/Unidad_03_HTML/Flexbox/Ejercicio10_More-flex-property/index.html @@ -0,0 +1,23 @@ + + + + + + FlexBox Tutorial + + + + + +
+
Uno 🦁
+
Dos 😜
+
Tres 😴
+
Cuatro ⛱
+
Cinco 🍕
+
Seis 🍀
+
+ + + + \ No newline at end of file diff --git a/Unidad_03_HTML/Flexbox/Ejercicio11_Flexbox-nav/index.css b/Unidad_03_HTML/Flexbox/Ejercicio11_Flexbox-nav/index.css new file mode 100644 index 0000000..3e4bdfa --- /dev/null +++ b/Unidad_03_HTML/Flexbox/Ejercicio11_Flexbox-nav/index.css @@ -0,0 +1,77 @@ +/* Some CSS Setup - nothing to do with flexbox */ +html { + box-sizing: border-box; +} + +*, *:before, *:after { + box-sizing: inherit; +} + +body { + font-family: sans-serif; + margin: 0; + background: #3494E6; + background: linear-gradient(to right, #EC6EAD, #3494E6); +} + +a { + color:white; + font-weight: 100; + letter-spacing: 2px; + text-decoration: none; + background:rgba(0,0,0,0.2); + padding:20px 5px; + display: inline-block; + width: 100%; + text-align: center; + transition:all 0.5s; +} + +a:hover { + background:rgba(0,0,0,0.5); +} + +.wrapper { + max-width: 1000px; + margin: 0 auto; + padding:50px; +} + + +/* Flex Container */ +.flex-nav ul { + border: 1px solid black; + list-style: none; + margin: 0; + padding: 0; + display: flex; +} + +.flex-nav li { + flex: 3; +} + +.flex-nav .social { + flex: 1; +} + + +@media all and (max-width:1000px) { + .flex-nav ul { + flex-wrap: wrap; + } + + .flex-nav li { + flex: 1 1 50%; + } + + .flex-nav .social { + flex: 1 1 25%; + } +} + +@media all and (max-width:500px) { + .flex-nav li { + flex-basis: 100%; + } +} \ No newline at end of file diff --git a/Unidad_03_HTML/Flexbox/Ejercicio11_Flexbox-nav/index.html b/Unidad_03_HTML/Flexbox/Ejercicio11_Flexbox-nav/index.html new file mode 100644 index 0000000..f364539 --- /dev/null +++ b/Unidad_03_HTML/Flexbox/Ejercicio11_Flexbox-nav/index.html @@ -0,0 +1,35 @@ + + + + + FlexBox Nav + + + + +
+ +
+ + diff --git a/Unidad_03_HTML/SASS/01_variables/index.html b/Unidad_03_HTML/SASS/01_variables/index.html new file mode 100644 index 0000000..d3a865d --- /dev/null +++ b/Unidad_03_HTML/SASS/01_variables/index.html @@ -0,0 +1,13 @@ + + + + + +

Hello World

+ +

This is a paragraph.

+ +
This is some text inside a container.
+ + + \ No newline at end of file diff --git a/Unidad_03_HTML/SASS/01_variables/index.scss b/Unidad_03_HTML/SASS/01_variables/index.scss new file mode 100644 index 0000000..e02702b --- /dev/null +++ b/Unidad_03_HTML/SASS/01_variables/index.scss @@ -0,0 +1,14 @@ +$myFont: Helvetica, sans-serif; +$myColor: yellow; +$myFontSize: 18px; +$myWidth: 680px; + +body { + font-family: $myFont; + font-size: $myFontSize; + color: $myColor; +} + +#container { + width: $myWidth; +} \ No newline at end of file diff --git a/Unidad_03_HTML/SASS/02_anidados/index.html b/Unidad_03_HTML/SASS/02_anidados/index.html new file mode 100644 index 0000000..45e8ae5 --- /dev/null +++ b/Unidad_03_HTML/SASS/02_anidados/index.html @@ -0,0 +1,15 @@ + + + + + + + + + \ No newline at end of file diff --git a/Unidad_03_HTML/SASS/02_anidados/index.scss b/Unidad_03_HTML/SASS/02_anidados/index.scss new file mode 100644 index 0000000..24ae5d8 --- /dev/null +++ b/Unidad_03_HTML/SASS/02_anidados/index.scss @@ -0,0 +1,15 @@ +nav { + ul { + margin: 0; + padding: 0; + list-style: none; + } + li { + display: inline-block; + } + a { + display: block; + padding: 6px 12px; + text-decoration: none; + } +} \ No newline at end of file diff --git a/Unidad_03_HTML/SASS/03_import/index.html b/Unidad_03_HTML/SASS/03_import/index.html new file mode 100644 index 0000000..577bfef --- /dev/null +++ b/Unidad_03_HTML/SASS/03_import/index.html @@ -0,0 +1,17 @@ + + + + + +

Hello World

+ +

This is a paragraph.

+ + + + + \ No newline at end of file diff --git a/Unidad_03_HTML/SASS/03_import/index.scss b/Unidad_03_HTML/SASS/03_import/index.scss new file mode 100644 index 0000000..a1be223 --- /dev/null +++ b/Unidad_03_HTML/SASS/03_import/index.scss @@ -0,0 +1,7 @@ +@import "reset"; + +body { + font-family: Helvetica, sans-serif; + font-size: 18px; + color: red; +} \ No newline at end of file diff --git a/Unidad_03_HTML/SASS/03_import/reset.scss b/Unidad_03_HTML/SASS/03_import/reset.scss new file mode 100644 index 0000000..d77f02b --- /dev/null +++ b/Unidad_03_HTML/SASS/03_import/reset.scss @@ -0,0 +1,7 @@ +html, +body, +ul, +ol { + margin: 0; + padding: 0; +} \ No newline at end of file diff --git a/Unidad_03_HTML/SASS/04_mixin/index.html b/Unidad_03_HTML/SASS/04_mixin/index.html new file mode 100644 index 0000000..7350d86 --- /dev/null +++ b/Unidad_03_HTML/SASS/04_mixin/index.html @@ -0,0 +1,11 @@ + + + + + +

Hello World

+ +

Warning! This is some text.

+ + + \ No newline at end of file diff --git a/Unidad_03_HTML/SASS/04_mixin/index.scss b/Unidad_03_HTML/SASS/04_mixin/index.scss new file mode 100644 index 0000000..2134b17 --- /dev/null +++ b/Unidad_03_HTML/SASS/04_mixin/index.scss @@ -0,0 +1,11 @@ +@mixin important-text { + color: red; + font-size: 25px; + font-weight: bold; + border: 1px solid blue; +} + +.danger { + @include important-text; + background-color: green; +} \ No newline at end of file diff --git a/Unidad_03_HTML/SASS/05_mixin_with_params/index.html b/Unidad_03_HTML/SASS/05_mixin_with_params/index.html new file mode 100644 index 0000000..5575c3f --- /dev/null +++ b/Unidad_03_HTML/SASS/05_mixin_with_params/index.html @@ -0,0 +1,13 @@ + + + + + +

Hello World

+ +

This is some text in my article.

+ +

This is some text in my notes.

+ + + \ No newline at end of file diff --git a/Unidad_03_HTML/SASS/05_mixin_with_params/index.scss b/Unidad_03_HTML/SASS/05_mixin_with_params/index.scss new file mode 100644 index 0000000..28dfaff --- /dev/null +++ b/Unidad_03_HTML/SASS/05_mixin_with_params/index.scss @@ -0,0 +1,12 @@ +/* Define mixin with two arguments */ +@mixin bordered($color, $width) { + border: $width solid $color; +} + +.myArticle { + @include bordered(blue, 1px); // Call mixin with two values +} + +.myNotes { + @include bordered(red, 2px); // Call mixin with two values +} \ No newline at end of file diff --git a/Unidad_03_HTML/SASS/06_extends/index.scss b/Unidad_03_HTML/SASS/06_extends/index.scss new file mode 100644 index 0000000..175352f --- /dev/null +++ b/Unidad_03_HTML/SASS/06_extends/index.scss @@ -0,0 +1,18 @@ +.button-basic { + border: none; + padding: 15px 30px; + text-align: center; + font-size: 16px; + cursor: pointer; +} + +.button-report { + @extend .button-basic; + background-color: red; +} + +.button-submit { + @extend .button-basic; + background-color: green; + color: white; +} \ No newline at end of file