├── Clase 1
    ├── index.html
    ├── styles-dist.css
    └── styles.css
├── Clase 10
    ├── index.html
    ├── normalize.css
    └── styles.css
├── Clase 11
    ├── index.html
    ├── normalize.css
    └── styles.css
├── Clase 12
    ├── index.html
    ├── normalize.css
    └── styles.css
├── Clase 13
    ├── index.html
    ├── normalize.css
    └── styles.css
├── Clase 14
    ├── index.html
    ├── normalize.css
    └── styles.css
├── Clase 15
    ├── index.html
    ├── normalize.css
    └── styles.css
├── Clase 16
    ├── index.html
    ├── normalize.css
    └── styles.css
├── Clase 17
    ├── index.html
    ├── normalize.css
    └── styles.css
├── Clase 18
    ├── index.html
    ├── normalize.css
    └── styles.css
├── Clase 19
    ├── index.html
    ├── normalize.css
    └── styles.css
├── Clase 2
    ├── index.html
    ├── styles-dist.css
    └── styles.css
├── Clase 20
    ├── index.html
    ├── normalize.css
    └── styles.css
├── Clase 21
    ├── index.html
    ├── normalize.css
    └── styles.css
├── Clase 22
    ├── attachment.jpeg
    ├── cafe.jpeg
    ├── index.html
    ├── logo.png
    ├── normalize.css
    └── styles.css
├── Clase 23
    ├── index.html
    ├── normalize.css
    └── styles.css
├── Clase 24
    ├── index.html
    ├── normalize.css
    └── styles.css
├── Clase 25
    ├── assets
    │   └── fonts
    │   │   └── Music Magic Personal Use
    │   │       └── Music Magic Personal Use.ttf
    ├── index.html
    ├── normalize.css
    └── styles.css
├── Clase 26
    ├── check.png
    ├── index.html
    ├── normalize.css
    └── styles.css
├── Clase 27
    ├── index.html
    ├── normalize.css
    └── styles.css
├── Clase 28
    ├── assets
    │   └── img
    │   │   ├── attachment.jpeg
    │   │   ├── cafe.jpeg
    │   │   └── logo.png
    ├── index.html
    ├── normalize.css
    └── styles.css
├── Clase 29
    ├── assets
    │   └── img
    │   │   └── cafe.jpeg
    ├── index.html
    ├── normalize.css
    └── styles.css
├── Clase 3
    ├── banner.png
    ├── index.html
    ├── normalize.css
    ├── styles-dist.css
    └── styles.css
├── Clase 30
    ├── index.html
    ├── normalize.css
    └── styles.css
├── Clase 31
    ├── hsl.jpg
    ├── index.html
    ├── normalize.css
    └── styles.css
├── Clase 32
    ├── index.html
    ├── normalize.css
    └── styles.css
├── Clase 33
    ├── index.html
    ├── normalize.css
    └── styles.css
├── Clase 34
    ├── index.html
    ├── normalize.css
    └── styles.css
├── Clase 35
    ├── index.html
    └── styles.css
├── Clase 36
    ├── index.html
    └── styles.css
├── Clase 38
    ├── axis.PNG
    ├── index.html
    └── styles.css
├── Clase 39
    ├── axis.PNG
    ├── index.html
    └── styles.css
├── Clase 4
    ├── index.html
    ├── normalize.css
    ├── styles-dist.css
    └── styles.css
├── Clase 40
    ├── index.html
    └── styles.css
├── Clase 41
    ├── index.html
    ├── logo.png
    └── styles.css
├── Clase 42
    ├── index.html
    └── styles.css
├── Clase 43
    ├── Captura.PNG
    ├── index.html
    └── styles.css
├── Clase 44
    ├── index.html
    └── styles.css
├── Clase 45
    ├── index.html
    └── styles.css
├── Clase 46
    ├── index.html
    └── styles.css
├── Clase 47
    ├── index.html
    └── styles.css
├── Clase 48
    ├── index.html
    └── styles.css
├── Clase 49
    ├── index.html
    └── styles.css
├── Clase 5
    ├── index.html
    └── styles.css
├── Clase 50
    ├── index.html
    └── styles.css
├── Clase 51
    ├── images
    │   ├── 1.jpeg
    │   ├── 10.jpeg
    │   ├── 11.jpeg
    │   ├── 12.jpeg
    │   ├── 2.jpeg
    │   ├── 3.jpeg
    │   ├── 4.jpeg
    │   ├── 5.jpeg
    │   ├── 6.jpeg
    │   ├── 7.jpeg
    │   ├── 8.jpeg
    │   └── 9.jpeg
    ├── index.html
    ├── links.txt
    └── styles.css
├── Clase 52
    ├── index.html
    └── styles.css
├── Clase 54
    ├── index.html
    └── styles.css
├── Clase 55
    ├── index.html
    └── styles.css
├── Clase 56
    ├── index.html
    └── styles.css
├── Clase 6
    ├── index.html
    ├── normalize.css
    └── styles.css
├── Clase 7
    ├── index.html
    ├── normalize.css
    └── styles.css
├── Clase 8
    ├── gamepad.jpeg
    ├── index.html
    ├── normalize.css
    └── styles.css
├── Clase 9
    ├── index.html
    ├── normalize.css
    └── styles.css
└── README.md


/Clase 1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Mi primera web</title>
 6 |   <!-- Insertar CSS en la cabecera, no recomendable salvo que tengamos una sóla página o para pruebas 
 7 |     <style>
 8 |     p{
 9 |       color: red;
10 |     }
11 |   </style> 
12 | 
13 |   Estilo en línea, no recomendado para estilos estáticos, sólo para estilos que se tienen que calcular en tiempo real, con JavaScript por ejemlo.
14 |    <h1 style="color:blue">Soy un encabezado principal</h1>
15 | 
16 |    Trayendo una hoja de estilos externa, la forma más recomendada para poder reutlizar el código
17 |    <link rel="stylesheet" href="styles-dist.css">
18 | 
19 |    Importando con la regla @import url(), esta forma no se recomienda para evitar posibles fallos. 
20 |    <style>
21 |   @import url("styles-dist.css");
22 | </style>
23 | -->
24 | <link rel="stylesheet" href="styles-dist.css">
25 | </head>
26 | <body>
27 |   <h1>Soy un encabezado principal</h1>
28 |   <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odit autem vitae adipisci deserunt repellat. Sit sunt autem, possimus, quas quis architecto molestiae est eligendi quo libero quod eius ratione inventore. Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo error odio atque maxime consectetur odit ab facilis iure, mollitia veritatis fuga ullam exercitationem, vitae at aliquid officiis reprehenderit</p>
29 | 
30 |   <h1 class="title">Soy un encabezado principal</h1>
31 |   <p class="text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odit autem vitae adipisci deserunt repellat. Sit sunt autem, possimus, quas quis architecto molestiae est eligendi quo libero quod eius ratione inventore.</p>
32 | 
33 |   <h1 id="title">Soy un encabezado principal</h1>
34 |   <p id="text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odit autem vitae adipisci deserunt repellat. Sit sunt autem, possimus, quas quis architecto molestiae est eligendi quo libero quod eius ratione inventore. Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo error odio atque maxime consectetur odit ab facilis iure, mollitia veritatis fuga ullam exercitationem, vitae at aliquid officiis reprehenderit velit aliquam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste aliquid ratione, hic animi magni dolorem cupiditate explicabo, amet nisi corporis, molestiae architecto impedit ex optio minima iusto voluptatibus quae sunt?</p>
35 | 
36 |   <a class="rojo verde" href="">Enlace 1 rojo verde</a>
37 |   <a class="rojo" href="#">Enlace 2 rojo</a>
38 |   <a class="verde" href="#">Enlace 3 verde</a>
39 |   <a class="verde rojo" href="#">Enlace 4 verde rojo</a>
40 | 
41 | 
42 |   <h1>Título</h1>
43 |   <h2>Subtítulo</h2>
44 |   <h2>Otro subtítulo</h2>
45 |   <h3>Otro subtítulo más</h3>
46 |   <h3>Otro subtítulo más más</h3>
47 | 
48 |   <div>
49 |     <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque magni quidem recusandae non reiciendis ipsum earum, nam, <span>SOY UN SPAN</span> tenetur molestias, quia perferendis eligendi ratione eum at cumque facilis harum! Veritatis, quia.</p>
50 |     <span>OTRO SPAN</span>
51 |   </div>
52 | </body>
53 | </html>


--------------------------------------------------------------------------------
/Clase 1/styles-dist.css:
--------------------------------------------------------------------------------
  1 | /* Selector de etiqueta */
  2 |     /* p{
  3 |         color: red
  4 |     }
  5 | 
  6 |     h1{
  7 |         color: blue;
  8 |     } */
  9 | 
 10 | /* Selectores de clase */
 11 |     /* .title{
 12 |         color: green;
 13 |     }
 14 | 
 15 |     .text{
 16 |         color: blueviolet
 17 |     } */
 18 | 
 19 | /* Selectores de ID */
 20 |     /* #title{
 21 |         color: aqua;
 22 |     }
 23 | 
 24 |     #text{
 25 |         color: blueviolet;
 26 |     } */
 27 | 
 28 | /* Selectores universales */
 29 | 
 30 |     /* *{
 31 |         color: red;
 32 |     } */
 33 | 
 34 | /* Selectores de atributo */
 35 | 
 36 | /* Seleccionar los elementos que tienen ese atributo */
 37 | [href]{
 38 |     color: green;
 39 | }
 40 | 
 41 | /* Seleccionar los elementos que tienen ese atributo y ese valor*/
 42 | [href="#"]{
 43 |     color: red;
 44 | }
 45 | 
 46 | /* Seleccionar los elementos que tienen ese atributo al menos ese valor una vez*/
 47 | [class~="verde"]{
 48 |     color: green;
 49 | }
 50 | 
 51 | /* Seleccionar los elementos que tienen ese atributo y exactamente ese valor o empieze por el valor seguido de un guión*/
 52 | [class|="verde"]{
 53 |     color: blue;
 54 | }
 55 | 
 56 | /* Seleccionar los elementos que tienen ese atributo y empiezan por ese valor*/
 57 | [class^="rojo"]{
 58 |     color:purple;
 59 | }
 60 | 
 61 | /* Seleccionar los elementos que tienen ese atributo y terminan por ese valor*/
 62 | [class$="rojo"]{
 63 |     color:steelblue;
 64 | }
 65 | 
 66 | /* Seleccionar los elementos que tienen ese atributo y contengan ese valor*/
 67 | [class*="rojo"]{
 68 |     color:brown;
 69 | }
 70 | 
 71 | /* Selectores combinadores */
 72 | 
 73 | /* Selector de hermano adyacente */
 74 | 
 75 | /* Selecciona al hermano que esté justo por debajo de el. El estilo se aplica al hermano inferior */
 76 | h1 + h2{
 77 |     color:red;
 78 | }
 79 | 
 80 | h2 + h2{
 81 |     color: blue;
 82 | }
 83 | 
 84 | /* Selector de hermano general */
 85 | 
 86 | /* Selecciona todos los hermanos que esté por debajo de el. El estilo se aplica a todos los hermanos */
 87 | h1 ~ h3{
 88 |     color: green;
 89 | }
 90 | 
 91 | /* Selectores descendentes */
 92 | 
 93 | /* Selecciona todos los hijos. El estilo se aplica a todos los hijos */
 94 | div span{
 95 |     color: red;
 96 | }
 97 | 
 98 | /* Selector de hijo directo */
 99 | 
100 | /* Selecciona todos los hijos que sean directos, es decir que no estén dentro de otras etiquetas. El estilo se aplica a todos los hijos */
101 | p > span{
102 |     color: blue;
103 | }
104 | 
105 | 
106 | 


--------------------------------------------------------------------------------
/Clase 1/styles.css:
--------------------------------------------------------------------------------
  1 | /* Selector de etiqueta */
  2 |     /* p{
  3 |         color: red
  4 |     }
  5 | 
  6 |     h1{
  7 |         color: blue;
  8 |     } */
  9 | 
 10 | /* Selectores de clase */
 11 |     /* .title{
 12 |         color: green;
 13 |     }
 14 | 
 15 |     .text{
 16 |         color: blueviolet
 17 |     } */
 18 | 
 19 | /* Selectores de ID */
 20 |     /* #title{
 21 |         color: aqua;
 22 |     }
 23 | 
 24 |     #text{
 25 |         color: blueviolet;
 26 |     } */
 27 | 
 28 | /* Selectores universales */
 29 | 
 30 |     /* *{
 31 |         color: red;
 32 |     } */
 33 | 
 34 | /* Selectores de atributo */
 35 | 
 36 | /* Seleccionar los elementos que tienen ese atributo */
 37 | [href]{
 38 |     color: green;
 39 | }
 40 | 
 41 | /* Seleccionar los elementos que tienen ese atributo y ese valor*/
 42 | [href="#"]{
 43 |     color: red;
 44 | }
 45 | 
 46 | /* Seleccionar los elementos que tienen ese atributo al menos ese valor una vez*/
 47 | [class~="verde"]{
 48 |     color: green;
 49 | }
 50 | 
 51 | /* Seleccionar los elementos que tienen ese atributo y exactamente ese valor o empieze por el valor seguido de un guión*/
 52 | [class|="verde"]{
 53 |     color: blue;
 54 | }
 55 | 
 56 | /* Seleccionar los elementos que tienen ese atributo y empiezan por ese valor*/
 57 | [class^="rojo"]{
 58 |     color:purple;
 59 | }
 60 | 
 61 | /* Seleccionar los elementos que tienen ese atributo y terminan por ese valor*/
 62 | [class$="rojo"]{
 63 |     color:steelblue;
 64 | }
 65 | 
 66 | /* Seleccionar los elementos que tienen ese atributo y contengan ese valor*/
 67 | [class*="rojo"]{
 68 |     color:brown;
 69 | }
 70 | 
 71 | /* Selectores combinadores */
 72 | 
 73 | /* Selector de hermano adyacente */
 74 | 
 75 | /* Selecciona al hermano que esté justo por debajo de el. El estilo se aplica al hermano inferior */
 76 | h1 + h2{
 77 |     color:red;
 78 | }
 79 | 
 80 | h2 + h2{
 81 |     color: blue;
 82 | }
 83 | 
 84 | /* Selector de hermano general */
 85 | 
 86 | /* Selecciona todos los hermanos que esté por debajo de el. El estilo se aplica a todos los hermanos */
 87 | h1 ~ h3{
 88 |     color: green;
 89 | }
 90 | 
 91 | /* Selectores descendentes */
 92 | 
 93 | /* Selecciona todos los hijos. El estilo se aplica a todos los hijos */
 94 | div span{
 95 |     color: red;
 96 | }
 97 | 
 98 | /* Selector de hijo directo */
 99 | 
100 | /* Selecciona todos los hijos que sean directos, es decir que no estén dentro de otras etiquetas. El estilo se aplica a todos los hijos */
101 | p > span{
102 |     color: blue;
103 | }
104 | 
105 | 
106 | 


--------------------------------------------------------------------------------
/Clase 10/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Position - Relative</title>
 7 |     <link rel="stylesheet" href="normalize.css">
 8 |     <link rel="stylesheet" href="styles.css">
 9 | </head>
10 | 
11 | <body>
12 |    <!--  <div class="box1">Box 1</div>
13 |     <div class="box2">Box 2</div> -->
14 |     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt explicabo architecto commodi accusamus hic? Voluptatem voluptates aliquid excepturi quod quas, modi harum animi autem ex, vitae ut consequuntur numquam non.</p>
15 |     <div class="box1">Box 1</div>
16 |     <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente, unde porro! Sit consectetur delectus cumque, sapiente cum eius provident quam ad neque quod, eum suscipit ab similique? Saepe, earum quam!</p>
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Clase 10/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
  2 | 
  3 | /* Document
  4 |    ========================================================================== */
  5 | 
  6 | /**
  7 |  * 1. Correct the line height in all browsers.
  8 |  * 2. Prevent adjustments of font size after orientation changes in
  9 |  *    IE on Windows Phone and in iOS.
 10 |  */
 11 | 
 12 | *, *:before, *:after{
 13 |   box-sizing: border-box;
 14 | }
 15 | 
 16 | html {
 17 |   line-height: 1.15; /* 1 */
 18 |   -ms-text-size-adjust: 100%; /* 2 */
 19 |   -webkit-text-size-adjust: 100%; /* 2 */
 20 | }
 21 | 
 22 | /* Sections
 23 |    ========================================================================== */
 24 | 
 25 | /**
 26 |  * Remove the margin in all browsers (opinionated).
 27 |  */
 28 | 
 29 | body {
 30 |   margin: 0;
 31 | }
 32 | 
 33 | img{
 34 |   max-width: 100%;
 35 | }
 36 | 
 37 | /**
 38 |  * Add the correct display in IE 9-.
 39 |  */
 40 | 
 41 | article,
 42 | aside,
 43 | footer,
 44 | header,
 45 | nav,
 46 | section {
 47 |   display: block;
 48 | }
 49 | 
 50 | /**
 51 |  * Correct the font size and margin on `h1` elements within `section` and
 52 |  * `article` contexts in Chrome, Firefox, and Safari.
 53 |  */
 54 | 
 55 | h1 {
 56 |   font-size: 2em;
 57 |   margin: 0.67em 0;
 58 | }
 59 | 
 60 | /* Grouping content
 61 |    ========================================================================== */
 62 | 
 63 | /**
 64 |  * Add the correct display in IE 9-.
 65 |  * 1. Add the correct display in IE.
 66 |  */
 67 | 
 68 | figcaption,
 69 | figure,
 70 | main { /* 1 */
 71 |   display: block;
 72 | }
 73 | 
 74 | /**
 75 |  * Add the correct margin in IE 8.
 76 |  */
 77 | 
 78 | figure {
 79 |   margin: 1em 40px;
 80 | }
 81 | 
 82 | /**
 83 |  * 1. Add the correct box sizing in Firefox.
 84 |  * 2. Show the overflow in Edge and IE.
 85 |  */
 86 | 
 87 | hr {
 88 |   box-sizing: content-box; /* 1 */
 89 |   height: 0; /* 1 */
 90 |   overflow: visible; /* 2 */
 91 | }
 92 | 
 93 | /**
 94 |  * 1. Correct the inheritance and scaling of font size in all browsers.
 95 |  * 2. Correct the odd `em` font sizing in all browsers.
 96 |  */
 97 | 
 98 | pre {
 99 |   font-family: monospace, monospace; /* 1 */
100 |   font-size: 1em; /* 2 */
101 | }
102 | 
103 | /* Text-level semantics
104 |    ========================================================================== */
105 | 
106 | /**
107 |  * 1. Remove the gray background on active links in IE 10.
108 |  * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
109 |  */
110 | 
111 | a {
112 |   background-color: transparent; /* 1 */
113 |   -webkit-text-decoration-skip: objects; /* 2 */
114 | }
115 | 
116 | /**
117 |  * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
118 |  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
119 |  */
120 | 
121 | abbr[title] {
122 |   border-bottom: none; /* 1 */
123 |   text-decoration: underline; /* 2 */
124 |   text-decoration: underline dotted; /* 2 */
125 | }
126 | 
127 | /**
128 |  * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
129 |  */
130 | 
131 | b,
132 | strong {
133 |   font-weight: inherit;
134 | }
135 | 
136 | /**
137 |  * Add the correct font weight in Chrome, Edge, and Safari.
138 |  */
139 | 
140 | b,
141 | strong {
142 |   font-weight: bolder;
143 | }
144 | 
145 | /**
146 |  * 1. Correct the inheritance and scaling of font size in all browsers.
147 |  * 2. Correct the odd `em` font sizing in all browsers.
148 |  */
149 | 
150 | code,
151 | kbd,
152 | samp {
153 |   font-family: monospace, monospace; /* 1 */
154 |   font-size: 1em; /* 2 */
155 | }
156 | 
157 | /**
158 |  * Add the correct font style in Android 4.3-.
159 |  */
160 | 
161 | dfn {
162 |   font-style: italic;
163 | }
164 | 
165 | /**
166 |  * Add the correct background and color in IE 9-.
167 |  */
168 | 
169 | mark {
170 |   background-color: #ff0;
171 |   color: #000;
172 | }
173 | 
174 | /**
175 |  * Add the correct font size in all browsers.
176 |  */
177 | 
178 | small {
179 |   font-size: 80%;
180 | }
181 | 
182 | /**
183 |  * Prevent `sub` and `sup` elements from affecting the line height in
184 |  * all browsers.
185 |  */
186 | 
187 | sub,
188 | sup {
189 |   font-size: 75%;
190 |   line-height: 0;
191 |   position: relative;
192 |   vertical-align: baseline;
193 | }
194 | 
195 | sub {
196 |   bottom: -0.25em;
197 | }
198 | 
199 | sup {
200 |   top: -0.5em;
201 | }
202 | 
203 | /* Embedded content
204 |    ========================================================================== */
205 | 
206 | /**
207 |  * Add the correct display in IE 9-.
208 |  */
209 | 
210 | audio,
211 | video {
212 |   display: inline-block;
213 | }
214 | 
215 | /**
216 |  * Add the correct display in iOS 4-7.
217 |  */
218 | 
219 | audio:not([controls]) {
220 |   display: none;
221 |   height: 0;
222 | }
223 | 
224 | /**
225 |  * Remove the border on images inside links in IE 10-.
226 |  */
227 | 
228 | img {
229 |   border-style: none;
230 | }
231 | 
232 | /**
233 |  * Hide the overflow in IE.
234 |  */
235 | 
236 | svg:not(:root) {
237 |   overflow: hidden;
238 | }
239 | 
240 | /* Forms
241 |    ========================================================================== */
242 | 
243 | /**
244 |  * 1. Change the font styles in all browsers (opinionated).
245 |  * 2. Remove the margin in Firefox and Safari.
246 |  */
247 | 
248 | button,
249 | input,
250 | optgroup,
251 | select,
252 | textarea {
253 |   font-family: sans-serif; /* 1 */
254 |   font-size: 100%; /* 1 */
255 |   line-height: 1.15; /* 1 */
256 |   margin: 0; /* 2 */
257 | }
258 | 
259 | /**
260 |  * Show the overflow in IE.
261 |  * 1. Show the overflow in Edge.
262 |  */
263 | 
264 | button,
265 | input { /* 1 */
266 |   overflow: visible;
267 | }
268 | 
269 | /**
270 |  * Remove the inheritance of text transform in Edge, Firefox, and IE.
271 |  * 1. Remove the inheritance of text transform in Firefox.
272 |  */
273 | 
274 | button,
275 | select { /* 1 */
276 |   text-transform: none;
277 | }
278 | 
279 | /**
280 |  * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
281 |  *    controls in Android 4.
282 |  * 2. Correct the inability to style clickable types in iOS and Safari.
283 |  */
284 | 
285 | button,
286 | html [type="button"], /* 1 */
287 | [type="reset"],
288 | [type="submit"] {
289 |   -webkit-appearance: button; /* 2 */
290 | }
291 | 
292 | /**
293 |  * Remove the inner border and padding in Firefox.
294 |  */
295 | 
296 | button::-moz-focus-inner,
297 | [type="button"]::-moz-focus-inner,
298 | [type="reset"]::-moz-focus-inner,
299 | [type="submit"]::-moz-focus-inner {
300 |   border-style: none;
301 |   padding: 0;
302 | }
303 | 
304 | /**
305 |  * Restore the focus styles unset by the previous rule.
306 |  */
307 | 
308 | button:-moz-focusring,
309 | [type="button"]:-moz-focusring,
310 | [type="reset"]:-moz-focusring,
311 | [type="submit"]:-moz-focusring {
312 |   outline: 1px dotted ButtonText;
313 | }
314 | 
315 | /**
316 |  * Correct the padding in Firefox.
317 |  */
318 | 
319 | fieldset {
320 |   padding: 0.35em 0.75em 0.625em;
321 | }
322 | 
323 | /**
324 |  * 1. Correct the text wrapping in Edge and IE.
325 |  * 2. Correct the color inheritance from `fieldset` elements in IE.
326 |  * 3. Remove the padding so developers are not caught out when they zero out
327 |  *    `fieldset` elements in all browsers.
328 |  */
329 | 
330 | legend {
331 |   box-sizing: border-box; /* 1 */
332 |   color: inherit; /* 2 */
333 |   display: table; /* 1 */
334 |   max-width: 100%; /* 1 */
335 |   padding: 0; /* 3 */
336 |   white-space: normal; /* 1 */
337 | }
338 | 
339 | /**
340 |  * 1. Add the correct display in IE 9-.
341 |  * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
342 |  */
343 | 
344 | progress {
345 |   display: inline-block; /* 1 */
346 |   vertical-align: baseline; /* 2 */
347 | }
348 | 
349 | /**
350 |  * Remove the default vertical scrollbar in IE.
351 |  */
352 | 
353 | textarea {
354 |   overflow: auto;
355 | }
356 | 
357 | /**
358 |  * 1. Add the correct box sizing in IE 10-.
359 |  * 2. Remove the padding in IE 10-.
360 |  */
361 | 
362 | [type="checkbox"],
363 | [type="radio"] {
364 |   box-sizing: border-box; /* 1 */
365 |   padding: 0; /* 2 */
366 | }
367 | 
368 | /**
369 |  * Correct the cursor style of increment and decrement buttons in Chrome.
370 |  */
371 | 
372 | [type="number"]::-webkit-inner-spin-button,
373 | [type="number"]::-webkit-outer-spin-button {
374 |   height: auto;
375 | }
376 | 
377 | /**
378 |  * 1. Correct the odd appearance in Chrome and Safari.
379 |  * 2. Correct the outline style in Safari.
380 |  */
381 | 
382 | [type="search"] {
383 |   -webkit-appearance: textfield; /* 1 */
384 |   outline-offset: -2px; /* 2 */
385 | }
386 | 
387 | /**
388 |  * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
389 |  */
390 | 
391 | [type="search"]::-webkit-search-cancel-button,
392 | [type="search"]::-webkit-search-decoration {
393 |   -webkit-appearance: none;
394 | }
395 | 
396 | /**
397 |  * 1. Correct the inability to style clickable types in iOS and Safari.
398 |  * 2. Change font properties to `inherit` in Safari.
399 |  */
400 | 
401 | ::-webkit-file-upload-button {
402 |   -webkit-appearance: button; /* 1 */
403 |   font: inherit; /* 2 */
404 | }
405 | 
406 | /* Interactive
407 |    ========================================================================== */
408 | 
409 | /*
410 |  * Add the correct display in IE 9-.
411 |  * 1. Add the correct display in Edge, IE, and Firefox.
412 |  */
413 | 
414 | details, /* 1 */
415 | menu {
416 |   display: block;
417 | }
418 | 
419 | /*
420 |  * Add the correct display in all browsers.
421 |  */
422 | 
423 | summary {
424 |   display: list-item;
425 | }
426 | 
427 | /* Scripting
428 |    ========================================================================== */
429 | 
430 | /**
431 |  * Add the correct display in IE 9-.
432 |  */
433 | 
434 | canvas {
435 |   display: inline-block;
436 | }
437 | 
438 | /**
439 |  * Add the correct display in IE.
440 |  */
441 | 
442 | template {
443 |   display: none;
444 | }
445 | 
446 | /* Hidden
447 |    ========================================================================== */
448 | 
449 | /**
450 |  * Add the correct display in IE 10-.
451 |  */
452 | 
453 | [hidden] {
454 |   display: none;
455 | }
456 | 


--------------------------------------------------------------------------------
/Clase 10/styles.css:
--------------------------------------------------------------------------------
 1 | /* 
 2 | Position relative
 3 | 
 4 | Su punto de referencia (contexto) es el punto donde aparece en el flujo
 5 | 
 6 | Al ser un elemento posicionado lo podemos mover en los 3 ejes X Y Z
 7 | */
 8 | 
 9 | .box1, .box2{
10 |     width: 250px;
11 |     height: 250px;
12 |     margin: 1em auto;
13 |     font-size: 2.5em;
14 |     text-align: center;
15 | }
16 | 
17 | .box1{
18 |     background:lightgreen;
19 |     position: relative;
20 |     /* top right bottom left z-index */
21 |     /* z-index: 1; Si declaramos z-index automaticamente se dibuja por encima por tener un valor mayor que el de por defecto (0)*/
22 |     /* top y left tienen preferencia ante bottom y right */
23 |    /*  right: -500px;
24 |     bottom: 30px; */
25 | 
26 |     top: 500px;
27 | }
28 | 
29 | .box2{
30 |     background:lightcoral;
31 |     position: relative;
32 | }


--------------------------------------------------------------------------------
/Clase 11/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Position - Absolute</title>
 7 |     <link rel="stylesheet" href="normalize.css">
 8 |     <link rel="stylesheet" href="styles.css">
 9 | </head>
10 | 
11 | <body>
12 |     <div class="container">
13 |         <div class="box1"></div>
14 |         <!-- <p>Texto de ejemplo</p> -->
15 |         <div class="box2"></div>
16 |         <div class="box3"></div>
17 |         <div class="box4"></div>
18 |         <div class="box5"></div>
19 |     </div>
20 | </body>
21 | 
22 | </html>


--------------------------------------------------------------------------------
/Clase 11/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
  2 | 
  3 | /* Document
  4 |    ========================================================================== */
  5 | 
  6 | /**
  7 |  * 1. Correct the line height in all browsers.
  8 |  * 2. Prevent adjustments of font size after orientation changes in
  9 |  *    IE on Windows Phone and in iOS.
 10 |  */
 11 | 
 12 | *, *:before, *:after{
 13 |   box-sizing: border-box;
 14 | }
 15 | 
 16 | html {
 17 |   line-height: 1.15; /* 1 */
 18 |   -ms-text-size-adjust: 100%; /* 2 */
 19 |   -webkit-text-size-adjust: 100%; /* 2 */
 20 | }
 21 | 
 22 | /* Sections
 23 |    ========================================================================== */
 24 | 
 25 | /**
 26 |  * Remove the margin in all browsers (opinionated).
 27 |  */
 28 | 
 29 | body {
 30 |   margin: 0;
 31 | }
 32 | 
 33 | img{
 34 |   max-width: 100%;
 35 | }
 36 | 
 37 | /**
 38 |  * Add the correct display in IE 9-.
 39 |  */
 40 | 
 41 | article,
 42 | aside,
 43 | footer,
 44 | header,
 45 | nav,
 46 | section {
 47 |   display: block;
 48 | }
 49 | 
 50 | /**
 51 |  * Correct the font size and margin on `h1` elements within `section` and
 52 |  * `article` contexts in Chrome, Firefox, and Safari.
 53 |  */
 54 | 
 55 | h1 {
 56 |   font-size: 2em;
 57 |   margin: 0.67em 0;
 58 | }
 59 | 
 60 | /* Grouping content
 61 |    ========================================================================== */
 62 | 
 63 | /**
 64 |  * Add the correct display in IE 9-.
 65 |  * 1. Add the correct display in IE.
 66 |  */
 67 | 
 68 | figcaption,
 69 | figure,
 70 | main { /* 1 */
 71 |   display: block;
 72 | }
 73 | 
 74 | /**
 75 |  * Add the correct margin in IE 8.
 76 |  */
 77 | 
 78 | figure {
 79 |   margin: 1em 40px;
 80 | }
 81 | 
 82 | /**
 83 |  * 1. Add the correct box sizing in Firefox.
 84 |  * 2. Show the overflow in Edge and IE.
 85 |  */
 86 | 
 87 | hr {
 88 |   box-sizing: content-box; /* 1 */
 89 |   height: 0; /* 1 */
 90 |   overflow: visible; /* 2 */
 91 | }
 92 | 
 93 | /**
 94 |  * 1. Correct the inheritance and scaling of font size in all browsers.
 95 |  * 2. Correct the odd `em` font sizing in all browsers.
 96 |  */
 97 | 
 98 | pre {
 99 |   font-family: monospace, monospace; /* 1 */
100 |   font-size: 1em; /* 2 */
101 | }
102 | 
103 | /* Text-level semantics
104 |    ========================================================================== */
105 | 
106 | /**
107 |  * 1. Remove the gray background on active links in IE 10.
108 |  * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
109 |  */
110 | 
111 | a {
112 |   background-color: transparent; /* 1 */
113 |   -webkit-text-decoration-skip: objects; /* 2 */
114 | }
115 | 
116 | /**
117 |  * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
118 |  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
119 |  */
120 | 
121 | abbr[title] {
122 |   border-bottom: none; /* 1 */
123 |   text-decoration: underline; /* 2 */
124 |   text-decoration: underline dotted; /* 2 */
125 | }
126 | 
127 | /**
128 |  * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
129 |  */
130 | 
131 | b,
132 | strong {
133 |   font-weight: inherit;
134 | }
135 | 
136 | /**
137 |  * Add the correct font weight in Chrome, Edge, and Safari.
138 |  */
139 | 
140 | b,
141 | strong {
142 |   font-weight: bolder;
143 | }
144 | 
145 | /**
146 |  * 1. Correct the inheritance and scaling of font size in all browsers.
147 |  * 2. Correct the odd `em` font sizing in all browsers.
148 |  */
149 | 
150 | code,
151 | kbd,
152 | samp {
153 |   font-family: monospace, monospace; /* 1 */
154 |   font-size: 1em; /* 2 */
155 | }
156 | 
157 | /**
158 |  * Add the correct font style in Android 4.3-.
159 |  */
160 | 
161 | dfn {
162 |   font-style: italic;
163 | }
164 | 
165 | /**
166 |  * Add the correct background and color in IE 9-.
167 |  */
168 | 
169 | mark {
170 |   background-color: #ff0;
171 |   color: #000;
172 | }
173 | 
174 | /**
175 |  * Add the correct font size in all browsers.
176 |  */
177 | 
178 | small {
179 |   font-size: 80%;
180 | }
181 | 
182 | /**
183 |  * Prevent `sub` and `sup` elements from affecting the line height in
184 |  * all browsers.
185 |  */
186 | 
187 | sub,
188 | sup {
189 |   font-size: 75%;
190 |   line-height: 0;
191 |   position: relative;
192 |   vertical-align: baseline;
193 | }
194 | 
195 | sub {
196 |   bottom: -0.25em;
197 | }
198 | 
199 | sup {
200 |   top: -0.5em;
201 | }
202 | 
203 | /* Embedded content
204 |    ========================================================================== */
205 | 
206 | /**
207 |  * Add the correct display in IE 9-.
208 |  */
209 | 
210 | audio,
211 | video {
212 |   display: inline-block;
213 | }
214 | 
215 | /**
216 |  * Add the correct display in iOS 4-7.
217 |  */
218 | 
219 | audio:not([controls]) {
220 |   display: none;
221 |   height: 0;
222 | }
223 | 
224 | /**
225 |  * Remove the border on images inside links in IE 10-.
226 |  */
227 | 
228 | img {
229 |   border-style: none;
230 | }
231 | 
232 | /**
233 |  * Hide the overflow in IE.
234 |  */
235 | 
236 | svg:not(:root) {
237 |   overflow: hidden;
238 | }
239 | 
240 | /* Forms
241 |    ========================================================================== */
242 | 
243 | /**
244 |  * 1. Change the font styles in all browsers (opinionated).
245 |  * 2. Remove the margin in Firefox and Safari.
246 |  */
247 | 
248 | button,
249 | input,
250 | optgroup,
251 | select,
252 | textarea {
253 |   font-family: sans-serif; /* 1 */
254 |   font-size: 100%; /* 1 */
255 |   line-height: 1.15; /* 1 */
256 |   margin: 0; /* 2 */
257 | }
258 | 
259 | /**
260 |  * Show the overflow in IE.
261 |  * 1. Show the overflow in Edge.
262 |  */
263 | 
264 | button,
265 | input { /* 1 */
266 |   overflow: visible;
267 | }
268 | 
269 | /**
270 |  * Remove the inheritance of text transform in Edge, Firefox, and IE.
271 |  * 1. Remove the inheritance of text transform in Firefox.
272 |  */
273 | 
274 | button,
275 | select { /* 1 */
276 |   text-transform: none;
277 | }
278 | 
279 | /**
280 |  * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
281 |  *    controls in Android 4.
282 |  * 2. Correct the inability to style clickable types in iOS and Safari.
283 |  */
284 | 
285 | button,
286 | html [type="button"], /* 1 */
287 | [type="reset"],
288 | [type="submit"] {
289 |   -webkit-appearance: button; /* 2 */
290 | }
291 | 
292 | /**
293 |  * Remove the inner border and padding in Firefox.
294 |  */
295 | 
296 | button::-moz-focus-inner,
297 | [type="button"]::-moz-focus-inner,
298 | [type="reset"]::-moz-focus-inner,
299 | [type="submit"]::-moz-focus-inner {
300 |   border-style: none;
301 |   padding: 0;
302 | }
303 | 
304 | /**
305 |  * Restore the focus styles unset by the previous rule.
306 |  */
307 | 
308 | button:-moz-focusring,
309 | [type="button"]:-moz-focusring,
310 | [type="reset"]:-moz-focusring,
311 | [type="submit"]:-moz-focusring {
312 |   outline: 1px dotted ButtonText;
313 | }
314 | 
315 | /**
316 |  * Correct the padding in Firefox.
317 |  */
318 | 
319 | fieldset {
320 |   padding: 0.35em 0.75em 0.625em;
321 | }
322 | 
323 | /**
324 |  * 1. Correct the text wrapping in Edge and IE.
325 |  * 2. Correct the color inheritance from `fieldset` elements in IE.
326 |  * 3. Remove the padding so developers are not caught out when they zero out
327 |  *    `fieldset` elements in all browsers.
328 |  */
329 | 
330 | legend {
331 |   box-sizing: border-box; /* 1 */
332 |   color: inherit; /* 2 */
333 |   display: table; /* 1 */
334 |   max-width: 100%; /* 1 */
335 |   padding: 0; /* 3 */
336 |   white-space: normal; /* 1 */
337 | }
338 | 
339 | /**
340 |  * 1. Add the correct display in IE 9-.
341 |  * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
342 |  */
343 | 
344 | progress {
345 |   display: inline-block; /* 1 */
346 |   vertical-align: baseline; /* 2 */
347 | }
348 | 
349 | /**
350 |  * Remove the default vertical scrollbar in IE.
351 |  */
352 | 
353 | textarea {
354 |   overflow: auto;
355 | }
356 | 
357 | /**
358 |  * 1. Add the correct box sizing in IE 10-.
359 |  * 2. Remove the padding in IE 10-.
360 |  */
361 | 
362 | [type="checkbox"],
363 | [type="radio"] {
364 |   box-sizing: border-box; /* 1 */
365 |   padding: 0; /* 2 */
366 | }
367 | 
368 | /**
369 |  * Correct the cursor style of increment and decrement buttons in Chrome.
370 |  */
371 | 
372 | [type="number"]::-webkit-inner-spin-button,
373 | [type="number"]::-webkit-outer-spin-button {
374 |   height: auto;
375 | }
376 | 
377 | /**
378 |  * 1. Correct the odd appearance in Chrome and Safari.
379 |  * 2. Correct the outline style in Safari.
380 |  */
381 | 
382 | [type="search"] {
383 |   -webkit-appearance: textfield; /* 1 */
384 |   outline-offset: -2px; /* 2 */
385 | }
386 | 
387 | /**
388 |  * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
389 |  */
390 | 
391 | [type="search"]::-webkit-search-cancel-button,
392 | [type="search"]::-webkit-search-decoration {
393 |   -webkit-appearance: none;
394 | }
395 | 
396 | /**
397 |  * 1. Correct the inability to style clickable types in iOS and Safari.
398 |  * 2. Change font properties to `inherit` in Safari.
399 |  */
400 | 
401 | ::-webkit-file-upload-button {
402 |   -webkit-appearance: button; /* 1 */
403 |   font: inherit; /* 2 */
404 | }
405 | 
406 | /* Interactive
407 |    ========================================================================== */
408 | 
409 | /*
410 |  * Add the correct display in IE 9-.
411 |  * 1. Add the correct display in Edge, IE, and Firefox.
412 |  */
413 | 
414 | details, /* 1 */
415 | menu {
416 |   display: block;
417 | }
418 | 
419 | /*
420 |  * Add the correct display in all browsers.
421 |  */
422 | 
423 | summary {
424 |   display: list-item;
425 | }
426 | 
427 | /* Scripting
428 |    ========================================================================== */
429 | 
430 | /**
431 |  * Add the correct display in IE 9-.
432 |  */
433 | 
434 | canvas {
435 |   display: inline-block;
436 | }
437 | 
438 | /**
439 |  * Add the correct display in IE.
440 |  */
441 | 
442 | template {
443 |   display: none;
444 | }
445 | 
446 | /* Hidden
447 |    ========================================================================== */
448 | 
449 | /**
450 |  * Add the correct display in IE 10-.
451 |  */
452 | 
453 | [hidden] {
454 |   display: none;
455 | }
456 | 


--------------------------------------------------------------------------------
/Clase 11/styles.css:
--------------------------------------------------------------------------------
 1 | /* 
 2 | Position absolute
 3 | 
 4 | El elemento no conserva su espacio en el flujo.
 5 | 
 6 | Si no tiene dimensiones declaradas, sus dimensiones se ajustan al contenido.
 7 | 
 8 | Su punto de referencia (contexto) es el elemento que lo contenga posicionado más cercano, si no encuentra ninguno será el viewport (el espacio visible en pantalla)
 9 | 
10 | Al ser un elemento posicionado lo podemos mover en los 3 ejes X Y Z
11 | */
12 | 
13 | .container {
14 |     width: 300px;
15 |     height: 300px;
16 |     margin-left: auto;
17 |     margin-right: auto;
18 |     border: 3px solid black;
19 |     position: relative;
20 | }
21 | 
22 | [class^=box] {
23 |     width: 50px;
24 |     height: 50px;
25 | }
26 | 
27 | .box1 {
28 |     border: 4px solid lightcoral;
29 |     position: absolute;
30 |     top: 0;
31 |     left: 0;
32 | }
33 | 
34 | .box2 {
35 |     border: 4px solid blue;
36 |     position: absolute;
37 |     top: 0;
38 |     right: 0;
39 | }
40 | 
41 | .box3 {
42 |     border: 4px solid green;
43 |     position: absolute;
44 |     bottom: 0;
45 |     left: 0;
46 | }
47 | 
48 | .box4 {
49 |     border: 4px solid lightseagreen;
50 |     position: absolute;
51 |     bottom: 0;
52 |     right: 0;
53 | }
54 | 
55 | .box5 {
56 |     border: 4px solid darkorange;
57 |     position: absolute;
58 |     top: 0;
59 |     left: 0;
60 |     right: 0;
61 |     bottom: 0;
62 |     margin: auto;
63 | }


--------------------------------------------------------------------------------
/Clase 12/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Position - Fixed</title>
 7 |     <link rel="stylesheet" href="normalize.css">
 8 |     <link rel="stylesheet" href="styles.css">
 9 | </head>
10 | 
11 | <body>
12 |     <div class="menu">MENÚ</div>
13 |     <h1 class="title">Título</h1>
14 |     <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore voluptas, et non vero accusantium, quisquam, nam explicabo placeat exercitationem iste ab enim architecto pariatur expedita minus a. Dolorum, inciduntlaborum.</p>
15 |     <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore voluptas, et non vero accusantium, quisquam, nam explicabo placeat exercitationem iste ab enim architecto pariatur expedita minus a. Dolorum, inciduntlaborum.</p>
16 |     <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore voluptas, et non vero accusantium, quisquam, nam explicabo placeat exercitationem iste ab enim architecto pariatur expedita minus a. Dolorum, inciduntlaborum.</p>
17 |     <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore voluptas, et non vero accusantium, quisquam, nam explicabo placeat exercitationem iste ab enim architecto pariatur expedita minus a. Dolorum, inciduntlaborum.</p>
18 |     <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore voluptas, et non vero accusantium, quisquam, nam explicabo placeat exercitationem iste ab enim architecto pariatur expedita minus a. Dolorum, inciduntlaborum.</p>
19 |     <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore voluptas, et non vero accusantium, quisquam, nam explicabo placeat exercitationem iste ab enim architecto pariatur expedita minus a. Dolorum, inciduntlaborum.</p>
20 |     <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore voluptas, et non vero accusantium, quisquam, nam explicabo placeat exercitationem iste ab enim architecto pariatur expedita minus a. Dolorum, inciduntlaborum.</p>
21 |     <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore voluptas, et non vero accusantium, quisquam, nam explicabo placeat exercitationem iste ab enim architecto pariatur expedita minus a. Dolorum, inciduntlaborum.</p>
22 |     <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore voluptas, et non vero accusantium, quisquam, nam explicabo placeat exercitationem iste ab enim architecto pariatur expedita minus a. Dolorum, inciduntlaborum.</p>
23 |     <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore voluptas, et non vero accusantium, quisquam, nam explicabo placeat exercitationem iste ab enim architecto pariatur expedita minus a. Dolorum, inciduntlaborum.</p>
24 |     <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore voluptas, et non vero accusantium, quisquam, nam explicabo placeat exercitationem iste ab enim architecto pariatur expedita minus a. Dolorum, inciduntlaborum.</p>
25 | 
26 | </body>
27 | 
28 | </html>


--------------------------------------------------------------------------------
/Clase 12/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
  2 | 
  3 | /* Document
  4 |    ========================================================================== */
  5 | 
  6 | /**
  7 |  * 1. Correct the line height in all browsers.
  8 |  * 2. Prevent adjustments of font size after orientation changes in
  9 |  *    IE on Windows Phone and in iOS.
 10 |  */
 11 | 
 12 | *, *:before, *:after{
 13 |   box-sizing: border-box;
 14 | }
 15 | 
 16 | html {
 17 |   line-height: 1.15; /* 1 */
 18 |   -ms-text-size-adjust: 100%; /* 2 */
 19 |   -webkit-text-size-adjust: 100%; /* 2 */
 20 | }
 21 | 
 22 | /* Sections
 23 |    ========================================================================== */
 24 | 
 25 | /**
 26 |  * Remove the margin in all browsers (opinionated).
 27 |  */
 28 | 
 29 | body {
 30 |   margin: 0;
 31 | }
 32 | 
 33 | img{
 34 |   max-width: 100%;
 35 | }
 36 | 
 37 | /**
 38 |  * Add the correct display in IE 9-.
 39 |  */
 40 | 
 41 | article,
 42 | aside,
 43 | footer,
 44 | header,
 45 | nav,
 46 | section {
 47 |   display: block;
 48 | }
 49 | 
 50 | /**
 51 |  * Correct the font size and margin on `h1` elements within `section` and
 52 |  * `article` contexts in Chrome, Firefox, and Safari.
 53 |  */
 54 | 
 55 | h1 {
 56 |   font-size: 2em;
 57 |   margin: 0.67em 0;
 58 | }
 59 | 
 60 | /* Grouping content
 61 |    ========================================================================== */
 62 | 
 63 | /**
 64 |  * Add the correct display in IE 9-.
 65 |  * 1. Add the correct display in IE.
 66 |  */
 67 | 
 68 | figcaption,
 69 | figure,
 70 | main { /* 1 */
 71 |   display: block;
 72 | }
 73 | 
 74 | /**
 75 |  * Add the correct margin in IE 8.
 76 |  */
 77 | 
 78 | figure {
 79 |   margin: 1em 40px;
 80 | }
 81 | 
 82 | /**
 83 |  * 1. Add the correct box sizing in Firefox.
 84 |  * 2. Show the overflow in Edge and IE.
 85 |  */
 86 | 
 87 | hr {
 88 |   box-sizing: content-box; /* 1 */
 89 |   height: 0; /* 1 */
 90 |   overflow: visible; /* 2 */
 91 | }
 92 | 
 93 | /**
 94 |  * 1. Correct the inheritance and scaling of font size in all browsers.
 95 |  * 2. Correct the odd `em` font sizing in all browsers.
 96 |  */
 97 | 
 98 | pre {
 99 |   font-family: monospace, monospace; /* 1 */
100 |   font-size: 1em; /* 2 */
101 | }
102 | 
103 | /* Text-level semantics
104 |    ========================================================================== */
105 | 
106 | /**
107 |  * 1. Remove the gray background on active links in IE 10.
108 |  * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
109 |  */
110 | 
111 | a {
112 |   background-color: transparent; /* 1 */
113 |   -webkit-text-decoration-skip: objects; /* 2 */
114 | }
115 | 
116 | /**
117 |  * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
118 |  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
119 |  */
120 | 
121 | abbr[title] {
122 |   border-bottom: none; /* 1 */
123 |   text-decoration: underline; /* 2 */
124 |   text-decoration: underline dotted; /* 2 */
125 | }
126 | 
127 | /**
128 |  * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
129 |  */
130 | 
131 | b,
132 | strong {
133 |   font-weight: inherit;
134 | }
135 | 
136 | /**
137 |  * Add the correct font weight in Chrome, Edge, and Safari.
138 |  */
139 | 
140 | b,
141 | strong {
142 |   font-weight: bolder;
143 | }
144 | 
145 | /**
146 |  * 1. Correct the inheritance and scaling of font size in all browsers.
147 |  * 2. Correct the odd `em` font sizing in all browsers.
148 |  */
149 | 
150 | code,
151 | kbd,
152 | samp {
153 |   font-family: monospace, monospace; /* 1 */
154 |   font-size: 1em; /* 2 */
155 | }
156 | 
157 | /**
158 |  * Add the correct font style in Android 4.3-.
159 |  */
160 | 
161 | dfn {
162 |   font-style: italic;
163 | }
164 | 
165 | /**
166 |  * Add the correct background and color in IE 9-.
167 |  */
168 | 
169 | mark {
170 |   background-color: #ff0;
171 |   color: #000;
172 | }
173 | 
174 | /**
175 |  * Add the correct font size in all browsers.
176 |  */
177 | 
178 | small {
179 |   font-size: 80%;
180 | }
181 | 
182 | /**
183 |  * Prevent `sub` and `sup` elements from affecting the line height in
184 |  * all browsers.
185 |  */
186 | 
187 | sub,
188 | sup {
189 |   font-size: 75%;
190 |   line-height: 0;
191 |   position: relative;
192 |   vertical-align: baseline;
193 | }
194 | 
195 | sub {
196 |   bottom: -0.25em;
197 | }
198 | 
199 | sup {
200 |   top: -0.5em;
201 | }
202 | 
203 | /* Embedded content
204 |    ========================================================================== */
205 | 
206 | /**
207 |  * Add the correct display in IE 9-.
208 |  */
209 | 
210 | audio,
211 | video {
212 |   display: inline-block;
213 | }
214 | 
215 | /**
216 |  * Add the correct display in iOS 4-7.
217 |  */
218 | 
219 | audio:not([controls]) {
220 |   display: none;
221 |   height: 0;
222 | }
223 | 
224 | /**
225 |  * Remove the border on images inside links in IE 10-.
226 |  */
227 | 
228 | img {
229 |   border-style: none;
230 | }
231 | 
232 | /**
233 |  * Hide the overflow in IE.
234 |  */
235 | 
236 | svg:not(:root) {
237 |   overflow: hidden;
238 | }
239 | 
240 | /* Forms
241 |    ========================================================================== */
242 | 
243 | /**
244 |  * 1. Change the font styles in all browsers (opinionated).
245 |  * 2. Remove the margin in Firefox and Safari.
246 |  */
247 | 
248 | button,
249 | input,
250 | optgroup,
251 | select,
252 | textarea {
253 |   font-family: sans-serif; /* 1 */
254 |   font-size: 100%; /* 1 */
255 |   line-height: 1.15; /* 1 */
256 |   margin: 0; /* 2 */
257 | }
258 | 
259 | /**
260 |  * Show the overflow in IE.
261 |  * 1. Show the overflow in Edge.
262 |  */
263 | 
264 | button,
265 | input { /* 1 */
266 |   overflow: visible;
267 | }
268 | 
269 | /**
270 |  * Remove the inheritance of text transform in Edge, Firefox, and IE.
271 |  * 1. Remove the inheritance of text transform in Firefox.
272 |  */
273 | 
274 | button,
275 | select { /* 1 */
276 |   text-transform: none;
277 | }
278 | 
279 | /**
280 |  * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
281 |  *    controls in Android 4.
282 |  * 2. Correct the inability to style clickable types in iOS and Safari.
283 |  */
284 | 
285 | button,
286 | html [type="button"], /* 1 */
287 | [type="reset"],
288 | [type="submit"] {
289 |   -webkit-appearance: button; /* 2 */
290 | }
291 | 
292 | /**
293 |  * Remove the inner border and padding in Firefox.
294 |  */
295 | 
296 | button::-moz-focus-inner,
297 | [type="button"]::-moz-focus-inner,
298 | [type="reset"]::-moz-focus-inner,
299 | [type="submit"]::-moz-focus-inner {
300 |   border-style: none;
301 |   padding: 0;
302 | }
303 | 
304 | /**
305 |  * Restore the focus styles unset by the previous rule.
306 |  */
307 | 
308 | button:-moz-focusring,
309 | [type="button"]:-moz-focusring,
310 | [type="reset"]:-moz-focusring,
311 | [type="submit"]:-moz-focusring {
312 |   outline: 1px dotted ButtonText;
313 | }
314 | 
315 | /**
316 |  * Correct the padding in Firefox.
317 |  */
318 | 
319 | fieldset {
320 |   padding: 0.35em 0.75em 0.625em;
321 | }
322 | 
323 | /**
324 |  * 1. Correct the text wrapping in Edge and IE.
325 |  * 2. Correct the color inheritance from `fieldset` elements in IE.
326 |  * 3. Remove the padding so developers are not caught out when they zero out
327 |  *    `fieldset` elements in all browsers.
328 |  */
329 | 
330 | legend {
331 |   box-sizing: border-box; /* 1 */
332 |   color: inherit; /* 2 */
333 |   display: table; /* 1 */
334 |   max-width: 100%; /* 1 */
335 |   padding: 0; /* 3 */
336 |   white-space: normal; /* 1 */
337 | }
338 | 
339 | /**
340 |  * 1. Add the correct display in IE 9-.
341 |  * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
342 |  */
343 | 
344 | progress {
345 |   display: inline-block; /* 1 */
346 |   vertical-align: baseline; /* 2 */
347 | }
348 | 
349 | /**
350 |  * Remove the default vertical scrollbar in IE.
351 |  */
352 | 
353 | textarea {
354 |   overflow: auto;
355 | }
356 | 
357 | /**
358 |  * 1. Add the correct box sizing in IE 10-.
359 |  * 2. Remove the padding in IE 10-.
360 |  */
361 | 
362 | [type="checkbox"],
363 | [type="radio"] {
364 |   box-sizing: border-box; /* 1 */
365 |   padding: 0; /* 2 */
366 | }
367 | 
368 | /**
369 |  * Correct the cursor style of increment and decrement buttons in Chrome.
370 |  */
371 | 
372 | [type="number"]::-webkit-inner-spin-button,
373 | [type="number"]::-webkit-outer-spin-button {
374 |   height: auto;
375 | }
376 | 
377 | /**
378 |  * 1. Correct the odd appearance in Chrome and Safari.
379 |  * 2. Correct the outline style in Safari.
380 |  */
381 | 
382 | [type="search"] {
383 |   -webkit-appearance: textfield; /* 1 */
384 |   outline-offset: -2px; /* 2 */
385 | }
386 | 
387 | /**
388 |  * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
389 |  */
390 | 
391 | [type="search"]::-webkit-search-cancel-button,
392 | [type="search"]::-webkit-search-decoration {
393 |   -webkit-appearance: none;
394 | }
395 | 
396 | /**
397 |  * 1. Correct the inability to style clickable types in iOS and Safari.
398 |  * 2. Change font properties to `inherit` in Safari.
399 |  */
400 | 
401 | ::-webkit-file-upload-button {
402 |   -webkit-appearance: button; /* 1 */
403 |   font: inherit; /* 2 */
404 | }
405 | 
406 | /* Interactive
407 |    ========================================================================== */
408 | 
409 | /*
410 |  * Add the correct display in IE 9-.
411 |  * 1. Add the correct display in Edge, IE, and Firefox.
412 |  */
413 | 
414 | details, /* 1 */
415 | menu {
416 |   display: block;
417 | }
418 | 
419 | /*
420 |  * Add the correct display in all browsers.
421 |  */
422 | 
423 | summary {
424 |   display: list-item;
425 | }
426 | 
427 | /* Scripting
428 |    ========================================================================== */
429 | 
430 | /**
431 |  * Add the correct display in IE 9-.
432 |  */
433 | 
434 | canvas {
435 |   display: inline-block;
436 | }
437 | 
438 | /**
439 |  * Add the correct display in IE.
440 |  */
441 | 
442 | template {
443 |   display: none;
444 | }
445 | 
446 | /* Hidden
447 |    ========================================================================== */
448 | 
449 | /**
450 |  * Add the correct display in IE 10-.
451 |  */
452 | 
453 | [hidden] {
454 |   display: none;
455 | }
456 | 


--------------------------------------------------------------------------------
/Clase 12/styles.css:
--------------------------------------------------------------------------------
 1 | /* 
 2 | Position fixed
 3 | 
 4 | El elemento no conserva su espacio en el flujo.
 5 | 
 6 | Si no tiene dimensiones declaradas, sus dimensiones se ajustan al contenido.
 7 | 
 8 | Su punto de referencia (contexto) es el viewport (el espacio visible en pantalla)
 9 | 
10 | Al ser un elemento posicionado lo podemos mover en los 3 ejes X Y Z
11 | */
12 | 
13 | body{
14 |     padding-top: 6em;
15 | }
16 | 
17 | .menu{
18 |     background:darkcyan;
19 |     padding: .5em;
20 |     text-align: center;
21 |     font-size: 2em;
22 |     position: fixed;
23 |     top: 0;
24 |     width: 100%;
25 | }
26 | 
27 | .title{
28 |     margin: 0;
29 | }
30 | 


--------------------------------------------------------------------------------
/Clase 13/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Position - Sticky</title>
 7 |     <link rel="stylesheet" href="normalize.css">
 8 |     <link rel="stylesheet" href="styles.css">
 9 | </head>
10 | 
11 | <body>
12 |     <div class="slide">SLIDE</div>
13 |     <div class="menu">MENÚ</div>
14 |     <h1 class="title">Título</h1>
15 |     <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore voluptas, et non vero accusantium, quisquam, nam explicabo placeat exercitationem iste ab enim architecto pariatur expedita minus a. Dolorum, inciduntlaborum.</p>
16 |     <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore voluptas, et non vero accusantium, quisquam, nam explicabo placeat exercitationem iste ab enim architecto pariatur expedita minus a. Dolorum, inciduntlaborum.</p>
17 |     <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore voluptas, et non vero accusantium, quisquam, nam explicabo placeat exercitationem iste ab enim architecto pariatur expedita minus a. Dolorum, inciduntlaborum.</p>
18 |     <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore voluptas, et non vero accusantium, quisquam, nam explicabo placeat exercitationem iste ab enim architecto pariatur expedita minus a. Dolorum, inciduntlaborum.</p>
19 |     <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore voluptas, et non vero accusantium, quisquam, nam explicabo placeat exercitationem iste ab enim architecto pariatur expedita minus a. Dolorum, inciduntlaborum.</p>
20 |     <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore voluptas, et non vero accusantium, quisquam, nam explicabo placeat exercitationem iste ab enim architecto pariatur expedita minus a. Dolorum, inciduntlaborum.</p>
21 |     <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore voluptas, et non vero accusantium, quisquam, nam explicabo placeat exercitationem iste ab enim architecto pariatur expedita minus a. Dolorum, inciduntlaborum.</p>
22 |     <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore voluptas, et non vero accusantium, quisquam, nam explicabo placeat exercitationem iste ab enim architecto pariatur expedita minus a. Dolorum, inciduntlaborum.</p>
23 |     <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore voluptas, et non vero accusantium, quisquam, nam explicabo placeat exercitationem iste ab enim architecto pariatur expedita minus a. Dolorum, inciduntlaborum.</p>
24 |     <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore voluptas, et non vero accusantium, quisquam, nam explicabo placeat exercitationem iste ab enim architecto pariatur expedita minus a. Dolorum, inciduntlaborum.</p>
25 |     <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore voluptas, et non vero accusantium, quisquam, nam explicabo placeat exercitationem iste ab enim architecto pariatur expedita minus a. Dolorum, inciduntlaborum.</p>
26 | 
27 | </body>
28 | 
29 | </html>


--------------------------------------------------------------------------------
/Clase 13/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
  2 | 
  3 | /* Document
  4 |    ========================================================================== */
  5 | 
  6 | /**
  7 |  * 1. Correct the line height in all browsers.
  8 |  * 2. Prevent adjustments of font size after orientation changes in
  9 |  *    IE on Windows Phone and in iOS.
 10 |  */
 11 | 
 12 | *, *:before, *:after{
 13 |   box-sizing: border-box;
 14 | }
 15 | 
 16 | html {
 17 |   line-height: 1.15; /* 1 */
 18 |   -ms-text-size-adjust: 100%; /* 2 */
 19 |   -webkit-text-size-adjust: 100%; /* 2 */
 20 | }
 21 | 
 22 | /* Sections
 23 |    ========================================================================== */
 24 | 
 25 | /**
 26 |  * Remove the margin in all browsers (opinionated).
 27 |  */
 28 | 
 29 | body {
 30 |   margin: 0;
 31 | }
 32 | 
 33 | img{
 34 |   max-width: 100%;
 35 | }
 36 | 
 37 | /**
 38 |  * Add the correct display in IE 9-.
 39 |  */
 40 | 
 41 | article,
 42 | aside,
 43 | footer,
 44 | header,
 45 | nav,
 46 | section {
 47 |   display: block;
 48 | }
 49 | 
 50 | /**
 51 |  * Correct the font size and margin on `h1` elements within `section` and
 52 |  * `article` contexts in Chrome, Firefox, and Safari.
 53 |  */
 54 | 
 55 | h1 {
 56 |   font-size: 2em;
 57 |   margin: 0.67em 0;
 58 | }
 59 | 
 60 | /* Grouping content
 61 |    ========================================================================== */
 62 | 
 63 | /**
 64 |  * Add the correct display in IE 9-.
 65 |  * 1. Add the correct display in IE.
 66 |  */
 67 | 
 68 | figcaption,
 69 | figure,
 70 | main { /* 1 */
 71 |   display: block;
 72 | }
 73 | 
 74 | /**
 75 |  * Add the correct margin in IE 8.
 76 |  */
 77 | 
 78 | figure {
 79 |   margin: 1em 40px;
 80 | }
 81 | 
 82 | /**
 83 |  * 1. Add the correct box sizing in Firefox.
 84 |  * 2. Show the overflow in Edge and IE.
 85 |  */
 86 | 
 87 | hr {
 88 |   box-sizing: content-box; /* 1 */
 89 |   height: 0; /* 1 */
 90 |   overflow: visible; /* 2 */
 91 | }
 92 | 
 93 | /**
 94 |  * 1. Correct the inheritance and scaling of font size in all browsers.
 95 |  * 2. Correct the odd `em` font sizing in all browsers.
 96 |  */
 97 | 
 98 | pre {
 99 |   font-family: monospace, monospace; /* 1 */
100 |   font-size: 1em; /* 2 */
101 | }
102 | 
103 | /* Text-level semantics
104 |    ========================================================================== */
105 | 
106 | /**
107 |  * 1. Remove the gray background on active links in IE 10.
108 |  * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
109 |  */
110 | 
111 | a {
112 |   background-color: transparent; /* 1 */
113 |   -webkit-text-decoration-skip: objects; /* 2 */
114 | }
115 | 
116 | /**
117 |  * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
118 |  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
119 |  */
120 | 
121 | abbr[title] {
122 |   border-bottom: none; /* 1 */
123 |   text-decoration: underline; /* 2 */
124 |   text-decoration: underline dotted; /* 2 */
125 | }
126 | 
127 | /**
128 |  * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
129 |  */
130 | 
131 | b,
132 | strong {
133 |   font-weight: inherit;
134 | }
135 | 
136 | /**
137 |  * Add the correct font weight in Chrome, Edge, and Safari.
138 |  */
139 | 
140 | b,
141 | strong {
142 |   font-weight: bolder;
143 | }
144 | 
145 | /**
146 |  * 1. Correct the inheritance and scaling of font size in all browsers.
147 |  * 2. Correct the odd `em` font sizing in all browsers.
148 |  */
149 | 
150 | code,
151 | kbd,
152 | samp {
153 |   font-family: monospace, monospace; /* 1 */
154 |   font-size: 1em; /* 2 */
155 | }
156 | 
157 | /**
158 |  * Add the correct font style in Android 4.3-.
159 |  */
160 | 
161 | dfn {
162 |   font-style: italic;
163 | }
164 | 
165 | /**
166 |  * Add the correct background and color in IE 9-.
167 |  */
168 | 
169 | mark {
170 |   background-color: #ff0;
171 |   color: #000;
172 | }
173 | 
174 | /**
175 |  * Add the correct font size in all browsers.
176 |  */
177 | 
178 | small {
179 |   font-size: 80%;
180 | }
181 | 
182 | /**
183 |  * Prevent `sub` and `sup` elements from affecting the line height in
184 |  * all browsers.
185 |  */
186 | 
187 | sub,
188 | sup {
189 |   font-size: 75%;
190 |   line-height: 0;
191 |   position: relative;
192 |   vertical-align: baseline;
193 | }
194 | 
195 | sub {
196 |   bottom: -0.25em;
197 | }
198 | 
199 | sup {
200 |   top: -0.5em;
201 | }
202 | 
203 | /* Embedded content
204 |    ========================================================================== */
205 | 
206 | /**
207 |  * Add the correct display in IE 9-.
208 |  */
209 | 
210 | audio,
211 | video {
212 |   display: inline-block;
213 | }
214 | 
215 | /**
216 |  * Add the correct display in iOS 4-7.
217 |  */
218 | 
219 | audio:not([controls]) {
220 |   display: none;
221 |   height: 0;
222 | }
223 | 
224 | /**
225 |  * Remove the border on images inside links in IE 10-.
226 |  */
227 | 
228 | img {
229 |   border-style: none;
230 | }
231 | 
232 | /**
233 |  * Hide the overflow in IE.
234 |  */
235 | 
236 | svg:not(:root) {
237 |   overflow: hidden;
238 | }
239 | 
240 | /* Forms
241 |    ========================================================================== */
242 | 
243 | /**
244 |  * 1. Change the font styles in all browsers (opinionated).
245 |  * 2. Remove the margin in Firefox and Safari.
246 |  */
247 | 
248 | button,
249 | input,
250 | optgroup,
251 | select,
252 | textarea {
253 |   font-family: sans-serif; /* 1 */
254 |   font-size: 100%; /* 1 */
255 |   line-height: 1.15; /* 1 */
256 |   margin: 0; /* 2 */
257 | }
258 | 
259 | /**
260 |  * Show the overflow in IE.
261 |  * 1. Show the overflow in Edge.
262 |  */
263 | 
264 | button,
265 | input { /* 1 */
266 |   overflow: visible;
267 | }
268 | 
269 | /**
270 |  * Remove the inheritance of text transform in Edge, Firefox, and IE.
271 |  * 1. Remove the inheritance of text transform in Firefox.
272 |  */
273 | 
274 | button,
275 | select { /* 1 */
276 |   text-transform: none;
277 | }
278 | 
279 | /**
280 |  * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
281 |  *    controls in Android 4.
282 |  * 2. Correct the inability to style clickable types in iOS and Safari.
283 |  */
284 | 
285 | button,
286 | html [type="button"], /* 1 */
287 | [type="reset"],
288 | [type="submit"] {
289 |   -webkit-appearance: button; /* 2 */
290 | }
291 | 
292 | /**
293 |  * Remove the inner border and padding in Firefox.
294 |  */
295 | 
296 | button::-moz-focus-inner,
297 | [type="button"]::-moz-focus-inner,
298 | [type="reset"]::-moz-focus-inner,
299 | [type="submit"]::-moz-focus-inner {
300 |   border-style: none;
301 |   padding: 0;
302 | }
303 | 
304 | /**
305 |  * Restore the focus styles unset by the previous rule.
306 |  */
307 | 
308 | button:-moz-focusring,
309 | [type="button"]:-moz-focusring,
310 | [type="reset"]:-moz-focusring,
311 | [type="submit"]:-moz-focusring {
312 |   outline: 1px dotted ButtonText;
313 | }
314 | 
315 | /**
316 |  * Correct the padding in Firefox.
317 |  */
318 | 
319 | fieldset {
320 |   padding: 0.35em 0.75em 0.625em;
321 | }
322 | 
323 | /**
324 |  * 1. Correct the text wrapping in Edge and IE.
325 |  * 2. Correct the color inheritance from `fieldset` elements in IE.
326 |  * 3. Remove the padding so developers are not caught out when they zero out
327 |  *    `fieldset` elements in all browsers.
328 |  */
329 | 
330 | legend {
331 |   box-sizing: border-box; /* 1 */
332 |   color: inherit; /* 2 */
333 |   display: table; /* 1 */
334 |   max-width: 100%; /* 1 */
335 |   padding: 0; /* 3 */
336 |   white-space: normal; /* 1 */
337 | }
338 | 
339 | /**
340 |  * 1. Add the correct display in IE 9-.
341 |  * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
342 |  */
343 | 
344 | progress {
345 |   display: inline-block; /* 1 */
346 |   vertical-align: baseline; /* 2 */
347 | }
348 | 
349 | /**
350 |  * Remove the default vertical scrollbar in IE.
351 |  */
352 | 
353 | textarea {
354 |   overflow: auto;
355 | }
356 | 
357 | /**
358 |  * 1. Add the correct box sizing in IE 10-.
359 |  * 2. Remove the padding in IE 10-.
360 |  */
361 | 
362 | [type="checkbox"],
363 | [type="radio"] {
364 |   box-sizing: border-box; /* 1 */
365 |   padding: 0; /* 2 */
366 | }
367 | 
368 | /**
369 |  * Correct the cursor style of increment and decrement buttons in Chrome.
370 |  */
371 | 
372 | [type="number"]::-webkit-inner-spin-button,
373 | [type="number"]::-webkit-outer-spin-button {
374 |   height: auto;
375 | }
376 | 
377 | /**
378 |  * 1. Correct the odd appearance in Chrome and Safari.
379 |  * 2. Correct the outline style in Safari.
380 |  */
381 | 
382 | [type="search"] {
383 |   -webkit-appearance: textfield; /* 1 */
384 |   outline-offset: -2px; /* 2 */
385 | }
386 | 
387 | /**
388 |  * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
389 |  */
390 | 
391 | [type="search"]::-webkit-search-cancel-button,
392 | [type="search"]::-webkit-search-decoration {
393 |   -webkit-appearance: none;
394 | }
395 | 
396 | /**
397 |  * 1. Correct the inability to style clickable types in iOS and Safari.
398 |  * 2. Change font properties to `inherit` in Safari.
399 |  */
400 | 
401 | ::-webkit-file-upload-button {
402 |   -webkit-appearance: button; /* 1 */
403 |   font: inherit; /* 2 */
404 | }
405 | 
406 | /* Interactive
407 |    ========================================================================== */
408 | 
409 | /*
410 |  * Add the correct display in IE 9-.
411 |  * 1. Add the correct display in Edge, IE, and Firefox.
412 |  */
413 | 
414 | details, /* 1 */
415 | menu {
416 |   display: block;
417 | }
418 | 
419 | /*
420 |  * Add the correct display in all browsers.
421 |  */
422 | 
423 | summary {
424 |   display: list-item;
425 | }
426 | 
427 | /* Scripting
428 |    ========================================================================== */
429 | 
430 | /**
431 |  * Add the correct display in IE 9-.
432 |  */
433 | 
434 | canvas {
435 |   display: inline-block;
436 | }
437 | 
438 | /**
439 |  * Add the correct display in IE.
440 |  */
441 | 
442 | template {
443 |   display: none;
444 | }
445 | 
446 | /* Hidden
447 |    ========================================================================== */
448 | 
449 | /**
450 |  * Add the correct display in IE 10-.
451 |  */
452 | 
453 | [hidden] {
454 |   display: none;
455 | }
456 | 


--------------------------------------------------------------------------------
/Clase 13/styles.css:
--------------------------------------------------------------------------------
 1 | /* 
 2 | Position sticky
 3 | 
 4 | El elemento conserva su espacio en el flujo.
 5 | 
 6 | Si no tiene dimensiones declaradas, sus dimensiones se ajustan al contenido.
 7 | 
 8 | Su punto de referencia (contexto) es el viewport (el espacio visible en pantalla)
 9 | 
10 | Al ser un elemento posicionado lo podemos mover en los 3 ejes X Y Z
11 | */
12 | 
13 | .slide{
14 |     height: 300px;
15 |     background: grey;
16 |     font-size: 3em;
17 |     text-align: center;
18 |     line-height: 6em;
19 | }
20 | 
21 | .menu{
22 |     background:darkcyan;
23 |     padding: .5em;
24 |     text-align: center;
25 |     font-size: 2em;
26 |     width: 100%;
27 |     position: sticky;
28 |     top:0;
29 | }
30 | 
31 | .title{
32 |     margin: 0;
33 | }
34 | 


--------------------------------------------------------------------------------
/Clase 14/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>z.index</title>
 7 |     <link rel="stylesheet" href="normalize.css">
 8 |     <link rel="stylesheet" href="styles.css">
 9 | </head>
10 | 
11 | <body>
12 |    <!--  <div class="box box1">1</div>
13 |     <div class="box box2">2</div>
14 |     <div class="box box3">3</div>
15 |     <div class="box box4">4</div> -->
16 | 
17 |     <div class="padre">
18 |         <div class="hijo">Hijo</div>
19 |     </div>
20 | </body>
21 | 
22 | </html>


--------------------------------------------------------------------------------
/Clase 14/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
  2 | 
  3 | /* Document
  4 |    ========================================================================== */
  5 | 
  6 | /**
  7 |  * 1. Correct the line height in all browsers.
  8 |  * 2. Prevent adjustments of font size after orientation changes in
  9 |  *    IE on Windows Phone and in iOS.
 10 |  */
 11 | 
 12 | *, *:before, *:after{
 13 |   box-sizing: border-box;
 14 | }
 15 | 
 16 | html {
 17 |   line-height: 1.15; /* 1 */
 18 |   -ms-text-size-adjust: 100%; /* 2 */
 19 |   -webkit-text-size-adjust: 100%; /* 2 */
 20 | }
 21 | 
 22 | /* Sections
 23 |    ========================================================================== */
 24 | 
 25 | /**
 26 |  * Remove the margin in all browsers (opinionated).
 27 |  */
 28 | 
 29 | body {
 30 |   margin: 0;
 31 | }
 32 | 
 33 | img{
 34 |   max-width: 100%;
 35 | }
 36 | 
 37 | /**
 38 |  * Add the correct display in IE 9-.
 39 |  */
 40 | 
 41 | article,
 42 | aside,
 43 | footer,
 44 | header,
 45 | nav,
 46 | section {
 47 |   display: block;
 48 | }
 49 | 
 50 | /**
 51 |  * Correct the font size and margin on `h1` elements within `section` and
 52 |  * `article` contexts in Chrome, Firefox, and Safari.
 53 |  */
 54 | 
 55 | h1 {
 56 |   font-size: 2em;
 57 |   margin: 0.67em 0;
 58 | }
 59 | 
 60 | /* Grouping content
 61 |    ========================================================================== */
 62 | 
 63 | /**
 64 |  * Add the correct display in IE 9-.
 65 |  * 1. Add the correct display in IE.
 66 |  */
 67 | 
 68 | figcaption,
 69 | figure,
 70 | main { /* 1 */
 71 |   display: block;
 72 | }
 73 | 
 74 | /**
 75 |  * Add the correct margin in IE 8.
 76 |  */
 77 | 
 78 | figure {
 79 |   margin: 1em 40px;
 80 | }
 81 | 
 82 | /**
 83 |  * 1. Add the correct box sizing in Firefox.
 84 |  * 2. Show the overflow in Edge and IE.
 85 |  */
 86 | 
 87 | hr {
 88 |   box-sizing: content-box; /* 1 */
 89 |   height: 0; /* 1 */
 90 |   overflow: visible; /* 2 */
 91 | }
 92 | 
 93 | /**
 94 |  * 1. Correct the inheritance and scaling of font size in all browsers.
 95 |  * 2. Correct the odd `em` font sizing in all browsers.
 96 |  */
 97 | 
 98 | pre {
 99 |   font-family: monospace, monospace; /* 1 */
100 |   font-size: 1em; /* 2 */
101 | }
102 | 
103 | /* Text-level semantics
104 |    ========================================================================== */
105 | 
106 | /**
107 |  * 1. Remove the gray background on active links in IE 10.
108 |  * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
109 |  */
110 | 
111 | a {
112 |   background-color: transparent; /* 1 */
113 |   -webkit-text-decoration-skip: objects; /* 2 */
114 | }
115 | 
116 | /**
117 |  * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
118 |  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
119 |  */
120 | 
121 | abbr[title] {
122 |   border-bottom: none; /* 1 */
123 |   text-decoration: underline; /* 2 */
124 |   text-decoration: underline dotted; /* 2 */
125 | }
126 | 
127 | /**
128 |  * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
129 |  */
130 | 
131 | b,
132 | strong {
133 |   font-weight: inherit;
134 | }
135 | 
136 | /**
137 |  * Add the correct font weight in Chrome, Edge, and Safari.
138 |  */
139 | 
140 | b,
141 | strong {
142 |   font-weight: bolder;
143 | }
144 | 
145 | /**
146 |  * 1. Correct the inheritance and scaling of font size in all browsers.
147 |  * 2. Correct the odd `em` font sizing in all browsers.
148 |  */
149 | 
150 | code,
151 | kbd,
152 | samp {
153 |   font-family: monospace, monospace; /* 1 */
154 |   font-size: 1em; /* 2 */
155 | }
156 | 
157 | /**
158 |  * Add the correct font style in Android 4.3-.
159 |  */
160 | 
161 | dfn {
162 |   font-style: italic;
163 | }
164 | 
165 | /**
166 |  * Add the correct background and color in IE 9-.
167 |  */
168 | 
169 | mark {
170 |   background-color: #ff0;
171 |   color: #000;
172 | }
173 | 
174 | /**
175 |  * Add the correct font size in all browsers.
176 |  */
177 | 
178 | small {
179 |   font-size: 80%;
180 | }
181 | 
182 | /**
183 |  * Prevent `sub` and `sup` elements from affecting the line height in
184 |  * all browsers.
185 |  */
186 | 
187 | sub,
188 | sup {
189 |   font-size: 75%;
190 |   line-height: 0;
191 |   position: relative;
192 |   vertical-align: baseline;
193 | }
194 | 
195 | sub {
196 |   bottom: -0.25em;
197 | }
198 | 
199 | sup {
200 |   top: -0.5em;
201 | }
202 | 
203 | /* Embedded content
204 |    ========================================================================== */
205 | 
206 | /**
207 |  * Add the correct display in IE 9-.
208 |  */
209 | 
210 | audio,
211 | video {
212 |   display: inline-block;
213 | }
214 | 
215 | /**
216 |  * Add the correct display in iOS 4-7.
217 |  */
218 | 
219 | audio:not([controls]) {
220 |   display: none;
221 |   height: 0;
222 | }
223 | 
224 | /**
225 |  * Remove the border on images inside links in IE 10-.
226 |  */
227 | 
228 | img {
229 |   border-style: none;
230 | }
231 | 
232 | /**
233 |  * Hide the overflow in IE.
234 |  */
235 | 
236 | svg:not(:root) {
237 |   overflow: hidden;
238 | }
239 | 
240 | /* Forms
241 |    ========================================================================== */
242 | 
243 | /**
244 |  * 1. Change the font styles in all browsers (opinionated).
245 |  * 2. Remove the margin in Firefox and Safari.
246 |  */
247 | 
248 | button,
249 | input,
250 | optgroup,
251 | select,
252 | textarea {
253 |   font-family: sans-serif; /* 1 */
254 |   font-size: 100%; /* 1 */
255 |   line-height: 1.15; /* 1 */
256 |   margin: 0; /* 2 */
257 | }
258 | 
259 | /**
260 |  * Show the overflow in IE.
261 |  * 1. Show the overflow in Edge.
262 |  */
263 | 
264 | button,
265 | input { /* 1 */
266 |   overflow: visible;
267 | }
268 | 
269 | /**
270 |  * Remove the inheritance of text transform in Edge, Firefox, and IE.
271 |  * 1. Remove the inheritance of text transform in Firefox.
272 |  */
273 | 
274 | button,
275 | select { /* 1 */
276 |   text-transform: none;
277 | }
278 | 
279 | /**
280 |  * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
281 |  *    controls in Android 4.
282 |  * 2. Correct the inability to style clickable types in iOS and Safari.
283 |  */
284 | 
285 | button,
286 | html [type="button"], /* 1 */
287 | [type="reset"],
288 | [type="submit"] {
289 |   -webkit-appearance: button; /* 2 */
290 | }
291 | 
292 | /**
293 |  * Remove the inner border and padding in Firefox.
294 |  */
295 | 
296 | button::-moz-focus-inner,
297 | [type="button"]::-moz-focus-inner,
298 | [type="reset"]::-moz-focus-inner,
299 | [type="submit"]::-moz-focus-inner {
300 |   border-style: none;
301 |   padding: 0;
302 | }
303 | 
304 | /**
305 |  * Restore the focus styles unset by the previous rule.
306 |  */
307 | 
308 | button:-moz-focusring,
309 | [type="button"]:-moz-focusring,
310 | [type="reset"]:-moz-focusring,
311 | [type="submit"]:-moz-focusring {
312 |   outline: 1px dotted ButtonText;
313 | }
314 | 
315 | /**
316 |  * Correct the padding in Firefox.
317 |  */
318 | 
319 | fieldset {
320 |   padding: 0.35em 0.75em 0.625em;
321 | }
322 | 
323 | /**
324 |  * 1. Correct the text wrapping in Edge and IE.
325 |  * 2. Correct the color inheritance from `fieldset` elements in IE.
326 |  * 3. Remove the padding so developers are not caught out when they zero out
327 |  *    `fieldset` elements in all browsers.
328 |  */
329 | 
330 | legend {
331 |   box-sizing: border-box; /* 1 */
332 |   color: inherit; /* 2 */
333 |   display: table; /* 1 */
334 |   max-width: 100%; /* 1 */
335 |   padding: 0; /* 3 */
336 |   white-space: normal; /* 1 */
337 | }
338 | 
339 | /**
340 |  * 1. Add the correct display in IE 9-.
341 |  * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
342 |  */
343 | 
344 | progress {
345 |   display: inline-block; /* 1 */
346 |   vertical-align: baseline; /* 2 */
347 | }
348 | 
349 | /**
350 |  * Remove the default vertical scrollbar in IE.
351 |  */
352 | 
353 | textarea {
354 |   overflow: auto;
355 | }
356 | 
357 | /**
358 |  * 1. Add the correct box sizing in IE 10-.
359 |  * 2. Remove the padding in IE 10-.
360 |  */
361 | 
362 | [type="checkbox"],
363 | [type="radio"] {
364 |   box-sizing: border-box; /* 1 */
365 |   padding: 0; /* 2 */
366 | }
367 | 
368 | /**
369 |  * Correct the cursor style of increment and decrement buttons in Chrome.
370 |  */
371 | 
372 | [type="number"]::-webkit-inner-spin-button,
373 | [type="number"]::-webkit-outer-spin-button {
374 |   height: auto;
375 | }
376 | 
377 | /**
378 |  * 1. Correct the odd appearance in Chrome and Safari.
379 |  * 2. Correct the outline style in Safari.
380 |  */
381 | 
382 | [type="search"] {
383 |   -webkit-appearance: textfield; /* 1 */
384 |   outline-offset: -2px; /* 2 */
385 | }
386 | 
387 | /**
388 |  * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
389 |  */
390 | 
391 | [type="search"]::-webkit-search-cancel-button,
392 | [type="search"]::-webkit-search-decoration {
393 |   -webkit-appearance: none;
394 | }
395 | 
396 | /**
397 |  * 1. Correct the inability to style clickable types in iOS and Safari.
398 |  * 2. Change font properties to `inherit` in Safari.
399 |  */
400 | 
401 | ::-webkit-file-upload-button {
402 |   -webkit-appearance: button; /* 1 */
403 |   font: inherit; /* 2 */
404 | }
405 | 
406 | /* Interactive
407 |    ========================================================================== */
408 | 
409 | /*
410 |  * Add the correct display in IE 9-.
411 |  * 1. Add the correct display in Edge, IE, and Firefox.
412 |  */
413 | 
414 | details, /* 1 */
415 | menu {
416 |   display: block;
417 | }
418 | 
419 | /*
420 |  * Add the correct display in all browsers.
421 |  */
422 | 
423 | summary {
424 |   display: list-item;
425 | }
426 | 
427 | /* Scripting
428 |    ========================================================================== */
429 | 
430 | /**
431 |  * Add the correct display in IE 9-.
432 |  */
433 | 
434 | canvas {
435 |   display: inline-block;
436 | }
437 | 
438 | /**
439 |  * Add the correct display in IE.
440 |  */
441 | 
442 | template {
443 |   display: none;
444 | }
445 | 
446 | /* Hidden
447 |    ========================================================================== */
448 | 
449 | /**
450 |  * Add the correct display in IE 10-.
451 |  */
452 | 
453 | [hidden] {
454 |   display: none;
455 | }
456 | 


--------------------------------------------------------------------------------
/Clase 14/styles.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | 
 3 | z-index
 4 | 
 5 | Nos permite modificar el orden de las capas en el eje z (profundidad)
 6 | 
 7 | Admite valores positivos y negativos
 8 | 
 9 | Es recomendable usar valores no consecutivos. 100, 200, 300…
10 | 
11 | Si el padre tiene z-index declarado no podremos poner a un hijo por encima.
12 | 
13 | */
14 | 
15 | .box{
16 |     width: 75px;
17 |     height: 75px;
18 |     font-size: 1.5em;
19 |     line-height: 75px;
20 |     text-align: center;
21 |     position: relative;
22 | }
23 | 
24 | .box1{
25 |     background: darkcyan;
26 |     z-index: 30;
27 | }
28 | 
29 | .box2{
30 |     background: darkkhaki;
31 |     top: -38px;
32 |     left: 38px;
33 |     z-index: 20;
34 | }
35 | 
36 | .box3{
37 |     background:darkorchid;
38 |     top: -75px;
39 |     left: 75px;
40 |     z-index: 10;
41 | }
42 | 
43 | .box4{
44 |     background: darkgoldenrod;
45 |     top: -150px;
46 |     left: 50px;
47 |     z-index: 15;
48 | }
49 | 
50 | .padre{
51 |     width: 200px;
52 |     height: 200px;
53 |     background: blue;
54 |     position: relative;
55 |     top: 30px;
56 |     /* Si queremos colocar a un hijo por debajo del padre, el padre no puede tener un z-index declarado */
57 | }
58 | 
59 | .hijo{
60 |     width: 50px;
61 |     height: 50px;
62 |     background: yellow;
63 |     position: relative;
64 |     top: -30px;
65 |     left: 150px;
66 |     z-index: -100;
67 |     /* El hijo debe tener un z-index negativo */
68 | }


--------------------------------------------------------------------------------
/Clase 15/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Display</title>
 7 |     <link rel="stylesheet" href="normalize.css">
 8 |     <link rel="stylesheet" href="styles.css">
 9 | </head>
10 | 
11 | <body>
12 |     <span class="inline">Soy un elemento en línea</span>
13 |     <span class="inline">Soy otro elemento en línea</span>
14 |     <p class="block">Soy un elemento de bloque</p>
15 | </body>
16 | 
17 | </html>


--------------------------------------------------------------------------------
/Clase 15/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
  2 | 
  3 | /* Document
  4 |    ========================================================================== */
  5 | 
  6 | /**
  7 |  * 1. Correct the line height in all browsers.
  8 |  * 2. Prevent adjustments of font size after orientation changes in
  9 |  *    IE on Windows Phone and in iOS.
 10 |  */
 11 | 
 12 | *, *:before, *:after{
 13 |   box-sizing: border-box;
 14 | }
 15 | 
 16 | html {
 17 |   line-height: 1.15; /* 1 */
 18 |   -ms-text-size-adjust: 100%; /* 2 */
 19 |   -webkit-text-size-adjust: 100%; /* 2 */
 20 | }
 21 | 
 22 | /* Sections
 23 |    ========================================================================== */
 24 | 
 25 | /**
 26 |  * Remove the margin in all browsers (opinionated).
 27 |  */
 28 | 
 29 | body {
 30 |   margin: 0;
 31 | }
 32 | 
 33 | img{
 34 |   max-width: 100%;
 35 | }
 36 | 
 37 | /**
 38 |  * Add the correct display in IE 9-.
 39 |  */
 40 | 
 41 | article,
 42 | aside,
 43 | footer,
 44 | header,
 45 | nav,
 46 | section {
 47 |   display: block;
 48 | }
 49 | 
 50 | /**
 51 |  * Correct the font size and margin on `h1` elements within `section` and
 52 |  * `article` contexts in Chrome, Firefox, and Safari.
 53 |  */
 54 | 
 55 | h1 {
 56 |   font-size: 2em;
 57 |   margin: 0.67em 0;
 58 | }
 59 | 
 60 | /* Grouping content
 61 |    ========================================================================== */
 62 | 
 63 | /**
 64 |  * Add the correct display in IE 9-.
 65 |  * 1. Add the correct display in IE.
 66 |  */
 67 | 
 68 | figcaption,
 69 | figure,
 70 | main { /* 1 */
 71 |   display: block;
 72 | }
 73 | 
 74 | /**
 75 |  * Add the correct margin in IE 8.
 76 |  */
 77 | 
 78 | figure {
 79 |   margin: 1em 40px;
 80 | }
 81 | 
 82 | /**
 83 |  * 1. Add the correct box sizing in Firefox.
 84 |  * 2. Show the overflow in Edge and IE.
 85 |  */
 86 | 
 87 | hr {
 88 |   box-sizing: content-box; /* 1 */
 89 |   height: 0; /* 1 */
 90 |   overflow: visible; /* 2 */
 91 | }
 92 | 
 93 | /**
 94 |  * 1. Correct the inheritance and scaling of font size in all browsers.
 95 |  * 2. Correct the odd `em` font sizing in all browsers.
 96 |  */
 97 | 
 98 | pre {
 99 |   font-family: monospace, monospace; /* 1 */
100 |   font-size: 1em; /* 2 */
101 | }
102 | 
103 | /* Text-level semantics
104 |    ========================================================================== */
105 | 
106 | /**
107 |  * 1. Remove the gray background on active links in IE 10.
108 |  * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
109 |  */
110 | 
111 | a {
112 |   background-color: transparent; /* 1 */
113 |   -webkit-text-decoration-skip: objects; /* 2 */
114 | }
115 | 
116 | /**
117 |  * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
118 |  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
119 |  */
120 | 
121 | abbr[title] {
122 |   border-bottom: none; /* 1 */
123 |   text-decoration: underline; /* 2 */
124 |   text-decoration: underline dotted; /* 2 */
125 | }
126 | 
127 | /**
128 |  * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
129 |  */
130 | 
131 | b,
132 | strong {
133 |   font-weight: inherit;
134 | }
135 | 
136 | /**
137 |  * Add the correct font weight in Chrome, Edge, and Safari.
138 |  */
139 | 
140 | b,
141 | strong {
142 |   font-weight: bolder;
143 | }
144 | 
145 | /**
146 |  * 1. Correct the inheritance and scaling of font size in all browsers.
147 |  * 2. Correct the odd `em` font sizing in all browsers.
148 |  */
149 | 
150 | code,
151 | kbd,
152 | samp {
153 |   font-family: monospace, monospace; /* 1 */
154 |   font-size: 1em; /* 2 */
155 | }
156 | 
157 | /**
158 |  * Add the correct font style in Android 4.3-.
159 |  */
160 | 
161 | dfn {
162 |   font-style: italic;
163 | }
164 | 
165 | /**
166 |  * Add the correct background and color in IE 9-.
167 |  */
168 | 
169 | mark {
170 |   background-color: #ff0;
171 |   color: #000;
172 | }
173 | 
174 | /**
175 |  * Add the correct font size in all browsers.
176 |  */
177 | 
178 | small {
179 |   font-size: 80%;
180 | }
181 | 
182 | /**
183 |  * Prevent `sub` and `sup` elements from affecting the line height in
184 |  * all browsers.
185 |  */
186 | 
187 | sub,
188 | sup {
189 |   font-size: 75%;
190 |   line-height: 0;
191 |   position: relative;
192 |   vertical-align: baseline;
193 | }
194 | 
195 | sub {
196 |   bottom: -0.25em;
197 | }
198 | 
199 | sup {
200 |   top: -0.5em;
201 | }
202 | 
203 | /* Embedded content
204 |    ========================================================================== */
205 | 
206 | /**
207 |  * Add the correct display in IE 9-.
208 |  */
209 | 
210 | audio,
211 | video {
212 |   display: inline-block;
213 | }
214 | 
215 | /**
216 |  * Add the correct display in iOS 4-7.
217 |  */
218 | 
219 | audio:not([controls]) {
220 |   display: none;
221 |   height: 0;
222 | }
223 | 
224 | /**
225 |  * Remove the border on images inside links in IE 10-.
226 |  */
227 | 
228 | img {
229 |   border-style: none;
230 | }
231 | 
232 | /**
233 |  * Hide the overflow in IE.
234 |  */
235 | 
236 | svg:not(:root) {
237 |   overflow: hidden;
238 | }
239 | 
240 | /* Forms
241 |    ========================================================================== */
242 | 
243 | /**
244 |  * 1. Change the font styles in all browsers (opinionated).
245 |  * 2. Remove the margin in Firefox and Safari.
246 |  */
247 | 
248 | button,
249 | input,
250 | optgroup,
251 | select,
252 | textarea {
253 |   font-family: sans-serif; /* 1 */
254 |   font-size: 100%; /* 1 */
255 |   line-height: 1.15; /* 1 */
256 |   margin: 0; /* 2 */
257 | }
258 | 
259 | /**
260 |  * Show the overflow in IE.
261 |  * 1. Show the overflow in Edge.
262 |  */
263 | 
264 | button,
265 | input { /* 1 */
266 |   overflow: visible;
267 | }
268 | 
269 | /**
270 |  * Remove the inheritance of text transform in Edge, Firefox, and IE.
271 |  * 1. Remove the inheritance of text transform in Firefox.
272 |  */
273 | 
274 | button,
275 | select { /* 1 */
276 |   text-transform: none;
277 | }
278 | 
279 | /**
280 |  * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
281 |  *    controls in Android 4.
282 |  * 2. Correct the inability to style clickable types in iOS and Safari.
283 |  */
284 | 
285 | button,
286 | html [type="button"], /* 1 */
287 | [type="reset"],
288 | [type="submit"] {
289 |   -webkit-appearance: button; /* 2 */
290 | }
291 | 
292 | /**
293 |  * Remove the inner border and padding in Firefox.
294 |  */
295 | 
296 | button::-moz-focus-inner,
297 | [type="button"]::-moz-focus-inner,
298 | [type="reset"]::-moz-focus-inner,
299 | [type="submit"]::-moz-focus-inner {
300 |   border-style: none;
301 |   padding: 0;
302 | }
303 | 
304 | /**
305 |  * Restore the focus styles unset by the previous rule.
306 |  */
307 | 
308 | button:-moz-focusring,
309 | [type="button"]:-moz-focusring,
310 | [type="reset"]:-moz-focusring,
311 | [type="submit"]:-moz-focusring {
312 |   outline: 1px dotted ButtonText;
313 | }
314 | 
315 | /**
316 |  * Correct the padding in Firefox.
317 |  */
318 | 
319 | fieldset {
320 |   padding: 0.35em 0.75em 0.625em;
321 | }
322 | 
323 | /**
324 |  * 1. Correct the text wrapping in Edge and IE.
325 |  * 2. Correct the color inheritance from `fieldset` elements in IE.
326 |  * 3. Remove the padding so developers are not caught out when they zero out
327 |  *    `fieldset` elements in all browsers.
328 |  */
329 | 
330 | legend {
331 |   box-sizing: border-box; /* 1 */
332 |   color: inherit; /* 2 */
333 |   display: table; /* 1 */
334 |   max-width: 100%; /* 1 */
335 |   padding: 0; /* 3 */
336 |   white-space: normal; /* 1 */
337 | }
338 | 
339 | /**
340 |  * 1. Add the correct display in IE 9-.
341 |  * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
342 |  */
343 | 
344 | progress {
345 |   display: inline-block; /* 1 */
346 |   vertical-align: baseline; /* 2 */
347 | }
348 | 
349 | /**
350 |  * Remove the default vertical scrollbar in IE.
351 |  */
352 | 
353 | textarea {
354 |   overflow: auto;
355 | }
356 | 
357 | /**
358 |  * 1. Add the correct box sizing in IE 10-.
359 |  * 2. Remove the padding in IE 10-.
360 |  */
361 | 
362 | [type="checkbox"],
363 | [type="radio"] {
364 |   box-sizing: border-box; /* 1 */
365 |   padding: 0; /* 2 */
366 | }
367 | 
368 | /**
369 |  * Correct the cursor style of increment and decrement buttons in Chrome.
370 |  */
371 | 
372 | [type="number"]::-webkit-inner-spin-button,
373 | [type="number"]::-webkit-outer-spin-button {
374 |   height: auto;
375 | }
376 | 
377 | /**
378 |  * 1. Correct the odd appearance in Chrome and Safari.
379 |  * 2. Correct the outline style in Safari.
380 |  */
381 | 
382 | [type="search"] {
383 |   -webkit-appearance: textfield; /* 1 */
384 |   outline-offset: -2px; /* 2 */
385 | }
386 | 
387 | /**
388 |  * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
389 |  */
390 | 
391 | [type="search"]::-webkit-search-cancel-button,
392 | [type="search"]::-webkit-search-decoration {
393 |   -webkit-appearance: none;
394 | }
395 | 
396 | /**
397 |  * 1. Correct the inability to style clickable types in iOS and Safari.
398 |  * 2. Change font properties to `inherit` in Safari.
399 |  */
400 | 
401 | ::-webkit-file-upload-button {
402 |   -webkit-appearance: button; /* 1 */
403 |   font: inherit; /* 2 */
404 | }
405 | 
406 | /* Interactive
407 |    ========================================================================== */
408 | 
409 | /*
410 |  * Add the correct display in IE 9-.
411 |  * 1. Add the correct display in Edge, IE, and Firefox.
412 |  */
413 | 
414 | details, /* 1 */
415 | menu {
416 |   display: block;
417 | }
418 | 
419 | /*
420 |  * Add the correct display in all browsers.
421 |  */
422 | 
423 | summary {
424 |   display: list-item;
425 | }
426 | 
427 | /* Scripting
428 |    ========================================================================== */
429 | 
430 | /**
431 |  * Add the correct display in IE 9-.
432 |  */
433 | 
434 | canvas {
435 |   display: inline-block;
436 | }
437 | 
438 | /**
439 |  * Add the correct display in IE.
440 |  */
441 | 
442 | template {
443 |   display: none;
444 | }
445 | 
446 | /* Hidden
447 |    ========================================================================== */
448 | 
449 | /**
450 |  * Add the correct display in IE 10-.
451 |  */
452 | 
453 | [hidden] {
454 |   display: none;
455 | }
456 | 


--------------------------------------------------------------------------------
/Clase 15/styles.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | -Nos permite definir cómo se comporta una caja.
 3 | -De forma natural existen elementos en línea y elementos en bloque
 4 | -Los valores de esta propiedad son:
 5 |     inline – Establece que la caja se comporta como si fuera un elemento en línea.
 6 |         No admite dimensiones (width y height)
 7 |         Admiten margin y padding pero no afecta al flujo vertical,sólo al horizontal
 8 |     block - Establece que la caja se comporta como si fuera un elemento en bloque.
 9 |         Admite dimensiones (width y height)
10 |         Admiten margin y padding y afecta al flujo vertical, sólo al horizontal.
11 | 
12 |     inline-block - Se comporta como un elemento en línea pero acepta width y heigth
13 |     
14 |     none – Oculta el elemento pero se sigue renderizando
15 | 
16 |     table – Imita el comportamiento de una tabla
17 | 
18 |     list-item - Imita el comportamiento de una lista
19 | 
20 |     CSS3
21 |     flex – maquetar componentes
22 |     grid – maquetar layout
23 | */
24 | 
25 | .inline{
26 |     background: lime;
27 |     display: none;
28 | }
29 | 
30 | .block{
31 |     background: yellow;
32 |     margin: 0;
33 | }


--------------------------------------------------------------------------------
/Clase 16/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Pseudoelementos</title>
 7 |     <link rel="stylesheet" href="normalize.css">
 8 |     <link rel="stylesheet" href="styles.css">
 9 | </head>
10 | 
11 | <body>
12 |     <h1 class="title">Pseudoelementos</h1>
13 |     <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt eum impedit dolorum eligendi et, accusantium laudantium deleniti molestias id optio quibusdam rerum architecto atque cupiditate ratione cumque enim nobis voluptatem.</p>
14 |     <p class="dolar">5</p>
15 |     <span class="inline">Soy un elemento de línea</span>
16 | </body>
17 | 
18 | </html>


--------------------------------------------------------------------------------
/Clase 16/styles.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | Se utilizan para dar estilo a partes específicas de un elemento.
 3 | La sintaxis es selector::pseudo-element{ estilos }
 4 | 
 5 | Existen 5 pseudoelementos:
 6 |     ::first-letter (Elementos de bloque)
 7 |     ::first-line (Elementos de bloque)
 8 |     ::selection (Retirado de la especificación)
 9 |     ::before
10 |     ::after
11 |         La propiedad content es obligatoria
12 |         Son elementos de línea por defecto
13 |         Son hijos del elemento al que pertenecen
14 | 
15 | */
16 | 
17 | .title::first-letter{
18 |     color: red;
19 |     font-size: 2em;
20 | }
21 | 
22 | .text::first-line{
23 |     font-size: 2em;
24 |     color:blue;
25 | }
26 | 
27 | .inline::first-letter{
28 |     color: red;
29 |     font-size: 2em;
30 | }
31 | 
32 | .text::selection{
33 |     color: lime;
34 |     background: red;
35 | }
36 | 
37 | .dolar::before,
38 | .dolar::after{
39 |     content: '';
40 |     display: block;
41 |     width: 20px;
42 |     height: 20px;
43 |     background: red;
44 | }
45 | 
46 | 
47 | 
48 | 


--------------------------------------------------------------------------------
/Clase 17/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Pseudoclases</title>
 7 |     <!-- <link rel="stylesheet" href="normalize.css"> -->
 8 |     <link rel="stylesheet" href="styles.css">
 9 | </head>
10 | 
11 | <body>
12 |                 <div id="fullscreen">
13 |                     <h1>Demostración :fullscreen</h1>
14 |                     <p>Este texto se pondrá grande y rojo cuando el navegador esté en modo de pantalla completa.</p>
15 |                     <button id="fullscreen-button">Entrar en pantalla completa</button>
16 |                 </div>
17 |     <h1 class="title">Pseudoclases</h1>
18 |     <!-- <a href="#" class="link">Soy un enlace no visitado</a>
19 |     <a href="#" class="link">Soy un enlace visitado</a> -->
20 | 
21 |     <!--  <input type="text" class="input">
22 | 
23 |     <a href="#" class="button">Button</a> -->
24 | 
25 |     <!-- <a href="#text" class="menu">Ir a parrafo</a> -->
26 |     <!--  <p id="text" class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dolor in
27 |         exercitationem autem
28 |         odio! Debitis magnam quia accusamus at. Delectus, ipsa ullam? Cupiditate, sequi. Culpa eos quo modi ipsam
29 |         consectetur</p> -->
30 |     <span lang="en" class="span">Hello World</span>
31 |     <span lang="es" class="span">Hola Mundo</span>
32 | </body>
33 | 
34 | </html>


--------------------------------------------------------------------------------
/Clase 17/styles.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | Dynamic
 3 |     :link (links) - Link no visitado
 4 |     :visited (links) - Link visitado
 5 |     :active (links) - El momento del click
 6 |     :hover - Al poner el mouse sobre el elemento
 7 |     :focus - Cuando el elemento tiene el foco
 8 | 
 9 | Target
10 |     :target - Elemento es objetivo de un marcador o ancla
11 | 
12 | Language
13 |     :lang() - Elemento que contiene el atributo lang que especifiquemos
14 | */
15 | 
16 | /*
17 |     ===Ejercicios PSEUDOCLASES I===
18 | 
19 |         .link:link {
20 |             color: red;
21 |         }
22 | 
23 |         .link:visited {
24 |             color: chartreuse
25 |         }
26 | 
27 |         .link:active {
28 |             color: cyan;
29 |             background: red;
30 |         }
31 | 
32 |         .title:hover {
33 |             color: blueviolet;
34 |         }
35 | 
36 |         .button {
37 |             text-decoration: none;
38 |             display: inline-block;
39 |             background: red;
40 |             padding: .5em;
41 |             border-radius: 10px;
42 |             color: #FFF;
43 |         }
44 | 
45 |         .button:active {
46 |             transform: scale(.9)
47 |         }
48 | 
49 |         .button:hover {
50 |             color: red;
51 |             background: #fff;
52 |             border: 1px solid;
53 |             border-radius: 10px;
54 |         }
55 | 
56 |         .input:focus {
57 |             background: green;
58 |         }
59 | 
60 |         .menu {
61 |             background: lightblue;
62 |             display: block;
63 |             padding: 1em;
64 |             text-decoration: none;
65 |             text-align: center;
66 |             position: fixed;
67 |             width: 100%;
68 |             top: 0;
69 |             left: 0;
70 |         }
71 | 
72 |         .text {
73 |             margin-top: 500px;
74 |             margin-bottom: 500px;
75 |         }
76 | 
77 |         .text:target {
78 |             padding-top: 75px;
79 |         }
80 | 
81 |         .span {
82 |             display: block;
83 |         }
84 | 
85 |         .span:lang(en) {
86 |             color: red;
87 |         }
88 | 
89 |         .span:lang(es) {
90 |             color: blue;
91 |         }
92 |         */


--------------------------------------------------------------------------------
/Clase 18/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Pseudoclases</title>
 7 |     <!-- <link rel="stylesheet" href="normalize.css"> -->
 8 |     <link rel="stylesheet" href="styles.css">
 9 | </head>
10 | 
11 | <body>
12 |     <form action="#">
13 |         <label class="label">:enabled</label>
14 |         <input class="input" type="text">
15 |         <label class="label">:disabled</label>
16 |         <input class="input" type="text" disabled>
17 |         <input id="checkbox" class="input" type="checkbox">
18 |         <label for="checkbox" class="label">:checked</label>
19 |         <label class="label">:in-range</label>
20 |         <input class="input" type="number" min="50" max="60">
21 |         <label class="label">:out-of-range</label>
22 |         <input class="input" type="number" min="50" max="100">
23 |         <label class="label">:optional</label>
24 |         <input class="input" type="text">
25 |         <label class="label">:required</label>
26 |         <input class="input" type="text" required>
27 |         <label class="label">:valid</label>
28 |         <input class="input" type="number">
29 |         <label class="label">:invalid</label>
30 |         <input class="input" type="number">
31 |     </form>
32 | </body>
33 | 
34 | </html>


--------------------------------------------------------------------------------
/Clase 18/styles.css:
--------------------------------------------------------------------------------
 1 | .input,
 2 | .label {
 3 |     display: block;
 4 | }
 5 | 
 6 | /*
 7 | UI States
 8 |     :enabled
 9 |     :disabled
10 |     :checked
11 |     :in-range
12 |     :out-of-range
13 |     :required
14 |     :optional
15 |     :valid
16 |     :invalid
17 |     :read-only
18 |     :read-write
19 | */
20 | 
21 | .input:enabled {
22 |     background: red;
23 | }
24 | 
25 | .input:disabled {
26 |     background: yellow;
27 |     border: none;
28 | }
29 | 
30 | .input:checked + label{
31 |     font-size: 2em;
32 | }
33 | 
34 | .input:in-range{
35 |     background: green;
36 | }
37 | 
38 | .input:out-of-range{
39 |     background: blue;
40 | }
41 | 
42 | .input:optional{
43 |     background: purple;
44 | }
45 | 
46 | .input:required{
47 |     background: lightcoral;
48 | }
49 | 
50 | .input:valid{
51 |     background: green;
52 | }
53 | 
54 | .input:invalid{
55 |     background: red;
56 | }
57 | 
58 | /*
59 | Structural
60 |     :root
61 |     :nth-child()
62 |     :nth-last-child()
63 |     :nth-of-type()
64 |     :nth-last-of-type()
65 |     :first-child
66 |     :last-child
67 |     :first-of-type
68 |     :last-of-type
69 |     :only-child
70 |     :only-of-type
71 |     :empty
72 | 
73 | Negation
74 |     :not()
75 | */


--------------------------------------------------------------------------------
/Clase 19/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Pseudoclases</title>
 7 |     <link rel="stylesheet" href="normalize.css">
 8 |     <link rel="stylesheet" href="styles.css">
 9 | </head>
10 | 
11 | <body>
12 |     <div class="container">
13 |         <div class="paragraph">div 1</div>
14 |         <div class="paragraph">div 2</div>
15 |         <div class="paragraph">div 2</div>
16 |         <div class="paragraph">div 2</div>
17 |         <div class="paragraph">div 2</div>
18 |         <div class="paragraph">div 2</div>
19 |         <p class="paragraph first">Párrafo 1</p>
20 |         <p class="paragraph">Párrafo 2</p>
21 |         <p class="paragraph">Párrafo 3</p>
22 |         <p class="paragraph">Párrafo 4</p>
23 |         <p class="paragraph">Párrafo 5</p>
24 |         <p class="paragraph">Párrafo 6</p>
25 |         <p class="paragraph">Párrafo 7</p>
26 |         <p class="paragraph">Párrafo 8</p>
27 |         <p class="paragraph">Párrafo 9</p>
28 |         <p class="paragraph">Párrafo 10</p>
29 |         <!-- <p class="paragraph"></p> -->
30 |     </div>
31 | </body>
32 | 
33 | </html>


--------------------------------------------------------------------------------
/Clase 19/styles.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | 
 3 | Structural
 4 |     :root - Representa la raiz del documento (html) usando una pseudoclase tenemos más especificidad que si usáramos html
 5 | 
 6 |     :empty - Esta pseudoclase se aplica para los elementos vacios, es decir, etiquetas que no tienen contenido
 7 |     
 8 |     -child
 9 |         :first-child - Selecciona al primer hijo (independientemente del tipo de etiqueta)
10 |         :last-child - Selecciona al ultimo hijo (independientemente del tipo de etiqueta)
11 | 
12 |         :nth-child(n) - Selecciona al hijo n(independientemente del tipo de etiqueta)
13 |         :nth-last-child(n) Selecciona al hijo n empezando a contar desde el último (independientemente del tipo de etiqueta)
14 |         :only-child Selecciona al hijo unico(independientemente del tipo de etiqueta)
15 |     
16 |     -type
17 |         :first-of-type
18 |         :last-of-type
19 |         :nth-of-type()
20 |         :nth-last-of-type()
21 |         :only-of-type
22 | 
23 |     Valores posibles:
24 |         odd - Impares
25 |         even - Pares
26 |         numeros enteros - 2,3,4...
27 |         equaciones (1n,3n,4n+1,n+4,...)
28 |             n es un multiplicador va de 0 hasta que se quede sin elementos
29 |     
30 | Negation
31 |     :not() - Selecciona al elemento que no cumpla la condición, se puede poner cualquier selector salvo otro :not
32 | */
33 | 
34 | /* .paragraph{
35 |     padding: .5em;
36 |     background:lightblue;
37 | }
38 | 
39 | .paragraph:empty{
40 |     all:unset;
41 | } */
42 | 
43 | /* .paragraph:first-child {
44 |     background: red;
45 | }
46 | 
47 | .paragraph:last-child {
48 |     background: blue;
49 | } */
50 | 
51 | /* .paragraph:nth-child(odd) {
52 |     background: lightcoral;
53 | } */
54 | 
55 | /* .paragraph:nth-child(even) {
56 |     background: lightcoral;
57 | } */
58 | 
59 | /* .paragraph:nth-child(3) {
60 |     background: lightcoral;
61 | } */
62 | 
63 | /* .paragraph:nth-child(3n) {
64 |     /* n primero vale 0, después 1, después 2 y por último 3
65 |     background: lightcoral;
66 | } */
67 | 
68 | /* .paragraph:nth-child(3n + 1) {
69 |     background: lightcoral;
70 | } */
71 | 
72 | /* .paragraph:nth-child(n + 4) {
73 |     background: lightcoral;
74 | }
75 |  */
76 | 
77 | /* .paragraph:nth-last-child(n+3) {
78 |     background: lightcoral;
79 | } */
80 | 
81 | /* .paragraph:only-child{
82 |     background: lightseagreen;
83 | } */
84 | 
85 | /* .paragraph:first-of-type{
86 |     background: red;
87 | } */
88 | 
89 | .paragraph:not(.first) {
90 |     background: green;
91 | }


--------------------------------------------------------------------------------
/Clase 2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Especificidad, herencia y cascada</title>
 6 |   <link rel="stylesheet" href="styles-dist.css">
 7 | </head>
 8 | <body>
 9 | 
10 | <p>Estamos viendo la <a href="#">herencia</a> en CSS</p>
11 | 
12 | <p class="parrafo">Estamos viendo la <a href="#">cascada</a> en CSS</p>
13 | 
14 | <p id="parrafo">Estamos viendo la <a href="#">cascada</a> en CSS</p>
15 | 
16 | <p class="parrafo-2">El párrafo que queremos cambiar y no podremos</p>
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Clase 2/styles-dist.css:
--------------------------------------------------------------------------------
 1 | /*  Etiqueta -> 1
 2 |     Clases y pseudoclases -> 10
 3 |     Id -> 100
 4 |     Estilos en línea -> 1000
 5 |     !important -> Gana a todo;
 6 | 
 7 |     important -> especificidad -> cascada
 8 | */
 9 | 
10 | #parrafo{
11 |     color: blueviolet;
12 | }
13 | 
14 | .parrafo{
15 |     color: red;
16 | }
17 | 
18 | a{
19 |     color: inherit;
20 | }
21 | 
22 | .parrafo-2{
23 |     color: black;
24 | }
25 | 
26 | p{
27 |     color: green;
28 | }


--------------------------------------------------------------------------------
/Clase 2/styles.css:
--------------------------------------------------------------------------------
 1 | /*  Etiqueta -> 1
 2 |     Clases y pseudoclases -> 10
 3 |     Id -> 100
 4 |     Estilos en línea -> 1000
 5 |     !important -> Gana a todo;
 6 | 
 7 |     important -> especificidad -> cascada
 8 | */
 9 | 
10 | #parrafo{
11 |     color: blueviolet;
12 | }
13 | 
14 | .parrafo{
15 |     color: red;
16 | }
17 | 
18 | a{
19 |     color: inherit;
20 | }
21 | 
22 | .parrafo-2{
23 |     color: black;
24 | }
25 | 
26 | p{
27 |     color: green;
28 | }


--------------------------------------------------------------------------------
/Clase 20/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Variables CSS</title>
 7 |     <link rel="stylesheet" href="normalize.css">
 8 |     <link rel="stylesheet" href="styles.css">
 9 | </head>
10 | 
11 | <body>
12 |     <h1 class="title">Variables CSS</h1>
13 |     <article class="main-article">
14 |         <p class="paragraph">Párrafo principal</p>
15 |     </article>
16 | 
17 |     <article class="article">
18 |         <p class="paragraph">Otro párrafo</p>
19 |     </article>
20 | 
21 |     <input type="checkbox" class="check">
22 |     <div class="box"></div>
23 | </body>
24 | 
25 | </html>


--------------------------------------------------------------------------------
/Clase 20/styles.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |     --color: blue;
 3 |     --border: 3px solid yellow;
 4 | }
 5 | 
 6 | .paragraph {
 7 |     color: var(--color)
 8 | }
 9 | 
10 | .article{
11 |     --color:green;
12 | }
13 | 
14 | .check:checked + .box{
15 |     --color: purple;
16 | }
17 | 
18 | .box{
19 |     width: 100px;
20 |     height: 100px;
21 |     background: var(--color);
22 |     border: var(--border)
23 | }


--------------------------------------------------------------------------------
/Clase 21/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Variables CSS</title>
 7 |     <link rel="stylesheet" href="normalize.css">
 8 |     <link rel="stylesheet" href="styles.css">
 9 | </head>
10 | 
11 | <body>
12 |     <h1 class="title">Variables CSS</h1>
13 |     <article class="main-article">
14 |         <p class="paragraph">Párrafo principal</p>
15 |     </article>
16 | 
17 |     <article class="article">
18 |         <p class="paragraph">Otro párrafo</p>
19 |     </article>
20 | 
21 |     <input type="checkbox" class="check">
22 |     <div class="box"></div>
23 | </body>
24 | 
25 | </html>


--------------------------------------------------------------------------------
/Clase 21/styles.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |     --color: blue;
 3 |     --border: 3px solid yellow;
 4 | }
 5 | 
 6 | .paragraph {
 7 |     color: var(--color)
 8 | }
 9 | 
10 | .article{
11 |     --color:green;
12 | }
13 | 
14 | .check:checked + .box{
15 |     --color: purple;
16 | }
17 | 
18 | .box{
19 |     width: 100px;
20 |     height: 100px;
21 |     background: var(--color);
22 |     border: var(--border)
23 | }


--------------------------------------------------------------------------------
/Clase 22/attachment.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DorianDesings/css-basico-2018-1019/5ff750b78c0b06b6df341eab06af123ec9f752d7/Clase 22/attachment.jpeg


--------------------------------------------------------------------------------
/Clase 22/cafe.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DorianDesings/css-basico-2018-1019/5ff750b78c0b06b6df341eab06af123ec9f752d7/Clase 22/cafe.jpeg


--------------------------------------------------------------------------------
/Clase 22/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Background</title>
 7 |     <link rel="stylesheet" href="normalize.css">
 8 |     <link rel="stylesheet" href="styles.css">
 9 | </head>
10 | 
11 | <body>
12 |     <h1 class="title">Background</h1>
13 | <!--     <div class="bg-color"></div>
14 |     <div class="bg-image"></div>
15 |     <div class="bg-size"></div>
16 |     <div class="bg-repeat"></div>
17 |     <div class="bg-position"></div>
18 |     <div class="bg-origin">CONTENIDO</div>
19 |     <div class="bg-attachment"></div> 
20 |     <div class="bg-clip">CONTENIDO</div>-->
21 |     <div class="bg-multiple"></div>
22 | 
23 | </body>
24 | 
25 | </html>


--------------------------------------------------------------------------------
/Clase 22/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DorianDesings/css-basico-2018-1019/5ff750b78c0b06b6df341eab06af123ec9f752d7/Clase 22/logo.png


--------------------------------------------------------------------------------
/Clase 22/styles.css:
--------------------------------------------------------------------------------
  1 | [class^="bg-"] {
  2 |     display: flex;
  3 |     flex-wrap: wrap;
  4 |     width: 50%;
  5 |     margin: 0 auto;
  6 |     height: 150px;
  7 |     border: 1px solid red;
  8 | }
  9 | 
 10 | /* 
 11 | background-color: Establece el color de fondo de la caja
 12 | background-image:url(ruta) Establece la imagen de fondo de la caja
 13 | background-repeat: Establece si la imagen se repite o no
 14 |     repeat-x|repeat-y|no-repeat
 15 | background-size: Establece el tamaño de la imagen de fondo
 16 |     x [y]|auto|cover|contain. 
 17 |     el valor en y es opcional, si no se lo ponemos lo calcula automáticamente
 18 |     cover cubre la caja por completo, aunque la imagen escape del contenedor
 19 |     contain la imagen se ajusta al contenido
 20 | background-position: Establece la posicion de la imagen, si no se especifica un segundo valor será center
 21 |     left top
 22 |     left center
 23 |     left bottom
 24 |     right top
 25 |     right center
 26 |     right bottom
 27 |     center top
 28 |     center center
 29 |     center bottom
 30 |     x% y%
 31 |     xpos ypos
 32 |     initial
 33 |     inherit
 34 | 
 35 | background-clip: Establece que parte de la caja rellenará el fondo
 36 |     Muestra la imagen desde donde le decimos, solo oculta, NO redimensiona
 37 |     border-box|padding-box|content-box
 38 | 
 39 | background-origin: Establece donde comienza el fondo
 40 |     Redimensiona la imagen para que ocupe la zona que le decimos
 41 |     border-box|padding-box|content-box
 42 | 
 43 | background-attachment: permite establecer si el fondo se coloca respecto a la caja o al viewport
 44 |     scroll|fixed
 45 | */
 46 | 
 47 | body {
 48 |     padding-bottom: 50em;
 49 |     text-align: center;
 50 | }
 51 | 
 52 | .bg-color {
 53 |     background-color: purple;
 54 | }
 55 | 
 56 | .bg-image {
 57 |     background-image: url(logo.png);
 58 | }
 59 | 
 60 | .bg-size {
 61 |     background-image: url(cafe.jpeg);
 62 |     background-size: contain;
 63 | }
 64 | 
 65 | .bg-repeat {
 66 |     background-image: url(logo.png);
 67 |     background-size: 40%;
 68 |     background-repeat: no-repeat;
 69 | }
 70 | 
 71 | .bg-position {
 72 |     background-image: url(logo.png);
 73 |     background-size: 20%;
 74 |     background-repeat: no-repeat;
 75 |     background-position: 50px 50px;
 76 | }
 77 | 
 78 | .bg-origin {
 79 |     background-origin: border-box;
 80 |     border: 10px dotted red;
 81 |     padding: 25px;
 82 |     background-image: url(cafe.jpeg);
 83 |     background-size: contain;
 84 |     background-repeat: no-repeat;
 85 | }
 86 | 
 87 | .bg-clip {
 88 |     background-clip: border-box;
 89 |     border: 10px dotted red;
 90 |     background-image: url(cafe.jpeg);
 91 |     background-size: contain;
 92 |     background-repeat: no-repeat;
 93 |     padding: 25px;
 94 | }
 95 | 
 96 | .bg-attachment {
 97 |     width: 100%;
 98 |     height: 400px;
 99 |     background-image: url(cafe.jpeg);
100 |     background-size: contain;
101 |     background-attachment: fixed;
102 | }
103 | 
104 | .bg-multiple {
105 |     background-image: 
106 |         url(logo.png),
107 |         url(cafe.jpeg);
108 |     background-size: 30%, cover;
109 |     background-repeat: no-repeat;
110 |     background-position: bottom right, center;
111 | }


--------------------------------------------------------------------------------
/Clase 23/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Tipografías</title>
 7 |     <link rel="stylesheet" href="styles.css">
 8 | </head>
 9 | 
10 | <body>
11 |     <h1 class="title">Tipografías y <span class="span">textos</span></h1>
12 |     <p class="paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolore amet cupiditate sint, modi sunt odio nisi doloremque voluptatem. Corrupti, natus laudantium. Quis aspernatur repellat vero nemo soluta, expedita tempora.</p>
13 |     <a href="#" class="link">Soy un enlace</a>
14 | 
15 |     <button class="button">Soy un botón</button>
16 | 
17 |     <div class="box">
18 |         <div class="box__item">ITEM 1</div>
19 |         <div class="box__item">ITEM 2</div>
20 |     </div>
21 | </body>
22 | 
23 | </html>


--------------------------------------------------------------------------------
/Clase 23/styles.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | 
 3 | Especificación w3c:
 4 | https://www.w3.org/Style/Examples/007/fonts.en.html
 5 | https://www.w3.org/TR/CSS22/fonts.html#font-family-prop
 6 | 
 7 | A los tipos de letra que existen se les denomina fuentes o tipografía
 8 | 
 9 | Familias tipográficas
10 |     Tienen nombre propio
11 |       Arial, Times New Roman, open sans, ubuntu
12 | 
13 | Familias genéricas o seguras
14 |     Su nombre se basa en sus características
15 |       serif: Tienen un adorno en los remates
16 |       sans-serif: Tienen un corte seco en los remates
17 |       cursive: emulan tipografia manuscrita
18 |       fantasy: Letra decorativa
19 |       monospace: Todos los caracteres tienen el mismo ancho
20 | 
21 | FONT
22 |     font-family: Establece la familia tipográfica
23 |         Se utiliza el nombre propio de la fuente o una familia genérica, se recomienda utilizar SIEMPRE fuentes de reserva ('Times New Roman', Times, serif)
24 |     font-size: Establece el tamaño de fuente
25 |         Se define en unidades:
26 |             px: pixeles (medida absoluta)
27 |             em: medida relativa al contexto (al padre)
28 |             rem: medida relativa al html
29 |             %: medida relativa al tamaño actual
30 | 
31 |             vh: medida relativa al height del viewport
32 |             vw: media relativa al width del viewport
33 |             vmin: medida relativa al valor mínimo de viewport
34 |             vmax: medida relativa al valor máximo de viewport
35 | 
36 |     font-weight: Establece el grosor de la fuente
37 |         bold | normal | 100-900
38 | 
39 |     font-style: Establece el estilo de la tipografía
40 |         normal | italic | oblique
41 | 
42 | */
43 | 
44 | body {
45 |     font-size: 30px;
46 | }
47 | 
48 | .title {
49 |     font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
50 |     /* font-size: 200%; */
51 |    /*  font-size: 10vmin; */
52 |    font-style: oblique;
53 | }
54 | 
55 | .span {
56 |     /* font-size: 200%; */
57 | }
58 | 
59 | .paragraph{
60 |     font-weight: lighter;
61 | }


--------------------------------------------------------------------------------
/Clase 24/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Tipografías</title>
 7 |     <link rel="stylesheet" href="styles.css">
 8 | </head>
 9 | 
10 | <body>
11 |     <h1 class="title">Tipografías y <span class="span">textos</span></h1>
12 |     <p class="paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolore amet cupiditate sint,
13 |         modi sunt odio nisi doloremque voluptatem. Corrupti, natus laudantium. Quis aspernatur repellat vero nemo
14 |         soluta, expedita tempora.</p>
15 |     <a href="#" class="link">Soy un enlace</a>
16 | 
17 |     
18 |     <div class="box">
19 |         <div class="box__item">ITEM 1</div>
20 |     </div>
21 |     <button class="button">Soy un botón</button>
22 | </body>
23 | 
24 | </html>


--------------------------------------------------------------------------------
/Clase 24/styles.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | TEXT
 3 |     Text-transform: Transforma el texto a mayúsculas, minúsculas, etc.
 4 |         lowercase (minusculas) | uppercase (mayusculas) | capitalize (primera letra de cada palabra en mayusculas)
 5 | 
 6 |     text-align: Alinea el texto del elemento a la izquierda, derecha, etc. SOLO ELEMENTOS DE BLOQUE (excepto en botones, que aunque sean de elementos en línea funciona)
 7 |         center | left | right | justify
 8 | 
 9 |     text-decoration: Establece la decoración del texto
10 |         overline | line-through | underline | none
11 | 
12 |     text-indent: mueve la primera linea de un de texto. SOLO ELEMENTOS DE BLOQUE
13 | */
14 | 
15 | /* .title {
16 |         text-transform: capitalize;
17 |     }
18 | 
19 |     .paragraph {
20 |         text-align: justify;
21 |         text-indent: 50px;
22 |     }
23 | 
24 |     .link {
25 |         text-decoration: none;
26 |     } */
27 | 
28 | /*
29 | OTHER
30 |     line-height: establece la altura de la linea
31 |     letter-spacing: establece la separacion de las letras con una medida en cualquier unidad
32 | */
33 | 
34 | .box {
35 |     width: 150px;
36 |     height: 150px;
37 |     background: red;
38 | }
39 | 
40 | .box__item {
41 |     text-align: center;
42 |     line-height: 150px;
43 | }
44 | 
45 | .paragraph {
46 |     letter-spacing: 5px;
47 | }


--------------------------------------------------------------------------------
/Clase 25/assets/fonts/Music Magic Personal Use/Music Magic Personal Use.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DorianDesings/css-basico-2018-1019/5ff750b78c0b06b6df341eab06af123ec9f752d7/Clase 25/assets/fonts/Music Magic Personal Use/Music Magic Personal Use.ttf


--------------------------------------------------------------------------------
/Clase 25/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Google Fonts & Font Face</title>
 7 |     <link rel="stylesheet" href="styles.css">
 8 | <link href="https://fonts.googleapis.com/css?family=Montserrat|Raleway:900" rel="stylesheet">
 9 | </head>
10 | 
11 | <body>
12 |     <h1 class="title">Google Fonts & Font Face</h1>
13 |     <p class="paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolore amet cupiditate sint, modi sunt odio nisi doloremque voluptatem. Corrupti, natus laudantium. Quis aspernatur repellat vero nemo soluta, expedita tempora.</p>
14 | </body>
15 | 
16 | </html>


--------------------------------------------------------------------------------
/Clase 25/styles.css:
--------------------------------------------------------------------------------
 1 | /* 
 2 | Sitios gratuitos para fuentes
 3 |     https://www.dafont.com/es/
 4 |     https://www.1001fonts.com/
 5 | 
 6 |     Analizar fuentes web
 7 |         whatFont
 8 | */
 9 | 
10 | /* .title {
11 |     font-family: 'Raleway', sans-serif;
12 | }
13 | 
14 | .paragraph {
15 |     font-family: 'Montserrat', sans-serif;
16 | } */
17 | 
18 | @font-face {
19 |     src: url('assets/fonts/Music Magic Personal Use/Music Magic Personal Use.ttf');
20 |     font-family: 'myFont';
21 | }
22 | 
23 | .title {
24 |     font-family: myFont, serif;
25 | }


--------------------------------------------------------------------------------
/Clase 26/check.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DorianDesings/css-basico-2018-1019/5ff750b78c0b06b6df341eab06af123ec9f752d7/Clase 26/check.png


--------------------------------------------------------------------------------
/Clase 26/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Listas</title>
 7 |     <link rel="stylesheet" href="styles.css">
 8 | </head>
 9 | 
10 | <body>
11 |     <ul class="list">
12 |         <li class="list__item">Item 1</li>
13 |         <li class="list__item">Item 2</li>
14 |         <li class="list__item">Item 3</li>
15 |         <li class="list__item">Item 4</li>
16 |         <li class="list__item">Item 5</li>
17 |     </ul>
18 | </body>
19 | 
20 | </html>


--------------------------------------------------------------------------------
/Clase 26/styles.css:
--------------------------------------------------------------------------------
 1 | /* 
 2 |     Normalmente necesitamos resetear los estilos por defecto de una lista
 3 |         margin-top:0;
 4 |         margin-bottom:0;
 5 |         padding-left:0;
 6 | 
 7 |     Hay tres propiedades para las listas, se pueden aplicar al padre o a los elementos de la lista
 8 | 
 9 |     list-style-type: Establece el estilo de viñeta
10 |         disc
11 |         circle
12 |         square
13 |         decimal
14 |         decimal-leading-zero
15 |         lower-roman
16 |         upper-roman
17 |         lower-greek
18 |         lower-latin
19 |         upper-latin
20 |         armenian
21 |         georgian
22 |         lower-alpha
23 |         upper-alpha
24 | 
25 |     list-style-position: Hace que las viñetas se coloquen por dentro o por fuera del elemento
26 |         outside | inside
27 |         
28 |     list-style-image: Pone una imagen en lugar de la viñeta, no se suele utilizar porque hay formas mucho más eficientes de hacerlo
29 |         url(imagen)
30 | 
31 |     Normamente se suele usar el shorthand list-style
32 | */
33 | 
34 | /* .list {
35 |     list-style-type: lower-latin;
36 | } */
37 | 
38 | /* .list {
39 |     list-style-image: url(check.png)
40 | } */
41 | 
42 | .list {
43 |     margin-top: 0;
44 |     margin-bottom: 0;
45 |     padding-left: 0;
46 |     list-style: none;
47 | }
48 | 
49 | /* .list__item {
50 |     background: red;
51 | } */
52 | 
53 | /* .list__item::before {
54 |     content: '';
55 |     display: inline-block;
56 |     width: 1em;
57 |     height: 1em;
58 |     background-image: url(check.png);
59 |     background-position: center;
60 |     background-size: contain;
61 |     background-repeat: no-repeat;
62 |     padding-right: 1em;
63 | } */
64 | 
65 | .list__item {
66 |     /* background-image: url(check.png);
67 |     background-position: 0 0;
68 |     background-size: contain;
69 |     background-repeat: no-repeat; */
70 |     /* padding-left: 2em;
71 |     background: url(check.png) 0 0 / contain no-repeat; */
72 | }
73 | 
74 | .list__item{
75 |     float: left;
76 |     padding-right: 1em;
77 | }


--------------------------------------------------------------------------------
/Clase 27/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Tablas</title>
 7 |     <link rel="stylesheet" href="styles.css">
 8 | </head>
 9 | 
10 | <body>
11 |     <div class="table-container">
12 |     <table class="table">
13 |         <caption>Avengers</caption>
14 |         <colgroup>
15 |             <col class="col1">
16 |             <col class="col2">
17 |             <col class="col3">
18 |         </colgroup>
19 |         <thead>
20 |             <th class="table__head">Username</th>
21 |             <th class="table__head">Email</th>
22 |             <th class="table__head">Company</th>
23 |         </thead>
24 |         <tbody>
25 |             <tr class="table__row">
26 |                 <td class="table__data">TonyStark</td>
27 |                 <td class="table__data">tonystark@gmail.com</td>
28 |                 <td class="table__data">Marvel</td>
29 |             </tr>
30 |             <tr class="table__row">
31 |                 <td class="table__data">Bruce Banner</td>
32 |                 <td class="table__data">brucebanner@gmail.com</td>
33 |                 <td class="table__data">Marvel</td>
34 |             </tr>
35 |             <tr class="table__row">
36 |                 <td class="table__data">PeterParker</td>
37 |                 <td class="table__data">spiderman@gmail.com</td>
38 |                 <td class="table__data">Marvel</td>
39 |             </tr>
40 |             <tr class="table__row">
41 |                 <td class="table__data">SteveRogers</td>
42 |                 <td class="table__data"></td>
43 |                 <td class="table__data">Marvel</td>
44 |             </tr>
45 |         </tbody>
46 |     </table>
47 |     </div>
48 |     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus iste impedit porro reprehenderit ex quibusdam mollitia illo expedita nobis dolorem suscipit magnam, quos excepturi harum enim tempora? Aliquam, ad soluta.</p>
49 | </body>
50 | 
51 | </html>


--------------------------------------------------------------------------------
/Clase 27/styles.css:
--------------------------------------------------------------------------------
 1 | /* 
 2 |     table-layout: Define como se comportan las dimensiones de una tabla y los anchos de las "columnas"
 3 |         automatic: valor por defecto
 4 |         fixed: necesita un width declarado, si no se le da un ancho a cada columna se ditribuyen equitativamente
 5 | 
 6 |     caption-side: define donde se coloca el caption de una tabla.
 7 |         top: valor por defecto
 8 |         bottom: se coloca al pie de la tabla
 9 |     
10 |     border-spacing: Controla el espacio entre las celdas
11 |         recibe una medida en cualquier unidad 
12 | 
13 |     border-collapse: Controla si las celdas se mantienen juntas o separadas.
14 |         separate: valor por defecto
15 |         collapse: junta las celdas para no
16 |     
17 |     empty-cells: Controla qué hacer con las celdas vacías
18 |         show: valor por defecto
19 |         hide: oculta las celdas vacías
20 | */
21 | 
22 | /* .table{
23 |     table-layout: fixed;
24 |     width: 100%;
25 |     text-align: center;
26 | } */
27 | 
28 | /* .table{
29 |     caption-side: bottom;
30 | } */
31 | 
32 | .table, .table__data, .table__head {
33 |     border: 1px solid black;
34 |     border-spacing: 10px;
35 | }
36 | 
37 | .table {
38 |     width: 100%;
39 |     empty-cells: hide;
40 | }
41 | 
42 | .table__data{
43 |     background: lightblue;
44 | }
45 | 
46 | .table-container{
47 |     overflow-x: auto;
48 | }


--------------------------------------------------------------------------------
/Clase 28/assets/img/attachment.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DorianDesings/css-basico-2018-1019/5ff750b78c0b06b6df341eab06af123ec9f752d7/Clase 28/assets/img/attachment.jpeg


--------------------------------------------------------------------------------
/Clase 28/assets/img/cafe.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DorianDesings/css-basico-2018-1019/5ff750b78c0b06b6df341eab06af123ec9f752d7/Clase 28/assets/img/cafe.jpeg


--------------------------------------------------------------------------------
/Clase 28/assets/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DorianDesings/css-basico-2018-1019/5ff750b78c0b06b6df341eab06af123ec9f752d7/Clase 28/assets/img/logo.png


--------------------------------------------------------------------------------
/Clase 28/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Imágenes</title>
 7 |     <link rel="stylesheet" href="styles.css">
 8 | </head>
 9 | 
10 | <body>
11 |     <!--     <div class="img-container">
12 |     <img src="assets/img/cafe.jpeg" alt="" class="img">
13 | </div> -->
14 | 
15 |     <!--     <div class="img-container">
16 |         <img class="img" src="assets/img/attachment.jpeg" alt="">
17 |     </div> -->
18 | 
19 | 
20 |     <!--    <div class="img-container" >
21 |         <img src="assets/img/logo.png" alt="" class="img">
22 |        
23 |     </div> -->
24 | 
25 |     <div class="img-container">
26 |         <img src="assets/img/logo.png" alt="">
27 |         <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. </span>
28 |     </div>
29 | 
30 |     <div class="img-container">
31 |         <img src="assets/img/logo.png" alt="">
32 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque deleniti voluptatem beatae sit, cumque
33 |             soluta sequi corrupti reprehenderit illo! Eum culpa enim aut asperiores corrupti hic, voluptatibus rerum
34 |             beatae animi! </p>
35 |     </div>
36 | </body>
37 | 
38 | </html>


--------------------------------------------------------------------------------
/Clase 28/styles.css:
--------------------------------------------------------------------------------
 1 | /* 
 2 | 
 3 |     No existen propiedades para imágenes en CSS
 4 | 
 5 |     1. Imágenes responsive. En el archivo base se recomienda poner esta regla
 6 |         img{
 7 |             max-width:100%;
 8 |         }
 9 |     
10 |     2. Las imágenes por defecto son elementos inline, esto causa un espacio por debajo debido a su line-height, se puede solucionar de dos formas.
11 |         Dando un line-height:0 al contenedor o un display:block a la imagen
12 | 
13 |     3. Centrado horizontal
14 |         imagen con display:block y márgenes laterales automáticos
15 |         text-align: center, si la imagen no es de bloque
16 | 
17 |     4. Centrado vertical
18 |         Flexbox (La mejor opción)
19 |         vertical-align: middle. A la imagen y al texto
20 | */
21 | 
22 | /* .img{
23 |     max-width: 100%;
24 |      display: block;
25 |     margin-left: auto;
26 |     margin-right: auto;
27 | }
28 | 
29 | .img-container{
30 |     text-align: center;
31 |     background: lavender;
32 | }*/
33 | 
34 | /* .img-container img,
35 | .img-container span{
36 |     vertical-align: middle;
37 | }
38 | 
39 | .img-container{
40 |     display: table;
41 | }
42 | 
43 | .img-container span,
44 | .img-container p{
45 |     display: table-cell;
46 | } */
47 | 
48 | .img-container{
49 |     display: flex;
50 |     align-items: center;
51 | }
52 | 
53 | 


--------------------------------------------------------------------------------
/Clase 29/assets/img/cafe.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DorianDesings/css-basico-2018-1019/5ff750b78c0b06b6df341eab06af123ec9f752d7/Clase 29/assets/img/cafe.jpeg


--------------------------------------------------------------------------------
/Clase 29/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Imágenes</title>
 7 |     <link rel="stylesheet" href="styles.css">
 8 | </head>
 9 | 
10 | <body>
11 |     <!-- <img src="assets/img/cafe.jpeg" alt="" class="img"> -->
12 |     <img src="assets/img/cafe.jpeg" alt="" class="img-2">
13 | </body>
14 | 
15 | </html>


--------------------------------------------------------------------------------
/Clase 29/styles.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | object-fit: se usa para especificar cómo se debe cambiar el tamaño de <img> o <video> para que se ajuste a su contenedor.
 3 |     fill: valor por defecto
 4 |     contain: El contenido se ajustará hasta rellenar de forma horizontal o vertical el contenedor sin deformarse
 5 |     cover: El contenido se ajustará hasta rellenar de forma horizontal y vertical el contenedor sin deformarse
 6 |     none: El contenido no se redimensiona y mantiene su tamño original mostrando solo el trozo de las dimensiones especificadas
 7 |     scale-down: Selecciona el menor de la comparación entre none y contain.
 8 | 
 9 | objet-position: Coloca la imagen cuando esta no se muestra completa en el contenedor
10 | 
11 | filter:
12 |     none
13 |     blur(px): desenfoca la imagen
14 |     brightness(%): Ajusta el brillo de la imagen siendo 1 el original. De 0 a 1 dan oscuridad y de 1 a n dan sobreexposición
15 |     contrast(%): Ajusta el contraste de la imagen siendo 1 el original. De 0 es negro y de 1 a n dan más contraste
16 |     drop-shadow(h-shadow v-shadow blur (spread) color): Aplica una sombra paralela a la imagen
17 |     grayscale(%): Convierte la imagen a escala de grises, 0 es el original y 1 sería blanco y negro completamente
18 |     hue-rotate(deg): Añade matiz de color a la imagen. Se da un valor en grados según la rueda cromática. El valor máximo es 360deg
19 |     invert(%): Invierte el color de la imagen. Saca un negativo. 0 es el valor por defecto y 1 es totalmente invertida
20 |     opacity(%): Controla la opacidad de la imagen. 1 es el valor por defecto y 0 es transparente
21 |     saturate(%): Controla la saturación de color de la imagen. 1 es el valor por defecto, 0 es totalmente desaturada y por encima de 1 se sobresatura
22 |     sepia(%): Aplica un tono sepia a la imagen. 0 es el valor por defecto y 1 es totalmente sepia
23 |     url() - Buscar información
24 | */
25 | 
26 | /* .img{
27 |     width: 250px;
28 |     height: 450px;
29 |     background: red;
30 |     object-fit: cover;
31 |     object-position: left;
32 | }
33 | 
34 | .img:hover{
35 |     object-position: right;
36 | } */
37 | 
38 | 
39 | .img-2{
40 |     max-width: 100%;
41 |     /* filter: blur(5px) */
42 |     /* filter: brightness(.5) */
43 |     /* filter: contrast(8) */
44 |     /* filter: drop-shadow(h-shadow v-shadow blur (spread) color) */
45 |     /* filter: drop-shadow(10px 10px 10px black) */
46 |     /* filter: grayscale(.4) */
47 |     /* filter: hue-rotate(45deg) */
48 |     /* filter: invert(.7) */
49 |     /* filter: opacity(.2) */
50 |     /* filter: saturate(2) */
51 |     /* filter: sepia(.7) */
52 | }
53 | 
54 | .img-2:hover{
55 |     filter: none;
56 | }
57 | 


--------------------------------------------------------------------------------
/Clase 3/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DorianDesings/css-basico-2018-1019/5ff750b78c0b06b6df341eab06af123ec9f752d7/Clase 3/banner.png


--------------------------------------------------------------------------------
/Clase 3/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Reset CSS</title>
 6 |    <link rel="stylesheet" href="normalize.css">
 7 |   <link rel="stylesheet" href="styles-dist.css">
 8 | </head>
 9 | <body>
10 | 
11 | <h1>Resetear Los Estilos CSS</h1>
12 | 
13 | <header>
14 |     <div class="banner">
15 |         <img src="banner.png" alt="Banner de la web">
16 |     </div>
17 | </header>
18 | 
19 | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus cupiditate dignissimos ex, explicabo fugiat harum ipsum iste iusto natus officia placeat porro rerum tempora vero voluptatem? Asperiores at ex soluta.</p>
20 | 
21 | <div class="square"></div>
22 | 
23 | </body>
24 | </html>


--------------------------------------------------------------------------------
/Clase 3/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
  2 | 
  3 | /* Document
  4 |    ========================================================================== */
  5 | 
  6 | /**
  7 |  * 1. Correct the line height in all browsers.
  8 |  * 2. Prevent adjustments of font size after orientation changes in
  9 |  *    IE on Windows Phone and in iOS.
 10 |  */
 11 | 
 12 | *, *:before, *:after{
 13 |   box-sizing: border-box;
 14 | }
 15 | 
 16 | html {
 17 |   line-height: 1.15; /* 1 */
 18 |   -ms-text-size-adjust: 100%; /* 2 */
 19 |   -webkit-text-size-adjust: 100%; /* 2 */
 20 | }
 21 | 
 22 | /* Sections
 23 |    ========================================================================== */
 24 | 
 25 | /**
 26 |  * Remove the margin in all browsers (opinionated).
 27 |  */
 28 | 
 29 | body {
 30 |   margin: 0;
 31 | }
 32 | 
 33 | img{
 34 |   max-width: 100%;
 35 | }
 36 | 
 37 | /**
 38 |  * Add the correct display in IE 9-.
 39 |  */
 40 | 
 41 | article,
 42 | aside,
 43 | footer,
 44 | header,
 45 | nav,
 46 | section {
 47 |   display: block;
 48 | }
 49 | 
 50 | /**
 51 |  * Correct the font size and margin on `h1` elements within `section` and
 52 |  * `article` contexts in Chrome, Firefox, and Safari.
 53 |  */
 54 | 
 55 | h1 {
 56 |   font-size: 2em;
 57 |   margin: 0.67em 0;
 58 | }
 59 | 
 60 | /* Grouping content
 61 |    ========================================================================== */
 62 | 
 63 | /**
 64 |  * Add the correct display in IE 9-.
 65 |  * 1. Add the correct display in IE.
 66 |  */
 67 | 
 68 | figcaption,
 69 | figure,
 70 | main { /* 1 */
 71 |   display: block;
 72 | }
 73 | 
 74 | /**
 75 |  * Add the correct margin in IE 8.
 76 |  */
 77 | 
 78 | figure {
 79 |   margin: 1em 40px;
 80 | }
 81 | 
 82 | /**
 83 |  * 1. Add the correct box sizing in Firefox.
 84 |  * 2. Show the overflow in Edge and IE.
 85 |  */
 86 | 
 87 | hr {
 88 |   box-sizing: content-box; /* 1 */
 89 |   height: 0; /* 1 */
 90 |   overflow: visible; /* 2 */
 91 | }
 92 | 
 93 | /**
 94 |  * 1. Correct the inheritance and scaling of font size in all browsers.
 95 |  * 2. Correct the odd `em` font sizing in all browsers.
 96 |  */
 97 | 
 98 | pre {
 99 |   font-family: monospace, monospace; /* 1 */
100 |   font-size: 1em; /* 2 */
101 | }
102 | 
103 | /* Text-level semantics
104 |    ========================================================================== */
105 | 
106 | /**
107 |  * 1. Remove the gray background on active links in IE 10.
108 |  * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
109 |  */
110 | 
111 | a {
112 |   background-color: transparent; /* 1 */
113 |   -webkit-text-decoration-skip: objects; /* 2 */
114 | }
115 | 
116 | /**
117 |  * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
118 |  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
119 |  */
120 | 
121 | abbr[title] {
122 |   border-bottom: none; /* 1 */
123 |   text-decoration: underline; /* 2 */
124 |   text-decoration: underline dotted; /* 2 */
125 | }
126 | 
127 | /**
128 |  * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
129 |  */
130 | 
131 | b,
132 | strong {
133 |   font-weight: inherit;
134 | }
135 | 
136 | /**
137 |  * Add the correct font weight in Chrome, Edge, and Safari.
138 |  */
139 | 
140 | b,
141 | strong {
142 |   font-weight: bolder;
143 | }
144 | 
145 | /**
146 |  * 1. Correct the inheritance and scaling of font size in all browsers.
147 |  * 2. Correct the odd `em` font sizing in all browsers.
148 |  */
149 | 
150 | code,
151 | kbd,
152 | samp {
153 |   font-family: monospace, monospace; /* 1 */
154 |   font-size: 1em; /* 2 */
155 | }
156 | 
157 | /**
158 |  * Add the correct font style in Android 4.3-.
159 |  */
160 | 
161 | dfn {
162 |   font-style: italic;
163 | }
164 | 
165 | /**
166 |  * Add the correct background and color in IE 9-.
167 |  */
168 | 
169 | mark {
170 |   background-color: #ff0;
171 |   color: #000;
172 | }
173 | 
174 | /**
175 |  * Add the correct font size in all browsers.
176 |  */
177 | 
178 | small {
179 |   font-size: 80%;
180 | }
181 | 
182 | /**
183 |  * Prevent `sub` and `sup` elements from affecting the line height in
184 |  * all browsers.
185 |  */
186 | 
187 | sub,
188 | sup {
189 |   font-size: 75%;
190 |   line-height: 0;
191 |   position: relative;
192 |   vertical-align: baseline;
193 | }
194 | 
195 | sub {
196 |   bottom: -0.25em;
197 | }
198 | 
199 | sup {
200 |   top: -0.5em;
201 | }
202 | 
203 | /* Embedded content
204 |    ========================================================================== */
205 | 
206 | /**
207 |  * Add the correct display in IE 9-.
208 |  */
209 | 
210 | audio,
211 | video {
212 |   display: inline-block;
213 | }
214 | 
215 | /**
216 |  * Add the correct display in iOS 4-7.
217 |  */
218 | 
219 | audio:not([controls]) {
220 |   display: none;
221 |   height: 0;
222 | }
223 | 
224 | /**
225 |  * Remove the border on images inside links in IE 10-.
226 |  */
227 | 
228 | img {
229 |   border-style: none;
230 | }
231 | 
232 | /**
233 |  * Hide the overflow in IE.
234 |  */
235 | 
236 | svg:not(:root) {
237 |   overflow: hidden;
238 | }
239 | 
240 | /* Forms
241 |    ========================================================================== */
242 | 
243 | /**
244 |  * 1. Change the font styles in all browsers (opinionated).
245 |  * 2. Remove the margin in Firefox and Safari.
246 |  */
247 | 
248 | button,
249 | input,
250 | optgroup,
251 | select,
252 | textarea {
253 |   font-family: sans-serif; /* 1 */
254 |   font-size: 100%; /* 1 */
255 |   line-height: 1.15; /* 1 */
256 |   margin: 0; /* 2 */
257 | }
258 | 
259 | /**
260 |  * Show the overflow in IE.
261 |  * 1. Show the overflow in Edge.
262 |  */
263 | 
264 | button,
265 | input { /* 1 */
266 |   overflow: visible;
267 | }
268 | 
269 | /**
270 |  * Remove the inheritance of text transform in Edge, Firefox, and IE.
271 |  * 1. Remove the inheritance of text transform in Firefox.
272 |  */
273 | 
274 | button,
275 | select { /* 1 */
276 |   text-transform: none;
277 | }
278 | 
279 | /**
280 |  * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
281 |  *    controls in Android 4.
282 |  * 2. Correct the inability to style clickable types in iOS and Safari.
283 |  */
284 | 
285 | button,
286 | html [type="button"], /* 1 */
287 | [type="reset"],
288 | [type="submit"] {
289 |   -webkit-appearance: button; /* 2 */
290 | }
291 | 
292 | /**
293 |  * Remove the inner border and padding in Firefox.
294 |  */
295 | 
296 | button::-moz-focus-inner,
297 | [type="button"]::-moz-focus-inner,
298 | [type="reset"]::-moz-focus-inner,
299 | [type="submit"]::-moz-focus-inner {
300 |   border-style: none;
301 |   padding: 0;
302 | }
303 | 
304 | /**
305 |  * Restore the focus styles unset by the previous rule.
306 |  */
307 | 
308 | button:-moz-focusring,
309 | [type="button"]:-moz-focusring,
310 | [type="reset"]:-moz-focusring,
311 | [type="submit"]:-moz-focusring {
312 |   outline: 1px dotted ButtonText;
313 | }
314 | 
315 | /**
316 |  * Correct the padding in Firefox.
317 |  */
318 | 
319 | fieldset {
320 |   padding: 0.35em 0.75em 0.625em;
321 | }
322 | 
323 | /**
324 |  * 1. Correct the text wrapping in Edge and IE.
325 |  * 2. Correct the color inheritance from `fieldset` elements in IE.
326 |  * 3. Remove the padding so developers are not caught out when they zero out
327 |  *    `fieldset` elements in all browsers.
328 |  */
329 | 
330 | legend {
331 |   box-sizing: border-box; /* 1 */
332 |   color: inherit; /* 2 */
333 |   display: table; /* 1 */
334 |   max-width: 100%; /* 1 */
335 |   padding: 0; /* 3 */
336 |   white-space: normal; /* 1 */
337 | }
338 | 
339 | /**
340 |  * 1. Add the correct display in IE 9-.
341 |  * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
342 |  */
343 | 
344 | progress {
345 |   display: inline-block; /* 1 */
346 |   vertical-align: baseline; /* 2 */
347 | }
348 | 
349 | /**
350 |  * Remove the default vertical scrollbar in IE.
351 |  */
352 | 
353 | textarea {
354 |   overflow: auto;
355 | }
356 | 
357 | /**
358 |  * 1. Add the correct box sizing in IE 10-.
359 |  * 2. Remove the padding in IE 10-.
360 |  */
361 | 
362 | [type="checkbox"],
363 | [type="radio"] {
364 |   box-sizing: border-box; /* 1 */
365 |   padding: 0; /* 2 */
366 | }
367 | 
368 | /**
369 |  * Correct the cursor style of increment and decrement buttons in Chrome.
370 |  */
371 | 
372 | [type="number"]::-webkit-inner-spin-button,
373 | [type="number"]::-webkit-outer-spin-button {
374 |   height: auto;
375 | }
376 | 
377 | /**
378 |  * 1. Correct the odd appearance in Chrome and Safari.
379 |  * 2. Correct the outline style in Safari.
380 |  */
381 | 
382 | [type="search"] {
383 |   -webkit-appearance: textfield; /* 1 */
384 |   outline-offset: -2px; /* 2 */
385 | }
386 | 
387 | /**
388 |  * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
389 |  */
390 | 
391 | [type="search"]::-webkit-search-cancel-button,
392 | [type="search"]::-webkit-search-decoration {
393 |   -webkit-appearance: none;
394 | }
395 | 
396 | /**
397 |  * 1. Correct the inability to style clickable types in iOS and Safari.
398 |  * 2. Change font properties to `inherit` in Safari.
399 |  */
400 | 
401 | ::-webkit-file-upload-button {
402 |   -webkit-appearance: button; /* 1 */
403 |   font: inherit; /* 2 */
404 | }
405 | 
406 | /* Interactive
407 |    ========================================================================== */
408 | 
409 | /*
410 |  * Add the correct display in IE 9-.
411 |  * 1. Add the correct display in Edge, IE, and Firefox.
412 |  */
413 | 
414 | details, /* 1 */
415 | menu {
416 |   display: block;
417 | }
418 | 
419 | /*
420 |  * Add the correct display in all browsers.
421 |  */
422 | 
423 | summary {
424 |   display: list-item;
425 | }
426 | 
427 | /* Scripting
428 |    ========================================================================== */
429 | 
430 | /**
431 |  * Add the correct display in IE 9-.
432 |  */
433 | 
434 | canvas {
435 |   display: inline-block;
436 | }
437 | 
438 | /**
439 |  * Add the correct display in IE.
440 |  */
441 | 
442 | template {
443 |   display: none;
444 | }
445 | 
446 | /* Hidden
447 |    ========================================================================== */
448 | 
449 | /**
450 |  * Add the correct display in IE 10-.
451 |  */
452 | 
453 | [hidden] {
454 |   display: none;
455 | }
456 | 


--------------------------------------------------------------------------------
/Clase 3/styles-dist.css:
--------------------------------------------------------------------------------
1 | .square{width:100px;height:100px;padding:20px;border:5px solid black;background:red}


--------------------------------------------------------------------------------
/Clase 3/styles.css:
--------------------------------------------------------------------------------
1 | .square{
2 |     width: 100px;
3 |     height: 100px;
4 |     padding: 20px;
5 |     border: 5px solid black;
6 |     background: red;
7 | }


--------------------------------------------------------------------------------
/Clase 30/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Clip-path</title>
 7 |     <link rel="stylesheet" href="styles.css">
 8 | </head>
 9 | 
10 | <body>
11 | <div class="box">
12 |     <div class="box__item"></div>
13 | </div>
14 | </body>
15 | 
16 | </html>


--------------------------------------------------------------------------------
/Clase 30/styles.css:
--------------------------------------------------------------------------------
 1 | /*
 2 |     clip-path: Es una máscara que oculta partes de una caja
 3 |         circle(): dibuja un círculo, puede tener una medida fija, circle(100px) o podemos especificar un centro con at, circle(100px at medidaX medidaY | palabrasClaveX palabrasClaveY)
 4 | 
 5 |         ellipse(): dibuja una elipse, funciona igual que el círculo, pero en este caso tenemos que especificar 2 centros, el horizontal y el vertical
 6 | 
 7 |         inset(): dibuja un borde transparente por dentro de la caja
 8 |             inset(all| Y X | top X bottom | top left bottom right)
 9 |             existe la opción de redondear las esquinas, para ello después de los valores de inset pondremos round
10 |             inset(*** round all | 
11 |                 top-left & bottom-right top-right & bottom-left |
12 |                 top-left top-right & bottom-left bottom-right
13 |                 top-left top-right bottom-right bottom-left
14 |             )
15 |         polygon(): Especifica una serie de puntos (mínimo 3) para definir la zona visible siendo el punto 0 0 la esquina superior izquierda
16 |         los puntos se especifican por parejas de ejeX y ejeY separados por comas
17 |         polygon(0 0, 100% 0, 0 100%)
18 | 
19 |         Generador de clip-path: https://bennettfeely.com/clippy/
20 | */
21 | 
22 | body{
23 |     background: #333;
24 | }
25 | 
26 | .box{
27 |     width: 400px;
28 |     height: 400px;
29 |     background: white;
30 |     margin-left: auto;
31 |     margin-right: auto;
32 | }
33 | 
34 | .box__item{
35 |     background: lightcoral;
36 |     width: 400px;
37 |     height: 400px;
38 |     /* clip-path: circle(100px at left) */
39 |     /* clip-path: ellipse(100px 50px at left top) */
40 |     /* clip-path: inset(20px round 20px 50px 100px 150px) */
41 |     clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
42 |     transition: clip-path .5s;
43 | }
44 | 
45 | .box:hover > .box__item{
46 |     clip-path: polygon(0% 0%, 0% 100%, 10% 100%, 10% 10%, 90% 10%, 90% 90%, 10% 90%, 10% 100%, 100% 100%, 100% 0%);
47 | }


--------------------------------------------------------------------------------
/Clase 31/hsl.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DorianDesings/css-basico-2018-1019/5ff750b78c0b06b6df341eab06af123ec9f752d7/Clase 31/hsl.jpg


--------------------------------------------------------------------------------
/Clase 31/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Colores</title>
 7 |     <link rel="stylesheet" href="styles.css">
 8 | </head>
 9 | 
10 | <body>
11 |     <div class="box box--color">Color Name</div>
12 |     <div class="box box--rgb">RGB</div>
13 |     <div class="box box--rgba">RGBA</div>
14 |     <div class="box box--hexa">HEXA</div>
15 |     <div class="box box--hsl">HSL</div>
16 |     <div class="box box--hsla">HSLA</div>
17 | </body>
18 | 
19 | </html>


--------------------------------------------------------------------------------
/Clase 31/styles.css:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Colores:
 3 |         Hay varias formas de dar color a los elementos
 4 |             - Palabras clave https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
 5 | 
 6 |             - RGB: es una función de color que recibe 3 valores separados por comas, siendo 0 el mínimo y 255 el máximo
 7 |             rgb(0,0,0) sería un negro y rgb(255,255,255) sería blanco.
 8 | 
 9 |             -RGBA: Es una variación de RGB con un cuarto valor que sería el canal alpha, con este valor controlamos la opacidad. Sus valores van de 0 a 1, siendo 0 transparente y 1 opaco.
10 | 
11 |             - Hexadecimal: La notación hexademal tiene 16 valores, 0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F. Se escriben con un # al inicio y se pueden usar 3 o 6 valores. Si se usan 6 valores deben ir en parejas #ffffff, pero cuando las parejas tienen el mismo valor se suele obviar y se ponen solo 3 valores #fff.
12 |             El código hexadecimal se representa con los canales rgb de esta forma #rgb o #rrggbb. Utilizar el modo hexadecimal cuando se buscan colores especiales se queda corto si no utilizamos un preprocesador, ya que no podemos controlar la luminosidad, la saturación, etc.
13 |             Cuando los 3/6 valores son iguales es un color neutro, #000 sería negro y #fff blanco, y todos los valores intermedios serían grises con mayor o menor luminosidad #666, #aaa
14 | 
15 |             HSL(hue, saturation, lightness): Es una función de color que nos permite controlar el tono, la saturación y la luminosidad. Es el modo de color que se recomienda para tener un control total sobre los colores
16 |             hue es el ángulo en la rueda cromática. Los valores van de 0 a 360 grados
17 |             saturation es la intensidad del color. Los valores van de 0 (gris) a 100% (color puro) 
18 |             lightness es la intensidad de la luz. Los valores van de 0 (negro) a 100% (blanco)
19 | 
20 |             HSLA: Exactamente igual que RGBA
21 | */
22 | 
23 | body{
24 |     background: #333;
25 | }
26 | 
27 | .box{
28 |     width: 200px;
29 |     height: 200px;
30 |     border: 1px solid black;
31 |     margin: .5em;
32 |     text-align: center;
33 |     line-height: 200px;
34 |     font-size: 2.5em;
35 |     display: inline-block;
36 | }
37 | 
38 | .box--color{
39 |     color: blueviolet;
40 |     background-color: aquamarine;
41 | }
42 | 
43 | .box--rgb{
44 |     color: rgb(255, 125, 4);
45 | }
46 | 
47 | .box--rgba{
48 |     background-color: rgba(255, 125, 4, .4);
49 | }
50 | 
51 | .box--hexa{
52 |     background-color: #00ff80;
53 | }
54 | 
55 | .box--hsl{
56 |     background-color: hsl(120,26%,30%);
57 | }
58 | 
59 | .box--hsla{
60 |     background-color: hsla(120,26%,30%,.8);
61 | }
62 | 
63 | 


--------------------------------------------------------------------------------
/Clase 32/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Colores</title>
 7 |     <link rel="stylesheet" href="styles.css">
 8 | </head>
 9 | 
10 | <body>
11 |     <div class="box"></div>
12 | </body>
13 | 
14 | </html>


--------------------------------------------------------------------------------
/Clase 32/styles.css:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Border radius
 3 | 
 4 |     Es un shorthand que engloba:
 5 |     border-top-left-radis
 6 |     border-top-right-radius
 7 |     border-bottom-right-radius
 8 |     border-bottom-left-radius
 9 | 
10 |     border-radius: all;
11 |     border-radius: top-left/bottom-right top-right/bottom-left;
12 |     border-radius: top-left top-right/bottom-left bottom-right;
13 |     border-radius: top-left top-right bottom-left bottom-right;
14 | 
15 |     Elipses
16 |     border-radius: 10px / 50px;
17 |         border-top-left-radius: 10px 50px;
18 |         border-top-right-radius: 10px 50px;
19 |         border-bottom-right-radius: 10px 50px;
20 |         border-bottom-left-radius: 10px 50px;
21 | 
22 |     border-radius: 10px 50px / 50px 100px;
23 |         border-top-left-radius: 10px 50px;
24 |         border-top-right-radius: 50px 100px;
25 |         border-bottom-right-radius:10px 50px;
26 |         border-bottom-left-radius: 50px 100px;
27 | 
28 |     border-radius: 10px 50px 60px / 50px 100px 200px;
29 |         border-top-left-radius: 10px 50px;
30 |         border-top-right-radius: 50px 100px;
31 |         border-bottom-right-radius:60px 200px;
32 |         border-bottom-left-radius: 50px 100px;
33 | 
34 |     border-radius: 10px 50px 60px 80px/ 50px 100px 200px 300px;
35 |         border-top-left-radius: 10px 50px;
36 |         border-top-right-radius: 50px 100px;
37 |         border-bottom-right-radius:60px 200px;
38 |         border-bottom-left-radius: 80px 300px;
39 | */
40 | 
41 | .box {
42 |     width: 200px;
43 |     height: 200px;
44 |     background: lightcoral;
45 |     position: relative;
46 |     border-radius: 50%;
47 |     /* border-bottom-left-radius: 10px 50px; */
48 |     /* border-radius: 10px 50px 60px 80px / 50px 100px 200px 300px; */
49 | }
50 | 
51 | /* .box::before {
52 |     content: '';
53 |     position: absolute;
54 |     display: block;
55 |     border: 1px solid black;
56 |     bottom: 0;
57 |     left: 1px;
58 |     transform: rotate(-7deg);
59 |     width: 10px;
60 |     height: 50px;
61 |     border-bottom-left-radius: 10px 50px;
62 |     border-bottom-right-radius: 10px 50px;
63 |     border-top-left-radius: 10px 50px;
64 |     border-top-right-radius: 10px 50px;
65 | } */


--------------------------------------------------------------------------------
/Clase 33/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Box shadow - text shadow</title>
 7 |     <link rel="stylesheet" href="styles.css">
 8 | </head>
 9 | 
10 | <body>
11 |     <div class="box"></div>
12 |     <h1 class="title">Text Shadow</h1>
13 | </body>
14 | 
15 | </html>


--------------------------------------------------------------------------------
/Clase 33/styles.css:
--------------------------------------------------------------------------------
 1 | /* 
 2 | 
 3 | box-shadow
 4 | 
 5 | Es una propiedad que crea una una sombra del tamaño de la caja
 6 | 
 7 | box-shdow: h-offset v-offset blur spread color inset|outset
 8 |     h-offset: Es el desplazamiento horizontal de la sombra
 9 |     v-offset: Es el desplazamiento vertical de la sombra
10 |     blur: Optional Es la cantidad de desenfoque de la sombra
11 |     spread: Optional Es la extensión de la sombra
12 |     color: Optional color de la sombra, si no se especifica tomará el color del texto
13 |     inset|outset: Optional Determina si la sombra se dibuja por dentro o por fuera de la caja
14 | 
15 |     Con valor outset(default) los valores positivos añaden a derecha y abajo y los valores negativos añaden a iquierda y arriba
16 |     Con valor inset se invierten los valores, positivo sería izquierda y arriba y negativo sería derecha y abajo
17 | 
18 |     box-shadow: 10px 10px 2px 5px red;
19 | 
20 |     Sombras múltiples.
21 |     Se añaden las sombras separadas por comas
22 |     box-shadow: 10px 10px 2px 5px red, -10px -10px 2px 5px blue;
23 | 
24 | text-shadow: h-offset v-offset blur color
25 |     Sombras múltiples.
26 |         Se añaden las sombras separadas por comas text-shadow: 10px 10px 2px red, -11px -11px 2px blue;
27 | 
28 | */
29 | 
30 | .box {
31 |     background: #aaa;
32 |     width: 200px;
33 |     height: 200px;
34 |     border: 3px solid black;
35 |     margin: 2em auto;
36 |     box-shadow: 10px 10px red;
37 | }
38 | 
39 | .title {
40 |     text-align: center;
41 |     text-shadow: 1px 1px 0 red;
42 | }


--------------------------------------------------------------------------------
/Clase 34/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Degradados</title>
 7 |     <link rel="stylesheet" href="styles.css">
 8 | </head>
 9 | 
10 | <body>
11 |     <div class="box"></div>
12 | </body>
13 | 
14 | </html>


--------------------------------------------------------------------------------
/Clase 34/styles.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | https://developer.mozilla.org/es/docs/Web/CSS/radial-gradient
 3 | 
 4 | Un degradado es una transición entre un color y otro. El navegador calculará todos los pasos intermedios entre los colores del degradado
 5 | 
 6 | Es un valor de background-image
 7 | Existen dos tipos de degradados: lineales y radiales
 8 | 
 9 | Degradados lineales
10 |     linear-gradient([direction], color-1, color-2....)
11 |     background-image: linear-gradient(red, blue);
12 |     La dirección es opcional, se puede establecer con un ángulo(20deg, 190deg...) o estableciendo la dirección del degradado con "to top | right | bottom | left | top left | top right| bottom left | bottom right"
13 |     background-image: linear-gradient(to right, red, blue);
14 | 
15 |     Si no establecemos paradas de color, el navegador dividirá el espacio disponible entre los colores que tenga que pintar.
16 |     2 colores 0% 100%
17 |     3 colores 0% 50% 100%
18 | 
19 |     Para establecer las paradas se puede usar cualquier medida, px, em, %...
20 |     si las paradas/inicios empiezan en el mismo sitio se genera un corte sólido
21 |     background-image: linear-gradient(red 50%, blue 50%);
22 | 
23 |     linear-gradient(direction, color-1 stop, color-2 start [stop]...)
24 |     background-image: linear-gradient(red 50%, blue 50% 70%, green 75%);
25 | 
26 | Degradados radiales
27 |     Funcionan de una forma similar a los degradados lineales.
28 |     background-image: radial-gradient([shape], red, blue);
29 |     background-image: radial-gradient(red, blue);
30 | 
31 |     Por defecto, shape se ajustará al tamaño de la caja, pero podemos establecer si queremos un círculo o una elipse y definir el radio o los radios.
32 |     background-image: radial-gradient(circle 100px, red, blue);
33 |      background-image: radial-gradient(ellipse 100px 50px, red, blue);
34 |      Si no establecemos un punto de origen, el punto 0 0 será el centro del elemento. Para establecer el punto de origen podemos hacerlo en medidas o con palabras clave.
35 |      Con la palabra "at" establecemos el punto de origen. Los valores que acepta son:
36 |      top | right | bottom | left | center | closest-side | closest-corner | farthest-side | farthest-corner
37 |      background-image: radial-gradient(circle 100px at top left, red 50%, blue 50%);
38 |      si establecemos un solo valor, el segundo por defecto será center
39 |      background-image: radial-gradient(circle 100px at top, red 50%, blue 50%);
40 | 
41 | */
42 | 
43 | .box {
44 |     width: 200px;
45 |     height: 200px;
46 |     border: 3px solid black;
47 |     margin: 2em auto;
48 |     background-image: radial-gradient(ellipse 225px 50px at bottom, transparent 50%, blue 50%);
49 | }


--------------------------------------------------------------------------------
/Clase 35/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Degradados II</title>
 7 |     <link rel="stylesheet" href="styles.css">
 8 | </head>
 9 | 
10 | <body>
11 |     <div class="box"></div>
12 |     <div class="box-2"></div>
13 | </body>
14 | 
15 | </html>


--------------------------------------------------------------------------------
/Clase 35/styles.css:
--------------------------------------------------------------------------------
 1 | .box {
 2 |     width: 250px;
 3 |     height: 250px;
 4 |     border: 3px solid black;
 5 |     margin: 2em auto;
 6 |     background-image: repeating-radial-gradient(circle 20px,
 7 |         red 0,
 8 |         red 10px,
 9 |         blue 10px,
10 |         blue 20px);
11 | }
12 | 
13 | .box-2 {
14 |     width: 250px;
15 |     height: 250px;
16 |     border: 3px solid black;
17 |     margin: 2em auto;
18 |     background-image: repeating-linear-gradient(30deg,
19 |         red 0,
20 |         red 10px,
21 |         blue 10px,
22 |         blue 20px);
23 | }


--------------------------------------------------------------------------------
/Clase 36/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Overflow & float</title>
 7 |     <link rel="stylesheet" href="styles.css">
 8 | </head>
 9 | 
10 | <body>
11 |     <!--     <article class="article">
12 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam vel fugit nihil eos, ea beatae possimus eum, alias officiis in, magnam soluta! Saepe expedita quos dolor culpa, veniam modi magnam.</p>
13 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam vel fugit nihil eos, ea beatae possimus eum, alias officiis in, magnam soluta! Saepe expedita quos dolor culpa, veniam modi magnam.</p>
14 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam vel fugit nihil eos, ea beatae possimus eum, alias officiis in, magnam soluta! Saepe expedita quos dolor culpa, veniam modi magnam.</p>
15 |     </article> -->
16 | 
17 |     <article class="article-float">
18 |         <img src="https://scontent-mad1-1.xx.fbcdn.net/v/t1.0-9/55937544_1367213063404000_4014618348045205504_n.jpg?_nc_cat=102&_nc_ht=scontent-mad1-1.xx&oh=ff43ff707106687b91d645876a99d6f1&oe=5D3391B7" alt="">
19 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam vel fugit nihil eos, ea beatae possimus eum, alias officiis in, magnam soluta! Saepe expedita quos dolor culpa, veniam modi magnam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam vel fugit nihil eos, ea beatae possimus eum, alias officiis in, magnam soluta! Saepe expedita quos dolor culpa, veniam modi magnam.Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam vel fugit nihil eos, ea beatae possimus eum, alias officiis in, magnam soluta! Saepe expedita quos dolor culpa, veniam modi magnam.</p>
20 |     </article>
21 | </body>
22 | 
23 | </html>


--------------------------------------------------------------------------------
/Clase 36/styles.css:
--------------------------------------------------------------------------------
 1 | /* 
 2 | Overflow
 3 |     Es una propiedad que controla como se va a comportar la caja con el             contenido que se desborde de ella
 4 |     Es un shorthand que engloba overflow-x y overflow-y
 5 | 
 6 |     Tiene 3 valores posibles:
 7 |     hidden: Oculta todo el contenido que se desborde
 8 |     auto: Muestra la barra de scroll solo si hace falta
 9 |     scroll: Muestra ambas barras de scroll independientemente de si se necesitan
10 | */
11 | 
12 | .article {
13 |     border: 1px solid blue;
14 |     padding: .5em;
15 |     height: 100px;
16 |     overflow: auto;
17 | }
18 | 
19 | /*
20 | Float
21 | https://developer.mozilla.org/es/docs/Web/CSS/float
22 | https://developer.mozilla.org/es/docs/Web/CSS/clear
23 | 
24 | La propiedad float especifica si un elemento debe salir del flujo normal y aparecer a la izquierda o a la derecha de su contenedor. los elementos de texto y los elementos en línea aparecerán a su alrededor.
25 | 
26 | Tiene 3 valores posibles:
27 |     left: Flota el elemento a la izquierda del contendor
28 |     right: Flota el elemento a la derecha del contendor
29 |     none: Elimina el float
30 | 
31 | NO EXISTE FLOAT:CENTER!!
32 | 
33 | Un elemento flotado hace que el padre deje de contenerlo, hay varias formas de solucionarlo, la más cómoda es overflow:hidden
34 | */
35 | 
36 | .article-float {
37 |     border: 1px solid blue;
38 |     overflow: hidden;
39 | }
40 | 
41 | .article-float img {
42 |     max-width: 50%;
43 | 
44 |     float: left;
45 |     margin-right: .5em;
46 | }


--------------------------------------------------------------------------------
/Clase 38/axis.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DorianDesings/css-basico-2018-1019/5ff750b78c0b06b6df341eab06af123ec9f752d7/Clase 38/axis.PNG


--------------------------------------------------------------------------------
/Clase 38/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Flexbox - flex-direction/flex wrap</title>
 7 |     <link rel="stylesheet" href="styles.css">
 8 | </head>
 9 | 
10 | <body>
11 |     <!-- <span>EJEMPLO</span> -->
12 |     <div class="flex-container">
13 |         <div class="flex-item">1</div>
14 |         <div class="flex-item">2</div>
15 |         <div class="flex-item">3</div>
16 |         <div class="flex-item">4</div>
17 |         <div class="flex-item">5</div>
18 |         <div class="flex-item">6</div>
19 |         <div class="flex-item">7</div>
20 |         <div class="flex-item">8</div>
21 |         <div class="flex-item">9</div>
22 |         <div class="flex-item">10</div>
23 |     </div>
24 | </body>
25 | 
26 | </html>


--------------------------------------------------------------------------------
/Clase 38/styles.css:
--------------------------------------------------------------------------------
 1 | /* 
 2 | Flexbox
 3 |     display:flex
 4 |         Convierte el contenedor en un contexto para flexbox y hace que el contenedor sea un elemento de bloque para los elementos que lo rodean
 5 |     display:inline-flex
 6 |         Convierte el contenedor en un contexto para flexbox y hace que el contenedor sea un elemento en línea para los elementos que lo rodean
 7 | 
 8 |     flex-direction: row(default) | row-reverse | column | column-reverse
 9 |         Modifica la dirección y cual es el eje principal.
10 |         Por defecto es row (horizontal de izquierda a derecha)
11 |         row-reverse (horizontal de derecha a izquierda)
12 |         column vertical de arriba abajo
13 |         column-reverse vertical de abajo arriba
14 | 
15 |     flex-wrap: no-wrap(default) | wrap | wrap-reverse
16 |         Controla si los elementos saltarán de línea o no
17 |         no-wrap es el valor por defecto, un contenedor flex va a hacer que todos los elementos se queden en una línea si no le especificamos lo contrario
18 |         wrap hace que los elementos que no quepan en una línea (manteniendo sus dimensiones, si las tuvieran) salten a la linea inferior.
19 |         wrap-reverse hace lo mismo que wrap pero en lugar de hacer que salten a la línea inferior, hace que salten a la linea superior. 
20 | */
21 | 
22 | .flex-container {
23 |     background-color: #FCA17D;
24 |     padding: .5em 0;
25 |     display: flex;
26 |     flex-wrap: wrap;
27 | }
28 | 
29 | .flex-item {
30 |     width: 30px;
31 |     height: 30px;
32 |     margin: .5em;
33 |     line-height: 30px;
34 |     color: aliceblue;
35 |     text-align: center;
36 |     background-color: #9A348E;
37 | }


--------------------------------------------------------------------------------
/Clase 39/axis.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DorianDesings/css-basico-2018-1019/5ff750b78c0b06b6df341eab06af123ec9f752d7/Clase 39/axis.PNG


--------------------------------------------------------------------------------
/Clase 39/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Flexbox - flex-direction/flex wrap</title>
 7 |     <link rel="stylesheet" href="styles.css">
 8 | </head>
 9 | 
10 | <body>
11 |     <div class="flex-container">
12 |         <div class="flex-item">1</div>
13 |         <!--         <div class="flex-item">2</div>
14 |         <div class="flex-item">3</div>
15 |         <div class="flex-item">4</div>
16 |         <div class="flex-item">5</div>
17 |         <div class="flex-item">6</div>
18 |         <div class="flex-item">7</div>
19 |         <div class="flex-item">8</div>
20 |         <div class="flex-item">9</div>
21 |         <div class="flex-item">10</div> -->
22 |     </div>
23 |     <!--     <div class="box">
24 |         <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
25 |         <img src="axis.PNG" alt="">
26 |     </div> -->
27 | 
28 |     <!--     <div class="prices">
29 |         <div class="prices__item">
30 |             <h2 class="prices__title">Table 1</h2>
31 |             <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum, culpa. Culpa voluptatum ratione expedita voluptas, veritatis ipsum, dicta maxime animi facere fugit quas laudantium laborum, praesentium nobis totam saepe impedit.
32 |             </p>
33 |         </div>
34 |         <div class="prices__item">
35 |             <h2 class="prices__title">Table 2</h2>
36 |             <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum, culpa.</p>
37 |         </div>
38 |         <div class="prices__item">
39 |             <h2 class="prices__title">Table 3</h2>
40 |             <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum, culpa. Culpa voluptatum ratione expedita voluptas, veritatis ipsum, dicta maxime animi facere fugit quas laudantium laborum, praesentium nobis totam saepe impedit.</p>
41 |         </div>
42 |         <div class="prices__item">
43 |             <h2 class="prices__title">Table 4</h2>
44 |             <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum, culpa. Culpa voluptatum ratione expedita</p>
45 |         </div>
46 |     </div> -->
47 | </body>
48 | 
49 | </html>


--------------------------------------------------------------------------------
/Clase 39/styles.css:
--------------------------------------------------------------------------------
 1 | /* 
 2 | Flexbox
 3 |     Alineamiento
 4 |     Estas propiedades para alinear se aplican SIEMPRE al flex-container
 5 | 
 6 |     Existen propiedades para el main-axis y para el cross-axis
 7 |     main-axis:
 8 |         justify-content: flex-start(default) | center | space-between | space-around | space-evenly | flex-end
 9 | 
10 |         flex-start alinea los elementos al principio del main axis
11 |         center centra los elementos en la mitad del main axis
12 |         flex-end alinea los elementos al final del main axis
13 | 
14 |         space-between distribuye los items a la misma distancia y no deja espacio exterior ni el primer ni el último flex-end.
15 |         
16 |         space-around distribuye los items a la misma distancia y deja un espacio exterior en el primero y en el último flex-item
17 | 
18 |         space-evenly distribuye los items y los espacios exteriores del primer y último flex-item dejando la misma distancia entre todos.
19 |     cross-axis
20 |         align-items: Una sola línea.
21 |             flex-start | center | flex-end | stretch(default) | baseline
22 |         align-content:varias líneas
23 |             flex-start | center | flex-end | stretch(default) | baseline
24 | 
25 |         align-self: Se aplica al flex-item. Sirve para alinear un elemento en concreto en el cross-axis
26 | 
27 |     TRUCO EXTRA: Al utilizar auto con la propiedad margin lo que sucede es que el elemento se va al lado contrario del margen que dimos, si ponemos margin:auto el elemento se centra completamente, tanto vertical como horizontalmente
28 | */
29 | 
30 | .flex-container {
31 |     background-color: #FCA17D;
32 |     height: 400px;
33 |     width: 200px;
34 |     display: flex;
35 |     flex-wrap: wrap;
36 | }
37 | 
38 | .flex-item {
39 |     width: 50px;
40 |     height: 50px;
41 |     margin-bottom: auto;
42 |     margin-left: auto;
43 |     color: aliceblue;
44 |     background-color: #9A348E;
45 |     text-align: center;
46 |     line-height: 50px;
47 | }
48 | 
49 | /* .box {
50 |     border: 1px solid black;
51 |     width: 100%;
52 |     height: 600px;
53 |     display: flex;
54 |     align-items: center;
55 | } */
56 | 
57 | /* .box img {
58 |     max-width: 50%;
59 | } */
60 | 
61 | /* .prices {
62 |     display: flex;
63 |     align-items: flex-start;
64 |     height: 600px;
65 |     border: 1px solid black;
66 | }
67 | 
68 | .prices__item {
69 |     width: 25%;
70 |     height: 300px;
71 | }
72 | 
73 | .prices__item:first-child {
74 |     background: peru;
75 | }
76 | 
77 | .prices__item:nth-child(2) {
78 |     background: green;
79 |     line-height: 20px;
80 |     align-self: center;
81 | }
82 | 
83 | .prices__item:nth-child(3) {
84 |     background: indianred;
85 |     line-height: 15px;
86 | }
87 | 
88 | .prices__item:nth-child(4) {
89 |     background: lightgreen;
90 |     line-height: 50px;
91 | } */


--------------------------------------------------------------------------------
/Clase 4/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Reset CSS</title>
 6 |    <link rel="stylesheet" href="normalize.css">
 7 |   <link rel="stylesheet" href="styles-dist.css">
 8 | </head>
 9 | <body>
10 | 
11 |   <h1 class="main-title">Metodología BEM</h1>
12 | 
13 |   <header class="header">
14 |     <nav>
15 |         <ul class="main-menu">
16 |             <li class="main-menu__item">
17 |                 <a class="main-menu__link" href="#">Item 1</a>
18 |               </li>
19 |             <li class="main-menu__item"><a class="main-menu__link main-menu__link--active" href="#">Item 2</a></li>
20 |             <li class="main-menu__item"><a class="main-menu__link" href="#">Item 3</a></li>
21 |             <li class="main-menu__item"><a class="main-menu__link" href="#">Item 4</a></li>
22 |         </ul>
23 |     </nav>
24 |   </header>
25 | 
26 | <main class="main"></main>
27 | 
28 | <footer class="footer">
29 | 
30 | </footer>
31 | 
32 | </body>
33 | </html>


--------------------------------------------------------------------------------
/Clase 4/styles-dist.css:
--------------------------------------------------------------------------------
1 | .main-title{text-align:center}.header{background:lightblue;height:50px}.main{background:lightseagreen;height:600px}.footer{background:lightsalmon;height:200px}.main-menu{margin-top:0;margin-bottom:0;padding-left:0;list-style:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly}.main-menu__item{line-height:3}.main-menu__link{text-decoration:none;font-size:1.2em;color:green}.main-menu__link--active{background:red}.main-form{}.main-form__label{}.main-form__submit{}.form{}.label{}.submit{}


--------------------------------------------------------------------------------
/Clase 4/styles.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | Los bloques se suelen denominar con una sola palabra o con dos palabras separadas con un guion si puede existir conflicto de estilos.
  3 | 
  4 | .menu / .main-menu
  5 | .gallery / .main-gallery
  6 | 
  7 | Los elementos se nombran con el nombre del bloque al que pertenecen y su nombre con dos guiones bajos __
  8 | 
  9 | .menu__item / .main-menu__link
 10 | .gallery__img  / .main-gallery__item
 11 | 
 12 | Los modificadores se nombran con el nombre del bloque al que pertenecen y su modificador con dos guiones medios --
 13 | 
 14 | .menu__item--active
 15 | .gallery__item--special
 16 | 
 17 | Otras metodologías de nomenclatura CSS:
 18 | SuitCSS
 19 | BEMIT
 20 | */
 21 | 
 22 | .main-title{text-align: center;}
 23 | 
 24 | .header{background: lightblue;height: 50px;}
 25 | 
 26 | .main{background:lightseagreen;height: 600px;}
 27 | 
 28 | .footer{background: lightsalmon;height: 200px;}
 29 | 
 30 | /* nav ul {
 31 |     margin-top: 0;
 32 |     margin-bottom: 0;
 33 |     padding-left: 0;
 34 |     list-style: none;
 35 |     display: flex;
 36 |     justify-content: space-evenly;
 37 | }
 38 | 
 39 | nav ul li{
 40 |     line-height: 3;
 41 | }
 42 | 
 43 | nav ul li a{
 44 |     text-decoration: none;
 45 |     font-size: 1.2em;
 46 |     color: green
 47 | }
 48 | 
 49 | a{
 50 |     color: red
 51 | } */
 52 | 
 53 | .main-menu{
 54 |     margin-top: 0;
 55 |     margin-bottom: 0;
 56 |     padding-left: 0;
 57 |     list-style: none;
 58 |     display: flex;
 59 |     justify-content: space-evenly;
 60 | }
 61 | 
 62 | .main-menu__item{
 63 |     line-height: 3;
 64 | }
 65 | 
 66 | .main-menu__link{
 67 |     text-decoration: none;
 68 |     font-size: 1.2em;
 69 |     color: green;
 70 | }
 71 | 
 72 | .main-menu__link--active{
 73 |     background: red;
 74 | }
 75 | 
 76 | /* Forma correcta según la metodología BEM */
 77 | 
 78 | .main-form{
 79 | 
 80 | }
 81 | 
 82 | .main-form__label{
 83 | 
 84 | }
 85 | 
 86 | .main-form__submit{
 87 |     
 88 | }
 89 | 
 90 | /* Esta forma no es recomendada */
 91 | .form{
 92 | 
 93 | }
 94 | 
 95 | .label{
 96 | 
 97 | }
 98 | 
 99 | .submit{
100 | 
101 | }


--------------------------------------------------------------------------------
/Clase 40/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Flexbox - flex-direction/flex wrap</title>
 7 |     <link rel="stylesheet" href="styles.css">
 8 | </head>
 9 | 
10 | <body>
11 |     <div class="flex-container">
12 |         <div class="flex-item">5</div>
13 |         <div class="flex-item">1</div>
14 |         <div class="flex-item">2</div>
15 |         <div class="flex-item">3</div>
16 |         <div class="flex-item">4</div>
17 |     </div>
18 | 
19 | </body>
20 | 
21 | </html>


--------------------------------------------------------------------------------
/Clase 40/styles.css:
--------------------------------------------------------------------------------
 1 | /* 
 2 | Flexbox
 3 |     Propiedad flex: Es un shorthand que engloba las siguientes propiedades.
 4 |         Todas las medidas se establecen en función del espacio disponible en el contenedor.
 5 |         Todas las propiedades van en función del MAIN-AXIS.
 6 | 
 7 |         flex-grow: Establece qué hacer cuando hay espacio sobrante. Cuantas divisiones coge el elemento. El valor es un entero desde 0 hasta n o auto
 8 | 
 9 |         flex-shrink:Establece qué hacer cuando no hay espacio suficiente. Cuantas divisiones pierde el elemento. El valor es un entero desde 0 hasta n
10 | 
11 |         flex-basis: Establece cuanto tiene que ocupar el item antes de encojer o extenderse. Flex basis prevalece ante width si el main-axis es horizontal o ante height si el main-axis es vertical. El valor es un entero desde 0 hasta n
12 | 
13 |     Los valores de flex son:
14 |         Por defecto es 0 1 auto
15 |         flex:auto; equivale a 1 1 auto;
16 |         flex:none; equivale a  0 0 auto;
17 |         flex: flex-grow(obligatiorio) flex-shrink(opcional) flex-basis(opcional);
18 | 
19 | 
20 |     Order: Establece qué orden ocupará el elemento en el contenedor flex. El valor es el "peso" respecto a los valores que tengan los otros elementos. Por defecto es 0
21 | 
22 |     Extra:
23 |         Existe un shorthand para flex-direction y flex-wrap. flex-flow: flex-direction flex-wrap. flex-flow: column wrap;
24 | */
25 | 
26 | .flex-container {
27 |     background-color: #FCA17D;
28 |     height: 300px;
29 |     width: 400px;
30 |     display: flex;
31 | }
32 | 
33 | .flex-item {
34 |     display: flex;
35 |     align-items: center;
36 |     justify-content: center;
37 |     width: 50px;
38 |     height: 50px;
39 |     color: aliceblue;
40 |     background-color: #9A348E;
41 | }
42 | 
43 | .flex-item:nth-child(2) {
44 |     background: lightseagreen;
45 | }
46 | 
47 | .flex-item:nth-child(3) {
48 |     background: lightskyblue;
49 | }
50 | 
51 | .flex-item:first-child {
52 |     background: darkgoldenrod;
53 |     order: 2;
54 | }


--------------------------------------------------------------------------------
/Clase 41/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Flexbox - flex-direction/flex wrap</title>
 7 |     <link rel="stylesheet" href="styles.css">
 8 | </head>
 9 | 
10 | <body>
11 |     <div class="card">
12 |         <div class="card__left">
13 |             <img src="logo.png">
14 |         </div>
15 |         <div class="card__right">
16 |             <h1 class="card__title">contact</h1>
17 |             <form action="#" class="form">
18 |                 <div class="form__names">
19 |                     <div class="form__field">
20 |                         <label for="name" class="form__label">first name</label>
21 |                         <input type="text" id="name" class="form__input">
22 |                     </div>
23 |                     <div class="form__field">
24 |                         <label for="surname" class="form__label">last name</label>
25 |                         <input type="text" id="surname" class="form__input">
26 |                     </div>
27 |                 </div>
28 |                 <div class="form__field">
29 |                     <label for="email" class="form__label">email</label>
30 |                     <input type="email" id="email" class="form__input">
31 |                 </div>
32 |                 <div class="form__field">
33 |                     <label for="message" class="form__label">Message</label>
34 |                     <textarea id="message" class="form__textarea"></textarea>
35 |                 </div>
36 |                 <input type="submit" class="form__submit" value="send">
37 |             </form>
38 |         </div>
39 |     </div>
40 | 
41 | </body>
42 | 
43 | </html>


--------------------------------------------------------------------------------
/Clase 41/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DorianDesings/css-basico-2018-1019/5ff750b78c0b06b6df341eab06af123ec9f752d7/Clase 41/logo.png


--------------------------------------------------------------------------------
/Clase 41/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: sans-serif;
 3 |     background-image: radial-gradient(circle, #b94bf8, #3a1957);
 4 |     background-repeat: no-repeat;
 5 |     margin: 0;
 6 |     color: #eee;
 7 |     height: 100vh;
 8 | }
 9 | 
10 | img {
11 |     max-width: 80%;
12 | }
13 | 
14 | .card {
15 |     background-color: #333;
16 |     width: 80%;
17 |     height: 450px;
18 |     display: flex;
19 |     margin: 2em auto;
20 | }
21 | 
22 | .card__left {
23 |     width: 20%;
24 |     display: flex;
25 |     align-items: flex-start;
26 |     justify-content: center;
27 |     background-color: #222;
28 |     padding: .5rem 0;
29 | }
30 | 
31 | .card__right {
32 |     width: 80%;
33 |     padding: 0 1rem;
34 | }
35 | 
36 | .card__title {
37 |     text-transform: uppercase;
38 |     margin: 1rem 0;
39 | }
40 | 
41 | .form {
42 |     display: flex;
43 |     flex-direction: column;
44 |     justify-content: space-between;
45 |     height: 350px;
46 | }
47 | 
48 | .form__field {
49 |     display: flex;
50 |     flex-direction: column;
51 | }
52 | 
53 | .form__names {
54 |     display: flex;
55 |     justify-content: space-between;
56 | }
57 | 
58 | .form__names input {
59 |     width: 200px;
60 | }
61 | 
62 | .form__label {
63 |     margin-bottom: .5rem;
64 |     text-transform: uppercase;
65 |     font-size: .8rem;
66 | }
67 | 
68 | .form__input,
69 | .form__textarea {
70 |     background: none;
71 |     border: none;
72 |     border-bottom: 1px solid #eee;
73 |     color: inherit;
74 | }
75 | 
76 | .form__textarea {
77 |     resize: none;
78 |     border: 1px solid #eee;
79 |     flex-basis: 100px;
80 | }
81 | 
82 | .form__submit {
83 |     width: 40%;
84 |     background: rgb(0, 183, 255);
85 |     border: none;
86 |     padding: .8rem;
87 |     border-radius: 15px;
88 |     text-transform: uppercase;
89 |     color: inherit;
90 | }


--------------------------------------------------------------------------------
/Clase 42/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Grid - Fundamentos</title>
 7 |     <link rel="stylesheet" href="styles.css">
 8 | </head>
 9 | 
10 | <body>
11 |     <div class="grid-container">
12 |         <div class="grid-item">A</div>
13 |         <div class="grid-item">B</div>
14 |         <div class="grid-item">C</div>
15 |         <div class="grid-item">D</div>
16 |         <div class="grid-item">E</div>
17 |         <div class="grid-item">F</div>
18 |         <div class="grid-item">G</div>
19 |         <div class="grid-item">H</div>
20 |         <div class="grid-item">I</div>
21 |         <div class="grid-item">J</div>
22 |         <div class="grid-item">K</div>
23 |         <div class="grid-item">L</div>
24 |     </div>
25 | </body>
26 | 
27 | </html>


--------------------------------------------------------------------------------
/Clase 42/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     display: flex;
 3 |     align-items: center;
 4 |     justify-content: center;
 5 |     margin: 0;
 6 |     height: 100vh;
 7 |     color: #eee;
 8 |     font-family: sans-serif;
 9 |     background-image: radial-gradient(circle, #b94bf8, #3a1957);
10 |     background-repeat: no-repeat;
11 | }
12 | 
13 | .grid-container {
14 |     display: grid;
15 |     grid-template-columns: 100px 50px 150px 10px;
16 |     grid-template-rows: 100px 120px 50px;
17 |     grid-column-gap: 10px;
18 |     grid-row-gap: 10px;
19 | }
20 | 
21 | .grid-item {
22 |     border: 1px solid;
23 |     display: flex;
24 |     align-items: center;
25 |     justify-content: center;
26 |     padding: 1rem;
27 |     font-size: 2rem;
28 | }


--------------------------------------------------------------------------------
/Clase 43/Captura.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DorianDesings/css-basico-2018-1019/5ff750b78c0b06b6df341eab06af123ec9f752d7/Clase 43/Captura.PNG


--------------------------------------------------------------------------------
/Clase 43/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Grid - Fundamentos</title>
 7 |     <link rel="stylesheet" href="styles.css">
 8 | </head>
 9 | 
10 | <body>
11 |     <div class="grid-container">
12 |         <div class="grid-item">A</div>
13 |         <div class="grid-item">B</div>
14 |         <div class="grid-item">C</div>
15 |         <div class="grid-item">D</div>
16 |         <div class="grid-item">E</div>
17 |         <div class="grid-item">F</div>
18 |         <div class="grid-item">G</div>
19 |         <div class="grid-item">H</div>
20 |         <div class="grid-item">I</div>
21 |     </div>
22 | </body>
23 | 
24 | </html>


--------------------------------------------------------------------------------
/Clase 43/styles.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | 
 3 |     Ordenar elementos con grid-column y grid-row
 4 | 
 5 |     grid-column-start: establece desde que column-line empezará el elemento
 6 |     grid-column-end: establece hasta que column-line llega el elemento
 7 |     grid-row-start: establece desde que row-line empezará el elemento
 8 |     grid-row-end: establece hasta que row-line llega el elemento
 9 | 
10 |     Existe un shorthand que engloba las 2 propiedades
11 |     grid-column: start / end
12 |     grid-row: start / end
13 | 
14 |     tanto start como end admiten valores positivos, negativos y la palabra span
15 |     Valor positivo: Empieza a contar las column-lines o las row-lines de izquierda a derecha
16 |     Valor negativo: Empieza a contar las column-lines o las row-lines de derecha a izquierda
17 |     span: establecemos cuantas columnas o filas ha de ocupar, span 3 es como decirle que ocupe 3 columnas
18 | 
19 |     tip: Si ponemos en el valor end -1 llegará hasta el final
20 | 
21 | */
22 | 
23 | body {
24 |     display: flex;
25 |     align-items: center;
26 |     justify-content: center;
27 |     margin: 0;
28 |     height: 100vh;
29 |     color: #eee;
30 |     font-family: sans-serif;
31 |     background-image: radial-gradient(circle, #b94bf8, #3a1957);
32 |     background-repeat: no-repeat;
33 | }
34 | 
35 | .grid-container {
36 |     display: grid;
37 |     grid-template-columns: 100px 100px 100px 100px;
38 |     grid-template-rows: 100px 100px 100px 100px;
39 | }
40 | 
41 | .grid-item {
42 |     border: 1px solid;
43 |     display: flex;
44 |     align-items: center;
45 |     justify-content: center;
46 |     padding: 1rem;
47 |     font-size: 2rem;
48 | }
49 | 
50 | .grid-item:nth-child(3),
51 | .grid-item:nth-child(4) {
52 |     background: orange;
53 | }
54 | 
55 | .grid-item:first-child,
56 | .grid-item:nth-child(2) {
57 |     background: violet;
58 | }
59 | 
60 | .grid-item:nth-child(4) {
61 |     grid-column-start: 1;
62 |     /* grid-column-end: 2; */
63 |     grid-row-start: 1;
64 |     /* grid-row-end: 2; */
65 | }
66 | 
67 | .grid-item:nth-child(3) {
68 |     grid-column-start: 3;
69 |     grid-row-start: span 2;
70 | }
71 | 
72 | .grid-item:nth-child(2) {
73 |     /* grid-column-start: 1;
74 |     grid-column-end: 3;
75 |     grid-row-start: 2;
76 |     grid-row-end: 4; */
77 |     grid-column: 1 / 3;
78 |     grid-row: 2 / 4;
79 | }


--------------------------------------------------------------------------------
/Clase 44/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Grid - Fundamentos</title>
 7 |     <link rel="stylesheet" href="styles.css">
 8 | </head>
 9 | 
10 | <body>
11 |     <div class="grid-container">
12 |         <div class="grid-item">A</div>
13 |         <div class="grid-item">B</div>
14 |         <div class="grid-item">C</div>
15 |         <div class="grid-item">D</div>
16 |         <div class="grid-item">E</div>
17 |         <div class="grid-item">F</div>
18 |         <div class="grid-item">G</div>
19 |         <div class="grid-item">H</div>
20 |         <div class="grid-item">I</div>
21 |     </div>
22 | </body>
23 | 
24 | </html>


--------------------------------------------------------------------------------
/Clase 44/styles.css:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Medidas de la cuadrícula
 3 |         Se pueden dar medidas con cualquiera de las unidades que ya conocemos y dos más que vienen con grid, fr y auto
 4 |             fr: Equivale a n fracciones del espacio disponible después de establecer las medidas fijas.
 5 |             auto: Equivale al espacio que quede después de repartir todos elementos, es el último que se reparte. El tamaño mínimo del item será el espacio del contenido + el padding si lo tuviera
 6 | 
 7 |     función repeat()
 8 |         Con la función repeat podemos establecer repeticiones de medidas o patrones.
 9 |         En el caso "simple" recibiría 2 parámetros (valores):
10 |             repeat(nColumnas o nFilas, medida)
11 |             grid-template-columns: repeat(4,100px) es lo mismo que grid-template-columns: 100px 100px 100px 100px;
12 |         Si como segundo valor añadimos más de una medida, construiremos un patrón, no hay límite de valores.
13 |             grid-template-columns: repeat(2, 100px 50px...) es lo mismo que grid-template-columns: 100px 50px 50px 100px;
14 | */
15 | 
16 | body {
17 |     display: flex;
18 |     align-items: center;
19 |     justify-content: center;
20 |     height: 100vh;
21 |     color: #eee;
22 |     font-family: sans-serif;
23 |     background-image: radial-gradient(circle, #b94bf8, #3a1957);
24 |     background-repeat: no-repeat;
25 | }
26 | 
27 | .grid-container {
28 |     display: grid;
29 |     grid-template-columns: repeat(2, 40px 50px 40px);
30 | }
31 | 
32 | .grid-item {
33 |     border: 1px solid;
34 |     display: flex;
35 |     align-items: center;
36 |     justify-content: center;
37 |     padding: 1rem;
38 |     font-size: 1rem;
39 | }


--------------------------------------------------------------------------------
/Clase 45/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Grid - Fundamentos</title>
 7 |     <link rel="stylesheet" href="styles.css">
 8 | </head>
 9 | 
10 | <body>
11 |     <div class="grid-container">
12 |         <div class="grid-item">A</div>
13 |         <div class="grid-item">B</div>
14 |         <div class="grid-item">C</div>
15 |         <div class="grid-item">D</div>
16 |         <div class="grid-item">E</div>
17 |         <div class="grid-item">F</div>
18 |         <div class="grid-item">G</div>
19 |         <div class="grid-item">H</div>
20 |         <div class="grid-item">I</div>
21 |         <div class="grid-item">J</div>
22 |         <div class="grid-item">K</div>
23 |         <div class="grid-item">L</div>
24 |         <div class="grid-item">M</div>
25 |         <div class="grid-item">N</div>
26 |     </div>
27 | </body>
28 | 
29 | </html>


--------------------------------------------------------------------------------
/Clase 45/styles.css:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Explicit grid:
 3 |         Es el grid que declaramos, tanto con grid-template-columns como con grid-template-rows.
 4 | 
 5 |     Implicit grid:
 6 |         Es el grid que no declaramos, los items que quedan fuera del explicit grid.
 7 | 
 8 |     grid-auto-columns:
 9 |         Establece qué hacer con las columnas no definidas.
10 | 
11 |     grid-auto-rows:
12 |         Establece qué hacer con las filas no definidas.
13 |     
14 |     grid-auto-flow:
15 |         Establece la dirección en la cual se va a pintar el implicit grid. Admite 3 valores: 
16 |             row(default): Se crearán filas adicionales.
17 |             column: Se crearán columnas adicionales.
18 |             dense: Establece qué hacer con los huecos que queden.
19 | */
20 | 
21 | body {
22 |     display: flex;
23 |     align-items: center;
24 |     justify-content: center;
25 |     height: 100vh;
26 |     color: #eee;
27 |     font-family: sans-serif;
28 |     background-image: radial-gradient(circle, #b94bf8, #3a1957);
29 |     background-repeat: no-repeat;
30 |     overflow: hidden;
31 | }
32 | 
33 | .grid-container {
34 |     display: grid;
35 |     grid-template-columns: repeat(5, 1fr);
36 |     grid-template-rows: repeat(2, 100px);
37 |     grid-auto-flow: column dense;
38 | }
39 | 
40 | .grid-item {
41 |     border: .5px solid;
42 |     display: flex;
43 |     align-items: center;
44 |     justify-content: center;
45 |     padding: 1rem;
46 |     font-size: 1.5rem;
47 | }
48 | 
49 | .grid-item:nth-child(2) {
50 |     grid-column: span 3;
51 |     grid-row: 2 / 4;
52 |     background: purple;
53 | }
54 | 
55 | .grid-item:nth-child(3) {
56 |     grid-column: 2 / 6;
57 |     background: orange;
58 | }
59 | 
60 | .grid-item:nth-child(5) {
61 |     grid-column: span 5;
62 |     grid-row: span 2;
63 |     background: peru;
64 | }
65 | 
66 | .grid-item:last-child {
67 |     grid-column: span 3;
68 |     grid-row: span 3;
69 |     background: royalblue;
70 | }


--------------------------------------------------------------------------------
/Clase 46/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Grid - minmax - auto-fill - auto-fit</title>
 7 |     <link rel="stylesheet" href="styles.css">
 8 | </head>
 9 | 
10 | <body>
11 |     <div class="grid-container">
12 |         <div class="grid-item">A</div>
13 |         <div class="grid-item">B</div>
14 |         <div class="grid-item">C</div>
15 |         <div class="grid-item">D</div>
16 |     </div>
17 | </body>
18 | 
19 | </html>


--------------------------------------------------------------------------------
/Clase 46/styles.css:
--------------------------------------------------------------------------------
 1 | /*
 2 |    minmax():
 3 |     Recibe dos parámetros (valores) para establecer el mínimo y el máximo que pueden tener los items.
 4 |     grid-template-columns: repeat(2, minmax(100px, 1fr));
 5 | 
 6 |     min-content: mímimo necesario en función del contenido
 7 |     max-content: máximo necesario en función del contenido
 8 | 
 9 |     auto-fill: Crea tantos grid-items vacios como quepan en el viewport respetando las medidas.
10 |     auto-fit: Elimina los grid-items vacios que no se estén ocupando.
11 | */
12 | 
13 | body {
14 |     height: 100vh;
15 |     color: #eee;
16 |     font-family: sans-serif;
17 |     background-image: radial-gradient(circle, #b94bf8, #3a1957);
18 |     background-repeat: no-repeat;
19 | }
20 | 
21 | .grid-container {
22 |     display: grid;
23 |     grid-gap: 2px;
24 |     grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
25 |     grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
26 | }
27 | 
28 | .grid-item {
29 |     border: .5px solid;
30 |     display: flex;
31 |     align-items: center;
32 |     justify-content: center;
33 |     font-size: 1.2rem;
34 |     padding: 1rem;
35 | }


--------------------------------------------------------------------------------
/Clase 47/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Grid - alineamiento</title>
 7 |     <link rel="stylesheet" href="styles.css">
 8 | </head>
 9 | 
10 | <body>
11 |     <div class="grid-container">
12 |         <div class="grid-item">A</div>
13 |         <div class="grid-item">B</div>
14 |         <div class="grid-item">C</div>
15 |         <div class="grid-item">D</div>
16 |         <div class="grid-item">E</div>
17 |         <div class="grid-item">F</div>
18 |         <div class="grid-item">G</div>
19 |         <div class="grid-item">H</div>
20 |     </div>
21 | </body>
22 | 
23 | </html>


--------------------------------------------------------------------------------
/Clase 47/styles.css:
--------------------------------------------------------------------------------
 1 | /*
 2 |    Alineamiento:
 3 |     justify-items: Alinea los elementos horizontalmente respecto a la celda
 4 | 
 5 |     align-items: Alinea los elementos verticalmente respecto a la celda
 6 | 
 7 |     Admiten los valores:
 8 |         start
 9 |         end
10 |         center
11 |         stretch (default)
12 | 
13 |     place-items: Engloba las propiedades justify-items y align-items
14 |       place-items: align-items justify-items
15 | 
16 |     justify-content: Alinea los elementos horizontalmente respecto al contenedor
17 | 
18 |     align-content: Alinea los elementos verticalmente respecto al contenedor
19 | 
20 |     Admiten los valores:
21 |         start
22 |         end
23 |         center
24 |         stretch (default)
25 |         space-around
26 |         space-between
27 |         space-evenly
28 | 
29 |     place-content: align-content justify-content
30 | 
31 |     Tenemos las mismas propiedades con self para los items:
32 |         justify-self
33 |         align-self
34 |         place-self
35 | 
36 |         Admite los valores:  
37 |             start
38 |             end
39 |             center
40 |             stretch
41 | 
42 |     order: Funciona igual que en flexbox, por defecto todos los items tienen order:0
43 | */
44 | 
45 | body {
46 |     height: 100vh;
47 |     color: #eee;
48 |     font-family: sans-serif;
49 |     background-image: radial-gradient(circle, #b94bf8, #3a1957);
50 |     background-repeat: no-repeat;
51 | }
52 | 
53 | .grid-container {
54 |     display: grid;
55 |     grid-gap: 10px;
56 |     height: 80vh;
57 |     border: 3px solid yellow;
58 |     grid-template-columns: repeat(3, 1fr);
59 |     /* justify-items: center; */
60 |     /* align-items: center; */
61 |     /* place-items: center end; */
62 | 
63 |     /* justify-content: space-evenly; */
64 |     /* align-content: space-evenly; */
65 |     /* place-content: center end; */
66 | }
67 | 
68 | .grid-item {
69 |     border: .5px solid;
70 |     display: flex;
71 |     align-items: center;
72 |     justify-content: center;
73 |     font-size: 1.2rem;
74 |     padding: 1rem;
75 | }
76 | 
77 | .grid-item:nth-child(2) {
78 |     /* align-self: stretch; */
79 |     /* justify-self: stretch; */
80 |     /* place-self: start end; */
81 |     background-color: royalblue;
82 |     order: -1;
83 | }


--------------------------------------------------------------------------------
/Clase 48/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Grid - alineamiento</title>
 7 |     <link rel="stylesheet" href="styles.css">
 8 | </head>
 9 | 
10 | <body>
11 |     <main class="main">
12 |         <header class="header">HEADER</header>
13 |         <aside class="aside">ASIDE</aside>
14 |         <article class="article">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium voluptate ipsa impedit? Magni, optio nesciunt! Consectetur at tempora debitis hic sunt? Explicabo odit, neque provident magni accusamus aperiam alias consequatur.</article>
15 |         <footer class="footer">FOOTER</footer>
16 |     </main>
17 | </body>
18 | 
19 | </html>


--------------------------------------------------------------------------------
/Clase 48/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     height: 100vh;
 3 |     color: #eee;
 4 |     font-family: sans-serif;
 5 |     background-image: radial-gradient(circle, #b94bf8, #3a1957);
 6 |     background-repeat: no-repeat;
 7 | }
 8 | 
 9 | .main {
10 |     display: grid;
11 |     grid-template-columns: 150px repeat(2, 1fr);
12 |     grid-template-areas:
13 |         "header header header"
14 |         "aside article article"
15 |         "footer footer -"
16 | }
17 | 
18 | .header,
19 | .footer {
20 |     padding: 2rem 0;
21 |     text-align: center;
22 |     background: peru;
23 | }
24 | 
25 | .header {
26 |     grid-area: header;
27 | }
28 | 
29 | .aside {
30 |     background: hotpink;
31 |     padding: 0 2rem;
32 |     display: flex;
33 |     align-items: center;
34 |     grid-area: aside;
35 | 
36 | }
37 | 
38 | .article {
39 |     background: royalblue;
40 |     padding: 1rem;
41 |     grid-area: article;
42 | 
43 | }
44 | 
45 | .footer {
46 |     grid-area: footer;
47 | }


--------------------------------------------------------------------------------
/Clase 49/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 |     <head>
 5 |         <meta charset="UTF-8">
 6 |         <title>Grid - Nombrando grid lines</title>
 7 |         <link rel="stylesheet" href="styles.css">
 8 |     </head>
 9 | 
10 |     <body>
11 |         <div class="grid-container">
12 |             <div class="grid-item">A</div>
13 |             <div class="grid-item">B</div>
14 |             <div class="grid-item">C</div>
15 |             <div class="grid-item">D</div>
16 |             <div class="grid-item">E</div>
17 |             <div class="grid-item">F</div>
18 |             <div class="grid-item">G</div>
19 |             <div class="grid-item">H</div>
20 |             <div class="grid-item">I</div>
21 |         </div>
22 |     </body>
23 | 
24 | </html>
25 | 


--------------------------------------------------------------------------------
/Clase 49/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     display: flex;
 3 |     align-items: center;
 4 |     justify-content: center;
 5 |     margin: 0;
 6 |     height: 100vh;
 7 |     color: #eee;
 8 |     font-family: sans-serif;
 9 |     background-image: radial-gradient(circle, #b94bf8, #3a1957);
10 |     background-repeat: no-repeat;
11 | }
12 | 
13 | .grid-container {
14 |     padding: 1rem;
15 |     background-color: #fff;
16 |     display: grid;
17 |     grid-gap: 10px;
18 |     grid-template-columns: 
19 |         [first-column-line]
20 |         100px
21 |         [second-column-line]
22 |         100px
23 |         [third-column-line]
24 |         100px
25 |         [fourth-column-line]
26 |         100px
27 |         [last-column-line];
28 |     grid-template-rows:
29 |         [first-row-line]
30 |         100px
31 |         [second-row-line]
32 |         100px
33 |         [third-row-line]
34 |         100px
35 |         [fourth-row-line]
36 |         100px
37 |         [last-row-line];
38 | }
39 | 
40 | .grid-item {
41 |     border: 1px solid;
42 |     display: flex;
43 |     align-items: center;
44 |     justify-content: center;
45 |     padding: 1rem 1.5rem;
46 |     font-size: 2rem;
47 |     color:#000;
48 | }
49 | 
50 | .grid-item:first-child,
51 | .grid-item:nth-child(2){
52 |     background-color: violet;
53 | }
54 | .grid-item:nth-child(3),
55 | .grid-item:nth-child(4){
56 |     background-color: orange;
57 | }
58 | 
59 | .grid-item:first-child{
60 |     grid-column: second-column-line / third-column-line;
61 | }
62 | 
63 | .grid-item:nth-child(4){
64 |     grid-column: first-column-line / second-column-line;
65 |     grid-row: first-row-line / second-row-line;
66 | }
67 | 
68 | .grid-item:nth-child(3){
69 |     grid-column: third-column-line / fourth-column-line;
70 |     grid-row: first-row-line / third-row-line;
71 | }
72 | 
73 | .grid-item:nth-child(2){
74 |     grid-column: first-column-line / third-column-line;
75 |     grid-row: second-row-line / fourth-row-line;
76 | }


--------------------------------------------------------------------------------
/Clase 5/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Box Model</title>
 6 |   <link rel="stylesheet" href="styles.css">
 7 | </head>
 8 | <body>
 9 | 
10 | <!-- <h1>Box Model</h1>
11 | <h2>Modelo de caja</h2>
12 | 
13 | <a href="#">Enlace 1</a>
14 | <a href="#">Enlace 2</a> -->
15 | 
16 | <div class="box-1">Contenido 1</div>
17 | <div class="box-2">Contenido 2</div>
18 | 
19 | </body>
20 | </html>


--------------------------------------------------------------------------------
/Clase 5/styles.css:
--------------------------------------------------------------------------------
 1 | h1{
 2 |     background: lightblue;
 3 |     height: 150px;
 4 |     width: 100px;
 5 | }
 6 | 
 7 | h2{
 8 |     background: purple;
 9 |     width: 50px;
10 | }
11 | 
12 | a{
13 |     background: lime;
14 |     width: 300px;
15 |     height: 300px;
16 | }
17 | 
18 | .box-1{
19 |     width: 100px;
20 |     height: 100px;
21 |     background: lime;
22 |     padding: 10px;
23 |     border: 10px solid blue; /* sus dimensiones cuentan para el tamaño total */
24 |     margin: 20px;
25 |     outline: 10px solid red; /* sus dimensiones NO cuentan para el tamaño total */
26 | }
27 | 
28 | .box-2{
29 |     width: 100px;
30 |     height: 100px;
31 |     background: lightcoral;
32 | }


--------------------------------------------------------------------------------
/Clase 50/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 |     <head>
 5 |         <meta charset="UTF-8">
 6 |         <title>Grid - Grids anidados</title>
 7 |         <link rel="stylesheet" href="styles.css">
 8 |     </head>
 9 | 
10 |     <body>
11 |         <div class="grid-container">
12 |             <div class="grid-item">A</div>
13 |             <div class="grid-item nested">
14 |                 <div class="grid-item">1</div>
15 |                 <div class="grid-item">2</div>
16 |                 <div class="grid-item">3</div>
17 |                 <div class="grid-item">4</div>
18 |                 <div class="grid-item">5</div>
19 |                 <div class="grid-item">6</div>
20 |             </div>
21 |             <div class="grid-item">C</div>
22 |             <div class="grid-item">D</div>
23 |             <div class="grid-item">E</div>
24 |             <div class="grid-item">F</div>
25 |         </div>
26 |     </body>
27 | 
28 | </html>
29 | 


--------------------------------------------------------------------------------
/Clase 50/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     display: flex;
 3 |     align-items: center;
 4 |     justify-content: center;
 5 |     margin: 0;
 6 |     height: 100vh;
 7 |     color: #eee;
 8 |     font-family: sans-serif;
 9 |     background-image: radial-gradient(circle, #b94bf8, #3a1957);
10 |     background-repeat: no-repeat;
11 | }
12 | 
13 | .grid-container {
14 |     padding: 1rem;
15 |     background-color: #fff;
16 |     display: grid;
17 |     grid-gap: 10px;
18 |     grid-template-columns: repeat(3,1fr);
19 | }
20 | 
21 | .grid-item {
22 |     border: 1px solid;
23 |     display: flex;
24 |     align-items: center;
25 |     justify-content: center;
26 |     padding: 1rem 1.5rem;
27 |     font-size: 2rem;
28 |     color:#000;
29 | }
30 | 
31 | .nested{
32 |     display: grid;
33 |     grid-template-columns: repeat(3,1fr);
34 |     grid-gap: 15px;
35 | }
36 | 
37 | 


--------------------------------------------------------------------------------
/Clase 51/images/1.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DorianDesings/css-basico-2018-1019/5ff750b78c0b06b6df341eab06af123ec9f752d7/Clase 51/images/1.jpeg


--------------------------------------------------------------------------------
/Clase 51/images/10.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DorianDesings/css-basico-2018-1019/5ff750b78c0b06b6df341eab06af123ec9f752d7/Clase 51/images/10.jpeg


--------------------------------------------------------------------------------
/Clase 51/images/11.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DorianDesings/css-basico-2018-1019/5ff750b78c0b06b6df341eab06af123ec9f752d7/Clase 51/images/11.jpeg


--------------------------------------------------------------------------------
/Clase 51/images/12.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DorianDesings/css-basico-2018-1019/5ff750b78c0b06b6df341eab06af123ec9f752d7/Clase 51/images/12.jpeg


--------------------------------------------------------------------------------
/Clase 51/images/2.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DorianDesings/css-basico-2018-1019/5ff750b78c0b06b6df341eab06af123ec9f752d7/Clase 51/images/2.jpeg


--------------------------------------------------------------------------------
/Clase 51/images/3.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DorianDesings/css-basico-2018-1019/5ff750b78c0b06b6df341eab06af123ec9f752d7/Clase 51/images/3.jpeg


--------------------------------------------------------------------------------
/Clase 51/images/4.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DorianDesings/css-basico-2018-1019/5ff750b78c0b06b6df341eab06af123ec9f752d7/Clase 51/images/4.jpeg


--------------------------------------------------------------------------------
/Clase 51/images/5.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DorianDesings/css-basico-2018-1019/5ff750b78c0b06b6df341eab06af123ec9f752d7/Clase 51/images/5.jpeg


--------------------------------------------------------------------------------
/Clase 51/images/6.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DorianDesings/css-basico-2018-1019/5ff750b78c0b06b6df341eab06af123ec9f752d7/Clase 51/images/6.jpeg


--------------------------------------------------------------------------------
/Clase 51/images/7.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DorianDesings/css-basico-2018-1019/5ff750b78c0b06b6df341eab06af123ec9f752d7/Clase 51/images/7.jpeg


--------------------------------------------------------------------------------
/Clase 51/images/8.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DorianDesings/css-basico-2018-1019/5ff750b78c0b06b6df341eab06af123ec9f752d7/Clase 51/images/8.jpeg


--------------------------------------------------------------------------------
/Clase 51/images/9.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DorianDesings/css-basico-2018-1019/5ff750b78c0b06b6df341eab06af123ec9f752d7/Clase 51/images/9.jpeg


--------------------------------------------------------------------------------
/Clase 51/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 |     <head>
 5 |         <meta charset="UTF-8">
 6 |         <title>Grid - Grids anidados</title>
 7 |         <link rel="stylesheet" href="styles.css">
 8 |     </head>
 9 | 
10 |     <body>
11 |         <header class="header grid-item">HEADER</header>
12 |         <aside class="aside grid-item">ASIDE</aside>
13 | 
14 |         <div class="gallery">
15 |             <img src="images/1.jpeg" alt="">
16 |             <img src="images/2.jpeg" alt="">
17 |             <img src="images/3.jpeg" alt="">
18 |             <img src="images/4.jpeg" alt="">
19 |             <img src="images/5.jpeg" alt="">
20 |             <img src="images/6.jpeg" alt="">
21 |             <img src="images/7.jpeg" alt="">
22 |             <img src="images/8.jpeg" alt="">
23 |             <img src="images/9.jpeg" alt="">
24 |             <img src="images/10.jpeg" alt="">
25 |             <img src="images/11.jpeg" alt="">
26 |             <img src="images/12.jpeg" alt="">
27 |         </div>
28 | 
29 |         <footer class="footer grid-item">FOOTER</footer>
30 |     </body>
31 | 
32 | </html>
33 | 


--------------------------------------------------------------------------------
/Clase 51/links.txt:
--------------------------------------------------------------------------------
 1 | https://www.pexels.com/photo/living-room-interior-2227832/
 2 | https://www.pexels.com/photo/woman-in-yellow-sweater-2657838/
 3 | https://www.pexels.com/photo/beautiful-view-of-moraine-lake-2662116/
 4 | https://www.pexels.com/photo/underwater-photography-2289407/
 5 | https://www.pexels.com/photo/black-and-white-photography-of-building-with-round-windows-2271683/
 6 | https://www.pexels.com/photo/close-up-photo-of-dog-2652703/
 7 | https://www.pexels.com/photo/high-angle-photo-of-white-boat-on-body-of-water-1295036/
 8 | https://www.pexels.com/photo/building-escalator-1769356/
 9 | https://www.pexels.com/photo/gray-mountains-under-blue-sky-2223082/
10 | https://www.pexels.com/photo/women-s-white-shirt-and-brown-miniskirt-outfit-2664111/
11 | https://www.pexels.com/photo/bird-s-eye-view-photography-of-water-falls-rushing-through-cliff-1229846/
12 | https://www.pexels.com/photo/aerial-view-of-carnival-2260848/


--------------------------------------------------------------------------------
/Clase 51/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     display: grid;
 3 |     grid-template-columns: 150px 1fr;
 4 |     grid-template-rows: 100px 1fr 100px;
 5 |     margin: 0;
 6 |     color: #eee;
 7 |     font-family: sans-serif;
 8 |     background-image: radial-gradient(circle, #b94bf8, #3a1957);
 9 |     background-repeat: no-repeat;
10 | }
11 | 
12 | .grid-item{
13 |     border: 1px solid black;
14 |     display: flex;
15 |     justify-content: center;
16 |     color: #fff;
17 |     align-items: center;
18 | }
19 | 
20 | .header{
21 |     grid-column: 1 / -1;
22 | }
23 | 
24 | .aside{
25 |     grid-column: span 1;
26 |     grid-row: 2 / -1;
27 |     background-color: limegreen;
28 | }
29 | 
30 | .footer{
31 |     background-color: peru;
32 | }
33 | 
34 | .gallery{
35 |     display: grid;
36 |     grid-template-columns: repeat(auto-fill,minmax(250px, 1fr));
37 |     grid-gap: 5px;
38 |     padding: 1rem;
39 |     align-items: center;
40 |     justify-content: center;
41 |     grid-auto-flow: dense;
42 | }
43 | 
44 | .gallery img{
45 |     width: 100%;
46 |     height: 100%;
47 |     object-fit: cover;
48 | }
49 | 
50 | .gallery img:nth-child(3){
51 |     grid-row: 1 / span 2;
52 |     grid-column: 2 / span 2;
53 | }
54 | 
55 | .gallery img:nth-child(4){
56 |     grid-column: 1 / 3;
57 | }
58 | 
59 | .gallery img:nth-child(5){
60 |     grid-row: 1;
61 |     grid-column: 1 / 2;
62 | }
63 | 
64 | .gallery img:nth-child(6){
65 |     grid-column: span 2;
66 | }
67 | 
68 | .gallery img:nth-child(8){
69 |     grid-row: span 2;
70 | }
71 | 
72 | .gallery img:last-child{
73 |     grid-row: span 2;
74 | }
75 | 
76 | 


--------------------------------------------------------------------------------
/Clase 52/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 |     <head>
 5 |         <meta charset="UTF-8">
 6 |         <title>Grid -Shorthands</title>
 7 |         <link rel="stylesheet" href="styles.css">
 8 |     </head>
 9 | 
10 |     <body>
11 |         <div class="grid-container">
12 |             <div class="grid-item">A</div>
13 |             <div class="grid-item">B</div>
14 |             <div class="grid-item">C</div>
15 |             <div class="grid-item">D</div>
16 |             <div class="grid-item">E</div>
17 |             <div class="grid-item">F</div>
18 |             <div class="grid-item">G</div>
19 |             <div class="grid-item">H</div>
20 |             <div class="grid-item">I</div>
21 |         </div>
22 |     </body>
23 | 
24 | </html>
25 | 


--------------------------------------------------------------------------------
/Clase 52/styles.css:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Shorthands
 3 |         grid: (sin soporte total) 
 4 |             https://developer.mozilla.org/es/docs/Web/CSS/grid
 5 |         grid-template: 
 6 |             Engloba grid-template-columns, grid-template-rows y grid-template-areas
 7 |         grid-gap:
 8 |             Engloba grid-column-gap y grid-row-gap
 9 |         grid-column: 
10 |             Engloba grid-column-start y grid-column-end
11 |         grid-row:
12 |              Engloba grid-row-start y grid-row-end
13 | */
14 | 
15 | body {
16 |     display: flex;
17 |     align-items: center;
18 |     justify-content: center;
19 |     margin: 0;
20 |     height: 100vh;
21 |     color: #eee;
22 |     font-family: sans-serif;
23 |     background-image: radial-gradient(circle, #b94bf8, #3a1957);
24 |     background-repeat: no-repeat;
25 | }
26 | 
27 | .grid-container {
28 |     display: grid;
29 |     grid-template: 100px 200px 150px / 300px 250px 150px
30 |     /*grid-template: 
31 |          "first first first" 100px
32 |         "center center center" 200px
33 |         "last . ." 150px /
34 |         300px 250px
35 |         ; */
36 |         /* grid:
37 |             "first first first" 100px
38 |             "center center center" 200px
39 |             "last . ." 150px /
40 |             300px 250px; */
41 | }
42 | 
43 | .grid-item {
44 |     border: 1px solid;
45 |     display: flex;
46 |     align-items: center;
47 |     justify-content: center;
48 |     padding: 1rem 1.5rem;
49 |     font-size: 2rem;
50 |     color:#000;
51 | }
52 | 
53 | .grid-item:first-child,
54 | .grid-item:nth-child(4),
55 | .grid-item:nth-child(7){
56 |     background-color: limegreen;
57 | }


--------------------------------------------------------------------------------
/Clase 54/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 |     <head>
 5 |         <meta charset="UTF-8">
 6 |         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |         <title>Grid -Shorthands</title>
 8 |         <link rel="stylesheet" href="styles.css">
 9 |     </head>
10 | 
11 |     <body>
12 |         <header class="header">
13 |             <div class="banner">Banner</div>
14 |         </header>
15 |         <div class="flexbox grid">
16 |             <p class="flexbox__item grid__item">Lorem ipsum dolor sit amet consectetur adipisicing elit. In minus fugiat voluptates modi laudantium exercitationem commodi rem, tenetur minima eos? Ipsa exercitationem dolore facere pariatur omnis dicta harum modi quia.</p>
17 |             <p class="flexbox__item grid__item">Lorem ipsum dolor sit amet consectetur adipisicing elit. In minus fugiat voluptates modi laudantium exercitationem commodi rem, tenetur minima eos? Ipsa exercitationem dolore facere pariatur omnis dicta harum modi quia.</p>
18 |             <p class="flexbox__item grid__item">Lorem ipsum dolor sit amet consectetur adipisicing elit. In minus fugiat voluptates modi laudantium exercitationem commodi rem, tenetur minima eos? Ipsa exercitationem dolore facere pariatur omnis dicta harum modi quia.</p>
19 |             <p class="flexbox__item grid__item">Lorem ipsum dolor sit amet consectetur adipisicing elit. In minus fugiat voluptates modi laudantium exercitationem commodi rem, tenetur minima eos? Ipsa exercitationem dolore facere pariatur omnis dicta harum modi quia.</p>
20 |             <p class="flexbox__item grid__item">Lorem ipsum dolor sit amet consectetur adipisicing elit. In minus fugiat voluptates modi laudantium exercitationem commodi rem, tenetur minima eos? Ipsa exercitationem dolore facere pariatur omnis dicta harum modi quia.</p>
21 |             <p class="flexbox__item grid__item">Lorem ipsum dolor sit amet consectetur adipisicing elit. In minus fugiat voluptates modi laudantium exercitationem commodi rem, tenetur minima eos? Ipsa exercitationem dolore facere pariatur omnis dicta harum modi quia.</p>
22 |         </div>
23 |         <footer class="footer">
24 |             footer
25 |         </footer>
26 |     </body>
27 | 
28 | </html>
29 | 


--------------------------------------------------------------------------------
/Clase 54/styles.css:
--------------------------------------------------------------------------------
 1 | /* 
 2 | banner con unidades de viewport
 3 | footer siempre abajo
 4 | responsive con flexbox
 5 | responsive con grid
 6 | */
 7 | body {
 8 |     margin: 0;
 9 |     color: #eee;
10 |     font-family: sans-serif;
11 |     background-image: radial-gradient(circle, #b94bf8, #3a1957);
12 |     background-repeat: no-repeat;
13 |     min-height:100vh;
14 |     display: flex;
15 |     flex-direction: column;
16 | }
17 | 
18 | /* .flexbox{
19 |     display: flex;
20 |     flex-wrap: wrap;
21 | }
22 | 
23 | .flexbox__item{
24 |     margin: 2rem;
25 |     min-width: 320px;
26 |     flex:1 1 320px;
27 | } */
28 | 
29 | .grid{
30 |     display: grid;
31 |     grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
32 |     grid-gap: 2rem;
33 |     padding: 1rem;
34 | }
35 | 
36 | .banner{
37 |     background-color: royalblue;
38 |     padding: 15vmin;
39 |     text-align: center;
40 |     text-transform: uppercase;
41 |     font-size: 1.5rem;
42 | }
43 | 
44 | .footer{
45 |     background-color: red;
46 |     padding: 1em;
47 |     text-align: center;
48 |     text-transform: uppercase;
49 |     font-size: 1.5rem;
50 |     margin-top: auto;
51 | }


--------------------------------------------------------------------------------
/Clase 55/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 |     <head>
 5 |         <meta charset="UTF-8">
 6 |         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |         <title>Videos responsive</title>
 8 |         <link rel="stylesheet" href="styles.css">
 9 |     </head>
10 | 
11 |     <body>
12 |         <div class="container">
13 |             <div class="video">
14 |                 <iframe width="560" height="315" src="https://www.youtube.com/embed/Dym1Q1gr0FI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
15 |             </div>
16 |         </div>
17 |     </body>
18 | 
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Clase 55/styles.css:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Vídeos responsive:
 3 |         La forma más común es hacer un padding-bottom de 56.25%, éste número es el resultado de la operación (9 / 16) es decir un formato 16:9, esto da como resultado 0.5625 si lo multiplicamos por 100 el resultado es 56.25
 4 | */
 5 | 
 6 | .container{
 7 |     width: 80%;
 8 |     margin-left: auto;
 9 |     margin-right: auto;
10 |     min-width: 320px;
11 |     max-width: 1400px;
12 | }
13 | 
14 | .video{
15 |     height: 0;
16 |     padding-bottom: 56.25%;
17 |     position: relative;
18 | }
19 | 
20 | .video iframe{
21 |     position: absolute;
22 |     width: 100%;
23 |     height: 100%;
24 | }
25 | 
26 | 


--------------------------------------------------------------------------------
/Clase 56/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 |     <head>
 5 |         <meta charset="UTF-8">
 6 |         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |         <title>Breakpoints</title>
 8 |         <link rel="stylesheet" href="styles.css">
 9 |     </head>
10 | 
11 |     <body>
12 |         <ul class="menu">
13 |             <li class="menu__item">Item 1</li>
14 |             <li class="menu__item">Item 2</li>
15 |             <li class="menu__item">Item 3</li>
16 |             <li class="menu__item">Item 4</li>
17 |         </ul>
18 |     </body>
19 | 
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Clase 56/styles.css:
--------------------------------------------------------------------------------
 1 | /*
 2 |        Breakpoints: Existen dos tipos de breakpoints, los major breakpoints y los minor breakpoints
 3 |         Los major breakpoints son los que cambian la apariencia de la web de forma significativa
 4 |         Los minor breakpoints son los que cambian una cosa específica para un elemento en concreto
 5 | 
 6 |         Medidas más comunes:
 7 |             0 - 320px - 360px: Móviles portrait
 8 |             480px - 640px - 768px: Móviles landscape - tablet
 9 |             1024px - 1200px - 1400px - 1440px: tablets grandes, portátiles no HD
10 |             1920 - hacia arriba: HD, 2k, 4k...
11 | */
12 | 
13 | .menu{
14 |     list-style: none;
15 |     margin-top: 0;
16 |     margin-bottom: 0;
17 |     padding-left: 0;
18 |     font-size: 3rem;
19 | }
20 | 
21 | body{
22 |     background-color: royalblue;
23 | }
24 | 
25 | @media screen and (min-width:1400px){
26 |     body{
27 |         background-color: green;
28 |     }
29 | 
30 |     .menu{
31 |         display: flex;
32 |         justify-content: space-around;
33 |     }
34 | }
35 | 


--------------------------------------------------------------------------------
/Clase 6/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Margin - padding</title>
 6 |   <link rel="stylesheet" href="normalize.css">
 7 |   <link rel="stylesheet" href="styles.css">
 8 | </head>
 9 | <body>
10 |   <div class="box1"></div>
11 |   <div class="box2">
12 |     <div class="box2-content"></div>
13 |   </div>
14 | </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/Clase 6/styles.css:
--------------------------------------------------------------------------------
 1 | /* 
 2 | Margin: 1em; (top right bottom left)
 3 | Margin: 1em 2em; (Y X)
 4 | Margin: 1em 2em 3em; (top, X, bottom)
 5 | Margin: 1em 2em 3em 4em; (top right bottom left)
 6 | 
 7 | Podemos aplicar las propiedades por separado
 8 | 
 9 | Margin-top: 1em;
10 | Margin-rigt: 2em;
11 | Margin-bottom: 3em;
12 | Margin-left: 4em;
13 | 
14 | */
15 | 
16 | 
17 | .box1{
18 |     width: 200px;
19 |     height: 200px;
20 |     background: lightgreen;
21 |     margin: 1em 2em 3em 4em;
22 | }
23 | 
24 | /* 
25 | Padding :  1em; (top right bottom left)
26 | Padding :  1em 2em; (Y X)
27 | Padding : 1em 2em 3em; (top, X, bottom)
28 | Padding : 1em 2em 3em 4em; (top right bottom left)
29 | 
30 | Podemos aplicar las propiedades por separado
31 | 
32 | Padding-top: 1em;
33 | Padding-rigt: 2em;
34 | Padding-bottom: 3em;
35 | Padding-left: 4em;
36 | 
37 | */
38 | 
39 | .box2{
40 |     width: 200px;
41 |     height: 200px;
42 |     background: lightcoral;
43 |     border: 2px solid blue;
44 |     padding: 1em 2em 3em 4em;
45 | }
46 | 
47 | .box2-content{
48 |     width: 20px;
49 |     height: 20px;
50 |     background: yellow;
51 |     border: 2px solid red;
52 | }


--------------------------------------------------------------------------------
/Clase 7/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Border</title>
 6 |   <link rel="stylesheet" href="normalize.css">
 7 |   <link rel="stylesheet" href="styles.css">
 8 | </head>
 9 | <body>
10 |   <div class="box1"></div>
11 |   <div class="box2"></div>
12 |   <div class="box3"></div>
13 |   <div class="box4"></div>
14 |   <div class="box5"></div>
15 |   <div class="box6"></div>
16 |   <div class="box7"></div>
17 |   <div class="box8"></div>
18 |   <div class="box9"></div>
19 |   <div class="box10"></div>
20 | </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/Clase 7/styles.css:
--------------------------------------------------------------------------------
 1 | /* Border
 2 | 
 3 | border-width
 4 |     px|em|rem|%|....
 5 | 
 6 | border-style
 7 |     none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
 8 | 
 9 |     *Estas medidas dependen del navegador*
10 |     thick (ancho)
11 |     medium (medio)
12 |     thin (fino)
13 |         
14 | border-color
15 |     css native|rgb|rgba|hsl|hsla|hexadecimal|transparent
16 | 
17 | border-top-(width | style | color)
18 | border-right-(width | style | color)
19 | border-bottom-(width | style | color)
20 | border-left-(width | style | color)
21 | */
22 | 
23 | [class*=box] {
24 |     width: 200px;
25 |     height: 200px;
26 |     margin: 2em;
27 | }
28 | 
29 | .box1 {
30 |     background: yellowgreen;
31 |     border: 5px solid red;
32 |     border-top-width: 200px;
33 |     border-top-color: transparent;
34 | }
35 | 
36 | .box2 {
37 |     background: lightseagreen;
38 |     border-left-width: 5px;
39 |     border-left-style: dotted;
40 |     border-left-color: blue;
41 | }
42 | 
43 | .box3 {
44 |     background: lightcoral;
45 |     border: 5px dashed blue;
46 | }
47 | 
48 | .box4 {
49 |     background: yellowgreen;
50 |     border: 5px double blue;
51 | }
52 | 
53 | .box5 {
54 |     background: lightseagreen;
55 |     border: 5px groove blue;
56 | }
57 | 
58 | .box6 {
59 |     background: lightcoral;
60 |     border: 5px ridge blue;
61 | }
62 | 
63 | .box7 {
64 |     background: yellowgreen;
65 |     border: 5px inset blue;
66 | }
67 | 
68 | .box8 {
69 |     background: lightseagreen;
70 |     border: 5px outset blue;
71 | }
72 | 
73 | /* initial es la propiedad que tuviera por defecto, en este caso es none */
74 | 
75 | .box9 {
76 |     background: lightcoral;
77 |     border: 5px initial blue;
78 | }
79 | 
80 | /* inherit es la propiedad heredada, si el padre tuviera border pues cogería ese estilo */
81 | 
82 | .box10 {
83 |     background: yellowgreen;
84 |     border: 5px inherit blue;
85 | }


--------------------------------------------------------------------------------
/Clase 8/gamepad.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DorianDesings/css-basico-2018-1019/5ff750b78c0b06b6df341eab06af123ec9f752d7/Clase 8/gamepad.jpeg


--------------------------------------------------------------------------------
/Clase 8/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Ouline</title>
 6 |   <link rel="stylesheet" href="normalize.css">
 7 |   <link rel="stylesheet" href="styles.css">
 8 | </head>
 9 | <body>
10 |   <div class="img-box">
11 |     <img class="img" src="gamepad.jpeg" alt="">
12 |     <p class="text">GAMEPAD</p>
13 |   </div>
14 | </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/Clase 8/styles.css:
--------------------------------------------------------------------------------
 1 | /* 
 2 | 
 3 | Outline
 4 | 
 5 | outline-width
 6 |     px|em|rem|%|....
 7 | 
 8 | outline-style
 9 |     none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
10 | 
11 |     *Estas medidas dependen del navegador*
12 |     thick (ancho)
13 |     medium (medio)
14 |     thin (fino)
15 |         
16 | outline-color
17 |     css native|rgb|rgba|hsl|hsla|hexadecimal|transparent
18 | 
19 | outline-top-(width | style | color)
20 | outline-right-(width | style | color)
21 | outline-bottom-(width | style | color)
22 | outline-left-(width | style | color)
23 | 
24 | */
25 | 
26 | [class*=box] {
27 |     width: 200px;
28 |     height: 200px;
29 |     margin: 2em;
30 | }
31 | 
32 | .box1 {
33 |     background: yellowgreen;
34 |     border: 5px solid red;
35 |     border-top-width: 200px;
36 |     border-top-color: transparent;
37 | }
38 | 
39 | 


--------------------------------------------------------------------------------
/Clase 9/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Position - Conceptos básicos</title>
 7 |     <link rel="stylesheet" href="normalize.css">
 8 |     <link rel="stylesheet" href="styles.css">
 9 | </head>
10 | 
11 | <body>
12 |     <h1 class="title">Atributo position</h1>
13 |     <p class="parrafo-1">Este es el primer párrafo</p>
14 |     <p class="parrafo-2">Este es el segundo párrafo</p>
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/Clase 9/styles.css:
--------------------------------------------------------------------------------
 1 | /* 
 2 | Position
 3 | 
 4 | Flujo HTML -> Es el orden en el que aparecen los elementos en el documento
 5 | Espacio -> Es el espacio que ocupa un elemento en el documento
 6 | 
 7 | */
 8 | 
 9 | .title {
10 |     text-align: center;
11 |     font-size: 3em;
12 | }
13 | 
14 | p {
15 |     font-size: 2em;
16 | }
17 | 
18 | .parrafo-1{
19 |     display: none;
20 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # css2018
2 | Esta es una guía siguiendo los estándares de CSS en 2018/2019. Aquí voy subiendo los repositorios de código del curso que estoy dictando en youtube. Puedes encontrarlo en https://www.youtube.com/playlist?list=PLROIqh_5RZeAoysDfEpB_asxV0cItZOL_
3 | 


--------------------------------------------------------------------------------