├── 10 - Box model
    ├── css
    │   ├── styles-dist.css
    │   └── styles.css
    ├── index.html
    └── prepros.config
├── 11 - Más propiedades de las cajas
    ├── css
    │   ├── styles-dist.css
    │   └── styles.css
    ├── index.html
    └── prepros.config
├── 12 - Overflow
    ├── css
    │   ├── styles-dist.css
    │   └── styles.css
    ├── index.html
    └── prepros.config
├── 13 - Colapsado de márgenes
    ├── css
    │   ├── styles-dist.css
    │   └── styles.css
    ├── index.html
    └── prepros.config
├── 14- Display
    ├── css
    │   ├── styles-dist.css
    │   └── styles.css
    ├── index.html
    └── prepros.config
├── 15 - Outline
    ├── css
    │   ├── styles-dist.css
    │   └── styles.css
    ├── index.html
    └── prepros.config
├── 16 - Text align
    ├── assets
    │   └── images
    │   │   └── gato.jpg
    ├── css
    │   ├── styles-dist.css
    │   └── styles.css
    ├── index.html
    └── prepros.config
├── 17 - Box shadow
    ├── css
    │   ├── styles-dist.css
    │   └── styles.css
    ├── index.html
    └── prepros.config
├── 18 - Position
    ├── assets
    │   └── images
    │   │   └── banner.jpg
    ├── css
    │   ├── styles-dist.css
    │   └── styles.css
    ├── index.html
    └── prepros.config
├── 19 - Stacking context
    ├── css
    │   ├── styles-dist.css
    │   └── styles.css
    ├── index.html
    └── prepros.config
├── 20 - Ordenar las propiedades
    ├── css
    │   ├── styles-dist.css
    │   └── styles.css
    └── index.html
├── 21 - Medidas tip
    ├── css
    │   └── styles.css
    └── index.html
├── 21 - Medidas
    ├── css
    │   └── styles.css
    └── index.html
├── 22 -  Colores
    ├── android.svg
    ├── css
    │   └── styles.css
    └── index.html
├── 23 - Fuentes
    ├── assets
    │   ├── fonts
    │   │   └── GreatVibes-Regular.ttf
    │   └── icons
    │   │   └── home.svg
    ├── css
    │   └── styles.css
    └── index.html
├── 4 - Conectar html y css
    ├── css
    │   └── styles.css
    └── index.html
├── 5 - Sintaxis de css
    └── styles.css
├── 6 - Selectores
    ├── css
    │   └── styles.css
    └── index.html
├── 7 - Como funciona css
    ├── css
    │   └── styles.css
    └── index.html
├── 8 - Estilos por defecto
    ├── css
    │   ├── normalize.css
    │   └── styles.css
    └── index.html
└── 9 - prepros
    ├── css
        ├── styles-dist.css
        └── styles.css
    ├── index.html
    └── prepros.config


/10 - Box model/css/styles-dist.css:
--------------------------------------------------------------------------------
1 | *{box-sizing:border-box}body{background-color:#333;color:#fff;margin:0}.header{background-color:steelblue}.title{width:300px}.block{background-color:purple;width:200px;height:200px;margin-left:auto;margin-right:auto;padding:20px;border:5px solid red}.inline{background-color:lightcoral;color:inherit}.buttons{background-color:steelblue;padding-top:20px;padding-bottom:20px;margin-top:30px}.button{margin-left:90px;padding:25px 50px;border:20px solid red;border-width:20px;border-style:solid;border-color:red;border-right-color:red;border-right-width:20px;border-style:outset}


--------------------------------------------------------------------------------
/10 - Box model/css/styles.css:
--------------------------------------------------------------------------------
  1 | /* 
  2 |     Margin:
  3 |         Es la propiedad que nos permite generar espacio entre elementos.
  4 |         Es un shorthand (propiedad abreviada) que controla los 4 lados posibles a los que dar márgenes.
  5 |         margin-top: Margen superior
  6 |         margin-right: Margen derecho
  7 |         margin-bottom: Margen inferior
  8 |         margin-left: Margen izquierdo
  9 | 
 10 |         Admite hasta 4 valores que van en el orden de las agujas del reloj.
 11 |         4 valores -> margin:top right bottom left;
 12 |         3 valores -> margin: top left/right bottom;
 13 |         2 valores -> margin: top/bottom left/right;
 14 |         1 valor -> margin: top/right/bottom/left
 15 | 
 16 |     Padding:
 17 |         Es la propiedad que nos permite generar espacio interno entre el borde y la caja
 18 |         Es un shorthand (propiedad abreviada) que controla los 4 lados posibles a los que dar padding.
 19 |         padding-top: padding superior
 20 |         padding-right: padding derecho
 21 |         padding-bottom: padding inferior
 22 |         padding-left: padding izquierdo
 23 | 
 24 |         Admite hasta 4 valores que van en el orden de las agujas del reloj.
 25 |         4 valores -> padding:top right bottom left;
 26 |         3 valores -> padding: top left/right bottom;
 27 |         2 valores -> padding: top/bottom left/right;
 28 |         1 valor -> padding: top/right/bottom/left
 29 | 
 30 |     Border:
 31 |         Es la propiedad que nos permite modificar el borde de la caja
 32 |         Es un shorthand (propiedad abreviada) que agrupa 3 propiedades
 33 |             border-width: ancho del borde
 34 |                 border-top-width
 35 |                 border-right-width
 36 |                 border-bottom width
 37 |                 border-left-width
 38 |             border-style: estilo del borde
 39 |                 border-top-style
 40 |                 border-right-style
 41 |                 border-bottom style
 42 |                 border-left-style
 43 |                 Listado de valores para style:
 44 |                     none
 45 |                     hidden
 46 |                     dotted
 47 |                     dashed
 48 |                     solid
 49 |                     double
 50 |                     groove
 51 |                     ridge
 52 |                     inset
 53 |                     outset
 54 |             border-color: color del borde
 55 |                 border-top-color
 56 |                 border-right-color
 57 |                 border-bottom color
 58 |                 border-left-color
 59 | 
 60 |     Box-sizing:
 61 |         Es la propiedad que nos permite controlar el cálculo que hace el navegador a la hora de modificar las propiedades content, padding y border.
 62 |         Los 2 valores que podemos darle son
 63 |             content-box -> Valor por defecto
 64 |             border-box -> Cálculo de tamaño del elemento incluyendo el padding y el border.
 65 | */
 66 | 
 67 | /* *{
 68 |     margin: 0;
 69 |     padding: 0;
 70 | } */
 71 | 
 72 | *{
 73 |     box-sizing: border-box;
 74 | }
 75 | 
 76 | body{
 77 |     background-color: #333;
 78 |     color: #fff;
 79 |     margin: 0;
 80 | }
 81 | 
 82 | .header{
 83 |     background-color: steelblue;
 84 | }
 85 | 
 86 | .title{
 87 |     width: 300px;
 88 | }
 89 | 
 90 | .block{
 91 |     background-color: purple;
 92 |     width: 200px;
 93 |     height: 200px;
 94 |     margin-left: auto;
 95 |     margin-right: auto;
 96 |     padding: 20px;
 97 |     border:5px solid red;
 98 |     /* margin-top: 100px; */
 99 |     /* margin: 0 auto; */
100 |     /* padding: 50px 20px 100px 70px; */
101 | }
102 | 
103 | .inline{
104 |     background-color: lightcoral;
105 |     color:inherit;
106 |     /* padding-bottom: 100px; */
107 |     /* margin-left: 100px; */
108 | }
109 | 
110 | .buttons{
111 |     background-color: steelblue;
112 |     padding-top: 20px;
113 |     padding-bottom: 20px;
114 |     margin-top: 30px;
115 | }
116 | 
117 | .button{
118 |     margin-left: 90px;
119 |     padding: 25px 50px;
120 |     border: 20px solid red;
121 |     border-width: 20px;
122 |     border-style: solid;
123 |     border-color: red;
124 |     border-right-color:red;
125 |     border-right-width: 20px;
126 |     border-style: outset;
127 | }


--------------------------------------------------------------------------------
/10 - Box model/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Document</title>
 8 |     <link rel="stylesheet" href="css/styles-dist.css" />
 9 |   </head>
10 |   <body>
11 |     <!-- <header class="header">
12 |       <nav class="menu">MENU</nav>
13 |     </header> -->
14 |     <h1 class="title">Box model</h1>
15 |     <div class="block">Elemento de bloque</div>
16 |     <!-- <a href="#" class="inline">Elemento de línea </a>
17 |     <div class="buttons">
18 |       <button class="button">SOY UN BOTÓN</button>
19 |     </div> -->
20 |     <!-- <p class="text">
21 |       Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur architecto dolorem
22 |       sapiente repellat, sint natus, aliquam maxime reiciendis, laudantium eum nihil temporibus.
23 |       Quas, placeat. Pariatur illo a odit amet sunt?
24 |     </p>
25 |     <p class="text">
26 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse nam soluta quaerat id repellat
27 |       porro laboriosam explicabo incidunt omnis quam sequi minus amet molestias quod unde ab, illo
28 |       nisi labore?
29 |     </p>
30 |     <ul>
31 |       <li>Item 1</li>
32 |       <li>Item 2</li>
33 |       <li>Item 3</li>
34 |       <li>Item 4</li>
35 |     </ul> -->
36 |   </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/10 - Box model/prepros.config:
--------------------------------------------------------------------------------
  1 | {
  2 |   "version": "7",
  3 |   "about": "This is a Prepros (https://prepros.io) configuration file. You can commit this file to a git repo to backup and sync project configurations.",
  4 |   "config": {
  5 |     "proxy": {
  6 |       "enable": false,
  7 |       "target": "",
  8 |       "useLocalAssets": false
  9 |     },
 10 |     "reload": {
 11 |       "enable": true,
 12 |       "delay": 0,
 13 |       "animate": true,
 14 |       "afterUpload": false
 15 |     },
 16 |     "sync": {
 17 |       "enable": false,
 18 |       "mouse": true,
 19 |       "keyboard": true,
 20 |       "form": true,
 21 |       "scroll": true
 22 |     },
 23 |     "watcher": {
 24 |       "enable": true,
 25 |       "maxFiles": 2000,
 26 |       "usePolling": false,
 27 |       "pollingInterval": 500,
 28 |       "extensions": [
 29 |         ".html",
 30 |         ".htm",
 31 |         ".php"
 32 |       ],
 33 |       "ignore": {
 34 |         "patterns": [
 35 |           ".*",
 36 |           "wp-admin",
 37 |           "wp-includes",
 38 |           "node_modules",
 39 |           "Prepros Export",
 40 |           "bower_components"
 41 |         ],
 42 |         "exceptions": []
 43 |       }
 44 |     },
 45 |     "exporter": {
 46 |       "ignore": {
 47 |         "patterns": [
 48 |           ".*",
 49 |           "desktop.ini",
 50 |           "prepros.cfg",
 51 |           "node_modules",
 52 |           "Prepros Export",
 53 |           "prepros.config",
 54 |           "prepros-6.config",
 55 |           "*-original.jpg",
 56 |           "*-original.jpeg",
 57 |           "*-original.png",
 58 |           "*-original.svg",
 59 |           "*.scss",
 60 |           "*.sass",
 61 |           "*.less",
 62 |           "*.pug",
 63 |           "*.jade",
 64 |           "*.styl",
 65 |           "*.haml",
 66 |           "*.slim",
 67 |           "*.coffee",
 68 |           "*.kit",
 69 |           "*.turf",
 70 |           "*.ts"
 71 |         ],
 72 |         "exceptions": []
 73 |       }
 74 |     },
 75 |     "uploader": {
 76 |       "remotePath": "",
 77 |       "timeout": 20000,
 78 |       "autoUpload": false,
 79 |       "reuseConnection": true,
 80 |       "connectionType": "ftp",
 81 |       "history": []
 82 |     },
 83 |     "packages": {
 84 |       "createPackageLock": true
 85 |     },
 86 |     "images": {
 87 |       "preserveOriginal": true
 88 |     },
 89 |     "tasks": {
 90 |       "autoprefixer": {
 91 |         "cascade": true,
 92 |         "add": true,
 93 |         "remove": true,
 94 |         "supports": true,
 95 |         "flexbox": true,
 96 |         "grid": "autoplace",
 97 |         "browsers": [
 98 |           "defaults"
 99 |         ],
100 |         "sourceMap": false
101 |       },
102 |       "babel": {
103 |         "sourceMap": false,
104 |         "presets": {
105 |           "@babel/preset-env": {
106 |             "enable": true,
107 |             "options": {
108 |               "targets": [
109 |                 "> 2%",
110 |                 "not dead"
111 |               ],
112 |               "preserveImports": false,
113 |               "polyfills": false
114 |             }
115 |           },
116 |           "@babel/preset-react": true,
117 |           "@babel/preset-flow": false
118 |         },
119 |         "plugins": {
120 |           "@babel/plugin-proposal-class-static-block": false,
121 |           "@babel/plugin-proposal-class-properties": false,
122 |           "@babel/plugin-proposal-decorators": {
123 |             "enable": false,
124 |             "options": {
125 |               "decoratorsBeforeExport": true
126 |             }
127 |           },
128 |           "@babel/plugin-proposal-export-namespace-from": false,
129 |           "@babel/plugin-proposal-function-sent": false,
130 |           "@babel/plugin-proposal-logical-assignment-operators": false,
131 |           "@babel/plugin-proposal-nullish-coalescing-operator": false,
132 |           "@babel/plugin-proposal-numeric-separator": false,
133 |           "@babel/plugin-proposal-optional-chaining": false,
134 |           "@babel/plugin-proposal-private-methods": false,
135 |           "@babel/plugin-proposal-throw-expressions": false
136 |         },
137 |         "customPresets": [],
138 |         "customPlugins": []
139 |       },
140 |       "bundle-js": {
141 |         "sourceMap": false,
142 |         "exclude": [
143 |           "node_modules",
144 |           "bower_components"
145 |         ],
146 |         "devMode": true,
147 |         "globals": [],
148 |         "externals": [],
149 |         "babel": {
150 |           "enable": true,
151 |           "options": {
152 |             "sourceMap": false,
153 |             "presets": {
154 |               "@babel/preset-env": {
155 |                 "enable": true,
156 |                 "options": {
157 |                   "targets": [
158 |                     "> 2%",
159 |                     "not dead"
160 |                   ],
161 |                   "preserveImports": false,
162 |                   "polyfills": false
163 |                 }
164 |               },
165 |               "@babel/preset-react": true,
166 |               "@babel/preset-flow": false
167 |             },
168 |             "plugins": {
169 |               "@babel/plugin-proposal-class-static-block": false,
170 |               "@babel/plugin-proposal-class-properties": false,
171 |               "@babel/plugin-proposal-decorators": {
172 |                 "enable": false,
173 |                 "options": {
174 |                   "decoratorsBeforeExport": true
175 |                 }
176 |               },
177 |               "@babel/plugin-proposal-export-namespace-from": false,
178 |               "@babel/plugin-proposal-function-sent": false,
179 |               "@babel/plugin-proposal-logical-assignment-operators": false,
180 |               "@babel/plugin-proposal-nullish-coalescing-operator": false,
181 |               "@babel/plugin-proposal-numeric-separator": false,
182 |               "@babel/plugin-proposal-optional-chaining": false,
183 |               "@babel/plugin-proposal-private-methods": false,
184 |               "@babel/plugin-proposal-throw-expressions": false
185 |             },
186 |             "customPresets": [],
187 |             "customPlugins": []
188 |           }
189 |         },
190 |         "css": {
191 |           "enable": true
192 |         },
193 |         "fonts": {
194 |           "enable": true
195 |         }
196 |       },
197 |       "coffeescript": {
198 |         "header": false,
199 |         "bare": false,
200 |         "sourceMap": false
201 |       },
202 |       "command": {
203 |         "command": "",
204 |         "rootDir": ""
205 |       },
206 |       "concat-js": {
207 |         "sourceMap": false,
208 |         "rootDir": ""
209 |       },
210 |       "copy": {
211 |         "sourceMap": false
212 |       },
213 |       "dart-sass": {
214 |         "indentType": "space",
215 |         "indentWidth": 2,
216 |         "linefeed": "lf",
217 |         "sourceMap": false
218 |       },
219 |       "haml": {
220 |         "doubleQuoteAttributes": true
221 |       },
222 |       "jpg": {
223 |         "quality": 90
224 |       },
225 |       "less": {
226 |         "javascriptEnabled": false,
227 |         "strictImports": false,
228 |         "insecure": false,
229 |         "math": "always",
230 |         "strictUnits": false,
231 |         "dumpLineNumbers": false,
232 |         "sourceMap": false
233 |       },
234 |       "markdown": {
235 |         "githubFlavored": true,
236 |         "wrapWithHtml": false
237 |       },
238 |       "minify-css": {
239 |         "sourceMap": false
240 |       },
241 |       "minify-html": {
242 |         "caseSensitive": false,
243 |         "collapseBooleanAttributes": true,
244 |         "collapseInlineTagWhitespace": false,
245 |         "collapseWhitespace": true,
246 |         "conservativeCollapse": false,
247 |         "decodeEntities": false,
248 |         "html5": true,
249 |         "includeAutoGeneratedTags": true,
250 |         "keepClosingSlash": false,
251 |         "minifyCSS": true,
252 |         "minifyJS": true,
253 |         "preserveLineBreaks": false,
254 |         "preventAttributesEscaping": false,
255 |         "processConditionalComments": false,
256 |         "removeAttributeQuotes": false,
257 |         "removeComments": true,
258 |         "removeEmptyAttributes": false,
259 |         "removeEmptyElement": false,
260 |         "removeOptionalTags": false,
261 |         "removeRedundantAttributes": false,
262 |         "removeScriptTypeAttributes": false,
263 |         "removeStyleLinkTypeAttributes": false,
264 |         "removeTagWhitespace": false,
265 |         "sortAttributes": false,
266 |         "sortClassName": false,
267 |         "useShortDoctype": true
268 |       },
269 |       "minify-js": {
270 |         "parse": {
271 |           "bare_returns": false
272 |         },
273 |         "compress": {
274 |           "arrows": true,
275 |           "arguments": false,
276 |           "booleans": true,
277 |           "booleans_as_integers": false,
278 |           "collapse_vars": true,
279 |           "comparisons": true,
280 |           "computed_props": true,
281 |           "conditionals": true,
282 |           "dead_code": true,
283 |           "directives": true,
284 |           "drop_console": false,
285 |           "drop_debugger": true,
286 |           "evaluate": true,
287 |           "expression": false,
288 |           "global_defs": [],
289 |           "hoist_funs": false,
290 |           "hoist_props": true,
291 |           "hoist_vars": false,
292 |           "if_return": true,
293 |           "inline": 3,
294 |           "join_vars": true,
295 |           "keep_fargs": true,
296 |           "keep_infinity": false,
297 |           "loops": true,
298 |           "negate_iife": true,
299 |           "properties": true,
300 |           "pure_funcs": [],
301 |           "pure_getters": false,
302 |           "reduce_vars": true,
303 |           "sequences": true,
304 |           "side_effects": true,
305 |           "switches": true,
306 |           "top_retain": [],
307 |           "typeofs": true,
308 |           "unsafe": false,
309 |           "unsafe_arrows": false,
310 |           "unsafe_comps": false,
311 |           "unsafe_Function": false,
312 |           "unsafe_math": false,
313 |           "unsafe_proto": false,
314 |           "unsafe_regexp": false,
315 |           "unsafe_undefined": false,
316 |           "unused": true
317 |         },
318 |         "mangle": {
319 |           "eval": false,
320 |           "reserved": []
321 |         },
322 |         "output": {
323 |           "ascii_only": false,
324 |           "braces": false,
325 |           "comments": "none",
326 |           "inline_script": true,
327 |           "keep_numbers": false,
328 |           "keep_quoted_props": false,
329 |           "preamble": null,
330 |           "quote_keys": false,
331 |           "quote_style": 0,
332 |           "semicolons": true,
333 |           "shebang": true,
334 |           "webkit": false,
335 |           "wrap_iife": false,
336 |           "wrap_func_args": true
337 |         },
338 |         "sourceMap": false,
339 |         "toplevel": false,
340 |         "ie8": false,
341 |         "keep_classnames": false,
342 |         "keep_fnames": false,
343 |         "safari10": false
344 |       },
345 |       "node-sass": {
346 |         "indentType": "space",
347 |         "indentWidth": 2,
348 |         "linefeed": "lf",
349 |         "outputStyle": "expanded",
350 |         "precision": 10,
351 |         "sourceMap": false,
352 |         "sourceComments": false
353 |       },
354 |       "png": {
355 |         "quality": 90
356 |       },
357 |       "postcss-import": {
358 |         "ignoreKeywords": [],
359 |         "sourceMap": false
360 |       },
361 |       "postcss-preset-env": {
362 |         "stage": 2,
363 |         "browsers": [
364 |           "> 2%",
365 |           "not dead"
366 |         ],
367 |         "sourceMap": false
368 |       },
369 |       "pug": {
370 |         "pretty": true
371 |       },
372 |       "slim": {
373 |         "indent": "space",
374 |         "indentSize": 2,
375 |         "pretty": true
376 |       },
377 |       "stylus": {
378 |         "useNib": true,
379 |         "sourceMap": false,
380 |         "linenos": false
381 |       },
382 |       "svg": {
383 |         "cleanupAttrs": true,
384 |         "removeDoctype": true,
385 |         "removeXMLProcInst": true,
386 |         "removeComments": true,
387 |         "removeMetadata": true,
388 |         "removeTitle": true,
389 |         "removeDesc": true,
390 |         "removeUselessDefs": true,
391 |         "removeEditorsNSData": true,
392 |         "removeEmptyAttrs": true,
393 |         "removeHiddenElems": true,
394 |         "removeEmptyText": true,
395 |         "removeEmptyContainers": true,
396 |         "removeViewBox": false,
397 |         "cleanupEnableBackground": true,
398 |         "convertStyleToAttrs": true,
399 |         "convertColors": true,
400 |         "convertPathData": true,
401 |         "convertTransform": true,
402 |         "removeUnknownsAndDefaults": true,
403 |         "removeNonInheritableGroupAttrs": true,
404 |         "removeUselessStrokeAndFill": true,
405 |         "removeUnusedNS": true,
406 |         "cleanupIDs": true,
407 |         "cleanupNumericValues": true,
408 |         "moveElemsAttrsToGroup": true,
409 |         "moveGroupAttrsToElems": true,
410 |         "collapseGroups": true,
411 |         "removeRasterImages": false,
412 |         "mergePaths": true,
413 |         "convertShapeToPath": true,
414 |         "sortAttrs": true,
415 |         "removeDimensions": true
416 |       },
417 |       "turf": {
418 |         "rootDir": ""
419 |       },
420 |       "typescript": {
421 |         "allowJs": false,
422 |         "allowSyntheticDefaultImports": true,
423 |         "allowUmdGlobalAccess": false,
424 |         "allowUnreachableCode": false,
425 |         "allowUnusedLabels": false,
426 |         "alwaysStrict": false,
427 |         "charset": "utf8",
428 |         "checkJs": false,
429 |         "declaration": false,
430 |         "disableSizeLimit": false,
431 |         "downlevelIteration": false,
432 |         "emitBOM": false,
433 |         "emitDecoratorMetadata": false,
434 |         "experimentalDecorators": false,
435 |         "forceConsistentCasingInFileNames": false,
436 |         "importHelpers": false,
437 |         "jsx": "React",
438 |         "keyofStringsOnly": false,
439 |         "lib": [],
440 |         "maxNodeModuleJsDepth": 0,
441 |         "module": "ES2015",
442 |         "moduleResolution": "NodeJs",
443 |         "newLine": "LineFeed",
444 |         "noFallthroughCasesInSwitch": false,
445 |         "noImplicitAny": false,
446 |         "noImplicitReturns": false,
447 |         "noImplicitThis": false,
448 |         "noStrictGenericChecks": false,
449 |         "noUnusedLocals": false,
450 |         "noUnusedParameters": false,
451 |         "noImplicitUseStrict": false,
452 |         "noLib": false,
453 |         "noResolve": false,
454 |         "preserveConstEnums": false,
455 |         "jsxFactory": "React.createElement",
456 |         "removeComments": false,
457 |         "skipLibCheck": false,
458 |         "sourceMap": false,
459 |         "strict": false,
460 |         "strictFunctionTypes": false,
461 |         "strictBindCallApply": false,
462 |         "strictNullChecks": false,
463 |         "strictPropertyInitialization": false,
464 |         "suppressExcessPropertyErrors": false,
465 |         "suppressImplicitAnyIndexErrors": false,
466 |         "target": "ES3",
467 |         "resolveJsonModule": false,
468 |         "esModuleInterop": false,
469 |         "useDefineForClassFields": false
470 |       }
471 |     },
472 |     "fileTypes": {
473 |       "sass": {
474 |         "extensions": [
475 |           ".scss",
476 |           ".sass"
477 |         ],
478 |         "autoCompile": true,
479 |         "sourceMap": false,
480 |         "tasks": [
481 |           {
482 |             "task": "dart-sass",
483 |             "enable": true
484 |           },
485 |           {
486 |             "task": "autoprefixer",
487 |             "enable": true
488 |           },
489 |           {
490 |             "task": "minify-css",
491 |             "enable": false
492 |           }
493 |         ],
494 |         "output": {
495 |           "extension": ".css",
496 |           "type": "REPLACE_SEGMENTS",
497 |           "segments": [
498 |             {
499 |               "segment": "scss",
500 |               "replaceWith": "css"
501 |             },
502 |             {
503 |               "segment": "sass",
504 |               "replaceWith": "css"
505 |             }
506 |           ]
507 |         }
508 |       },
509 |       "less": {
510 |         "extensions": [
511 |           ".less"
512 |         ],
513 |         "autoCompile": true,
514 |         "sourceMap": false,
515 |         "tasks": [
516 |           {
517 |             "task": "less",
518 |             "enable": true
519 |           },
520 |           {
521 |             "task": "autoprefixer",
522 |             "enable": true
523 |           },
524 |           {
525 |             "task": "minify-css",
526 |             "enable": false
527 |           }
528 |         ],
529 |         "output": {
530 |           "extension": ".css",
531 |           "type": "REPLACE_SEGMENTS",
532 |           "segments": [
533 |             {
534 |               "segment": "less",
535 |               "replaceWith": "css"
536 |             }
537 |           ]
538 |         }
539 |       },
540 |       "pug": {
541 |         "extensions": [
542 |           ".pug",
543 |           ".jade"
544 |         ],
545 |         "autoCompile": true,
546 |         "tasks": [
547 |           {
548 |             "task": "pug",
549 |             "enable": true
550 |           },
551 |           {
552 |             "task": "minify-html",
553 |             "enable": false
554 |           }
555 |         ],
556 |         "output": {
557 |           "extension": ".html",
558 |           "type": "REPLACE_SEGMENTS",
559 |           "segments": [
560 |             {
561 |               "segment": "pug",
562 |               "replaceWith": "html"
563 |             }
564 |           ]
565 |         }
566 |       },
567 |       "css": {
568 |         "extensions": [
569 |           ".css"
570 |         ],
571 |         "autoCompile": false,
572 |         "sourceMap": false,
573 |         "tasks": [
574 |           {
575 |             "task": "copy",
576 |             "enable": true
577 |           },
578 |           {
579 |             "task": "postcss-import",
580 |             "enable": false
581 |           },
582 |           {
583 |             "task": "postcss-preset-env",
584 |             "enable": false
585 |           },
586 |           {
587 |             "task": "autoprefixer",
588 |             "enable": true
589 |           },
590 |           {
591 |             "task": "minify-css",
592 |             "enable": true
593 |           }
594 |         ],
595 |         "output": {
596 |           "extension": ".css",
597 |           "type": "SOURCE_RELATIVE",
598 |           "relativePath": "",
599 |           "suffix": "-dist",
600 |           "alwaysSuffix": false
601 |         }
602 |       },
603 |       "javascript": {
604 |         "extensions": [
605 |           ".js",
606 |           ".jsx"
607 |         ],
608 |         "autoCompile": false,
609 |         "sourceMap": false,
610 |         "tasks": [
611 |           {
612 |             "task": "copy",
613 |             "enable": true
614 |           },
615 |           {
616 |             "task": "concat-js",
617 |             "enable": false
618 |           },
619 |           {
620 |             "task": "babel",
621 |             "enable": false
622 |           },
623 |           {
624 |             "task": "bundle-js",
625 |             "enable": false
626 |           },
627 |           {
628 |             "task": "minify-js",
629 |             "enable": true
630 |           }
631 |         ],
632 |         "output": {
633 |           "extension": ".js",
634 |           "type": "SOURCE_RELATIVE",
635 |           "relativePath": "",
636 |           "suffix": "-dist",
637 |           "alwaysSuffix": false
638 |         }
639 |       },
640 |       "stylus": {
641 |         "extensions": [
642 |           ".styl"
643 |         ],
644 |         "autoCompile": true,
645 |         "sourceMap": false,
646 |         "tasks": [
647 |           {
648 |             "task": "stylus",
649 |             "enable": true
650 |           },
651 |           {
652 |             "task": "autoprefixer",
653 |             "enable": true
654 |           },
655 |           {
656 |             "task": "minify-css",
657 |             "enable": false
658 |           }
659 |         ],
660 |         "output": {
661 |           "extension": ".css",
662 |           "type": "REPLACE_SEGMENTS",
663 |           "segments": [
664 |             {
665 |               "segment": "stylus",
666 |               "replaceWith": "css"
667 |             },
668 |             {
669 |               "segment": "styl",
670 |               "replaceWith": "css"
671 |             }
672 |           ]
673 |         }
674 |       },
675 |       "markdown": {
676 |         "extensions": [
677 |           ".md",
678 |           ".markdown",
679 |           ".mkd"
680 |         ],
681 |         "autoCompile": false,
682 |         "tasks": [
683 |           {
684 |             "task": "markdown",
685 |             "enable": true
686 |           },
687 |           {
688 |             "task": "minify-html",
689 |             "enable": false
690 |           }
691 |         ],
692 |         "output": {
693 |           "extension": ".html",
694 |           "type": "REPLACE_SEGMENTS",
695 |           "segments": [
696 |             {
697 |               "segment": "markdown",
698 |               "replaceWith": "html"
699 |             }
700 |           ]
701 |         }
702 |       },
703 |       "haml": {
704 |         "extensions": [
705 |           ".haml"
706 |         ],
707 |         "autoCompile": true,
708 |         "tasks": [
709 |           {
710 |             "task": "haml",
711 |             "enable": true
712 |           },
713 |           {
714 |             "task": "minify-html",
715 |             "enable": false
716 |           }
717 |         ],
718 |         "output": {
719 |           "extension": ".html",
720 |           "type": "REPLACE_SEGMENTS",
721 |           "segments": [
722 |             {
723 |               "segment": "haml",
724 |               "replaceWith": "html"
725 |             }
726 |           ]
727 |         }
728 |       },
729 |       "slim": {
730 |         "extensions": [
731 |           ".slim"
732 |         ],
733 |         "autoCompile": true,
734 |         "tasks": [
735 |           {
736 |             "task": "slim",
737 |             "enable": true
738 |           },
739 |           {
740 |             "task": "minify-html",
741 |             "enable": false
742 |           }
743 |         ],
744 |         "output": {
745 |           "extension": ".html",
746 |           "type": "REPLACE_SEGMENTS",
747 |           "segments": [
748 |             {
749 |               "segment": "slim",
750 |               "replaceWith": "html"
751 |             }
752 |           ]
753 |         }
754 |       },
755 |       "coffeescript": {
756 |         "extensions": [
757 |           ".coffee"
758 |         ],
759 |         "autoCompile": true,
760 |         "sourceMap": false,
761 |         "tasks": [
762 |           {
763 |             "task": "coffeescript",
764 |             "enable": true
765 |           },
766 |           {
767 |             "task": "babel",
768 |             "enable": false
769 |           },
770 |           {
771 |             "task": "bundle-js",
772 |             "enable": false
773 |           },
774 |           {
775 |             "task": "minify-js",
776 |             "enable": false
777 |           }
778 |         ],
779 |         "output": {
780 |           "extension": ".js",
781 |           "type": "REPLACE_SEGMENTS",
782 |           "segments": [
783 |             {
784 |               "segment": "coffee-script",
785 |               "replaceWith": "js"
786 |             },
787 |             {
788 |               "segment": "coffeescript",
789 |               "replaceWith": "js"
790 |             },
791 |             {
792 |               "segment": "coffee",
793 |               "replaceWith": "js"
794 |             }
795 |           ]
796 |         }
797 |       },
798 |       "turf": {
799 |         "extensions": [
800 |           ".turf",
801 |           ".kit"
802 |         ],
803 |         "autoCompile": true,
804 |         "tasks": [
805 |           {
806 |             "task": "turf",
807 |             "enable": true
808 |           },
809 |           {
810 |             "task": "minify-html",
811 |             "enable": false
812 |           }
813 |         ],
814 |         "output": {
815 |           "extension": ".html",
816 |           "type": "REPLACE_SEGMENTS",
817 |           "segments": [
818 |             {
819 |               "segment": "turf",
820 |               "replaceWith": "html"
821 |             }
822 |           ]
823 |         }
824 |       },
825 |       "typescript": {
826 |         "extensions": [
827 |           ".ts",
828 |           ".tsx"
829 |         ],
830 |         "autoCompile": true,
831 |         "sourceMap": false,
832 |         "tasks": [
833 |           {
834 |             "task": "typescript",
835 |             "enable": true
836 |           },
837 |           {
838 |             "task": "babel",
839 |             "enable": false
840 |           },
841 |           {
842 |             "task": "bundle-js",
843 |             "enable": false
844 |           },
845 |           {
846 |             "task": "minify-js",
847 |             "enable": false
848 |           }
849 |         ],
850 |         "output": {
851 |           "extension": ".js",
852 |           "type": "REPLACE_SEGMENTS",
853 |           "segments": [
854 |             {
855 |               "segment": "typescript",
856 |               "replaceWith": "js"
857 |             },
858 |             {
859 |               "segment": "ts",
860 |               "replaceWith": "js"
861 |             }
862 |           ]
863 |         }
864 |       },
865 |       "jpg": {
866 |         "extensions": [
867 |           ".jpg",
868 |           ".jpeg"
869 |         ],
870 |         "tasks": [
871 |           {
872 |             "task": "jpg",
873 |             "enable": true
874 |           }
875 |         ],
876 |         "output": {
877 |           "extension": ".jpg",
878 |           "type": "SOURCE_RELATIVE",
879 |           "relativePath": ""
880 |         }
881 |       },
882 |       "png": {
883 |         "extensions": [
884 |           ".png"
885 |         ],
886 |         "tasks": [
887 |           {
888 |             "task": "png",
889 |             "enable": true
890 |           }
891 |         ],
892 |         "output": {
893 |           "extension": ".png",
894 |           "type": "SOURCE_RELATIVE",
895 |           "relativePath": ""
896 |         }
897 |       },
898 |       "svg": {
899 |         "extensions": [
900 |           ".svg"
901 |         ],
902 |         "tasks": [
903 |           {
904 |             "task": "svg",
905 |             "enable": true
906 |           }
907 |         ],
908 |         "output": {
909 |           "extension": ".svg",
910 |           "type": "SOURCE_RELATIVE",
911 |           "relativePath": ""
912 |         }
913 |       }
914 |     },
915 |     "files": [
916 |       {
917 |         "file": "css/styles.css",
918 |         "config": {
919 |           "autoCompile": true
920 |         }
921 |       }
922 |     ]
923 |   }
924 | }
925 | 


--------------------------------------------------------------------------------
/11 - Más propiedades de las cajas/css/styles-dist.css:
--------------------------------------------------------------------------------
1 | *{box-sizing:border-box}body{background-color:#333;color:#fff;margin:0}.box{margin-left:auto;margin-right:auto;margin-top:100px;background-color:lightcyan;width:300px;height:300px}


--------------------------------------------------------------------------------
/11 - Más propiedades de las cajas/css/styles.css:
--------------------------------------------------------------------------------
 1 | /* 
 2 |    Border-radius: Es la propiedad que nos permite redondear vértices de forma independiente.
 3 |    Es un shorthand que engloba 4 propiedades:
 4 |     border-top-left-radius -> Radio del borde superior izquierdo
 5 |     border-top-right-radius -> Radio del borde superior derecho
 6 |     border-bottom-right-radius -> Radio del borde inferior derecho
 7 |     border-bottom-left-radius -> Radio del borde inferior izquierdo
 8 | 
 9 |     Si sólo recibe un valor dibujará un círculo en el vértice que especifiquemos
10 | 
11 |     border-top-right-radius: 50px; -> Círculo con 50px de radio
12 | 
13 |     Si recibe dos valores dibujará una elipse en el vértice que especifiquemos
14 | 
15 |     border-top-right-radius: 50px 100px; -> Elipse con 50px en el radio X y 100px en el radio Y
16 | 
17 |     Si utilizamos el border-radius como shorthand hay diferencias entre si queremos dar un valor a cada lado (círculo) o dos (elipse)
18 | 
19 |     Con un solo valor:
20 |         border-radius: 50px; -> Círculo de 50px a cada vértice
21 |         border-radius: 50px 100px; -> Círculo de 50px en el vértice superior izquierdo y en el inferior derecho y de 100px en el superior derecho y el inferior izquierdo
22 |         border-radius: 50px 100px 200px; -> Círculo de 50px en el vértice superior izquierdo, de 100px en el superior derecho y el inferior izquierdo y de 200px en el inferior derecho.
23 |         border-radius: 50px 100px 200px 300px; -> Círculo de 50px en el vértice superior izquierdo, de 100px en el superior derecho, de 200px en el inferior derecho y de 300px en el inferior izquierdo.
24 | 
25 |     Si le damos 2 valores separados por una barra dibujará una elipse en cada vértice con los radios que le especifiquemos.
26 |     border radius: 50px / 100px; -> Elipse con 50px en el radio X y 100px en el radio Y
27 | 
28 |     Con dos valores:
29 |         Al tener dos radios debemos agrupar los radios y separarlos por una barra.
30 |         border-radius: 25px / 50px; -> Elipse de 25px en Y y 50px en X a cada vértice.
31 | 
32 |         border-radius: 25px 50px / 50px 100px; -> Elipse de 25px en Y y 50px en X a los vértices superior izquierdo e inferior derecho y una elipse de 50px en Y y 100px en X en los vértices superior derecho e inferior izquierdo.
33 | 
34 |         border-radius: 25px 50px 75px / 50px 100px 150px; ->
35 |         Elipse de 25px en Y y 50px en X al vértice superior izquierdo, una elipse de 50px en Y y 100px en X en los vértices superior derecho e inferior izquierdo y una elipse de 75px en Y y de 150px en X al vértice inferior derecho.
36 | 
37 |         border-radius: 25px 50px 75px 100px / 50px 100px 150px 200px; -> Elipse de 25px en Y y 50px en X al vértice superior izquierdo, una elipse de 50px en Y y 100px en X en el vértice superior derecho, una elipse de 75px en Y y de 150px en X al vértice inferior derecho y una elipse de 100px en X y 200px en Y en el vértice inferior izquierdo.
38 | */
39 | 
40 | *{
41 |     box-sizing: border-box;
42 | }
43 | 
44 | body{
45 |     background-color: #333;
46 |     color: #fff;
47 |     margin: 0;
48 | }
49 | 
50 | .box{
51 |     margin-left: auto;
52 |     margin-right: auto;
53 |     margin-top: 100px;
54 |     background-color: lightcyan;
55 |     width: 300px;
56 |     height: 300px;
57 |     /* border-radius: 50px; */
58 |     /* border-top-left-radius: 50px;
59 |     border-top-right-radius: 100px;
60 |     border-bottom-right-radius: 150px;
61 |     border-bottom-left-radius: 200px;
62 |     border-radius: 50px 100px 150px 200px; */
63 |     /* border-top-left-radius: 50px 100px;
64 |     border-radius: 50px 100px 150px 200px / 100px 150px 200px 250px; */
65 | }


--------------------------------------------------------------------------------
/11 - Más propiedades de las cajas/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Border Radius</title>
 8 |     <link rel="stylesheet" href="css/styles-dist.css" />
 9 |   </head>
10 |   <body>
11 |     <div class="box"></div>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/11 - Más propiedades de las cajas/prepros.config:
--------------------------------------------------------------------------------
  1 | {
  2 |   "version": "7",
  3 |   "about": "This is a Prepros (https://prepros.io) configuration file. You can commit this file to a git repo to backup and sync project configurations.",
  4 |   "config": {
  5 |     "proxy": {
  6 |       "enable": false,
  7 |       "target": "",
  8 |       "useLocalAssets": false
  9 |     },
 10 |     "reload": {
 11 |       "enable": true,
 12 |       "delay": 0,
 13 |       "animate": true,
 14 |       "afterUpload": false
 15 |     },
 16 |     "sync": {
 17 |       "enable": false,
 18 |       "mouse": true,
 19 |       "keyboard": true,
 20 |       "form": true,
 21 |       "scroll": true
 22 |     },
 23 |     "watcher": {
 24 |       "enable": true,
 25 |       "maxFiles": 2000,
 26 |       "usePolling": false,
 27 |       "pollingInterval": 500,
 28 |       "extensions": [
 29 |         ".html",
 30 |         ".htm",
 31 |         ".php"
 32 |       ],
 33 |       "ignore": {
 34 |         "patterns": [
 35 |           ".*",
 36 |           "wp-admin",
 37 |           "wp-includes",
 38 |           "node_modules",
 39 |           "Prepros Export",
 40 |           "bower_components"
 41 |         ],
 42 |         "exceptions": []
 43 |       }
 44 |     },
 45 |     "exporter": {
 46 |       "ignore": {
 47 |         "patterns": [
 48 |           ".*",
 49 |           "desktop.ini",
 50 |           "prepros.cfg",
 51 |           "node_modules",
 52 |           "Prepros Export",
 53 |           "prepros.config",
 54 |           "prepros-6.config",
 55 |           "*-original.jpg",
 56 |           "*-original.jpeg",
 57 |           "*-original.png",
 58 |           "*-original.svg",
 59 |           "*.scss",
 60 |           "*.sass",
 61 |           "*.less",
 62 |           "*.pug",
 63 |           "*.jade",
 64 |           "*.styl",
 65 |           "*.haml",
 66 |           "*.slim",
 67 |           "*.coffee",
 68 |           "*.kit",
 69 |           "*.turf",
 70 |           "*.ts"
 71 |         ],
 72 |         "exceptions": []
 73 |       }
 74 |     },
 75 |     "uploader": {
 76 |       "remotePath": "",
 77 |       "timeout": 20000,
 78 |       "autoUpload": false,
 79 |       "reuseConnection": true,
 80 |       "connectionType": "ftp",
 81 |       "history": []
 82 |     },
 83 |     "packages": {
 84 |       "createPackageLock": true
 85 |     },
 86 |     "images": {
 87 |       "preserveOriginal": true
 88 |     },
 89 |     "tasks": {
 90 |       "autoprefixer": {
 91 |         "cascade": true,
 92 |         "add": true,
 93 |         "remove": true,
 94 |         "supports": true,
 95 |         "flexbox": true,
 96 |         "grid": "autoplace",
 97 |         "browsers": [
 98 |           "defaults"
 99 |         ],
100 |         "sourceMap": false
101 |       },
102 |       "babel": {
103 |         "sourceMap": false,
104 |         "presets": {
105 |           "@babel/preset-env": {
106 |             "enable": true,
107 |             "options": {
108 |               "targets": [
109 |                 "> 2%",
110 |                 "not dead"
111 |               ],
112 |               "preserveImports": false,
113 |               "polyfills": false
114 |             }
115 |           },
116 |           "@babel/preset-react": true,
117 |           "@babel/preset-flow": false
118 |         },
119 |         "plugins": {
120 |           "@babel/plugin-proposal-class-static-block": false,
121 |           "@babel/plugin-proposal-class-properties": false,
122 |           "@babel/plugin-proposal-decorators": {
123 |             "enable": false,
124 |             "options": {
125 |               "decoratorsBeforeExport": true
126 |             }
127 |           },
128 |           "@babel/plugin-proposal-export-namespace-from": false,
129 |           "@babel/plugin-proposal-function-sent": false,
130 |           "@babel/plugin-proposal-logical-assignment-operators": false,
131 |           "@babel/plugin-proposal-nullish-coalescing-operator": false,
132 |           "@babel/plugin-proposal-numeric-separator": false,
133 |           "@babel/plugin-proposal-optional-chaining": false,
134 |           "@babel/plugin-proposal-private-methods": false,
135 |           "@babel/plugin-proposal-throw-expressions": false
136 |         },
137 |         "customPresets": [],
138 |         "customPlugins": []
139 |       },
140 |       "bundle-js": {
141 |         "sourceMap": false,
142 |         "exclude": [
143 |           "node_modules",
144 |           "bower_components"
145 |         ],
146 |         "devMode": true,
147 |         "globals": [],
148 |         "externals": [],
149 |         "babel": {
150 |           "enable": true,
151 |           "options": {
152 |             "sourceMap": false,
153 |             "presets": {
154 |               "@babel/preset-env": {
155 |                 "enable": true,
156 |                 "options": {
157 |                   "targets": [
158 |                     "> 2%",
159 |                     "not dead"
160 |                   ],
161 |                   "preserveImports": false,
162 |                   "polyfills": false
163 |                 }
164 |               },
165 |               "@babel/preset-react": true,
166 |               "@babel/preset-flow": false
167 |             },
168 |             "plugins": {
169 |               "@babel/plugin-proposal-class-static-block": false,
170 |               "@babel/plugin-proposal-class-properties": false,
171 |               "@babel/plugin-proposal-decorators": {
172 |                 "enable": false,
173 |                 "options": {
174 |                   "decoratorsBeforeExport": true
175 |                 }
176 |               },
177 |               "@babel/plugin-proposal-export-namespace-from": false,
178 |               "@babel/plugin-proposal-function-sent": false,
179 |               "@babel/plugin-proposal-logical-assignment-operators": false,
180 |               "@babel/plugin-proposal-nullish-coalescing-operator": false,
181 |               "@babel/plugin-proposal-numeric-separator": false,
182 |               "@babel/plugin-proposal-optional-chaining": false,
183 |               "@babel/plugin-proposal-private-methods": false,
184 |               "@babel/plugin-proposal-throw-expressions": false
185 |             },
186 |             "customPresets": [],
187 |             "customPlugins": []
188 |           }
189 |         },
190 |         "css": {
191 |           "enable": true
192 |         },
193 |         "fonts": {
194 |           "enable": true
195 |         }
196 |       },
197 |       "coffeescript": {
198 |         "header": false,
199 |         "bare": false,
200 |         "sourceMap": false
201 |       },
202 |       "command": {
203 |         "command": "",
204 |         "rootDir": ""
205 |       },
206 |       "concat-js": {
207 |         "sourceMap": false,
208 |         "rootDir": ""
209 |       },
210 |       "copy": {
211 |         "sourceMap": false
212 |       },
213 |       "dart-sass": {
214 |         "indentType": "space",
215 |         "indentWidth": 2,
216 |         "linefeed": "lf",
217 |         "sourceMap": false
218 |       },
219 |       "haml": {
220 |         "doubleQuoteAttributes": true
221 |       },
222 |       "jpg": {
223 |         "quality": 90
224 |       },
225 |       "less": {
226 |         "javascriptEnabled": false,
227 |         "strictImports": false,
228 |         "insecure": false,
229 |         "math": "always",
230 |         "strictUnits": false,
231 |         "dumpLineNumbers": false,
232 |         "sourceMap": false
233 |       },
234 |       "markdown": {
235 |         "githubFlavored": true,
236 |         "wrapWithHtml": false
237 |       },
238 |       "minify-css": {
239 |         "sourceMap": false
240 |       },
241 |       "minify-html": {
242 |         "caseSensitive": false,
243 |         "collapseBooleanAttributes": true,
244 |         "collapseInlineTagWhitespace": false,
245 |         "collapseWhitespace": true,
246 |         "conservativeCollapse": false,
247 |         "decodeEntities": false,
248 |         "html5": true,
249 |         "includeAutoGeneratedTags": true,
250 |         "keepClosingSlash": false,
251 |         "minifyCSS": true,
252 |         "minifyJS": true,
253 |         "preserveLineBreaks": false,
254 |         "preventAttributesEscaping": false,
255 |         "processConditionalComments": false,
256 |         "removeAttributeQuotes": false,
257 |         "removeComments": true,
258 |         "removeEmptyAttributes": false,
259 |         "removeEmptyElement": false,
260 |         "removeOptionalTags": false,
261 |         "removeRedundantAttributes": false,
262 |         "removeScriptTypeAttributes": false,
263 |         "removeStyleLinkTypeAttributes": false,
264 |         "removeTagWhitespace": false,
265 |         "sortAttributes": false,
266 |         "sortClassName": false,
267 |         "useShortDoctype": true
268 |       },
269 |       "minify-js": {
270 |         "parse": {
271 |           "bare_returns": false
272 |         },
273 |         "compress": {
274 |           "arrows": true,
275 |           "arguments": false,
276 |           "booleans": true,
277 |           "booleans_as_integers": false,
278 |           "collapse_vars": true,
279 |           "comparisons": true,
280 |           "computed_props": true,
281 |           "conditionals": true,
282 |           "dead_code": true,
283 |           "directives": true,
284 |           "drop_console": false,
285 |           "drop_debugger": true,
286 |           "evaluate": true,
287 |           "expression": false,
288 |           "global_defs": [],
289 |           "hoist_funs": false,
290 |           "hoist_props": true,
291 |           "hoist_vars": false,
292 |           "if_return": true,
293 |           "inline": 3,
294 |           "join_vars": true,
295 |           "keep_fargs": true,
296 |           "keep_infinity": false,
297 |           "loops": true,
298 |           "negate_iife": true,
299 |           "properties": true,
300 |           "pure_funcs": [],
301 |           "pure_getters": false,
302 |           "reduce_vars": true,
303 |           "sequences": true,
304 |           "side_effects": true,
305 |           "switches": true,
306 |           "top_retain": [],
307 |           "typeofs": true,
308 |           "unsafe": false,
309 |           "unsafe_arrows": false,
310 |           "unsafe_comps": false,
311 |           "unsafe_Function": false,
312 |           "unsafe_math": false,
313 |           "unsafe_proto": false,
314 |           "unsafe_regexp": false,
315 |           "unsafe_undefined": false,
316 |           "unused": true
317 |         },
318 |         "mangle": {
319 |           "eval": false,
320 |           "reserved": []
321 |         },
322 |         "output": {
323 |           "ascii_only": false,
324 |           "braces": false,
325 |           "comments": "none",
326 |           "inline_script": true,
327 |           "keep_numbers": false,
328 |           "keep_quoted_props": false,
329 |           "preamble": null,
330 |           "quote_keys": false,
331 |           "quote_style": 0,
332 |           "semicolons": true,
333 |           "shebang": true,
334 |           "webkit": false,
335 |           "wrap_iife": false,
336 |           "wrap_func_args": true
337 |         },
338 |         "sourceMap": false,
339 |         "toplevel": false,
340 |         "ie8": false,
341 |         "keep_classnames": false,
342 |         "keep_fnames": false,
343 |         "safari10": false
344 |       },
345 |       "node-sass": {
346 |         "indentType": "space",
347 |         "indentWidth": 2,
348 |         "linefeed": "lf",
349 |         "outputStyle": "expanded",
350 |         "precision": 10,
351 |         "sourceMap": false,
352 |         "sourceComments": false
353 |       },
354 |       "png": {
355 |         "quality": 90
356 |       },
357 |       "postcss-import": {
358 |         "ignoreKeywords": [],
359 |         "sourceMap": false
360 |       },
361 |       "postcss-preset-env": {
362 |         "stage": 2,
363 |         "browsers": [
364 |           "> 2%",
365 |           "not dead"
366 |         ],
367 |         "sourceMap": false
368 |       },
369 |       "pug": {
370 |         "pretty": true
371 |       },
372 |       "slim": {
373 |         "indent": "space",
374 |         "indentSize": 2,
375 |         "pretty": true
376 |       },
377 |       "stylus": {
378 |         "useNib": true,
379 |         "sourceMap": false,
380 |         "linenos": false
381 |       },
382 |       "svg": {
383 |         "cleanupAttrs": true,
384 |         "removeDoctype": true,
385 |         "removeXMLProcInst": true,
386 |         "removeComments": true,
387 |         "removeMetadata": true,
388 |         "removeTitle": true,
389 |         "removeDesc": true,
390 |         "removeUselessDefs": true,
391 |         "removeEditorsNSData": true,
392 |         "removeEmptyAttrs": true,
393 |         "removeHiddenElems": true,
394 |         "removeEmptyText": true,
395 |         "removeEmptyContainers": true,
396 |         "removeViewBox": false,
397 |         "cleanupEnableBackground": true,
398 |         "convertStyleToAttrs": true,
399 |         "convertColors": true,
400 |         "convertPathData": true,
401 |         "convertTransform": true,
402 |         "removeUnknownsAndDefaults": true,
403 |         "removeNonInheritableGroupAttrs": true,
404 |         "removeUselessStrokeAndFill": true,
405 |         "removeUnusedNS": true,
406 |         "cleanupIDs": true,
407 |         "cleanupNumericValues": true,
408 |         "moveElemsAttrsToGroup": true,
409 |         "moveGroupAttrsToElems": true,
410 |         "collapseGroups": true,
411 |         "removeRasterImages": false,
412 |         "mergePaths": true,
413 |         "convertShapeToPath": true,
414 |         "sortAttrs": true,
415 |         "removeDimensions": true
416 |       },
417 |       "turf": {
418 |         "rootDir": ""
419 |       },
420 |       "typescript": {
421 |         "allowJs": false,
422 |         "allowSyntheticDefaultImports": true,
423 |         "allowUmdGlobalAccess": false,
424 |         "allowUnreachableCode": false,
425 |         "allowUnusedLabels": false,
426 |         "alwaysStrict": false,
427 |         "charset": "utf8",
428 |         "checkJs": false,
429 |         "declaration": false,
430 |         "disableSizeLimit": false,
431 |         "downlevelIteration": false,
432 |         "emitBOM": false,
433 |         "emitDecoratorMetadata": false,
434 |         "experimentalDecorators": false,
435 |         "forceConsistentCasingInFileNames": false,
436 |         "importHelpers": false,
437 |         "jsx": "React",
438 |         "keyofStringsOnly": false,
439 |         "lib": [],
440 |         "maxNodeModuleJsDepth": 0,
441 |         "module": "ES2015",
442 |         "moduleResolution": "NodeJs",
443 |         "newLine": "LineFeed",
444 |         "noFallthroughCasesInSwitch": false,
445 |         "noImplicitAny": false,
446 |         "noImplicitReturns": false,
447 |         "noImplicitThis": false,
448 |         "noStrictGenericChecks": false,
449 |         "noUnusedLocals": false,
450 |         "noUnusedParameters": false,
451 |         "noImplicitUseStrict": false,
452 |         "noLib": false,
453 |         "noResolve": false,
454 |         "preserveConstEnums": false,
455 |         "jsxFactory": "React.createElement",
456 |         "removeComments": false,
457 |         "skipLibCheck": false,
458 |         "sourceMap": false,
459 |         "strict": false,
460 |         "strictFunctionTypes": false,
461 |         "strictBindCallApply": false,
462 |         "strictNullChecks": false,
463 |         "strictPropertyInitialization": false,
464 |         "suppressExcessPropertyErrors": false,
465 |         "suppressImplicitAnyIndexErrors": false,
466 |         "target": "ES3",
467 |         "resolveJsonModule": false,
468 |         "esModuleInterop": false,
469 |         "useDefineForClassFields": false
470 |       }
471 |     },
472 |     "fileTypes": {
473 |       "sass": {
474 |         "extensions": [
475 |           ".scss",
476 |           ".sass"
477 |         ],
478 |         "autoCompile": true,
479 |         "sourceMap": false,
480 |         "tasks": [
481 |           {
482 |             "task": "dart-sass",
483 |             "enable": true
484 |           },
485 |           {
486 |             "task": "autoprefixer",
487 |             "enable": true
488 |           },
489 |           {
490 |             "task": "minify-css",
491 |             "enable": false
492 |           }
493 |         ],
494 |         "output": {
495 |           "extension": ".css",
496 |           "type": "REPLACE_SEGMENTS",
497 |           "segments": [
498 |             {
499 |               "segment": "scss",
500 |               "replaceWith": "css"
501 |             },
502 |             {
503 |               "segment": "sass",
504 |               "replaceWith": "css"
505 |             }
506 |           ]
507 |         }
508 |       },
509 |       "less": {
510 |         "extensions": [
511 |           ".less"
512 |         ],
513 |         "autoCompile": true,
514 |         "sourceMap": false,
515 |         "tasks": [
516 |           {
517 |             "task": "less",
518 |             "enable": true
519 |           },
520 |           {
521 |             "task": "autoprefixer",
522 |             "enable": true
523 |           },
524 |           {
525 |             "task": "minify-css",
526 |             "enable": false
527 |           }
528 |         ],
529 |         "output": {
530 |           "extension": ".css",
531 |           "type": "REPLACE_SEGMENTS",
532 |           "segments": [
533 |             {
534 |               "segment": "less",
535 |               "replaceWith": "css"
536 |             }
537 |           ]
538 |         }
539 |       },
540 |       "pug": {
541 |         "extensions": [
542 |           ".pug",
543 |           ".jade"
544 |         ],
545 |         "autoCompile": true,
546 |         "tasks": [
547 |           {
548 |             "task": "pug",
549 |             "enable": true
550 |           },
551 |           {
552 |             "task": "minify-html",
553 |             "enable": false
554 |           }
555 |         ],
556 |         "output": {
557 |           "extension": ".html",
558 |           "type": "REPLACE_SEGMENTS",
559 |           "segments": [
560 |             {
561 |               "segment": "pug",
562 |               "replaceWith": "html"
563 |             }
564 |           ]
565 |         }
566 |       },
567 |       "css": {
568 |         "extensions": [
569 |           ".css"
570 |         ],
571 |         "autoCompile": false,
572 |         "sourceMap": false,
573 |         "tasks": [
574 |           {
575 |             "task": "copy",
576 |             "enable": true
577 |           },
578 |           {
579 |             "task": "postcss-import",
580 |             "enable": false
581 |           },
582 |           {
583 |             "task": "postcss-preset-env",
584 |             "enable": false
585 |           },
586 |           {
587 |             "task": "autoprefixer",
588 |             "enable": true
589 |           },
590 |           {
591 |             "task": "minify-css",
592 |             "enable": true
593 |           }
594 |         ],
595 |         "output": {
596 |           "extension": ".css",
597 |           "type": "SOURCE_RELATIVE",
598 |           "relativePath": "",
599 |           "suffix": "-dist",
600 |           "alwaysSuffix": false
601 |         }
602 |       },
603 |       "javascript": {
604 |         "extensions": [
605 |           ".js",
606 |           ".jsx"
607 |         ],
608 |         "autoCompile": false,
609 |         "sourceMap": false,
610 |         "tasks": [
611 |           {
612 |             "task": "copy",
613 |             "enable": true
614 |           },
615 |           {
616 |             "task": "concat-js",
617 |             "enable": false
618 |           },
619 |           {
620 |             "task": "babel",
621 |             "enable": false
622 |           },
623 |           {
624 |             "task": "bundle-js",
625 |             "enable": false
626 |           },
627 |           {
628 |             "task": "minify-js",
629 |             "enable": true
630 |           }
631 |         ],
632 |         "output": {
633 |           "extension": ".js",
634 |           "type": "SOURCE_RELATIVE",
635 |           "relativePath": "",
636 |           "suffix": "-dist",
637 |           "alwaysSuffix": false
638 |         }
639 |       },
640 |       "stylus": {
641 |         "extensions": [
642 |           ".styl"
643 |         ],
644 |         "autoCompile": true,
645 |         "sourceMap": false,
646 |         "tasks": [
647 |           {
648 |             "task": "stylus",
649 |             "enable": true
650 |           },
651 |           {
652 |             "task": "autoprefixer",
653 |             "enable": true
654 |           },
655 |           {
656 |             "task": "minify-css",
657 |             "enable": false
658 |           }
659 |         ],
660 |         "output": {
661 |           "extension": ".css",
662 |           "type": "REPLACE_SEGMENTS",
663 |           "segments": [
664 |             {
665 |               "segment": "stylus",
666 |               "replaceWith": "css"
667 |             },
668 |             {
669 |               "segment": "styl",
670 |               "replaceWith": "css"
671 |             }
672 |           ]
673 |         }
674 |       },
675 |       "markdown": {
676 |         "extensions": [
677 |           ".md",
678 |           ".markdown",
679 |           ".mkd"
680 |         ],
681 |         "autoCompile": false,
682 |         "tasks": [
683 |           {
684 |             "task": "markdown",
685 |             "enable": true
686 |           },
687 |           {
688 |             "task": "minify-html",
689 |             "enable": false
690 |           }
691 |         ],
692 |         "output": {
693 |           "extension": ".html",
694 |           "type": "REPLACE_SEGMENTS",
695 |           "segments": [
696 |             {
697 |               "segment": "markdown",
698 |               "replaceWith": "html"
699 |             }
700 |           ]
701 |         }
702 |       },
703 |       "haml": {
704 |         "extensions": [
705 |           ".haml"
706 |         ],
707 |         "autoCompile": true,
708 |         "tasks": [
709 |           {
710 |             "task": "haml",
711 |             "enable": true
712 |           },
713 |           {
714 |             "task": "minify-html",
715 |             "enable": false
716 |           }
717 |         ],
718 |         "output": {
719 |           "extension": ".html",
720 |           "type": "REPLACE_SEGMENTS",
721 |           "segments": [
722 |             {
723 |               "segment": "haml",
724 |               "replaceWith": "html"
725 |             }
726 |           ]
727 |         }
728 |       },
729 |       "slim": {
730 |         "extensions": [
731 |           ".slim"
732 |         ],
733 |         "autoCompile": true,
734 |         "tasks": [
735 |           {
736 |             "task": "slim",
737 |             "enable": true
738 |           },
739 |           {
740 |             "task": "minify-html",
741 |             "enable": false
742 |           }
743 |         ],
744 |         "output": {
745 |           "extension": ".html",
746 |           "type": "REPLACE_SEGMENTS",
747 |           "segments": [
748 |             {
749 |               "segment": "slim",
750 |               "replaceWith": "html"
751 |             }
752 |           ]
753 |         }
754 |       },
755 |       "coffeescript": {
756 |         "extensions": [
757 |           ".coffee"
758 |         ],
759 |         "autoCompile": true,
760 |         "sourceMap": false,
761 |         "tasks": [
762 |           {
763 |             "task": "coffeescript",
764 |             "enable": true
765 |           },
766 |           {
767 |             "task": "babel",
768 |             "enable": false
769 |           },
770 |           {
771 |             "task": "bundle-js",
772 |             "enable": false
773 |           },
774 |           {
775 |             "task": "minify-js",
776 |             "enable": false
777 |           }
778 |         ],
779 |         "output": {
780 |           "extension": ".js",
781 |           "type": "REPLACE_SEGMENTS",
782 |           "segments": [
783 |             {
784 |               "segment": "coffee-script",
785 |               "replaceWith": "js"
786 |             },
787 |             {
788 |               "segment": "coffeescript",
789 |               "replaceWith": "js"
790 |             },
791 |             {
792 |               "segment": "coffee",
793 |               "replaceWith": "js"
794 |             }
795 |           ]
796 |         }
797 |       },
798 |       "turf": {
799 |         "extensions": [
800 |           ".turf",
801 |           ".kit"
802 |         ],
803 |         "autoCompile": true,
804 |         "tasks": [
805 |           {
806 |             "task": "turf",
807 |             "enable": true
808 |           },
809 |           {
810 |             "task": "minify-html",
811 |             "enable": false
812 |           }
813 |         ],
814 |         "output": {
815 |           "extension": ".html",
816 |           "type": "REPLACE_SEGMENTS",
817 |           "segments": [
818 |             {
819 |               "segment": "turf",
820 |               "replaceWith": "html"
821 |             }
822 |           ]
823 |         }
824 |       },
825 |       "typescript": {
826 |         "extensions": [
827 |           ".ts",
828 |           ".tsx"
829 |         ],
830 |         "autoCompile": true,
831 |         "sourceMap": false,
832 |         "tasks": [
833 |           {
834 |             "task": "typescript",
835 |             "enable": true
836 |           },
837 |           {
838 |             "task": "babel",
839 |             "enable": false
840 |           },
841 |           {
842 |             "task": "bundle-js",
843 |             "enable": false
844 |           },
845 |           {
846 |             "task": "minify-js",
847 |             "enable": false
848 |           }
849 |         ],
850 |         "output": {
851 |           "extension": ".js",
852 |           "type": "REPLACE_SEGMENTS",
853 |           "segments": [
854 |             {
855 |               "segment": "typescript",
856 |               "replaceWith": "js"
857 |             },
858 |             {
859 |               "segment": "ts",
860 |               "replaceWith": "js"
861 |             }
862 |           ]
863 |         }
864 |       },
865 |       "jpg": {
866 |         "extensions": [
867 |           ".jpg",
868 |           ".jpeg"
869 |         ],
870 |         "tasks": [
871 |           {
872 |             "task": "jpg",
873 |             "enable": true
874 |           }
875 |         ],
876 |         "output": {
877 |           "extension": ".jpg",
878 |           "type": "SOURCE_RELATIVE",
879 |           "relativePath": ""
880 |         }
881 |       },
882 |       "png": {
883 |         "extensions": [
884 |           ".png"
885 |         ],
886 |         "tasks": [
887 |           {
888 |             "task": "png",
889 |             "enable": true
890 |           }
891 |         ],
892 |         "output": {
893 |           "extension": ".png",
894 |           "type": "SOURCE_RELATIVE",
895 |           "relativePath": ""
896 |         }
897 |       },
898 |       "svg": {
899 |         "extensions": [
900 |           ".svg"
901 |         ],
902 |         "tasks": [
903 |           {
904 |             "task": "svg",
905 |             "enable": true
906 |           }
907 |         ],
908 |         "output": {
909 |           "extension": ".svg",
910 |           "type": "SOURCE_RELATIVE",
911 |           "relativePath": ""
912 |         }
913 |       }
914 |     },
915 |     "files": [
916 |       {
917 |         "file": "css/styles.css",
918 |         "config": {
919 |           "autoCompile": true
920 |         }
921 |       }
922 |     ]
923 |   }
924 | }
925 | 


--------------------------------------------------------------------------------
/12 - Overflow/css/styles-dist.css:
--------------------------------------------------------------------------------
1 | *{box-sizing:border-box}body{background-color:#333;color:#fff;margin:0}.box{margin-left:auto;margin-right:auto;margin-top:100px;background-color:lightcyan;width:300px;height:300px;color:#000;border-radius:50px;overflow:hidden}.box-1,.box-2{padding:15px;background-color:lightcoral}.text{margin:0}


--------------------------------------------------------------------------------
/12 - Overflow/css/styles.css:
--------------------------------------------------------------------------------
 1 | /* 
 2 |     Decimos que un contenido se desborda cuando la caja es más pequeña que el contenedor
 3 |     Overflow:
 4 |         Es la propiedad que controla qué debe hacer la caja cuando su contenido se desborda del contenedor.
 5 |         Es un shorthand que engloba overflow-x y overflow-y
 6 |         Tiene cuatro posibles valores:
 7 |             visible -> Es el valor por defecto.
 8 |             hidden -> El contenido que se desborde no se verá. Si aplicamos esta propiedad en un solo eje, el otro se pondrá automáticamente en el valor scroll.
 9 |             scroll -> Aparecerán barras de scroll en el eje asignado (x, y o ambos)
10 |             auto -> Aparecerán barras de scroll en el caso de que hicieran falta.
11 | */
12 | 
13 | *{
14 |     box-sizing: border-box;
15 | }
16 | 
17 | body{
18 |     background-color: #333;
19 |     color: #fff;
20 |     margin: 0;
21 | }
22 | 
23 | .box{
24 |     margin-left: auto;
25 |     margin-right: auto;
26 |     margin-top: 100px;
27 |     background-color: lightcyan;
28 |     width: 300px;
29 |     height: 300px;
30 |     color: #000;
31 |     border-radius: 50px;
32 |     overflow:hidden;
33 |     /* overflow:auto; */
34 | }
35 | 
36 | .box-1, 
37 | .box-2{
38 |     padding: 15px;
39 |     background-color: lightcoral;
40 | }
41 | 
42 | .text{
43 |     /* width: 350px; */
44 |     margin: 0;
45 | }


--------------------------------------------------------------------------------
/12 - Overflow/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Border Radius</title>
 8 |     <link rel="stylesheet" href="css/styles-dist.css" />
 9 |   </head>
10 |   <body>
11 |     <div class="box">
12 |       <div class="box-1">
13 |         <p class="text">
14 |           Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia alias doloribus minima
15 |           temporibus ipsum incidunt repudiandae ullam, perspiciatis recusandae reiciendis. Rem vero
16 |           dolore quos pariatur nisi nam distinctio magni consectetur.
17 |         </p>
18 |       </div>
19 |       <div class="box-2">
20 |         <p class="text">
21 |           Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, deleniti repellat!
22 |           Modi, et neque soluta quo minima, maiores mollitia ducimus, amet possimus accusamus cumque
23 |           animi earum nisi error magnam eum!
24 |         </p>
25 |       </div>
26 |       <!-- <p class="text">
27 |         Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam, autem harum incidunt
28 |         praesentium nulla similique laboriosam molestiae! Alias, consectetur explicabo fugit quis
29 |         facilis accusantium esse enim eius aliquam! Exercitationem, suscipit? Non fugit dolorem iste
30 |         cupiditate repellat hic at illo molestias ab amet quidem voluptatem perspiciatis id unde,
31 |         dolor, tempora praesentium blanditiis deleniti eaque voluptate officiis vitae pariatur
32 |         dignissimos? Veniam, iste! Consequatur libero ipsam nemo, labore vitae deleniti fugit
33 |         quibusdam ex quia quod repudiandae maxime cumque eius vel voluptatum odit sapiente corporis
34 |         ut delectus est provident optio. Consequuntur neque saepe suscipit? Modi voluptate mollitia
35 |         ut est velit possimus, maiores sed, dicta consequuntur harum fugiat vel, quis porro quae!
36 |         Ipsam perspiciatis, possimus quo maiores autem, ipsum id adipisci modi magnam debitis esse?
37 |       </p> -->
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/12 - Overflow/prepros.config:
--------------------------------------------------------------------------------
  1 | {
  2 |   "version": "7",
  3 |   "about": "This is a Prepros (https://prepros.io) configuration file. You can commit this file to a git repo to backup and sync project configurations.",
  4 |   "config": {
  5 |     "proxy": {
  6 |       "enable": false,
  7 |       "target": "",
  8 |       "useLocalAssets": false
  9 |     },
 10 |     "reload": {
 11 |       "enable": true,
 12 |       "delay": 0,
 13 |       "animate": true,
 14 |       "afterUpload": false
 15 |     },
 16 |     "sync": {
 17 |       "enable": false,
 18 |       "mouse": true,
 19 |       "keyboard": true,
 20 |       "form": true,
 21 |       "scroll": true
 22 |     },
 23 |     "watcher": {
 24 |       "enable": true,
 25 |       "maxFiles": 2000,
 26 |       "usePolling": false,
 27 |       "pollingInterval": 500,
 28 |       "extensions": [
 29 |         ".html",
 30 |         ".htm",
 31 |         ".php"
 32 |       ],
 33 |       "ignore": {
 34 |         "patterns": [
 35 |           ".*",
 36 |           "wp-admin",
 37 |           "wp-includes",
 38 |           "node_modules",
 39 |           "Prepros Export",
 40 |           "bower_components"
 41 |         ],
 42 |         "exceptions": []
 43 |       }
 44 |     },
 45 |     "exporter": {
 46 |       "ignore": {
 47 |         "patterns": [
 48 |           ".*",
 49 |           "desktop.ini",
 50 |           "prepros.cfg",
 51 |           "node_modules",
 52 |           "Prepros Export",
 53 |           "prepros.config",
 54 |           "prepros-6.config",
 55 |           "*-original.jpg",
 56 |           "*-original.jpeg",
 57 |           "*-original.png",
 58 |           "*-original.svg",
 59 |           "*.scss",
 60 |           "*.sass",
 61 |           "*.less",
 62 |           "*.pug",
 63 |           "*.jade",
 64 |           "*.styl",
 65 |           "*.haml",
 66 |           "*.slim",
 67 |           "*.coffee",
 68 |           "*.kit",
 69 |           "*.turf",
 70 |           "*.ts"
 71 |         ],
 72 |         "exceptions": []
 73 |       }
 74 |     },
 75 |     "uploader": {
 76 |       "remotePath": "",
 77 |       "timeout": 20000,
 78 |       "autoUpload": false,
 79 |       "reuseConnection": true,
 80 |       "connectionType": "ftp",
 81 |       "history": []
 82 |     },
 83 |     "packages": {
 84 |       "createPackageLock": true
 85 |     },
 86 |     "images": {
 87 |       "preserveOriginal": true
 88 |     },
 89 |     "tasks": {
 90 |       "autoprefixer": {
 91 |         "cascade": true,
 92 |         "add": true,
 93 |         "remove": true,
 94 |         "supports": true,
 95 |         "flexbox": true,
 96 |         "grid": "autoplace",
 97 |         "browsers": [
 98 |           "defaults"
 99 |         ],
100 |         "sourceMap": false
101 |       },
102 |       "babel": {
103 |         "sourceMap": false,
104 |         "presets": {
105 |           "@babel/preset-env": {
106 |             "enable": true,
107 |             "options": {
108 |               "targets": [
109 |                 "> 2%",
110 |                 "not dead"
111 |               ],
112 |               "preserveImports": false,
113 |               "polyfills": false
114 |             }
115 |           },
116 |           "@babel/preset-react": true,
117 |           "@babel/preset-flow": false
118 |         },
119 |         "plugins": {
120 |           "@babel/plugin-proposal-class-static-block": false,
121 |           "@babel/plugin-proposal-class-properties": false,
122 |           "@babel/plugin-proposal-decorators": {
123 |             "enable": false,
124 |             "options": {
125 |               "decoratorsBeforeExport": true
126 |             }
127 |           },
128 |           "@babel/plugin-proposal-export-namespace-from": false,
129 |           "@babel/plugin-proposal-function-sent": false,
130 |           "@babel/plugin-proposal-logical-assignment-operators": false,
131 |           "@babel/plugin-proposal-nullish-coalescing-operator": false,
132 |           "@babel/plugin-proposal-numeric-separator": false,
133 |           "@babel/plugin-proposal-optional-chaining": false,
134 |           "@babel/plugin-proposal-private-methods": false,
135 |           "@babel/plugin-proposal-throw-expressions": false
136 |         },
137 |         "customPresets": [],
138 |         "customPlugins": []
139 |       },
140 |       "bundle-js": {
141 |         "sourceMap": false,
142 |         "exclude": [
143 |           "node_modules",
144 |           "bower_components"
145 |         ],
146 |         "devMode": true,
147 |         "globals": [],
148 |         "externals": [],
149 |         "babel": {
150 |           "enable": true,
151 |           "options": {
152 |             "sourceMap": false,
153 |             "presets": {
154 |               "@babel/preset-env": {
155 |                 "enable": true,
156 |                 "options": {
157 |                   "targets": [
158 |                     "> 2%",
159 |                     "not dead"
160 |                   ],
161 |                   "preserveImports": false,
162 |                   "polyfills": false
163 |                 }
164 |               },
165 |               "@babel/preset-react": true,
166 |               "@babel/preset-flow": false
167 |             },
168 |             "plugins": {
169 |               "@babel/plugin-proposal-class-static-block": false,
170 |               "@babel/plugin-proposal-class-properties": false,
171 |               "@babel/plugin-proposal-decorators": {
172 |                 "enable": false,
173 |                 "options": {
174 |                   "decoratorsBeforeExport": true
175 |                 }
176 |               },
177 |               "@babel/plugin-proposal-export-namespace-from": false,
178 |               "@babel/plugin-proposal-function-sent": false,
179 |               "@babel/plugin-proposal-logical-assignment-operators": false,
180 |               "@babel/plugin-proposal-nullish-coalescing-operator": false,
181 |               "@babel/plugin-proposal-numeric-separator": false,
182 |               "@babel/plugin-proposal-optional-chaining": false,
183 |               "@babel/plugin-proposal-private-methods": false,
184 |               "@babel/plugin-proposal-throw-expressions": false
185 |             },
186 |             "customPresets": [],
187 |             "customPlugins": []
188 |           }
189 |         },
190 |         "css": {
191 |           "enable": true
192 |         },
193 |         "fonts": {
194 |           "enable": true
195 |         }
196 |       },
197 |       "coffeescript": {
198 |         "header": false,
199 |         "bare": false,
200 |         "sourceMap": false
201 |       },
202 |       "command": {
203 |         "command": "",
204 |         "rootDir": ""
205 |       },
206 |       "concat-js": {
207 |         "sourceMap": false,
208 |         "rootDir": ""
209 |       },
210 |       "copy": {
211 |         "sourceMap": false
212 |       },
213 |       "dart-sass": {
214 |         "indentType": "space",
215 |         "indentWidth": 2,
216 |         "linefeed": "lf",
217 |         "sourceMap": false
218 |       },
219 |       "haml": {
220 |         "doubleQuoteAttributes": true
221 |       },
222 |       "jpg": {
223 |         "quality": 90
224 |       },
225 |       "less": {
226 |         "javascriptEnabled": false,
227 |         "strictImports": false,
228 |         "insecure": false,
229 |         "math": "always",
230 |         "strictUnits": false,
231 |         "dumpLineNumbers": false,
232 |         "sourceMap": false
233 |       },
234 |       "markdown": {
235 |         "githubFlavored": true,
236 |         "wrapWithHtml": false
237 |       },
238 |       "minify-css": {
239 |         "sourceMap": false
240 |       },
241 |       "minify-html": {
242 |         "caseSensitive": false,
243 |         "collapseBooleanAttributes": true,
244 |         "collapseInlineTagWhitespace": false,
245 |         "collapseWhitespace": true,
246 |         "conservativeCollapse": false,
247 |         "decodeEntities": false,
248 |         "html5": true,
249 |         "includeAutoGeneratedTags": true,
250 |         "keepClosingSlash": false,
251 |         "minifyCSS": true,
252 |         "minifyJS": true,
253 |         "preserveLineBreaks": false,
254 |         "preventAttributesEscaping": false,
255 |         "processConditionalComments": false,
256 |         "removeAttributeQuotes": false,
257 |         "removeComments": true,
258 |         "removeEmptyAttributes": false,
259 |         "removeEmptyElement": false,
260 |         "removeOptionalTags": false,
261 |         "removeRedundantAttributes": false,
262 |         "removeScriptTypeAttributes": false,
263 |         "removeStyleLinkTypeAttributes": false,
264 |         "removeTagWhitespace": false,
265 |         "sortAttributes": false,
266 |         "sortClassName": false,
267 |         "useShortDoctype": true
268 |       },
269 |       "minify-js": {
270 |         "parse": {
271 |           "bare_returns": false
272 |         },
273 |         "compress": {
274 |           "arrows": true,
275 |           "arguments": false,
276 |           "booleans": true,
277 |           "booleans_as_integers": false,
278 |           "collapse_vars": true,
279 |           "comparisons": true,
280 |           "computed_props": true,
281 |           "conditionals": true,
282 |           "dead_code": true,
283 |           "directives": true,
284 |           "drop_console": false,
285 |           "drop_debugger": true,
286 |           "evaluate": true,
287 |           "expression": false,
288 |           "global_defs": [],
289 |           "hoist_funs": false,
290 |           "hoist_props": true,
291 |           "hoist_vars": false,
292 |           "if_return": true,
293 |           "inline": 3,
294 |           "join_vars": true,
295 |           "keep_fargs": true,
296 |           "keep_infinity": false,
297 |           "loops": true,
298 |           "negate_iife": true,
299 |           "properties": true,
300 |           "pure_funcs": [],
301 |           "pure_getters": false,
302 |           "reduce_vars": true,
303 |           "sequences": true,
304 |           "side_effects": true,
305 |           "switches": true,
306 |           "top_retain": [],
307 |           "typeofs": true,
308 |           "unsafe": false,
309 |           "unsafe_arrows": false,
310 |           "unsafe_comps": false,
311 |           "unsafe_Function": false,
312 |           "unsafe_math": false,
313 |           "unsafe_proto": false,
314 |           "unsafe_regexp": false,
315 |           "unsafe_undefined": false,
316 |           "unused": true
317 |         },
318 |         "mangle": {
319 |           "eval": false,
320 |           "reserved": []
321 |         },
322 |         "output": {
323 |           "ascii_only": false,
324 |           "braces": false,
325 |           "comments": "none",
326 |           "inline_script": true,
327 |           "keep_numbers": false,
328 |           "keep_quoted_props": false,
329 |           "preamble": null,
330 |           "quote_keys": false,
331 |           "quote_style": 0,
332 |           "semicolons": true,
333 |           "shebang": true,
334 |           "webkit": false,
335 |           "wrap_iife": false,
336 |           "wrap_func_args": true
337 |         },
338 |         "sourceMap": false,
339 |         "toplevel": false,
340 |         "ie8": false,
341 |         "keep_classnames": false,
342 |         "keep_fnames": false,
343 |         "safari10": false
344 |       },
345 |       "node-sass": {
346 |         "indentType": "space",
347 |         "indentWidth": 2,
348 |         "linefeed": "lf",
349 |         "outputStyle": "expanded",
350 |         "precision": 10,
351 |         "sourceMap": false,
352 |         "sourceComments": false
353 |       },
354 |       "png": {
355 |         "quality": 90
356 |       },
357 |       "postcss-import": {
358 |         "ignoreKeywords": [],
359 |         "sourceMap": false
360 |       },
361 |       "postcss-preset-env": {
362 |         "stage": 2,
363 |         "browsers": [
364 |           "> 2%",
365 |           "not dead"
366 |         ],
367 |         "sourceMap": false
368 |       },
369 |       "pug": {
370 |         "pretty": true
371 |       },
372 |       "slim": {
373 |         "indent": "space",
374 |         "indentSize": 2,
375 |         "pretty": true
376 |       },
377 |       "stylus": {
378 |         "useNib": true,
379 |         "sourceMap": false,
380 |         "linenos": false
381 |       },
382 |       "svg": {
383 |         "cleanupAttrs": true,
384 |         "removeDoctype": true,
385 |         "removeXMLProcInst": true,
386 |         "removeComments": true,
387 |         "removeMetadata": true,
388 |         "removeTitle": true,
389 |         "removeDesc": true,
390 |         "removeUselessDefs": true,
391 |         "removeEditorsNSData": true,
392 |         "removeEmptyAttrs": true,
393 |         "removeHiddenElems": true,
394 |         "removeEmptyText": true,
395 |         "removeEmptyContainers": true,
396 |         "removeViewBox": false,
397 |         "cleanupEnableBackground": true,
398 |         "convertStyleToAttrs": true,
399 |         "convertColors": true,
400 |         "convertPathData": true,
401 |         "convertTransform": true,
402 |         "removeUnknownsAndDefaults": true,
403 |         "removeNonInheritableGroupAttrs": true,
404 |         "removeUselessStrokeAndFill": true,
405 |         "removeUnusedNS": true,
406 |         "cleanupIDs": true,
407 |         "cleanupNumericValues": true,
408 |         "moveElemsAttrsToGroup": true,
409 |         "moveGroupAttrsToElems": true,
410 |         "collapseGroups": true,
411 |         "removeRasterImages": false,
412 |         "mergePaths": true,
413 |         "convertShapeToPath": true,
414 |         "sortAttrs": true,
415 |         "removeDimensions": true
416 |       },
417 |       "turf": {
418 |         "rootDir": ""
419 |       },
420 |       "typescript": {
421 |         "allowJs": false,
422 |         "allowSyntheticDefaultImports": true,
423 |         "allowUmdGlobalAccess": false,
424 |         "allowUnreachableCode": false,
425 |         "allowUnusedLabels": false,
426 |         "alwaysStrict": false,
427 |         "charset": "utf8",
428 |         "checkJs": false,
429 |         "declaration": false,
430 |         "disableSizeLimit": false,
431 |         "downlevelIteration": false,
432 |         "emitBOM": false,
433 |         "emitDecoratorMetadata": false,
434 |         "experimentalDecorators": false,
435 |         "forceConsistentCasingInFileNames": false,
436 |         "importHelpers": false,
437 |         "jsx": "React",
438 |         "keyofStringsOnly": false,
439 |         "lib": [],
440 |         "maxNodeModuleJsDepth": 0,
441 |         "module": "ES2015",
442 |         "moduleResolution": "NodeJs",
443 |         "newLine": "LineFeed",
444 |         "noFallthroughCasesInSwitch": false,
445 |         "noImplicitAny": false,
446 |         "noImplicitReturns": false,
447 |         "noImplicitThis": false,
448 |         "noStrictGenericChecks": false,
449 |         "noUnusedLocals": false,
450 |         "noUnusedParameters": false,
451 |         "noImplicitUseStrict": false,
452 |         "noLib": false,
453 |         "noResolve": false,
454 |         "preserveConstEnums": false,
455 |         "jsxFactory": "React.createElement",
456 |         "removeComments": false,
457 |         "skipLibCheck": false,
458 |         "sourceMap": false,
459 |         "strict": false,
460 |         "strictFunctionTypes": false,
461 |         "strictBindCallApply": false,
462 |         "strictNullChecks": false,
463 |         "strictPropertyInitialization": false,
464 |         "suppressExcessPropertyErrors": false,
465 |         "suppressImplicitAnyIndexErrors": false,
466 |         "target": "ES3",
467 |         "resolveJsonModule": false,
468 |         "esModuleInterop": false,
469 |         "useDefineForClassFields": false
470 |       }
471 |     },
472 |     "fileTypes": {
473 |       "sass": {
474 |         "extensions": [
475 |           ".scss",
476 |           ".sass"
477 |         ],
478 |         "autoCompile": true,
479 |         "sourceMap": false,
480 |         "tasks": [
481 |           {
482 |             "task": "dart-sass",
483 |             "enable": true
484 |           },
485 |           {
486 |             "task": "autoprefixer",
487 |             "enable": true
488 |           },
489 |           {
490 |             "task": "minify-css",
491 |             "enable": false
492 |           }
493 |         ],
494 |         "output": {
495 |           "extension": ".css",
496 |           "type": "REPLACE_SEGMENTS",
497 |           "segments": [
498 |             {
499 |               "segment": "scss",
500 |               "replaceWith": "css"
501 |             },
502 |             {
503 |               "segment": "sass",
504 |               "replaceWith": "css"
505 |             }
506 |           ]
507 |         }
508 |       },
509 |       "less": {
510 |         "extensions": [
511 |           ".less"
512 |         ],
513 |         "autoCompile": true,
514 |         "sourceMap": false,
515 |         "tasks": [
516 |           {
517 |             "task": "less",
518 |             "enable": true
519 |           },
520 |           {
521 |             "task": "autoprefixer",
522 |             "enable": true
523 |           },
524 |           {
525 |             "task": "minify-css",
526 |             "enable": false
527 |           }
528 |         ],
529 |         "output": {
530 |           "extension": ".css",
531 |           "type": "REPLACE_SEGMENTS",
532 |           "segments": [
533 |             {
534 |               "segment": "less",
535 |               "replaceWith": "css"
536 |             }
537 |           ]
538 |         }
539 |       },
540 |       "pug": {
541 |         "extensions": [
542 |           ".pug",
543 |           ".jade"
544 |         ],
545 |         "autoCompile": true,
546 |         "tasks": [
547 |           {
548 |             "task": "pug",
549 |             "enable": true
550 |           },
551 |           {
552 |             "task": "minify-html",
553 |             "enable": false
554 |           }
555 |         ],
556 |         "output": {
557 |           "extension": ".html",
558 |           "type": "REPLACE_SEGMENTS",
559 |           "segments": [
560 |             {
561 |               "segment": "pug",
562 |               "replaceWith": "html"
563 |             }
564 |           ]
565 |         }
566 |       },
567 |       "css": {
568 |         "extensions": [
569 |           ".css"
570 |         ],
571 |         "autoCompile": false,
572 |         "sourceMap": false,
573 |         "tasks": [
574 |           {
575 |             "task": "copy",
576 |             "enable": true
577 |           },
578 |           {
579 |             "task": "postcss-import",
580 |             "enable": false
581 |           },
582 |           {
583 |             "task": "postcss-preset-env",
584 |             "enable": false
585 |           },
586 |           {
587 |             "task": "autoprefixer",
588 |             "enable": true
589 |           },
590 |           {
591 |             "task": "minify-css",
592 |             "enable": true
593 |           }
594 |         ],
595 |         "output": {
596 |           "extension": ".css",
597 |           "type": "SOURCE_RELATIVE",
598 |           "relativePath": "",
599 |           "suffix": "-dist",
600 |           "alwaysSuffix": false
601 |         }
602 |       },
603 |       "javascript": {
604 |         "extensions": [
605 |           ".js",
606 |           ".jsx"
607 |         ],
608 |         "autoCompile": false,
609 |         "sourceMap": false,
610 |         "tasks": [
611 |           {
612 |             "task": "copy",
613 |             "enable": true
614 |           },
615 |           {
616 |             "task": "concat-js",
617 |             "enable": false
618 |           },
619 |           {
620 |             "task": "babel",
621 |             "enable": false
622 |           },
623 |           {
624 |             "task": "bundle-js",
625 |             "enable": false
626 |           },
627 |           {
628 |             "task": "minify-js",
629 |             "enable": true
630 |           }
631 |         ],
632 |         "output": {
633 |           "extension": ".js",
634 |           "type": "SOURCE_RELATIVE",
635 |           "relativePath": "",
636 |           "suffix": "-dist",
637 |           "alwaysSuffix": false
638 |         }
639 |       },
640 |       "stylus": {
641 |         "extensions": [
642 |           ".styl"
643 |         ],
644 |         "autoCompile": true,
645 |         "sourceMap": false,
646 |         "tasks": [
647 |           {
648 |             "task": "stylus",
649 |             "enable": true
650 |           },
651 |           {
652 |             "task": "autoprefixer",
653 |             "enable": true
654 |           },
655 |           {
656 |             "task": "minify-css",
657 |             "enable": false
658 |           }
659 |         ],
660 |         "output": {
661 |           "extension": ".css",
662 |           "type": "REPLACE_SEGMENTS",
663 |           "segments": [
664 |             {
665 |               "segment": "stylus",
666 |               "replaceWith": "css"
667 |             },
668 |             {
669 |               "segment": "styl",
670 |               "replaceWith": "css"
671 |             }
672 |           ]
673 |         }
674 |       },
675 |       "markdown": {
676 |         "extensions": [
677 |           ".md",
678 |           ".markdown",
679 |           ".mkd"
680 |         ],
681 |         "autoCompile": false,
682 |         "tasks": [
683 |           {
684 |             "task": "markdown",
685 |             "enable": true
686 |           },
687 |           {
688 |             "task": "minify-html",
689 |             "enable": false
690 |           }
691 |         ],
692 |         "output": {
693 |           "extension": ".html",
694 |           "type": "REPLACE_SEGMENTS",
695 |           "segments": [
696 |             {
697 |               "segment": "markdown",
698 |               "replaceWith": "html"
699 |             }
700 |           ]
701 |         }
702 |       },
703 |       "haml": {
704 |         "extensions": [
705 |           ".haml"
706 |         ],
707 |         "autoCompile": true,
708 |         "tasks": [
709 |           {
710 |             "task": "haml",
711 |             "enable": true
712 |           },
713 |           {
714 |             "task": "minify-html",
715 |             "enable": false
716 |           }
717 |         ],
718 |         "output": {
719 |           "extension": ".html",
720 |           "type": "REPLACE_SEGMENTS",
721 |           "segments": [
722 |             {
723 |               "segment": "haml",
724 |               "replaceWith": "html"
725 |             }
726 |           ]
727 |         }
728 |       },
729 |       "slim": {
730 |         "extensions": [
731 |           ".slim"
732 |         ],
733 |         "autoCompile": true,
734 |         "tasks": [
735 |           {
736 |             "task": "slim",
737 |             "enable": true
738 |           },
739 |           {
740 |             "task": "minify-html",
741 |             "enable": false
742 |           }
743 |         ],
744 |         "output": {
745 |           "extension": ".html",
746 |           "type": "REPLACE_SEGMENTS",
747 |           "segments": [
748 |             {
749 |               "segment": "slim",
750 |               "replaceWith": "html"
751 |             }
752 |           ]
753 |         }
754 |       },
755 |       "coffeescript": {
756 |         "extensions": [
757 |           ".coffee"
758 |         ],
759 |         "autoCompile": true,
760 |         "sourceMap": false,
761 |         "tasks": [
762 |           {
763 |             "task": "coffeescript",
764 |             "enable": true
765 |           },
766 |           {
767 |             "task": "babel",
768 |             "enable": false
769 |           },
770 |           {
771 |             "task": "bundle-js",
772 |             "enable": false
773 |           },
774 |           {
775 |             "task": "minify-js",
776 |             "enable": false
777 |           }
778 |         ],
779 |         "output": {
780 |           "extension": ".js",
781 |           "type": "REPLACE_SEGMENTS",
782 |           "segments": [
783 |             {
784 |               "segment": "coffee-script",
785 |               "replaceWith": "js"
786 |             },
787 |             {
788 |               "segment": "coffeescript",
789 |               "replaceWith": "js"
790 |             },
791 |             {
792 |               "segment": "coffee",
793 |               "replaceWith": "js"
794 |             }
795 |           ]
796 |         }
797 |       },
798 |       "turf": {
799 |         "extensions": [
800 |           ".turf",
801 |           ".kit"
802 |         ],
803 |         "autoCompile": true,
804 |         "tasks": [
805 |           {
806 |             "task": "turf",
807 |             "enable": true
808 |           },
809 |           {
810 |             "task": "minify-html",
811 |             "enable": false
812 |           }
813 |         ],
814 |         "output": {
815 |           "extension": ".html",
816 |           "type": "REPLACE_SEGMENTS",
817 |           "segments": [
818 |             {
819 |               "segment": "turf",
820 |               "replaceWith": "html"
821 |             }
822 |           ]
823 |         }
824 |       },
825 |       "typescript": {
826 |         "extensions": [
827 |           ".ts",
828 |           ".tsx"
829 |         ],
830 |         "autoCompile": true,
831 |         "sourceMap": false,
832 |         "tasks": [
833 |           {
834 |             "task": "typescript",
835 |             "enable": true
836 |           },
837 |           {
838 |             "task": "babel",
839 |             "enable": false
840 |           },
841 |           {
842 |             "task": "bundle-js",
843 |             "enable": false
844 |           },
845 |           {
846 |             "task": "minify-js",
847 |             "enable": false
848 |           }
849 |         ],
850 |         "output": {
851 |           "extension": ".js",
852 |           "type": "REPLACE_SEGMENTS",
853 |           "segments": [
854 |             {
855 |               "segment": "typescript",
856 |               "replaceWith": "js"
857 |             },
858 |             {
859 |               "segment": "ts",
860 |               "replaceWith": "js"
861 |             }
862 |           ]
863 |         }
864 |       },
865 |       "jpg": {
866 |         "extensions": [
867 |           ".jpg",
868 |           ".jpeg"
869 |         ],
870 |         "tasks": [
871 |           {
872 |             "task": "jpg",
873 |             "enable": true
874 |           }
875 |         ],
876 |         "output": {
877 |           "extension": ".jpg",
878 |           "type": "SOURCE_RELATIVE",
879 |           "relativePath": ""
880 |         }
881 |       },
882 |       "png": {
883 |         "extensions": [
884 |           ".png"
885 |         ],
886 |         "tasks": [
887 |           {
888 |             "task": "png",
889 |             "enable": true
890 |           }
891 |         ],
892 |         "output": {
893 |           "extension": ".png",
894 |           "type": "SOURCE_RELATIVE",
895 |           "relativePath": ""
896 |         }
897 |       },
898 |       "svg": {
899 |         "extensions": [
900 |           ".svg"
901 |         ],
902 |         "tasks": [
903 |           {
904 |             "task": "svg",
905 |             "enable": true
906 |           }
907 |         ],
908 |         "output": {
909 |           "extension": ".svg",
910 |           "type": "SOURCE_RELATIVE",
911 |           "relativePath": ""
912 |         }
913 |       }
914 |     },
915 |     "files": [
916 |       {
917 |         "file": "css/styles.css",
918 |         "config": {
919 |           "autoCompile": true
920 |         }
921 |       }
922 |     ]
923 |   }
924 | }
925 | 


--------------------------------------------------------------------------------
/13 - Colapsado de márgenes/css/styles-dist.css:
--------------------------------------------------------------------------------
1 | *{box-sizing:border-box}body{background-color:#333;color:#fff;margin:0}.header{background-color:lightcoral;height:100px;margin-bottom:20px;border-top:0.1px solid lightcoral}.title{margin:0;margin-top:30px}.box-1,.box-2{margin-left:auto;margin-right:auto;background-color:lightcyan;width:300px;height:300px}.box-1{margin-bottom:30px}


--------------------------------------------------------------------------------
/13 - Colapsado de márgenes/css/styles.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | LOS MARGENES VERTICALES COLAPSAN
 3 | 
 4 | */
 5 | 
 6 | *{
 7 |     box-sizing: border-box;
 8 | }
 9 | 
10 | body{
11 |     background-color: #333;
12 |     color: #fff;
13 |     margin: 0;
14 | }
15 | 
16 | .header{
17 |     background-color: lightcoral;
18 |     height: 100px;
19 |     margin-bottom: 20px;
20 |     /* overflow:hidden; */
21 |     /* padding-top: 0.1px; */
22 |     border-top: 0.1px solid lightcoral;
23 | }
24 | 
25 | .title{
26 |     margin: 0;
27 |     margin-top: 30px;
28 | }
29 | 
30 | .box-1,
31 | .box-2{
32 |     margin-left: auto;
33 |     margin-right: auto;
34 |     background-color: lightcyan;
35 |     width: 300px;
36 |     height: 300px;
37 | }
38 | 
39 | .box-1{
40 |     margin-bottom: 30px;
41 | }


--------------------------------------------------------------------------------
/13 - Colapsado de márgenes/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Colapsado de márgenes</title>
 8 |     <link rel="stylesheet" href="css/styles-dist.css" />
 9 |   </head>
10 |   <body>
11 |     <header class="header">
12 |       <h1 class="title">Colapsado de márgenes</h1>
13 |     </header>
14 |     <div class="box-1"></div>
15 |     <div class="box-2"></div>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/13 - Colapsado de márgenes/prepros.config:
--------------------------------------------------------------------------------
  1 | {
  2 |   "version": "7",
  3 |   "about": "This is a Prepros (https://prepros.io) configuration file. You can commit this file to a git repo to backup and sync project configurations.",
  4 |   "config": {
  5 |     "proxy": {
  6 |       "enable": false,
  7 |       "target": "",
  8 |       "useLocalAssets": false
  9 |     },
 10 |     "reload": {
 11 |       "enable": true,
 12 |       "delay": 0,
 13 |       "animate": true,
 14 |       "afterUpload": false
 15 |     },
 16 |     "sync": {
 17 |       "enable": false,
 18 |       "mouse": true,
 19 |       "keyboard": true,
 20 |       "form": true,
 21 |       "scroll": true
 22 |     },
 23 |     "watcher": {
 24 |       "enable": true,
 25 |       "maxFiles": 2000,
 26 |       "usePolling": false,
 27 |       "pollingInterval": 500,
 28 |       "extensions": [
 29 |         ".html",
 30 |         ".htm",
 31 |         ".php"
 32 |       ],
 33 |       "ignore": {
 34 |         "patterns": [
 35 |           ".*",
 36 |           "wp-admin",
 37 |           "wp-includes",
 38 |           "node_modules",
 39 |           "Prepros Export",
 40 |           "bower_components"
 41 |         ],
 42 |         "exceptions": []
 43 |       }
 44 |     },
 45 |     "exporter": {
 46 |       "ignore": {
 47 |         "patterns": [
 48 |           ".*",
 49 |           "desktop.ini",
 50 |           "prepros.cfg",
 51 |           "node_modules",
 52 |           "Prepros Export",
 53 |           "prepros.config",
 54 |           "prepros-6.config",
 55 |           "*-original.jpg",
 56 |           "*-original.jpeg",
 57 |           "*-original.png",
 58 |           "*-original.svg",
 59 |           "*.scss",
 60 |           "*.sass",
 61 |           "*.less",
 62 |           "*.pug",
 63 |           "*.jade",
 64 |           "*.styl",
 65 |           "*.haml",
 66 |           "*.slim",
 67 |           "*.coffee",
 68 |           "*.kit",
 69 |           "*.turf",
 70 |           "*.ts"
 71 |         ],
 72 |         "exceptions": []
 73 |       }
 74 |     },
 75 |     "uploader": {
 76 |       "remotePath": "",
 77 |       "timeout": 20000,
 78 |       "autoUpload": false,
 79 |       "reuseConnection": true,
 80 |       "connectionType": "ftp",
 81 |       "history": []
 82 |     },
 83 |     "packages": {
 84 |       "createPackageLock": true
 85 |     },
 86 |     "images": {
 87 |       "preserveOriginal": true
 88 |     },
 89 |     "tasks": {
 90 |       "autoprefixer": {
 91 |         "cascade": true,
 92 |         "add": true,
 93 |         "remove": true,
 94 |         "supports": true,
 95 |         "flexbox": true,
 96 |         "grid": "autoplace",
 97 |         "browsers": [
 98 |           "defaults"
 99 |         ],
100 |         "sourceMap": false
101 |       },
102 |       "babel": {
103 |         "sourceMap": false,
104 |         "presets": {
105 |           "@babel/preset-env": {
106 |             "enable": true,
107 |             "options": {
108 |               "targets": [
109 |                 "> 2%",
110 |                 "not dead"
111 |               ],
112 |               "preserveImports": false,
113 |               "polyfills": false
114 |             }
115 |           },
116 |           "@babel/preset-react": true,
117 |           "@babel/preset-flow": false
118 |         },
119 |         "plugins": {
120 |           "@babel/plugin-proposal-class-static-block": false,
121 |           "@babel/plugin-proposal-class-properties": false,
122 |           "@babel/plugin-proposal-decorators": {
123 |             "enable": false,
124 |             "options": {
125 |               "decoratorsBeforeExport": true
126 |             }
127 |           },
128 |           "@babel/plugin-proposal-export-namespace-from": false,
129 |           "@babel/plugin-proposal-function-sent": false,
130 |           "@babel/plugin-proposal-logical-assignment-operators": false,
131 |           "@babel/plugin-proposal-nullish-coalescing-operator": false,
132 |           "@babel/plugin-proposal-numeric-separator": false,
133 |           "@babel/plugin-proposal-optional-chaining": false,
134 |           "@babel/plugin-proposal-private-methods": false,
135 |           "@babel/plugin-proposal-throw-expressions": false
136 |         },
137 |         "customPresets": [],
138 |         "customPlugins": []
139 |       },
140 |       "bundle-js": {
141 |         "sourceMap": false,
142 |         "exclude": [
143 |           "node_modules",
144 |           "bower_components"
145 |         ],
146 |         "devMode": true,
147 |         "globals": [],
148 |         "externals": [],
149 |         "babel": {
150 |           "enable": true,
151 |           "options": {
152 |             "sourceMap": false,
153 |             "presets": {
154 |               "@babel/preset-env": {
155 |                 "enable": true,
156 |                 "options": {
157 |                   "targets": [
158 |                     "> 2%",
159 |                     "not dead"
160 |                   ],
161 |                   "preserveImports": false,
162 |                   "polyfills": false
163 |                 }
164 |               },
165 |               "@babel/preset-react": true,
166 |               "@babel/preset-flow": false
167 |             },
168 |             "plugins": {
169 |               "@babel/plugin-proposal-class-static-block": false,
170 |               "@babel/plugin-proposal-class-properties": false,
171 |               "@babel/plugin-proposal-decorators": {
172 |                 "enable": false,
173 |                 "options": {
174 |                   "decoratorsBeforeExport": true
175 |                 }
176 |               },
177 |               "@babel/plugin-proposal-export-namespace-from": false,
178 |               "@babel/plugin-proposal-function-sent": false,
179 |               "@babel/plugin-proposal-logical-assignment-operators": false,
180 |               "@babel/plugin-proposal-nullish-coalescing-operator": false,
181 |               "@babel/plugin-proposal-numeric-separator": false,
182 |               "@babel/plugin-proposal-optional-chaining": false,
183 |               "@babel/plugin-proposal-private-methods": false,
184 |               "@babel/plugin-proposal-throw-expressions": false
185 |             },
186 |             "customPresets": [],
187 |             "customPlugins": []
188 |           }
189 |         },
190 |         "css": {
191 |           "enable": true
192 |         },
193 |         "fonts": {
194 |           "enable": true
195 |         }
196 |       },
197 |       "coffeescript": {
198 |         "header": false,
199 |         "bare": false,
200 |         "sourceMap": false
201 |       },
202 |       "command": {
203 |         "command": "",
204 |         "rootDir": ""
205 |       },
206 |       "concat-js": {
207 |         "sourceMap": false,
208 |         "rootDir": ""
209 |       },
210 |       "copy": {
211 |         "sourceMap": false
212 |       },
213 |       "dart-sass": {
214 |         "indentType": "space",
215 |         "indentWidth": 2,
216 |         "linefeed": "lf",
217 |         "sourceMap": false
218 |       },
219 |       "haml": {
220 |         "doubleQuoteAttributes": true
221 |       },
222 |       "jpg": {
223 |         "quality": 90
224 |       },
225 |       "less": {
226 |         "javascriptEnabled": false,
227 |         "strictImports": false,
228 |         "insecure": false,
229 |         "math": "always",
230 |         "strictUnits": false,
231 |         "dumpLineNumbers": false,
232 |         "sourceMap": false
233 |       },
234 |       "markdown": {
235 |         "githubFlavored": true,
236 |         "wrapWithHtml": false
237 |       },
238 |       "minify-css": {
239 |         "sourceMap": false
240 |       },
241 |       "minify-html": {
242 |         "caseSensitive": false,
243 |         "collapseBooleanAttributes": true,
244 |         "collapseInlineTagWhitespace": false,
245 |         "collapseWhitespace": true,
246 |         "conservativeCollapse": false,
247 |         "decodeEntities": false,
248 |         "html5": true,
249 |         "includeAutoGeneratedTags": true,
250 |         "keepClosingSlash": false,
251 |         "minifyCSS": true,
252 |         "minifyJS": true,
253 |         "preserveLineBreaks": false,
254 |         "preventAttributesEscaping": false,
255 |         "processConditionalComments": false,
256 |         "removeAttributeQuotes": false,
257 |         "removeComments": true,
258 |         "removeEmptyAttributes": false,
259 |         "removeEmptyElement": false,
260 |         "removeOptionalTags": false,
261 |         "removeRedundantAttributes": false,
262 |         "removeScriptTypeAttributes": false,
263 |         "removeStyleLinkTypeAttributes": false,
264 |         "removeTagWhitespace": false,
265 |         "sortAttributes": false,
266 |         "sortClassName": false,
267 |         "useShortDoctype": true
268 |       },
269 |       "minify-js": {
270 |         "parse": {
271 |           "bare_returns": false
272 |         },
273 |         "compress": {
274 |           "arrows": true,
275 |           "arguments": false,
276 |           "booleans": true,
277 |           "booleans_as_integers": false,
278 |           "collapse_vars": true,
279 |           "comparisons": true,
280 |           "computed_props": true,
281 |           "conditionals": true,
282 |           "dead_code": true,
283 |           "directives": true,
284 |           "drop_console": false,
285 |           "drop_debugger": true,
286 |           "evaluate": true,
287 |           "expression": false,
288 |           "global_defs": [],
289 |           "hoist_funs": false,
290 |           "hoist_props": true,
291 |           "hoist_vars": false,
292 |           "if_return": true,
293 |           "inline": 3,
294 |           "join_vars": true,
295 |           "keep_fargs": true,
296 |           "keep_infinity": false,
297 |           "loops": true,
298 |           "negate_iife": true,
299 |           "properties": true,
300 |           "pure_funcs": [],
301 |           "pure_getters": false,
302 |           "reduce_vars": true,
303 |           "sequences": true,
304 |           "side_effects": true,
305 |           "switches": true,
306 |           "top_retain": [],
307 |           "typeofs": true,
308 |           "unsafe": false,
309 |           "unsafe_arrows": false,
310 |           "unsafe_comps": false,
311 |           "unsafe_Function": false,
312 |           "unsafe_math": false,
313 |           "unsafe_proto": false,
314 |           "unsafe_regexp": false,
315 |           "unsafe_undefined": false,
316 |           "unused": true
317 |         },
318 |         "mangle": {
319 |           "eval": false,
320 |           "reserved": []
321 |         },
322 |         "output": {
323 |           "ascii_only": false,
324 |           "braces": false,
325 |           "comments": "none",
326 |           "inline_script": true,
327 |           "keep_numbers": false,
328 |           "keep_quoted_props": false,
329 |           "preamble": null,
330 |           "quote_keys": false,
331 |           "quote_style": 0,
332 |           "semicolons": true,
333 |           "shebang": true,
334 |           "webkit": false,
335 |           "wrap_iife": false,
336 |           "wrap_func_args": true
337 |         },
338 |         "sourceMap": false,
339 |         "toplevel": false,
340 |         "ie8": false,
341 |         "keep_classnames": false,
342 |         "keep_fnames": false,
343 |         "safari10": false
344 |       },
345 |       "node-sass": {
346 |         "indentType": "space",
347 |         "indentWidth": 2,
348 |         "linefeed": "lf",
349 |         "outputStyle": "expanded",
350 |         "precision": 10,
351 |         "sourceMap": false,
352 |         "sourceComments": false
353 |       },
354 |       "png": {
355 |         "quality": 90
356 |       },
357 |       "postcss-import": {
358 |         "ignoreKeywords": [],
359 |         "sourceMap": false
360 |       },
361 |       "postcss-preset-env": {
362 |         "stage": 2,
363 |         "browsers": [
364 |           "> 2%",
365 |           "not dead"
366 |         ],
367 |         "sourceMap": false
368 |       },
369 |       "pug": {
370 |         "pretty": true
371 |       },
372 |       "slim": {
373 |         "indent": "space",
374 |         "indentSize": 2,
375 |         "pretty": true
376 |       },
377 |       "stylus": {
378 |         "useNib": true,
379 |         "sourceMap": false,
380 |         "linenos": false
381 |       },
382 |       "svg": {
383 |         "cleanupAttrs": true,
384 |         "removeDoctype": true,
385 |         "removeXMLProcInst": true,
386 |         "removeComments": true,
387 |         "removeMetadata": true,
388 |         "removeTitle": true,
389 |         "removeDesc": true,
390 |         "removeUselessDefs": true,
391 |         "removeEditorsNSData": true,
392 |         "removeEmptyAttrs": true,
393 |         "removeHiddenElems": true,
394 |         "removeEmptyText": true,
395 |         "removeEmptyContainers": true,
396 |         "removeViewBox": false,
397 |         "cleanupEnableBackground": true,
398 |         "convertStyleToAttrs": true,
399 |         "convertColors": true,
400 |         "convertPathData": true,
401 |         "convertTransform": true,
402 |         "removeUnknownsAndDefaults": true,
403 |         "removeNonInheritableGroupAttrs": true,
404 |         "removeUselessStrokeAndFill": true,
405 |         "removeUnusedNS": true,
406 |         "cleanupIDs": true,
407 |         "cleanupNumericValues": true,
408 |         "moveElemsAttrsToGroup": true,
409 |         "moveGroupAttrsToElems": true,
410 |         "collapseGroups": true,
411 |         "removeRasterImages": false,
412 |         "mergePaths": true,
413 |         "convertShapeToPath": true,
414 |         "sortAttrs": true,
415 |         "removeDimensions": true
416 |       },
417 |       "turf": {
418 |         "rootDir": ""
419 |       },
420 |       "typescript": {
421 |         "allowJs": false,
422 |         "allowSyntheticDefaultImports": true,
423 |         "allowUmdGlobalAccess": false,
424 |         "allowUnreachableCode": false,
425 |         "allowUnusedLabels": false,
426 |         "alwaysStrict": false,
427 |         "charset": "utf8",
428 |         "checkJs": false,
429 |         "declaration": false,
430 |         "disableSizeLimit": false,
431 |         "downlevelIteration": false,
432 |         "emitBOM": false,
433 |         "emitDecoratorMetadata": false,
434 |         "experimentalDecorators": false,
435 |         "forceConsistentCasingInFileNames": false,
436 |         "importHelpers": false,
437 |         "jsx": "React",
438 |         "keyofStringsOnly": false,
439 |         "lib": [],
440 |         "maxNodeModuleJsDepth": 0,
441 |         "module": "ES2015",
442 |         "moduleResolution": "NodeJs",
443 |         "newLine": "LineFeed",
444 |         "noFallthroughCasesInSwitch": false,
445 |         "noImplicitAny": false,
446 |         "noImplicitReturns": false,
447 |         "noImplicitThis": false,
448 |         "noStrictGenericChecks": false,
449 |         "noUnusedLocals": false,
450 |         "noUnusedParameters": false,
451 |         "noImplicitUseStrict": false,
452 |         "noLib": false,
453 |         "noResolve": false,
454 |         "preserveConstEnums": false,
455 |         "jsxFactory": "React.createElement",
456 |         "removeComments": false,
457 |         "skipLibCheck": false,
458 |         "sourceMap": false,
459 |         "strict": false,
460 |         "strictFunctionTypes": false,
461 |         "strictBindCallApply": false,
462 |         "strictNullChecks": false,
463 |         "strictPropertyInitialization": false,
464 |         "suppressExcessPropertyErrors": false,
465 |         "suppressImplicitAnyIndexErrors": false,
466 |         "target": "ES3",
467 |         "resolveJsonModule": false,
468 |         "esModuleInterop": false,
469 |         "useDefineForClassFields": false
470 |       }
471 |     },
472 |     "fileTypes": {
473 |       "sass": {
474 |         "extensions": [
475 |           ".scss",
476 |           ".sass"
477 |         ],
478 |         "autoCompile": true,
479 |         "sourceMap": false,
480 |         "tasks": [
481 |           {
482 |             "task": "dart-sass",
483 |             "enable": true
484 |           },
485 |           {
486 |             "task": "autoprefixer",
487 |             "enable": true
488 |           },
489 |           {
490 |             "task": "minify-css",
491 |             "enable": false
492 |           }
493 |         ],
494 |         "output": {
495 |           "extension": ".css",
496 |           "type": "REPLACE_SEGMENTS",
497 |           "segments": [
498 |             {
499 |               "segment": "scss",
500 |               "replaceWith": "css"
501 |             },
502 |             {
503 |               "segment": "sass",
504 |               "replaceWith": "css"
505 |             }
506 |           ]
507 |         }
508 |       },
509 |       "less": {
510 |         "extensions": [
511 |           ".less"
512 |         ],
513 |         "autoCompile": true,
514 |         "sourceMap": false,
515 |         "tasks": [
516 |           {
517 |             "task": "less",
518 |             "enable": true
519 |           },
520 |           {
521 |             "task": "autoprefixer",
522 |             "enable": true
523 |           },
524 |           {
525 |             "task": "minify-css",
526 |             "enable": false
527 |           }
528 |         ],
529 |         "output": {
530 |           "extension": ".css",
531 |           "type": "REPLACE_SEGMENTS",
532 |           "segments": [
533 |             {
534 |               "segment": "less",
535 |               "replaceWith": "css"
536 |             }
537 |           ]
538 |         }
539 |       },
540 |       "pug": {
541 |         "extensions": [
542 |           ".pug",
543 |           ".jade"
544 |         ],
545 |         "autoCompile": true,
546 |         "tasks": [
547 |           {
548 |             "task": "pug",
549 |             "enable": true
550 |           },
551 |           {
552 |             "task": "minify-html",
553 |             "enable": false
554 |           }
555 |         ],
556 |         "output": {
557 |           "extension": ".html",
558 |           "type": "REPLACE_SEGMENTS",
559 |           "segments": [
560 |             {
561 |               "segment": "pug",
562 |               "replaceWith": "html"
563 |             }
564 |           ]
565 |         }
566 |       },
567 |       "css": {
568 |         "extensions": [
569 |           ".css"
570 |         ],
571 |         "autoCompile": false,
572 |         "sourceMap": false,
573 |         "tasks": [
574 |           {
575 |             "task": "copy",
576 |             "enable": true
577 |           },
578 |           {
579 |             "task": "postcss-import",
580 |             "enable": false
581 |           },
582 |           {
583 |             "task": "postcss-preset-env",
584 |             "enable": false
585 |           },
586 |           {
587 |             "task": "autoprefixer",
588 |             "enable": true
589 |           },
590 |           {
591 |             "task": "minify-css",
592 |             "enable": true
593 |           }
594 |         ],
595 |         "output": {
596 |           "extension": ".css",
597 |           "type": "SOURCE_RELATIVE",
598 |           "relativePath": "",
599 |           "suffix": "-dist",
600 |           "alwaysSuffix": false
601 |         }
602 |       },
603 |       "javascript": {
604 |         "extensions": [
605 |           ".js",
606 |           ".jsx"
607 |         ],
608 |         "autoCompile": false,
609 |         "sourceMap": false,
610 |         "tasks": [
611 |           {
612 |             "task": "copy",
613 |             "enable": true
614 |           },
615 |           {
616 |             "task": "concat-js",
617 |             "enable": false
618 |           },
619 |           {
620 |             "task": "babel",
621 |             "enable": false
622 |           },
623 |           {
624 |             "task": "bundle-js",
625 |             "enable": false
626 |           },
627 |           {
628 |             "task": "minify-js",
629 |             "enable": true
630 |           }
631 |         ],
632 |         "output": {
633 |           "extension": ".js",
634 |           "type": "SOURCE_RELATIVE",
635 |           "relativePath": "",
636 |           "suffix": "-dist",
637 |           "alwaysSuffix": false
638 |         }
639 |       },
640 |       "stylus": {
641 |         "extensions": [
642 |           ".styl"
643 |         ],
644 |         "autoCompile": true,
645 |         "sourceMap": false,
646 |         "tasks": [
647 |           {
648 |             "task": "stylus",
649 |             "enable": true
650 |           },
651 |           {
652 |             "task": "autoprefixer",
653 |             "enable": true
654 |           },
655 |           {
656 |             "task": "minify-css",
657 |             "enable": false
658 |           }
659 |         ],
660 |         "output": {
661 |           "extension": ".css",
662 |           "type": "REPLACE_SEGMENTS",
663 |           "segments": [
664 |             {
665 |               "segment": "stylus",
666 |               "replaceWith": "css"
667 |             },
668 |             {
669 |               "segment": "styl",
670 |               "replaceWith": "css"
671 |             }
672 |           ]
673 |         }
674 |       },
675 |       "markdown": {
676 |         "extensions": [
677 |           ".md",
678 |           ".markdown",
679 |           ".mkd"
680 |         ],
681 |         "autoCompile": false,
682 |         "tasks": [
683 |           {
684 |             "task": "markdown",
685 |             "enable": true
686 |           },
687 |           {
688 |             "task": "minify-html",
689 |             "enable": false
690 |           }
691 |         ],
692 |         "output": {
693 |           "extension": ".html",
694 |           "type": "REPLACE_SEGMENTS",
695 |           "segments": [
696 |             {
697 |               "segment": "markdown",
698 |               "replaceWith": "html"
699 |             }
700 |           ]
701 |         }
702 |       },
703 |       "haml": {
704 |         "extensions": [
705 |           ".haml"
706 |         ],
707 |         "autoCompile": true,
708 |         "tasks": [
709 |           {
710 |             "task": "haml",
711 |             "enable": true
712 |           },
713 |           {
714 |             "task": "minify-html",
715 |             "enable": false
716 |           }
717 |         ],
718 |         "output": {
719 |           "extension": ".html",
720 |           "type": "REPLACE_SEGMENTS",
721 |           "segments": [
722 |             {
723 |               "segment": "haml",
724 |               "replaceWith": "html"
725 |             }
726 |           ]
727 |         }
728 |       },
729 |       "slim": {
730 |         "extensions": [
731 |           ".slim"
732 |         ],
733 |         "autoCompile": true,
734 |         "tasks": [
735 |           {
736 |             "task": "slim",
737 |             "enable": true
738 |           },
739 |           {
740 |             "task": "minify-html",
741 |             "enable": false
742 |           }
743 |         ],
744 |         "output": {
745 |           "extension": ".html",
746 |           "type": "REPLACE_SEGMENTS",
747 |           "segments": [
748 |             {
749 |               "segment": "slim",
750 |               "replaceWith": "html"
751 |             }
752 |           ]
753 |         }
754 |       },
755 |       "coffeescript": {
756 |         "extensions": [
757 |           ".coffee"
758 |         ],
759 |         "autoCompile": true,
760 |         "sourceMap": false,
761 |         "tasks": [
762 |           {
763 |             "task": "coffeescript",
764 |             "enable": true
765 |           },
766 |           {
767 |             "task": "babel",
768 |             "enable": false
769 |           },
770 |           {
771 |             "task": "bundle-js",
772 |             "enable": false
773 |           },
774 |           {
775 |             "task": "minify-js",
776 |             "enable": false
777 |           }
778 |         ],
779 |         "output": {
780 |           "extension": ".js",
781 |           "type": "REPLACE_SEGMENTS",
782 |           "segments": [
783 |             {
784 |               "segment": "coffee-script",
785 |               "replaceWith": "js"
786 |             },
787 |             {
788 |               "segment": "coffeescript",
789 |               "replaceWith": "js"
790 |             },
791 |             {
792 |               "segment": "coffee",
793 |               "replaceWith": "js"
794 |             }
795 |           ]
796 |         }
797 |       },
798 |       "turf": {
799 |         "extensions": [
800 |           ".turf",
801 |           ".kit"
802 |         ],
803 |         "autoCompile": true,
804 |         "tasks": [
805 |           {
806 |             "task": "turf",
807 |             "enable": true
808 |           },
809 |           {
810 |             "task": "minify-html",
811 |             "enable": false
812 |           }
813 |         ],
814 |         "output": {
815 |           "extension": ".html",
816 |           "type": "REPLACE_SEGMENTS",
817 |           "segments": [
818 |             {
819 |               "segment": "turf",
820 |               "replaceWith": "html"
821 |             }
822 |           ]
823 |         }
824 |       },
825 |       "typescript": {
826 |         "extensions": [
827 |           ".ts",
828 |           ".tsx"
829 |         ],
830 |         "autoCompile": true,
831 |         "sourceMap": false,
832 |         "tasks": [
833 |           {
834 |             "task": "typescript",
835 |             "enable": true
836 |           },
837 |           {
838 |             "task": "babel",
839 |             "enable": false
840 |           },
841 |           {
842 |             "task": "bundle-js",
843 |             "enable": false
844 |           },
845 |           {
846 |             "task": "minify-js",
847 |             "enable": false
848 |           }
849 |         ],
850 |         "output": {
851 |           "extension": ".js",
852 |           "type": "REPLACE_SEGMENTS",
853 |           "segments": [
854 |             {
855 |               "segment": "typescript",
856 |               "replaceWith": "js"
857 |             },
858 |             {
859 |               "segment": "ts",
860 |               "replaceWith": "js"
861 |             }
862 |           ]
863 |         }
864 |       },
865 |       "jpg": {
866 |         "extensions": [
867 |           ".jpg",
868 |           ".jpeg"
869 |         ],
870 |         "tasks": [
871 |           {
872 |             "task": "jpg",
873 |             "enable": true
874 |           }
875 |         ],
876 |         "output": {
877 |           "extension": ".jpg",
878 |           "type": "SOURCE_RELATIVE",
879 |           "relativePath": ""
880 |         }
881 |       },
882 |       "png": {
883 |         "extensions": [
884 |           ".png"
885 |         ],
886 |         "tasks": [
887 |           {
888 |             "task": "png",
889 |             "enable": true
890 |           }
891 |         ],
892 |         "output": {
893 |           "extension": ".png",
894 |           "type": "SOURCE_RELATIVE",
895 |           "relativePath": ""
896 |         }
897 |       },
898 |       "svg": {
899 |         "extensions": [
900 |           ".svg"
901 |         ],
902 |         "tasks": [
903 |           {
904 |             "task": "svg",
905 |             "enable": true
906 |           }
907 |         ],
908 |         "output": {
909 |           "extension": ".svg",
910 |           "type": "SOURCE_RELATIVE",
911 |           "relativePath": ""
912 |         }
913 |       }
914 |     },
915 |     "files": [
916 |       {
917 |         "file": "css/styles.css",
918 |         "config": {
919 |           "autoCompile": true
920 |         }
921 |       }
922 |     ]
923 |   }
924 | }
925 | 


--------------------------------------------------------------------------------
/14- Display/css/styles-dist.css:
--------------------------------------------------------------------------------
1 | *{box-sizing:border-box}body{background-color:#333;color:#fff}.text{background-color:lightcoral}.link{background-color:#fff;display:inline-block;width:100px;margin-top:50px}


--------------------------------------------------------------------------------
/14- Display/css/styles.css:
--------------------------------------------------------------------------------
 1 | /*
 2 |     La propiedad display nos sirve para cambiar el contexto de los elementos dentro del navegador
 3 | 
 4 |     Admite varios valores
 5 |         none -> Hace que el elemento no se muestre, pero sigue cargándose.
 6 |         block -> Hace que el elemento sea de bloque
 7 |         inline -> Hace que el elemento sea de línea
 8 |         inline-block -> Hace que el elemento sea de línea pero admite medidas y márgenes verticales
 9 | */
10 | 
11 | *{
12 |     box-sizing: border-box;
13 | }
14 | 
15 | body{
16 |     background-color: #333;
17 |     color: #fff;
18 | }
19 | 
20 | .text{
21 |     background-color: lightcoral;
22 |     /* display: none; */
23 |     /* display: inline;
24 |     width: 200px;
25 |     margin-bottom: 100px; */
26 | }
27 | 
28 | .link{
29 |     background-color: #fff;
30 |     display: inline-block;
31 |     width: 100px;
32 |     margin-top: 50px;
33 |     /* display: block;
34 |     width: 100px;
35 |     margin-bottom: 20px; */
36 | }


--------------------------------------------------------------------------------
/14- Display/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Display</title>
 8 |     <link rel="stylesheet" href="css/styles-dist.css" />
 9 |   </head>
10 |   <body>
11 |     <p class="text">Lorem ipsum dolor sit amet</p>
12 |     <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
13 |     <a href="#" class="link">Enlace</a>
14 |     <a href="#" class="link">Enlace</a>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/14- Display/prepros.config:
--------------------------------------------------------------------------------
  1 | {
  2 |   "version": "7",
  3 |   "about": "This is a Prepros (https://prepros.io) configuration file. You can commit this file to a git repo to backup and sync project configurations.",
  4 |   "config": {
  5 |     "proxy": {
  6 |       "enable": false,
  7 |       "target": "",
  8 |       "useLocalAssets": false
  9 |     },
 10 |     "reload": {
 11 |       "enable": true,
 12 |       "delay": 0,
 13 |       "animate": true,
 14 |       "afterUpload": false
 15 |     },
 16 |     "sync": {
 17 |       "enable": false,
 18 |       "mouse": true,
 19 |       "keyboard": true,
 20 |       "form": true,
 21 |       "scroll": true
 22 |     },
 23 |     "watcher": {
 24 |       "enable": true,
 25 |       "maxFiles": 2000,
 26 |       "usePolling": false,
 27 |       "pollingInterval": 500,
 28 |       "extensions": [
 29 |         ".html",
 30 |         ".htm",
 31 |         ".php"
 32 |       ],
 33 |       "ignore": {
 34 |         "patterns": [
 35 |           ".*",
 36 |           "wp-admin",
 37 |           "wp-includes",
 38 |           "node_modules",
 39 |           "Prepros Export",
 40 |           "bower_components"
 41 |         ],
 42 |         "exceptions": []
 43 |       }
 44 |     },
 45 |     "exporter": {
 46 |       "ignore": {
 47 |         "patterns": [
 48 |           ".*",
 49 |           "desktop.ini",
 50 |           "prepros.cfg",
 51 |           "node_modules",
 52 |           "Prepros Export",
 53 |           "prepros.config",
 54 |           "prepros-6.config",
 55 |           "*-original.jpg",
 56 |           "*-original.jpeg",
 57 |           "*-original.png",
 58 |           "*-original.svg",
 59 |           "*.scss",
 60 |           "*.sass",
 61 |           "*.less",
 62 |           "*.pug",
 63 |           "*.jade",
 64 |           "*.styl",
 65 |           "*.haml",
 66 |           "*.slim",
 67 |           "*.coffee",
 68 |           "*.kit",
 69 |           "*.turf",
 70 |           "*.ts"
 71 |         ],
 72 |         "exceptions": []
 73 |       }
 74 |     },
 75 |     "uploader": {
 76 |       "remotePath": "",
 77 |       "timeout": 20000,
 78 |       "autoUpload": false,
 79 |       "reuseConnection": true,
 80 |       "connectionType": "ftp",
 81 |       "history": []
 82 |     },
 83 |     "packages": {
 84 |       "createPackageLock": true
 85 |     },
 86 |     "images": {
 87 |       "preserveOriginal": true
 88 |     },
 89 |     "tasks": {
 90 |       "autoprefixer": {
 91 |         "cascade": true,
 92 |         "add": true,
 93 |         "remove": true,
 94 |         "supports": true,
 95 |         "flexbox": true,
 96 |         "grid": "autoplace",
 97 |         "browsers": [
 98 |           "defaults"
 99 |         ],
100 |         "sourceMap": false
101 |       },
102 |       "babel": {
103 |         "sourceMap": false,
104 |         "presets": {
105 |           "@babel/preset-env": {
106 |             "enable": true,
107 |             "options": {
108 |               "targets": [
109 |                 "> 2%",
110 |                 "not dead"
111 |               ],
112 |               "preserveImports": false,
113 |               "polyfills": false
114 |             }
115 |           },
116 |           "@babel/preset-react": true,
117 |           "@babel/preset-flow": false
118 |         },
119 |         "plugins": {
120 |           "@babel/plugin-proposal-class-static-block": false,
121 |           "@babel/plugin-proposal-class-properties": false,
122 |           "@babel/plugin-proposal-decorators": {
123 |             "enable": false,
124 |             "options": {
125 |               "decoratorsBeforeExport": true
126 |             }
127 |           },
128 |           "@babel/plugin-proposal-export-namespace-from": false,
129 |           "@babel/plugin-proposal-function-sent": false,
130 |           "@babel/plugin-proposal-logical-assignment-operators": false,
131 |           "@babel/plugin-proposal-nullish-coalescing-operator": false,
132 |           "@babel/plugin-proposal-numeric-separator": false,
133 |           "@babel/plugin-proposal-optional-chaining": false,
134 |           "@babel/plugin-proposal-private-methods": false,
135 |           "@babel/plugin-proposal-throw-expressions": false
136 |         },
137 |         "customPresets": [],
138 |         "customPlugins": []
139 |       },
140 |       "bundle-js": {
141 |         "sourceMap": false,
142 |         "exclude": [
143 |           "node_modules",
144 |           "bower_components"
145 |         ],
146 |         "devMode": true,
147 |         "globals": [],
148 |         "externals": [],
149 |         "babel": {
150 |           "enable": true,
151 |           "options": {
152 |             "sourceMap": false,
153 |             "presets": {
154 |               "@babel/preset-env": {
155 |                 "enable": true,
156 |                 "options": {
157 |                   "targets": [
158 |                     "> 2%",
159 |                     "not dead"
160 |                   ],
161 |                   "preserveImports": false,
162 |                   "polyfills": false
163 |                 }
164 |               },
165 |               "@babel/preset-react": true,
166 |               "@babel/preset-flow": false
167 |             },
168 |             "plugins": {
169 |               "@babel/plugin-proposal-class-static-block": false,
170 |               "@babel/plugin-proposal-class-properties": false,
171 |               "@babel/plugin-proposal-decorators": {
172 |                 "enable": false,
173 |                 "options": {
174 |                   "decoratorsBeforeExport": true
175 |                 }
176 |               },
177 |               "@babel/plugin-proposal-export-namespace-from": false,
178 |               "@babel/plugin-proposal-function-sent": false,
179 |               "@babel/plugin-proposal-logical-assignment-operators": false,
180 |               "@babel/plugin-proposal-nullish-coalescing-operator": false,
181 |               "@babel/plugin-proposal-numeric-separator": false,
182 |               "@babel/plugin-proposal-optional-chaining": false,
183 |               "@babel/plugin-proposal-private-methods": false,
184 |               "@babel/plugin-proposal-throw-expressions": false
185 |             },
186 |             "customPresets": [],
187 |             "customPlugins": []
188 |           }
189 |         },
190 |         "css": {
191 |           "enable": true
192 |         },
193 |         "fonts": {
194 |           "enable": true
195 |         }
196 |       },
197 |       "coffeescript": {
198 |         "header": false,
199 |         "bare": false,
200 |         "sourceMap": false
201 |       },
202 |       "command": {
203 |         "command": "",
204 |         "rootDir": ""
205 |       },
206 |       "concat-js": {
207 |         "sourceMap": false,
208 |         "rootDir": ""
209 |       },
210 |       "copy": {
211 |         "sourceMap": false
212 |       },
213 |       "dart-sass": {
214 |         "indentType": "space",
215 |         "indentWidth": 2,
216 |         "linefeed": "lf",
217 |         "sourceMap": false
218 |       },
219 |       "haml": {
220 |         "doubleQuoteAttributes": true
221 |       },
222 |       "jpg": {
223 |         "quality": 90
224 |       },
225 |       "less": {
226 |         "javascriptEnabled": false,
227 |         "strictImports": false,
228 |         "insecure": false,
229 |         "math": "always",
230 |         "strictUnits": false,
231 |         "dumpLineNumbers": false,
232 |         "sourceMap": false
233 |       },
234 |       "markdown": {
235 |         "githubFlavored": true,
236 |         "wrapWithHtml": false
237 |       },
238 |       "minify-css": {
239 |         "sourceMap": false
240 |       },
241 |       "minify-html": {
242 |         "caseSensitive": false,
243 |         "collapseBooleanAttributes": true,
244 |         "collapseInlineTagWhitespace": false,
245 |         "collapseWhitespace": true,
246 |         "conservativeCollapse": false,
247 |         "decodeEntities": false,
248 |         "html5": true,
249 |         "includeAutoGeneratedTags": true,
250 |         "keepClosingSlash": false,
251 |         "minifyCSS": true,
252 |         "minifyJS": true,
253 |         "preserveLineBreaks": false,
254 |         "preventAttributesEscaping": false,
255 |         "processConditionalComments": false,
256 |         "removeAttributeQuotes": false,
257 |         "removeComments": true,
258 |         "removeEmptyAttributes": false,
259 |         "removeEmptyElement": false,
260 |         "removeOptionalTags": false,
261 |         "removeRedundantAttributes": false,
262 |         "removeScriptTypeAttributes": false,
263 |         "removeStyleLinkTypeAttributes": false,
264 |         "removeTagWhitespace": false,
265 |         "sortAttributes": false,
266 |         "sortClassName": false,
267 |         "useShortDoctype": true
268 |       },
269 |       "minify-js": {
270 |         "parse": {
271 |           "bare_returns": false
272 |         },
273 |         "compress": {
274 |           "arrows": true,
275 |           "arguments": false,
276 |           "booleans": true,
277 |           "booleans_as_integers": false,
278 |           "collapse_vars": true,
279 |           "comparisons": true,
280 |           "computed_props": true,
281 |           "conditionals": true,
282 |           "dead_code": true,
283 |           "directives": true,
284 |           "drop_console": false,
285 |           "drop_debugger": true,
286 |           "evaluate": true,
287 |           "expression": false,
288 |           "global_defs": [],
289 |           "hoist_funs": false,
290 |           "hoist_props": true,
291 |           "hoist_vars": false,
292 |           "if_return": true,
293 |           "inline": 3,
294 |           "join_vars": true,
295 |           "keep_fargs": true,
296 |           "keep_infinity": false,
297 |           "loops": true,
298 |           "negate_iife": true,
299 |           "properties": true,
300 |           "pure_funcs": [],
301 |           "pure_getters": false,
302 |           "reduce_vars": true,
303 |           "sequences": true,
304 |           "side_effects": true,
305 |           "switches": true,
306 |           "top_retain": [],
307 |           "typeofs": true,
308 |           "unsafe": false,
309 |           "unsafe_arrows": false,
310 |           "unsafe_comps": false,
311 |           "unsafe_Function": false,
312 |           "unsafe_math": false,
313 |           "unsafe_proto": false,
314 |           "unsafe_regexp": false,
315 |           "unsafe_undefined": false,
316 |           "unused": true
317 |         },
318 |         "mangle": {
319 |           "eval": false,
320 |           "reserved": []
321 |         },
322 |         "output": {
323 |           "ascii_only": false,
324 |           "braces": false,
325 |           "comments": "none",
326 |           "inline_script": true,
327 |           "keep_numbers": false,
328 |           "keep_quoted_props": false,
329 |           "preamble": null,
330 |           "quote_keys": false,
331 |           "quote_style": 0,
332 |           "semicolons": true,
333 |           "shebang": true,
334 |           "webkit": false,
335 |           "wrap_iife": false,
336 |           "wrap_func_args": true
337 |         },
338 |         "sourceMap": false,
339 |         "toplevel": false,
340 |         "ie8": false,
341 |         "keep_classnames": false,
342 |         "keep_fnames": false,
343 |         "safari10": false
344 |       },
345 |       "node-sass": {
346 |         "indentType": "space",
347 |         "indentWidth": 2,
348 |         "linefeed": "lf",
349 |         "outputStyle": "expanded",
350 |         "precision": 10,
351 |         "sourceMap": false,
352 |         "sourceComments": false
353 |       },
354 |       "png": {
355 |         "quality": 90
356 |       },
357 |       "postcss-import": {
358 |         "ignoreKeywords": [],
359 |         "sourceMap": false
360 |       },
361 |       "postcss-preset-env": {
362 |         "stage": 2,
363 |         "browsers": [
364 |           "> 2%",
365 |           "not dead"
366 |         ],
367 |         "sourceMap": false
368 |       },
369 |       "pug": {
370 |         "pretty": true
371 |       },
372 |       "slim": {
373 |         "indent": "space",
374 |         "indentSize": 2,
375 |         "pretty": true
376 |       },
377 |       "stylus": {
378 |         "useNib": true,
379 |         "sourceMap": false,
380 |         "linenos": false
381 |       },
382 |       "svg": {
383 |         "cleanupAttrs": true,
384 |         "removeDoctype": true,
385 |         "removeXMLProcInst": true,
386 |         "removeComments": true,
387 |         "removeMetadata": true,
388 |         "removeTitle": true,
389 |         "removeDesc": true,
390 |         "removeUselessDefs": true,
391 |         "removeEditorsNSData": true,
392 |         "removeEmptyAttrs": true,
393 |         "removeHiddenElems": true,
394 |         "removeEmptyText": true,
395 |         "removeEmptyContainers": true,
396 |         "removeViewBox": false,
397 |         "cleanupEnableBackground": true,
398 |         "convertStyleToAttrs": true,
399 |         "convertColors": true,
400 |         "convertPathData": true,
401 |         "convertTransform": true,
402 |         "removeUnknownsAndDefaults": true,
403 |         "removeNonInheritableGroupAttrs": true,
404 |         "removeUselessStrokeAndFill": true,
405 |         "removeUnusedNS": true,
406 |         "cleanupIDs": true,
407 |         "cleanupNumericValues": true,
408 |         "moveElemsAttrsToGroup": true,
409 |         "moveGroupAttrsToElems": true,
410 |         "collapseGroups": true,
411 |         "removeRasterImages": false,
412 |         "mergePaths": true,
413 |         "convertShapeToPath": true,
414 |         "sortAttrs": true,
415 |         "removeDimensions": true
416 |       },
417 |       "turf": {
418 |         "rootDir": ""
419 |       },
420 |       "typescript": {
421 |         "allowJs": false,
422 |         "allowSyntheticDefaultImports": true,
423 |         "allowUmdGlobalAccess": false,
424 |         "allowUnreachableCode": false,
425 |         "allowUnusedLabels": false,
426 |         "alwaysStrict": false,
427 |         "charset": "utf8",
428 |         "checkJs": false,
429 |         "declaration": false,
430 |         "disableSizeLimit": false,
431 |         "downlevelIteration": false,
432 |         "emitBOM": false,
433 |         "emitDecoratorMetadata": false,
434 |         "experimentalDecorators": false,
435 |         "forceConsistentCasingInFileNames": false,
436 |         "importHelpers": false,
437 |         "jsx": "React",
438 |         "keyofStringsOnly": false,
439 |         "lib": [],
440 |         "maxNodeModuleJsDepth": 0,
441 |         "module": "ES2015",
442 |         "moduleResolution": "NodeJs",
443 |         "newLine": "LineFeed",
444 |         "noFallthroughCasesInSwitch": false,
445 |         "noImplicitAny": false,
446 |         "noImplicitReturns": false,
447 |         "noImplicitThis": false,
448 |         "noStrictGenericChecks": false,
449 |         "noUnusedLocals": false,
450 |         "noUnusedParameters": false,
451 |         "noImplicitUseStrict": false,
452 |         "noLib": false,
453 |         "noResolve": false,
454 |         "preserveConstEnums": false,
455 |         "jsxFactory": "React.createElement",
456 |         "removeComments": false,
457 |         "skipLibCheck": false,
458 |         "sourceMap": false,
459 |         "strict": false,
460 |         "strictFunctionTypes": false,
461 |         "strictBindCallApply": false,
462 |         "strictNullChecks": false,
463 |         "strictPropertyInitialization": false,
464 |         "suppressExcessPropertyErrors": false,
465 |         "suppressImplicitAnyIndexErrors": false,
466 |         "target": "ES3",
467 |         "resolveJsonModule": false,
468 |         "esModuleInterop": false,
469 |         "useDefineForClassFields": false
470 |       }
471 |     },
472 |     "fileTypes": {
473 |       "sass": {
474 |         "extensions": [
475 |           ".scss",
476 |           ".sass"
477 |         ],
478 |         "autoCompile": true,
479 |         "sourceMap": false,
480 |         "tasks": [
481 |           {
482 |             "task": "dart-sass",
483 |             "enable": true
484 |           },
485 |           {
486 |             "task": "autoprefixer",
487 |             "enable": true
488 |           },
489 |           {
490 |             "task": "minify-css",
491 |             "enable": false
492 |           }
493 |         ],
494 |         "output": {
495 |           "extension": ".css",
496 |           "type": "REPLACE_SEGMENTS",
497 |           "segments": [
498 |             {
499 |               "segment": "scss",
500 |               "replaceWith": "css"
501 |             },
502 |             {
503 |               "segment": "sass",
504 |               "replaceWith": "css"
505 |             }
506 |           ]
507 |         }
508 |       },
509 |       "less": {
510 |         "extensions": [
511 |           ".less"
512 |         ],
513 |         "autoCompile": true,
514 |         "sourceMap": false,
515 |         "tasks": [
516 |           {
517 |             "task": "less",
518 |             "enable": true
519 |           },
520 |           {
521 |             "task": "autoprefixer",
522 |             "enable": true
523 |           },
524 |           {
525 |             "task": "minify-css",
526 |             "enable": false
527 |           }
528 |         ],
529 |         "output": {
530 |           "extension": ".css",
531 |           "type": "REPLACE_SEGMENTS",
532 |           "segments": [
533 |             {
534 |               "segment": "less",
535 |               "replaceWith": "css"
536 |             }
537 |           ]
538 |         }
539 |       },
540 |       "pug": {
541 |         "extensions": [
542 |           ".pug",
543 |           ".jade"
544 |         ],
545 |         "autoCompile": true,
546 |         "tasks": [
547 |           {
548 |             "task": "pug",
549 |             "enable": true
550 |           },
551 |           {
552 |             "task": "minify-html",
553 |             "enable": false
554 |           }
555 |         ],
556 |         "output": {
557 |           "extension": ".html",
558 |           "type": "REPLACE_SEGMENTS",
559 |           "segments": [
560 |             {
561 |               "segment": "pug",
562 |               "replaceWith": "html"
563 |             }
564 |           ]
565 |         }
566 |       },
567 |       "css": {
568 |         "extensions": [
569 |           ".css"
570 |         ],
571 |         "autoCompile": false,
572 |         "sourceMap": false,
573 |         "tasks": [
574 |           {
575 |             "task": "copy",
576 |             "enable": true
577 |           },
578 |           {
579 |             "task": "postcss-import",
580 |             "enable": false
581 |           },
582 |           {
583 |             "task": "postcss-preset-env",
584 |             "enable": false
585 |           },
586 |           {
587 |             "task": "autoprefixer",
588 |             "enable": true
589 |           },
590 |           {
591 |             "task": "minify-css",
592 |             "enable": true
593 |           }
594 |         ],
595 |         "output": {
596 |           "extension": ".css",
597 |           "type": "SOURCE_RELATIVE",
598 |           "relativePath": "",
599 |           "suffix": "-dist",
600 |           "alwaysSuffix": false
601 |         }
602 |       },
603 |       "javascript": {
604 |         "extensions": [
605 |           ".js",
606 |           ".jsx"
607 |         ],
608 |         "autoCompile": false,
609 |         "sourceMap": false,
610 |         "tasks": [
611 |           {
612 |             "task": "copy",
613 |             "enable": true
614 |           },
615 |           {
616 |             "task": "concat-js",
617 |             "enable": false
618 |           },
619 |           {
620 |             "task": "babel",
621 |             "enable": false
622 |           },
623 |           {
624 |             "task": "bundle-js",
625 |             "enable": false
626 |           },
627 |           {
628 |             "task": "minify-js",
629 |             "enable": true
630 |           }
631 |         ],
632 |         "output": {
633 |           "extension": ".js",
634 |           "type": "SOURCE_RELATIVE",
635 |           "relativePath": "",
636 |           "suffix": "-dist",
637 |           "alwaysSuffix": false
638 |         }
639 |       },
640 |       "stylus": {
641 |         "extensions": [
642 |           ".styl"
643 |         ],
644 |         "autoCompile": true,
645 |         "sourceMap": false,
646 |         "tasks": [
647 |           {
648 |             "task": "stylus",
649 |             "enable": true
650 |           },
651 |           {
652 |             "task": "autoprefixer",
653 |             "enable": true
654 |           },
655 |           {
656 |             "task": "minify-css",
657 |             "enable": false
658 |           }
659 |         ],
660 |         "output": {
661 |           "extension": ".css",
662 |           "type": "REPLACE_SEGMENTS",
663 |           "segments": [
664 |             {
665 |               "segment": "stylus",
666 |               "replaceWith": "css"
667 |             },
668 |             {
669 |               "segment": "styl",
670 |               "replaceWith": "css"
671 |             }
672 |           ]
673 |         }
674 |       },
675 |       "markdown": {
676 |         "extensions": [
677 |           ".md",
678 |           ".markdown",
679 |           ".mkd"
680 |         ],
681 |         "autoCompile": false,
682 |         "tasks": [
683 |           {
684 |             "task": "markdown",
685 |             "enable": true
686 |           },
687 |           {
688 |             "task": "minify-html",
689 |             "enable": false
690 |           }
691 |         ],
692 |         "output": {
693 |           "extension": ".html",
694 |           "type": "REPLACE_SEGMENTS",
695 |           "segments": [
696 |             {
697 |               "segment": "markdown",
698 |               "replaceWith": "html"
699 |             }
700 |           ]
701 |         }
702 |       },
703 |       "haml": {
704 |         "extensions": [
705 |           ".haml"
706 |         ],
707 |         "autoCompile": true,
708 |         "tasks": [
709 |           {
710 |             "task": "haml",
711 |             "enable": true
712 |           },
713 |           {
714 |             "task": "minify-html",
715 |             "enable": false
716 |           }
717 |         ],
718 |         "output": {
719 |           "extension": ".html",
720 |           "type": "REPLACE_SEGMENTS",
721 |           "segments": [
722 |             {
723 |               "segment": "haml",
724 |               "replaceWith": "html"
725 |             }
726 |           ]
727 |         }
728 |       },
729 |       "slim": {
730 |         "extensions": [
731 |           ".slim"
732 |         ],
733 |         "autoCompile": true,
734 |         "tasks": [
735 |           {
736 |             "task": "slim",
737 |             "enable": true
738 |           },
739 |           {
740 |             "task": "minify-html",
741 |             "enable": false
742 |           }
743 |         ],
744 |         "output": {
745 |           "extension": ".html",
746 |           "type": "REPLACE_SEGMENTS",
747 |           "segments": [
748 |             {
749 |               "segment": "slim",
750 |               "replaceWith": "html"
751 |             }
752 |           ]
753 |         }
754 |       },
755 |       "coffeescript": {
756 |         "extensions": [
757 |           ".coffee"
758 |         ],
759 |         "autoCompile": true,
760 |         "sourceMap": false,
761 |         "tasks": [
762 |           {
763 |             "task": "coffeescript",
764 |             "enable": true
765 |           },
766 |           {
767 |             "task": "babel",
768 |             "enable": false
769 |           },
770 |           {
771 |             "task": "bundle-js",
772 |             "enable": false
773 |           },
774 |           {
775 |             "task": "minify-js",
776 |             "enable": false
777 |           }
778 |         ],
779 |         "output": {
780 |           "extension": ".js",
781 |           "type": "REPLACE_SEGMENTS",
782 |           "segments": [
783 |             {
784 |               "segment": "coffee-script",
785 |               "replaceWith": "js"
786 |             },
787 |             {
788 |               "segment": "coffeescript",
789 |               "replaceWith": "js"
790 |             },
791 |             {
792 |               "segment": "coffee",
793 |               "replaceWith": "js"
794 |             }
795 |           ]
796 |         }
797 |       },
798 |       "turf": {
799 |         "extensions": [
800 |           ".turf",
801 |           ".kit"
802 |         ],
803 |         "autoCompile": true,
804 |         "tasks": [
805 |           {
806 |             "task": "turf",
807 |             "enable": true
808 |           },
809 |           {
810 |             "task": "minify-html",
811 |             "enable": false
812 |           }
813 |         ],
814 |         "output": {
815 |           "extension": ".html",
816 |           "type": "REPLACE_SEGMENTS",
817 |           "segments": [
818 |             {
819 |               "segment": "turf",
820 |               "replaceWith": "html"
821 |             }
822 |           ]
823 |         }
824 |       },
825 |       "typescript": {
826 |         "extensions": [
827 |           ".ts",
828 |           ".tsx"
829 |         ],
830 |         "autoCompile": true,
831 |         "sourceMap": false,
832 |         "tasks": [
833 |           {
834 |             "task": "typescript",
835 |             "enable": true
836 |           },
837 |           {
838 |             "task": "babel",
839 |             "enable": false
840 |           },
841 |           {
842 |             "task": "bundle-js",
843 |             "enable": false
844 |           },
845 |           {
846 |             "task": "minify-js",
847 |             "enable": false
848 |           }
849 |         ],
850 |         "output": {
851 |           "extension": ".js",
852 |           "type": "REPLACE_SEGMENTS",
853 |           "segments": [
854 |             {
855 |               "segment": "typescript",
856 |               "replaceWith": "js"
857 |             },
858 |             {
859 |               "segment": "ts",
860 |               "replaceWith": "js"
861 |             }
862 |           ]
863 |         }
864 |       },
865 |       "jpg": {
866 |         "extensions": [
867 |           ".jpg",
868 |           ".jpeg"
869 |         ],
870 |         "tasks": [
871 |           {
872 |             "task": "jpg",
873 |             "enable": true
874 |           }
875 |         ],
876 |         "output": {
877 |           "extension": ".jpg",
878 |           "type": "SOURCE_RELATIVE",
879 |           "relativePath": ""
880 |         }
881 |       },
882 |       "png": {
883 |         "extensions": [
884 |           ".png"
885 |         ],
886 |         "tasks": [
887 |           {
888 |             "task": "png",
889 |             "enable": true
890 |           }
891 |         ],
892 |         "output": {
893 |           "extension": ".png",
894 |           "type": "SOURCE_RELATIVE",
895 |           "relativePath": ""
896 |         }
897 |       },
898 |       "svg": {
899 |         "extensions": [
900 |           ".svg"
901 |         ],
902 |         "tasks": [
903 |           {
904 |             "task": "svg",
905 |             "enable": true
906 |           }
907 |         ],
908 |         "output": {
909 |           "extension": ".svg",
910 |           "type": "SOURCE_RELATIVE",
911 |           "relativePath": ""
912 |         }
913 |       }
914 |     },
915 |     "files": [
916 |       {
917 |         "file": "css/styles.css",
918 |         "config": {
919 |           "autoCompile": true
920 |         }
921 |       }
922 |     ]
923 |   }
924 | }
925 | 


--------------------------------------------------------------------------------
/15 - Outline/css/styles-dist.css:
--------------------------------------------------------------------------------
1 | *{box-sizing:border-box}body{background-color:#333;color:#fff}.border,.outline{background-color:#666;width:100px;padding:10px 20px;margin:50px 100px}.border{border:2px solid lightcoral}.outline{outline:3px inset lightcoral;outline-offset:-13px;border:3px solid lightgreen}


--------------------------------------------------------------------------------
/15 - Outline/css/styles.css:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Outline es la propiedad que nos permite dibujar un borde por fuera del modelo de caja.
 3 |     Es un shorthand que engloba
 4 |         outline-width: Controla el ancho del ouline
 5 |         outline-style: Controla el estilo del outline
 6 |         outline-color: Controla el color del outline
 7 | 
 8 |     Tiene las mísmas propiedades y sintaxis que border, pero con algunas diferencias.
 9 |         No ocupa sitio, ya que no forma parte del box-model
10 |         No se puede redondear
11 |         No se pueden controlar los lados de forma independiente
12 | 
13 |     También cuenta con la propiedad outline-offset, que nos permite aumentar o disminuir la distancia del outline respecto a la caja a la que pertence
14 | */
15 | 
16 | * {
17 |   box-sizing: border-box;
18 | }
19 | 
20 | body {
21 |   background-color: #333;
22 |   color: #fff;
23 | }
24 | 
25 | .border,
26 | .outline {
27 |   background-color: #666;
28 |   width: 100px;
29 |   padding: 10px 20px;
30 |   margin: 50px 100px;
31 | }
32 | 
33 | .border {
34 |   border: 2px solid lightcoral;
35 | }
36 | 
37 | .outline {
38 |   outline: 3px inset lightcoral;
39 |   outline-offset: -13px;
40 |   border: 3px solid lightgreen;
41 | }
42 | 


--------------------------------------------------------------------------------
/15 - Outline/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Outline</title>
 8 |     <link rel="stylesheet" href="css/styles-dist.css" />
 9 |   </head>
10 |   <body>
11 |     <div class="border">Border</div>
12 |     <div class="outline">Outline</div>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/16 - Text align/assets/images/gato.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DorianDesings/Curso-css-basico-2021/0e1ba417bb508cdf4240f92a7657924b5d7590d6/16 - Text align/assets/images/gato.jpg


--------------------------------------------------------------------------------
/16 - Text align/css/styles-dist.css:
--------------------------------------------------------------------------------
1 | *{box-sizing:border-box}body{background-color:#333;color:#fff}.text{text-align:justify}.box{background-color:#666;width:100px;padding:10px 0;margin:20px 0;border:2px solid lightcoral;text-align:center;margin-left:auto;margin-right:auto}.link{color:#fff;background-color:#666;margin-left:auto;margin-right:auto;width:200px;display:block;text-align:center;margin-bottom:20px}.img-container{text-align:center}.img{text-align:center}


--------------------------------------------------------------------------------
/16 - Text align/css/styles.css:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Text-align es la propiedad que nos permite alinear horizontalmente el contenido de un elemento de bloque siempre que el contenido NO TENGA ANCHO DECLARADO
 3 | 
 4 |     Acepta 4 posibles valores
 5 |         text-align:left; -> Alinea el contenido a la izquierda
 6 |         text-align:right; -> Alinea el contenido a la derecha
 7 |         text-align:center; -> Alinea el contenido al centro
 8 |         text-align:justify; -> Alinea el contenido de forma justificada. No es recomendable usarlo.
 9 | */
10 | 
11 | * {
12 |   box-sizing: border-box;
13 | }
14 | 
15 | body {
16 |   background-color: #333;
17 |   color: #fff;
18 | }
19 | 
20 | .text {
21 |   text-align: justify;
22 | }
23 | 
24 | .box {
25 |   background-color: #666;
26 |   width: 100px;
27 |   padding: 10px 0;
28 |   margin: 20px 0;
29 |   border: 2px solid lightcoral;
30 |   text-align: center;
31 |   margin-left: auto;
32 |   margin-right: auto;
33 | }
34 | 
35 | .link {
36 |   color: #fff;
37 |   background-color: #666;
38 |   margin-left: auto;
39 |   margin-right: auto;
40 |   width: 200px;
41 |   display: block;
42 |   text-align: center;
43 |   margin-bottom: 20px;
44 | }
45 | 
46 | .img-container {
47 |   text-align: center;
48 | }
49 | 
50 | .img {
51 |   /* display: block; */
52 |   /* margin-left: auto;
53 |   margin-right: auto;*/
54 |   text-align: center;
55 | }
56 | 


--------------------------------------------------------------------------------
/16 - Text align/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Outline</title>
 8 |     <link rel="stylesheet" href="css/styles-dist.css" />
 9 |   </head>
10 |   <body>
11 |     <p class="text">
12 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem repellendus veritatis
13 |       reprehenderit accusantium quia tempora aliquam eos sequi iure, aliquid quaerat, neque modi
14 |       aperiam, natus ab? Autem iste quaerat officia? Eius, tempora suscipit id corporis, sunt quo
15 |       nam vero, enim sit veritatis debitis assumenda incidunt ea reprehenderit. Porro, perspiciatis
16 |       blanditiis totam pariatur reprehenderit similique quibusdam beatae quaerat inventore unde vel.
17 |       Tempora quos error asperiores doloribus sint laboriosam hic voluptatum veniam, laborum
18 |       officiis vel recusandae eaque quas nulla? Tenetur ipsam consequuntur, qui minus laboriosam hic
19 |       accusamus itaque ullam quam id rerum? Maiores, ad natus voluptates consectetur nobis amet iste
20 |       quasi quisquam vel blanditiis enim iure consequatur est alias deleniti ipsum accusantium
21 |       inventore ut, nulla quis quidem. Magni iste delectus quo temporibus?
22 |     </p>
23 |     <div class="box">Border</div>
24 |     <a href="#" class="link">Soy un enlace</a>
25 |     <div class="img-container">
26 |       <img src="assets/images/gato.jpg" alt="gato" class="img" />
27 |     </div>
28 |   </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/17 - Box shadow/css/styles-dist.css:
--------------------------------------------------------------------------------
1 | *{box-sizing:border-box}.box{background-color:darkcyan;width:200px;padding:50px;color:red;text-align:center;margin-left:auto;margin-right:auto;box-shadow:5px 5px red,10px 10px blue,15px 15px purple}


--------------------------------------------------------------------------------
/17 - Box shadow/css/styles.css:
--------------------------------------------------------------------------------
 1 | /*
 2 |     La propiedad box-shadow se creó para añadir efectos de sombra a nuestra caja.
 3 | 
 4 |     En esencia lo que hace es crear un clon de la caja respetando la forma de su box-model (ancho, alto, redondez)
 5 | 
 6 |     La sintaxis de box-shadow se puede escribir de distintas formas según lo que queramos conseguir.
 7 |       Los valores que le podemos poner son:
 8 |         offset-x -> Desplazamiento en x (obligatorio)
 9 |         offset-y -> Desplazamiento en y (obligatorio)
10 |         blur-radius -> Desenfoque de la sombra
11 |         spread-radius -> Expansión de la sombra
12 |         color -> El color de la sombra, si no lo especificamos lo heredará del elemento al que pertenece
13 |         inset -> Determina si la sombra será interior o exterior
14 | */
15 | 
16 | * {
17 |   box-sizing: border-box;
18 | }
19 | 
20 | .box {
21 |   background-color: darkcyan;
22 |   width: 200px;
23 |   padding: 50px;
24 |   color: red;
25 |   text-align: center;
26 |   margin-left: auto;
27 |   margin-right: auto;
28 |   /* border-radius: 30px; */
29 |   /* box-shadow: inset -5px -5px 10px 0 #111; */
30 |   box-shadow: 5px 5px red, 10px 10px blue, 15px 15px purple;
31 | }
32 | 


--------------------------------------------------------------------------------
/17 - Box shadow/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Box shadow</title>
 8 |     <link rel="stylesheet" href="css/styles-dist.css" />
 9 |   </head>
10 |   <body>
11 |     <div class="box">BOX</div>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/18 - Position/assets/images/banner.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DorianDesings/Curso-css-basico-2021/0e1ba417bb508cdf4240f92a7657924b5d7590d6/18 - Position/assets/images/banner.jpg


--------------------------------------------------------------------------------
/18 - Position/css/styles-dist.css:
--------------------------------------------------------------------------------
1 | *{box-sizing:border-box}body{margin:0;background-color:#333;color:#fff}.container{width:200px;height:200px;background-color:#555;position:relative}.box{width:100px;height:100px;text-align:center;color:#333}.box-1{background-color:lightcoral;position:relative;left:150px;z-index:-1}.box-1-2{background-color:aquamarine;position:relative;left:150px;top:-25px;z-index:-2}.box-2{background-color:lightgreen;position:relative;top:50px;z-index:20}.box-3{background-color:lightseagreen;position:relative;z-index:10}.link{position:absolute;background-color:lime;width:200px;top:50px}


--------------------------------------------------------------------------------
/18 - Position/css/styles.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |     La propiedad position nos permite posicionar los elementos. Hay algunos conceptos que debéis conocer para entender position.
  3 |     
  4 |     Flujo de renderizado -> Por norma general los elementos se dibujan de izquierda a derecha y de arriba abajo. El punto 0,0 de los elementos, por norma general, es la esquina superior izquierda.
  5 | 
  6 |     Espacio reservado -> Es el espacio que tiene un elemento asignado en el navegador.
  7 | 
  8 |     Elemento posicionado -> Esto significa que el elemento tiene la propiedad position con un valor distinto de "static", que es el valor que tiene esta propiedad por defecto.
  9 | 
 10 |     Stackin context -> Contexto de apilamiento. Es el orden en el que se apilarán las cajas que se superponen, dentro del mismo contenedor.
 11 | 
 12 |     Al posicionar un elemento se habilitan 5 propiedades que podemos utilizar para mover los elementos en los 3 ejes.
 13 | 
 14 |       top -> El elemento se moverá desde la parte superior la distancia que le hayamos indicado.
 15 | 
 16 |       right -> El elemento se moverá desde la parte derecha la distancia que le hayamos indicado.
 17 | 
 18 |       bottom -> El elemento se moverá desde la parte inferior la distancia que le hayamos indicado.
 19 | 
 20 |       left -> El elemento se moverá desde la parte izquierda la distancia que le hayamos indicado.
 21 | 
 22 |       z-index -> Nos permite mover el elemento en el contexto de apilamiento (eje z)
 23 | 
 24 |       NOTA: Si a un elemento le declaramos la propiedad top y/o left, las propiedades bottom y/o right no funcionarán. 
 25 | 
 26 |     Los posibles valores que le podemos dar a position son.
 27 |       Static -> Es el valor que tiene por defecto un elemento, con este valor el elemento NO ESTÁ POSICIONADO y por lo cual no podremos moverlo
 28 | 
 29 |       Relative -> El elemento mantendrá su posición y medidas en el flujo de renderizado y mantendrá su espacio reservado. Si lo movemos lo hará usando su posición en el html como punto de referencia.
 30 | 
 31 |       Absolute -> El elemento perderá sus medidas y su espacio reservado. Si lo movemos usará el elemento posicionado contenedor como referencia. Si no tiene ninguno, usará el elemento html de referencia.
 32 | 
 33 |       Fixed -> El elemento perderá sus medidas y su espacio reservado.
 34 |       Si lo movemos usará el elemento html de referencia, y además se quedará fijo en esa posición aunque hagamos scroll.
 35 | 
 36 |       Sticky -> Es una mezcla de position relative y "fixed".
 37 |       Con este tipo de posicionamiento los valores top, left, bottom y right no sirven para mover el elemento, si no para indicarle en qué punto pasará a tener un comportamiento de posicionamiento similar a fixed, hasta llegar a ese punto se comportará como si no tuviera posicionamiento, aunque sí contará como posicionado si necesitáramos colocar otro elemento respecto a él (absolute)
 38 | 
 39 |     z-index: Es la propiedad que nos permite ordenar los elementos superpuestos para controlar cual se coloca por delante y cual por detrás.
 40 | */
 41 | 
 42 | * {
 43 |   box-sizing: border-box;
 44 | }
 45 | 
 46 | body {
 47 |   margin: 0;
 48 |   background-color: #333;
 49 |   color: #fff;
 50 |   /* padding-top: 70px; */
 51 | }
 52 | 
 53 | .container {
 54 |   width: 200px;
 55 |   height: 200px;
 56 |   background-color: #555;
 57 |   position: relative;
 58 | }
 59 | 
 60 | .box {
 61 |   width: 100px;
 62 |   height: 100px;
 63 |   text-align: center;
 64 |   color: #333;
 65 | }
 66 | 
 67 | .box-1 {
 68 |   background-color: lightcoral;
 69 |   position: relative;
 70 |   left: 150px;
 71 |   z-index: -1;
 72 | }
 73 | 
 74 | .box-1-2 {
 75 |   background-color: aquamarine;
 76 |   position: relative;
 77 |   left: 150px;
 78 |   top: -25px;
 79 |   z-index: -2;
 80 | }
 81 | 
 82 | .box-2 {
 83 |   background-color: lightgreen;
 84 |   position: relative;
 85 |   top: 50px;
 86 |   z-index: 20;
 87 | }
 88 | 
 89 | .box-3 {
 90 |   background-color: lightseagreen;
 91 |   position: relative;
 92 |   z-index: 10;
 93 | }
 94 | 
 95 | /* img {
 96 |   width: 100%;
 97 |   display: block;
 98 | } */
 99 | 
100 | /* .header {
101 |   text-align: center;
102 |   padding: 25px 0;
103 |   background-color: lightskyblue;
104 |   color: orangered;
105 |   position: fixed;
106 |   top: 0;
107 |   width: 100%;
108 |   position: sticky;
109 |   top: 0;
110 |   height: 400px;
111 |   overflow: hidden;
112 | } */
113 | 
114 | /* .menu {
115 |   position: sticky;
116 |   top: 0;
117 | } */
118 | 
119 | /* article {
120 |   outline: 3px solid red;
121 | } */
122 | 
123 | /* .article-title {
124 |   position: sticky;
125 |   top: 0;
126 |   background-color: #333;
127 |   margin: 0;
128 | } */
129 | 
130 | /* .link {
131 |   position: fixed;
132 |   background-color: lightcoral;
133 |   width: 200px;
134 | } */
135 | 
136 | .link {
137 |   position: absolute;
138 |   background-color: lime;
139 |   width: 200px;
140 |   top: 50px;
141 | }
142 | 


--------------------------------------------------------------------------------
/18 - Position/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <title>Position</title>
  8 |     <link rel="stylesheet" href="css/styles-dist.css" />
  9 |   </head>
 10 |   <body>
 11 |     <!-- <img src="assets/images/banner.jpg" alt="cat" />
 12 |     <header class="header">
 13 |       <nav class="menu">MENU</nav>
 14 |     </header>
 15 |     <main class="main">
 16 |       <h1>Position Sticky</h1>
 17 |       <a href="#" class="link">SOY UN ENLACE</a>
 18 |       <section>
 19 |         <article>
 20 |           <h2 class="article-title">Sección 1</h2>
 21 |           <p>
 22 |             Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi voluptates recusandae
 23 |             iste iure ut, voluptatem exercitationem excepturi eveniet, sint vel eos aut quae. Quidem
 24 |             deleniti debitis odio assumenda odit nobis. Lorem, ipsum dolor sit amet consectetur
 25 |             adipisicing elit. Laboriosam aut aliquam, cum sint explicabo quod magni perspiciatis
 26 |             quibusdam sed aperiam nihil facere obcaecati? Nisi voluptatibus tempore, cupiditate
 27 |             repudiandae accusamus quidem? Voluptatibus optio nesciunt expedita ipsum aut commodi
 28 |             numquam ipsam aliquam sit ullam recusandae sint, inventore earum quas eligendi
 29 |             praesentium, rem temporibus voluptas porro? Animi culpa perferendis quas. Impedit, ullam
 30 |             placeat! Dolores commodi consectetur quo, laborum necessitatibus repudiandae sint nihil
 31 |             temporibus, aliquam ad assumenda provident quos. Harum sunt accusantium dolores
 32 |             consectetur commodi, ex velit esse tempore eaque at? Quaerat, commodi provident.
 33 |           </p>
 34 |         </article>
 35 |         <article>
 36 |           <h2 class="article-title">Sección 2</h2>
 37 |           <p>
 38 |             Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi voluptates recusandae
 39 |             iste iure ut, voluptatem exercitationem excepturi eveniet, sint vel eos aut quae. Quidem
 40 |             deleniti debitis odio assumenda odit nobis. Lorem, ipsum dolor sit amet consectetur
 41 |             adipisicing elit. Laboriosam aut aliquam, cum sint explicabo quod magni perspiciatis
 42 |             quibusdam sed aperiam nihil facere obcaecati? Nisi voluptatibus tempore, cupiditate
 43 |             repudiandae accusamus quidem? Voluptatibus optio nesciunt expedita ipsum aut commodi
 44 |             numquam ipsam aliquam sit ullam recusandae sint, inventore earum quas eligendi
 45 |             praesentium, rem temporibus voluptas porro? Animi culpa perferendis quas. Impedit, ullam
 46 |             placeat! Dolores commodi consectetur quo, laborum necessitatibus repudiandae sint nihil
 47 |             temporibus, aliquam ad assumenda provident quos. Harum sunt accusantium dolores
 48 |             consectetur commodi, ex velit esse tempore eaque at? Quaerat, commodi provident.
 49 |           </p>
 50 |           <p>
 51 |             Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi voluptates recusandae
 52 |             iste iure ut, voluptatem exercitationem excepturi eveniet, sint vel eos aut quae. Quidem
 53 |             deleniti debitis odio assumenda odit nobis. Lorem ipsum dolor sit amet consectetur,
 54 |             adipisicing elit. Nisi sed repudiandae rerum cupiditate esse? Vero, ut quasi eos quaerat
 55 |             minus placeat ratione, hic deleniti atque assumenda reprehenderit praesentium
 56 |             repellendus accusamus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
 57 |             reprehenderit error consequuntur voluptatum placeat obcaecati expedita doloremque
 58 |             voluptatem totam perspiciatis! Qui optio accusantium inventore nisi, dolore magnam vitae
 59 |             tempore numquam.
 60 |           </p>
 61 |         </article>
 62 |         <article>
 63 |           <h2 class="article-title">Sección 3</h2>
 64 |           <p>
 65 |             Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi voluptates recusandae
 66 |             iste iure ut, voluptatem exercitationem excepturi eveniet, sint vel eos aut quae. Quidem
 67 |             deleniti debitis odio assumenda odit nobis. Lorem, ipsum dolor sit amet consectetur
 68 |             adipisicing elit. Laboriosam aut aliquam, cum sint explicabo quod magni perspiciatis
 69 |             quibusdam sed aperiam nihil facere obcaecati? Nisi voluptatibus tempore, cupiditate
 70 |             repudiandae accusamus quidem? Voluptatibus optio nesciunt expedita ipsum aut commodi
 71 |             numquam ipsam aliquam sit ullam recusandae sint, inventore earum quas eligendi
 72 |             praesentium, rem temporibus voluptas porro? Animi culpa perferendis quas. Impedit, ullam
 73 |             placeat! Dolores commodi consectetur quo, laborum necessitatibus repudiandae sint nihil
 74 |             temporibus, aliquam ad assumenda provident quos. Harum sunt accusantium dolores
 75 |             consectetur commodi, ex velit esse tempore eaque at? Quaerat, commodi provident.
 76 |           </p>
 77 |           <p>
 78 |             Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi voluptates recusandae
 79 |             iste iure ut, voluptatem exercitationem excepturi eveniet, sint vel eos aut quae. Quidem
 80 |             deleniti debitis odio assumenda odit nobis. Lorem ipsum dolor sit amet consectetur
 81 |             adipisicing elit. Nulla voluptatibus accusantium velit sed dolor deserunt facilis totam.
 82 |             Unde cupiditate sit eum recusandae perferendis magni repellat nemo, delectus excepturi
 83 |             reprehenderit qui. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum
 84 |             quaerat et quis ipsum deserunt cupiditate quod inventore ab officiis, ipsa nam, in
 85 |             asperiores omnis commodi provident voluptatum ad neque! Sint?
 86 |           </p>
 87 |         </article>
 88 |         <article>
 89 |           <h2 class="article-title">Sección 4</h2>
 90 |           <p>
 91 |             Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi voluptates recusandae
 92 |             iste iure ut, voluptatem exercitationem excepturi eveniet, sint vel eos aut quae. Quidem
 93 |             deleniti debitis odio assumenda odit nobis.
 94 |           </p>
 95 |           <p>
 96 |             Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi voluptates recusandae
 97 |             iste iure ut, voluptatem exercitationem excepturi eveniet, sint vel eos aut quae. Quidem
 98 |             deleniti debitis odio assumenda odit nobis. Lorem, ipsum dolor sit amet consectetur
 99 |             adipisicing elit. Laboriosam aut aliquam, cum sint explicabo quod magni perspiciatis
100 |             quibusdam sed aperiam nihil facere obcaecati? Nisi voluptatibus tempore, cupiditate
101 |             repudiandae accusamus quidem? Voluptatibus optio nesciunt expedita ipsum aut commodi
102 |             numquam ipsam aliquam sit ullam recusandae sint, inventore earum quas eligendi
103 |             praesentium, rem temporibus voluptas porro? Animi culpa perferendis quas. Impedit, ullam
104 |             placeat! Dolores commodi consectetur quo, laborum necessitatibus repudiandae sint nihil
105 |             temporibus, aliquam ad assumenda provident quos. Harum sunt accusantium dolores
106 |             consectetur commodi, ex velit esse tempore eaque at? Quaerat, commodi provident.
107 |           </p>
108 |         </article>
109 |       </section>
110 |     </main> -->
111 |     <div class="container">
112 |       <!-- <div> -->
113 |       <div class="box box-1">Box 1</div>
114 |       <div class="box box-1-2">Box 1-2</div>
115 |       <!-- </div> -->
116 |     </div>
117 |     <div class="box box-2">Box 2</div>
118 |     <div class="box box-3">Box 3</div>
119 |     <!-- <a href="#" class="link">SOY UN ENLACE</a> -->
120 |     <!-- <a href="#" class="link-2">SOY UN ENLACE</a> -->
121 |   </body>
122 | </html>
123 | 


--------------------------------------------------------------------------------
/19 - Stacking context/css/styles-dist.css:
--------------------------------------------------------------------------------
1 | .box{width:100px;height:100px;text-align:center;color:#333}.box-1{background-color:lightcoral;position:relative;z-index:1}.box-2{background-color:lightgreen;margin-top:-50px}.box-3{background-color:lightseagreen}.container{background-color:mediumslateblue;margin-top:-50px;position:relative}.title{margin:0;background-color:#ccc;position:relative;z-index:10;opacity:0.75}.text{margin:0;margin-top:-40px}


--------------------------------------------------------------------------------
/19 - Stacking context/css/styles.css:
--------------------------------------------------------------------------------
 1 | /* 
 2 |   El stacking context o el contexto de apilamiento es el espacio donde nuestros elementos se van a ir apilando para que unos queden por detrás y otros por delante.
 3 | 
 4 |   El orden del stacking context es: (de delante a atrás):
 5 |     Elementos posicionados con un z-index de 1 ó más
 6 |     Elementos posicionados sin z-index declarado (o z-index:auto)
 7 |     Elementos no posicionados
 8 |     Elementos con z-index negativo
 9 | */
10 | 
11 | .box {
12 |   width: 100px;
13 |   height: 100px;
14 |   text-align: center;
15 |   color: #333;
16 | }
17 | 
18 | .box-1 {
19 |   background-color: lightcoral;
20 |   position: relative;
21 |   z-index: 1;
22 | }
23 | 
24 | .box-2 {
25 |   background-color: lightgreen;
26 |   margin-top: -50px;
27 | }
28 | 
29 | .box-3 {
30 |   background-color: lightseagreen;
31 | }
32 | 
33 | .container {
34 |   background-color: mediumslateblue;
35 |   margin-top: -50px;
36 |   position: relative;
37 | }
38 | 
39 | .title {
40 |   margin: 0;
41 |   background-color: #ccc;
42 |   position: relative;
43 |   z-index: 10;
44 |   opacity: 0.75;
45 | }
46 | 
47 | .text {
48 |   margin: 0;
49 |   margin-top: -40px;
50 | }
51 | 


--------------------------------------------------------------------------------
/19 - Stacking context/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Stacking context</title>
 8 |     <link rel="stylesheet" href="css/styles-dist.css" />
 9 |   </head>
10 |   <body>
11 |     <div class="box box-1">Box 1</div>
12 |     <div class="container">
13 |       <h1 class="title">Apilamiento</h1>
14 |       <p class="text">
15 |         Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem debitis dolore at odio
16 |         numquam sequi explicabo, quas nobis voluptas, quasi saepe, id unde eius libero ipsa
17 |         accusamus asperiores maiores animi!
18 |       </p>
19 |     </div>
20 |     <div class="box box-2">Box 2</div>
21 |     <div class="box box-3">Box 3</div>
22 |   </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/20 - Ordenar las propiedades/css/styles-dist.css:
--------------------------------------------------------------------------------
1 | .box{width:100px;height:100px;text-align:center;color:#333}.box-1{background-color:lightcoral;position:relative;z-index:1}.box-2{background-color:lightgreen;margin-top:-50px}.box-3{background-color:lightseagreen}.container{background-color:mediumslateblue;margin-top:-50px;position:relative}.title{margin:0;background-color:#ccc;position:relative;z-index:10;opacity:0.75}.text{margin:0;margin-top:-40px}


--------------------------------------------------------------------------------
/20 - Ordenar las propiedades/css/styles.css:
--------------------------------------------------------------------------------
 1 | /* 
 2 |   Ordenar las propiedades es importante, no existe ninguna norma ni especificación sobre como hacerlo, pero la mayoría de expertos coinciden en los mismos puntos.
 3 | 
 4 |   1 - Propiedades de posicionamiento
 5 |   2 - Propiedades del box model
 6 |   3 - Propiedades de texto
 7 |   4 - Propiedades visuales (colores, bordes, background...)
 8 |   5 - El resto
 9 | */
10 | 
11 | body {
12 |   /* Position */
13 |   position: relative;
14 |   top: 0;
15 |   left: 0;
16 | 
17 |   /* Box model */
18 |   display: block;
19 |   width: 300px;
20 |   height: 600px;
21 |   padding: 10px;
22 |   margin: 10px;
23 |   overflow: hidden;
24 | 
25 |   /* Text */
26 |   font-size: 16px;
27 |   text-align: center;
28 | 
29 |   /* Visual */
30 |   color: blue;
31 |   border: 2px solid red;
32 |   border-radius: 10px;
33 | 
34 |   /* Varios */
35 |   opacity: 1;
36 | }
37 | 


--------------------------------------------------------------------------------
/20 - Ordenar las propiedades/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Stacking context</title>
 8 |     <link rel="stylesheet" href="css/styles-dist.css" />
 9 |   </head>
10 |   <body>
11 |     <div class="box box-1">Box 1</div>
12 |     <div class="container">
13 |       <h1 class="title">Apilamiento</h1>
14 |       <p class="text">
15 |         Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem debitis dolore at odio
16 |         numquam sequi explicabo, quas nobis voluptas, quasi saepe, id unde eius libero ipsa
17 |         accusamus asperiores maiores animi!
18 |       </p>
19 |     </div>
20 |     <div class="box box-2">Box 2</div>
21 |     <div class="box box-3">Box 3</div>
22 |   </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/21 - Medidas tip/css/styles.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |   position: relative;
 7 |   margin: 0;
 8 |   min-height: 100vh;
 9 |   color: lightsalmon;
10 |   background-color: #333;
11 |   border: 4px solid red;
12 | }
13 | 
14 | .footer {
15 |   position: absolute;
16 |   bottom: 0;
17 |   width: 100%;
18 |   padding: 1rem 0;
19 |   color: white;
20 |   text-align: center;
21 |   background-color: lightseagreen;
22 | }
23 | 


--------------------------------------------------------------------------------
/21 - Medidas tip/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <link rel="stylesheet" href="css/styles.css" />
 8 |     <title>Medidas</title>
 9 |   </head>
10 |   <body>
11 |     <h1 class="title">Min and max width & height</h1>
12 |     <p>
13 |       Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et sapiente, neque cupiditate dolor
14 |       deserunt facere rerum non nemo perferendis illo corrupti iste obcaecati veniam numquam
15 |       deleniti consectetur pariatur nostrum omnis!
16 |     </p>
17 |     <p>
18 |       Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et sapiente, neque cupiditate dolor
19 |       deserunt facere rerum non nemo perferendis illo corrupti iste obcaecati veniam numquam
20 |       deleniti consectetur pariatur nostrum omnis!
21 |     </p>
22 |     <p>
23 |       Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et sapiente, neque cupiditate dolor
24 |       deserunt facere rerum non nemo perferendis illo corrupti iste obcaecati veniam numquam
25 |       deleniti consectetur pariatur nostrum omnis!
26 |     </p>
27 |     <p>
28 |       Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et sapiente, neque cupiditate dolor
29 |       deserunt facere rerum non nemo perferendis illo corrupti iste obcaecati veniam numquam
30 |       deleniti consectetur pariatur nostrum omnis!
31 |     </p>
32 |     <footer class="footer">FOOTER</footer>
33 |   </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/21 - Medidas/css/styles.css:
--------------------------------------------------------------------------------
  1 | /* 
  2 |   Las medidas en CSS se pueden agrupar en 2 grupos, absolutas y relativas.
  3 | 
  4 |   Las medidas absolutas NO CAMBIAN y siempre mantendrán su tamaño independientemente del dispositivo o la interacción del usuario.
  5 |   La más usada es px (píxeles) cuya medida es 1/96 de 1in, pero existen otras como:
  6 |       cm(centímetros) -> 1cm = 96px/2,54
  7 |       mm(milímetros) -> 1mm = 1/10 de 1cm
  8 |       Q(cuarto de de milímetro) -> 1Q = 1/40 de 1cm
  9 |       in(inches, pulgadas) -> 1in = 2,54cm = 96px
 10 |       pc(picas) -> 1pc = 1/16 de 1in
 11 |       pt(puntos) -> 1pt = 1/72 de 1in
 12 | 
 13 |   Las medidas relativas SIEMPRE dependen de un contexto son las que se recomienda utilizar en la gran mayoría de ocasiones porque nos van a permitir que todos los elementos escalen proporcionalemnte.
 14 |   Las más usadas son em, rem, %, vw, vh, vmin y vmax aunque tenemos otras como:
 15 |       ex -> Altura x de la fuente del elemento.
 16 |       ch -> La medida del ancho del glifo "0" de la letra del elemento.
 17 |       lh -> Altura de la línea del elemento.
 18 | 
 19 |     rem -> Corresponde a la medida de la "m" de la raiz del documento (html).
 20 | 
 21 |     ejemplo: 16px = 1rem
 22 |     
 23 |     em -> Corresponde a la medida de la "m" del contexto donde nos encontremos.
 24 | 
 25 |     El estandar del tamaño de fuente por defecto en la raiz del documento es 16px, y NO ES RECOMENDABLE MODIFICARLO.
 26 | 
 27 |     NOTA: Tanto "em" como "rem" se calcula en base a la propiedad font-size (tamaño de fuente)
 28 | 
 29 |   WIDTH:
 30 |     % -> Cuando usamos porcentaje usamos de referencia el tamaño del contenedor y el navegador calcula ese porcentaje. Esto no ocurre cuando usamos transform.
 31 | 
 32 |     auto -> Cuando usamos auto le pedimos al navegador que calcule el ancho en función del espacio disponible.
 33 | 
 34 |   HEIGHT:
 35 |     % -> Cuando estamos dentro de un contenedor, este tiene que tener un alto declarado, si no no podrá calcular el porcentaje. Si se le aplica una medida con porcentaje se sustituirá automaticamente por auto.
 36 | 
 37 |     auto -> Cuando utilizamos auto el alto lo calculará el navegador en base al contenido del elemento
 38 | 
 39 |   NOTA: Height es una propiedad que tenéis que usar con mucho cuidado. Si no es necesario establecer un alto, dejad que el contenido sea el que decida el alto del elemento.
 40 | 
 41 |   VIEWPORT
 42 |     El viewport es el área útil donde se mostrará la página web. IMPORTANTE, tened en cuenta que es el area visible sin hacer scroll.
 43 |     Podemos usar el viewport como medida de varias formas:
 44 |       vw-> Viewport Width, hace referencia al ancho del viewport. 
 45 |       vh -> Viewport Height, hace referencia al alto del viewport.
 46 |       vmax -> Utiliza el valor más grande entre el ancho y el alto del viewport.
 47 |       vmin -> Utiliza el valor más pequeño entre el ancho y el alto del viewport.
 48 | 
 49 |       1vw = 1% del ancho del viewport
 50 |       1vh = 1% del alto del viewport
 51 |       1vmin = 1% del valor que sea más pequeño del viewport
 52 |       1vmax = 1% del valor que sea más grande del viewport
 53 | 
 54 |   Limitadores al ancho y alto
 55 |     Cuando establecemos un width y/o un height con una medida que es relativa, es posible que no queramos que se respete esa medida en todos los casos.
 56 |     Para ello tenemos propiedades que limitan esas medidas:
 57 |       min-width: Indica el ancho minimo que puede alcanzar el elemento.
 58 |       max-width: Indica el ancho máximo que puede alcanzar el elemento.
 59 |       min-height: Indica el alto minimo que puede alcanzar el elemento.
 60 |       max-height: Indica el alto máximo que puede alcanzar el elemento.
 61 | */
 62 | 
 63 | html {
 64 |   height: 300px;
 65 | }
 66 | 
 67 | body {
 68 |   margin: 0;
 69 |   background-color: #333;
 70 |   color: lightcoral;
 71 |   /* height: 500px; */
 72 | }
 73 | 
 74 | /* .header {
 75 |   background-color: lightskyblue;
 76 |   text-align: center;
 77 | } */
 78 | 
 79 | .box {
 80 |   width: 100%;
 81 |   /* max-width: 600px;
 82 |   min-width: 300px; */
 83 |   height: 60vw;
 84 |   /* max-height: 300px;
 85 |   min-height: 100px; */
 86 |   /* padding-bottom: 30px; */
 87 |   background-color: lightgreen;
 88 | }
 89 | 
 90 | /* .box-children {
 91 |   position: sticky;
 92 |   top: 0;
 93 |   width: 50%;
 94 |    width: 50vw;
 95 |   width: 30vmax;
 96 |   height: 150px;
 97 |   background-color: lightseagreen;
 98 | } */
 99 | 
100 | /* .title {
101 |   font-size: 3rem;
102 | } */
103 | 
104 | /* .link {
105 |   background-color: lightcoral;
106 |   color: #333;
107 |   padding: 1em 2em;
108 |   border-radius: 0.5em;
109 |   font-size: 2rem;
110 | } */
111 | 


--------------------------------------------------------------------------------
/21 - Medidas/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <link rel="stylesheet" href="css/styles.css" />
 8 |     <title>Medidas</title>
 9 |   </head>
10 |   <body>
11 |     <header class="header">Header</header>
12 |     <h1 class="title">Min and max width & height</h1>
13 |     <!-- <a href="#" class="link">Soy un botón</a> -->
14 |     <div class="box">
15 |       <div class="box-children"></div>
16 |     </div>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/22 -  Colores/android.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="2232" height="2500" viewBox="32.163 68.509 203.691 228.155"><path d="M101.885 207.092c7.865 0 14.241 6.376 14.241 14.241v61.09c0 7.865-6.376 14.24-14.241 14.24-7.864 0-14.24-6.375-14.24-14.24v-61.09c0-7.864 6.376-14.24 14.24-14.24z" fill="#a4c639"/><path d="M69.374 133.645c-.047.54-.088 1.086-.088 1.638v92.557c0 9.954 7.879 17.973 17.66 17.973h94.124c9.782 0 17.661-8.02 17.661-17.973v-92.557c0-.552-.02-1.1-.066-1.638H69.374z" fill="#a4c639"/><path d="M166.133 207.092c7.865 0 14.241 6.376 14.241 14.241v61.09c0 7.865-6.376 14.24-14.241 14.24-7.864 0-14.24-6.375-14.24-14.24v-61.09c0-7.864 6.376-14.24 14.24-14.24zM46.405 141.882c7.864 0 14.24 6.376 14.24 14.241v61.09c0 7.865-6.376 14.241-14.24 14.241-7.865 0-14.241-6.376-14.241-14.24v-61.09c-.001-7.865 6.375-14.242 14.241-14.242zM221.614 141.882c7.864 0 14.24 6.376 14.24 14.241v61.09c0 7.865-6.376 14.241-14.24 14.241-7.865 0-14.241-6.376-14.241-14.24v-61.09c0-7.865 6.376-14.242 14.241-14.242zM69.79 127.565c.396-28.43 25.21-51.74 57.062-54.812h14.312c31.854 3.073 56.666 26.384 57.062 54.812H69.79z" fill="#a4c639"/><path d="M74.743 70.009l15.022 26.02M193.276 70.009l-15.023 26.02" fill="none" stroke="#a4c639" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M114.878 102.087c.012 3.974-3.277 7.205-7.347 7.216-4.068.01-7.376-3.202-7.388-7.176v-.04c-.011-3.975 3.278-7.205 7.347-7.216 4.068-.011 7.376 3.2 7.388 7.176v.04zM169.874 102.087c.012 3.974-3.277 7.205-7.347 7.216-4.068.01-7.376-3.202-7.388-7.176v-.04c-.011-3.975 3.278-7.205 7.347-7.216 4.068-.011 7.376 3.2 7.388 7.176v.04z" fill="#fff"/></svg>


--------------------------------------------------------------------------------
/22 -  Colores/css/styles.css:
--------------------------------------------------------------------------------
  1 | /* 
  2 |   Colores
  3 |    La mayoría las pantallas funcionan con un modo de color aditivo. La suma de RGB da como resultado un blanco
  4 |    Tenemos varias formas de dar color en CSS
  5 | 
  6 |     Keywords -> Palabras clave que representan colores https://www.w3.org/wiki/CSS/Properties/color/keywords
  7 |     
  8 |     IMPORTANTE: Recordad que existe el color "transparent"
  9 | 
 10 |   CurrentColor: Es una palabra clave que se puede usar en lugar de cualquier valor de color y usará el valor ya sea establecido o heredado en la propiedad color.
 11 | 
 12 |   RGB/RGBA
 13 |     En el modo RGB tenemos tres canales (Red, Green, Blue) y tenemos 8 bits de color por canal, (cada bit tiene dos posibles valores 0 ó 1) lo que significa que tenemos 2^8 posibles valores, que van desde 0 hasta 255.
 14 |     
 15 |     Esto nos da un total de 255 * 255 * 255 = 16.581.375 colores.
 16 | 
 17 |     Su sintaxis es rgb(R,G,B)
 18 | 
 19 |     Si ponemos todos los canales a 0 tendremos un negro puro y si los ponemos a 255 tendremos un blanco.
 20 | 
 21 |     Para movermos por la gama de grises debemos poner los 3 canales con el mismo valor, si ponemos los 3 canales a 128 tendremos el gris puro.
 22 | 
 23 |     El modo RGB nos da la opción de utilizar un cuarto canal que correspondería al canal alpha, es decir, la transparencia, y su valor va desde 0 a 1. Tenemos dos sintaxis para utilizar el canal aplha
 24 |       rgba(R,G,B,A)
 25 |       rgb(R G B / A)
 26 | 
 27 |   Hexadecimal
 28 |     La notación hexadecimal es la más común en desarrollo web, se basa en los mismos principios que el RGB pero escrito en notación hexadecimal.
 29 | 
 30 |     El sistema hexadecimal es un sistema basado en 16 valores del 0 al 15
 31 |     Utiliza los dígitos del 0 al 9 y las letras de la A a la F
 32 |     
 33 |     En este tipo de notacíon también necesitamos 256 valores.
 34 | 
 35 |     Se compone de 16 caracteres en parejas ya que 16*16 = 256
 36 |     0 1 2 3 4 5 6 7 8 9 A B C D E F
 37 |     0 1 2 3 4 5 6 7 8 9 A B C D E F
 38 | 
 39 |     Para indicar que vamos a usar notación hexadecimal debemos usar el símbolo de hash/almohadilla # y a continuación usaremos esta notación por parejas.
 40 |     #RRGGBB
 41 |     Cuando una pareja usa el mismo valor se puede omitir el segundo valor, siempre que se haga en las 3 parejas.
 42 | 
 43 |     rgb(255,255,255) -> #FFFFFF -> #FFF
 44 |     rgb(0,0,0) -> #000000 -> #000
 45 | 
 46 |     También tenemos la opción de usar transparencias en hexadecimal añadiendo un cuarto canal que sigue las mismas normas.
 47 | 
 48 |     rgb(0 0 0 / .5) -> #00000080 ~> #0007
 49 | 
 50 |   HSL / HSLA
 51 |     El modo de color HSL es el más intuitivo para los humanos. Su nombre viene de las siglas Hue (tono) Saturation (saturación) y Lightness (luminancia)
 52 |     
 53 |     El primer valor es el ángulo en el círculo cromático donde 0 y 360 será el color rojo. Hay ciertos valores que os pueden servir como referencia para relacionar mejor los colores con sus ángulos.
 54 |       0 -> rojo
 55 |       60 -> amarillo
 56 |       120 -> verde
 57 |       180 -> cyan
 58 |       240 -> azul
 59 |       300 -> magenta
 60 | 
 61 |     El segundo valor es la saturación o intensidad del color.
 62 |       0% -> gris
 63 |       100% -> color puro
 64 | 
 65 |     El tercer valor es la luminosidad del color
 66 |       0% -> negro, nada de luz
 67 |       100% -> blanco, luz máxima
 68 | 
 69 |     Nota: Es importante que aunque el valor de saturación o luminancia sea 0 hay que poner 0% si no, no funcionará
 70 | 
 71 |     El modo HSL también admite transparencia y su sintaxis es la misma que la del modo RGB. Tenemos dos sintaxis disponible.
 72 |       hsla(h,s,l,a)
 73 |       hsl(h s l / a)
 74 |     En ambos casos el valor alpha va de 0 a 1
 75 | 
 76 |   Existen otros cuatro modos de color en los que está trabajando que serían CMYK (Cyan, Magenta, Yellow y Black), HWB (Hue, Whiteness, Blackness), lab(Lightness, distance a, distance b) y lch(Lightness, chroma, hue), todos están en el borrador del modulo de color de nivel 4 pero aún no es estándar.
 77 | 
 78 | */
 79 | body {
 80 |   background-color: mediumorchid;
 81 |   /* background-color: hsla(60 100% 50% / 0.5); */
 82 | }
 83 | 
 84 | .main {
 85 |   /* color: aquamarine; */
 86 |   /* background-color: currentColor; */
 87 | }
 88 | 
 89 | .box {
 90 |   /* border-top: 500px solid red;
 91 |   border-left: 250px solid transparent;
 92 |   border-right: 250px solid transparent; */
 93 |   width: 200px;
 94 |   height: 200px;
 95 |   background-color: lightcoral;
 96 |   /* background-color: rgba(0, 0, 0, 0.1); */
 97 |   /* background-color: rgb(0 0 0 / 0.3); */
 98 |   box-shadow: 5px 5px 10px rgb(0 0 0 / 0.5);
 99 |   box-shadow: 5px 5px 10px #0004;
100 |   box-shadow: 5px 5px 10px hsl(180 50% 50%);
101 | }
102 | 


--------------------------------------------------------------------------------
/22 -  Colores/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <link rel="stylesheet" href="css/styles.css" />
 8 |     <title>Colores</title>
 9 |   </head>
10 |   <body>
11 |     <div class="main">
12 |       <div class="box"></div>
13 |     </div>
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/23 - Fuentes/assets/fonts/GreatVibes-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DorianDesings/Curso-css-basico-2021/0e1ba417bb508cdf4240f92a7657924b5d7590d6/23 - Fuentes/assets/fonts/GreatVibes-Regular.ttf


--------------------------------------------------------------------------------
/23 - Fuentes/assets/icons/home.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="lime"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 5.69l5 4.5V18h-2v-6H9v6H7v-7.81l5-4.5M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z"/></svg>


--------------------------------------------------------------------------------
/23 - Fuentes/css/styles.css:
--------------------------------------------------------------------------------
  1 | /* 
  2 |   La tipografía es la ciencia que estudia el diseño y uso de los tipos de letra
  3 | 
  4 |   Las fuentes son tipos específicos de letra
  5 | 
  6 |   Los glifos son cada uno de los dibujos que representan cada símbolo de la fuente, incluidos los espacios.
  7 | 
  8 |   Los estilos de fuente son las modificaciones que se hacen a las fuentes, como el grosor o la inclinación.
  9 | 
 10 |   Familia tipográfica, son las diferentes fuentes que pertenecen a una misma fuente base.
 11 | 
 12 |   Cuando usamos una propiedad text-* estamos afectando a un bloque completo
 13 | 
 14 |   Cuando utilizamos una propiedad font-* afectamos a la fuente del texto.
 15 | 
 16 |   Fuentes predeterminadas, son las fuentes que se consideran seguras ya que son genéricas y no establecen una familia tipográfica, si no un estilo de fuente.
 17 |     serif: Fuentes que tienen serifas (adornos en los caracteres)
 18 | 
 19 |     sans-serif: Fuentes sin serifas
 20 | 
 21 |     monospace: Fuentes que tienen el mismo espaciado entre todos sus caracteres.
 22 | 
 23 |     cursive: Fuentes que pretenden emular escritura a mano, con ligaduras y trazos fluidos
 24 | 
 25 |     fantasy: Fuentes que suelen ser decorativas
 26 | 
 27 |   Fuentes desde un servidor remoto, son fuentes que se encuentran en un servidor y que nosotros descargamos para su uso, la más famosa es Google Fonts
 28 | 
 29 |   Siempre que utilicemos fuentes no genéricas, debemos poner fuentes genéricas de fallback (respaldo)
 30 |     
 31 |   Google Icons
 32 |     Material Icons
 33 |        https://fonts.googleapis.com/css?family=Material+Icons
 34 |     Material Icons Outlined
 35 |        https://fonts.googleapis.com/css?family=Material+Icons+Outlined
 36 |     Material Icons Two Tone
 37 |        https://fonts.googleapis.com/css?family=Material+Icons+Two+Tone
 38 |     Material Icons Rounded
 39 |        https://fonts.googleapis.com/css?family=Material+Icons+Round
 40 |     Material Icons Sharp
 41 |        https://fonts.googleapis.com/css?family=Material+Icons+Sharp
 42 |       
 43 |     Nota: Si vas a usar una gran cantidad de iconos en tu web compensa usar la librería remota
 44 |     Si sólo usarás unos pocos es mejor descargarlos en formato svg y utilizarlos como imágenes
 45 | 
 46 |    Formatos para fuentes
 47 |       True Type Font (TTF) -> Fue el primer formato estándar.
 48 | 
 49 |       Open True Type Font (OTF) -> Facilita o implementa la creación de las curvas.
 50 | 
 51 |       Web Open Font Format (WOFF) (WOFF2) -> Es un formato mucho más ligero y mejora el rendimiento. Funciona a través de metadatos. WOFF tiene soporte total y WOFF2 no funciona en internet explorer.
 52 | 
 53 |       Scalable Vector Graphics (SVG) -> Para efectos y animaciones sobre el texto, no es recomendable usarlo en el texto genérico de la web, tiene muchos problemas.
 54 | 
 55 |       Embedded Open Type (EOT) -> Primer formato digital propuesto para sitios WEB y es comprimido. Se quedó como una propuesta pero no pasó a ser un estándar.
 56 | 
 57 |    Regla @font-face
 58 |       Esta es la forma de utilizar fuentes que tenemos descargadas y que no traemos de un servidor remoto, cuando usamos google fonts, esto es lo que está pasando por detrás.
 59 | 
 60 |       La sintaxis es:
 61 |          @font-face {
 62 |             font-family: Nombre de la familia, se lo asignamos nosotros;
 63 |             src: aquí pondremos dos tipos de valores.
 64 |                local() -> pondremos el nombre de la fuente para buscarla en el ordenador del usuario, de esa forma podremos evitar descargarla
 65 |                url() -> Si no encontramos esa fuente procederemos a descargarla.
 66 |                Existe otro valor, menos usado que es format
 67 |                format() -> Este valor lo pasaremos de forma opcional si queremos ser más específicos con la fuente que vamos a buscar o descargar, si no lo ponemos cogerá el primer formato soportado, si lo ponemos sólo usará el que hemos establecido, y si no lo encuentra no hará nada. 
 68 |          }
 69 | 
 70 |          Podemos añadirle más valores como font-style, font-weight y font-display(experimental), pero esos son opcionales.
 71 | 
 72 |    Transformaciones de texto
 73 |       Text-transform: Esta propiedad nos permite hacer transformaciones ESTÉTICAS en nuestro texto.
 74 |       Admite los valores:
 75 |          none: No se aplicará ninguna transformación.
 76 |          uppercase: El texto se pondrá en mayúsculas
 77 |          lowercase: El texto se pondrá en minúsculas
 78 |          capitalize: Transforma la primera letra de cada palabra en mayúscula.
 79 |    Adornos en el texto
 80 |       Text-decoration: Esta propiedad nos permite controlar la línea que podemos poner en los textos.
 81 |       Admite los valores:
 82 |          none: Elimina cualquier línea.
 83 |          underline: Coloca una linea bajo el texto.
 84 |          overline: Coloca una linea sobre el texto.
 85 |          line-through: Coloca una linea tachando el texto.
 86 | 
 87 |       Text-shadow: Funciona exáctamente igual que box-shadow, con la única diferencia de que no admite el valor inset ni la expansión de la sombra.
 88 |       Los valores son: 
 89 |          offsetX: desplazamiento horizontal.
 90 |          offsetY: desplazamiento vertical
 91 |          blur: desenfoque.
 92 |          color: color, por defecto coge el del texto.
 93 |    
 94 |    Espaciado en fuentes y textos
 95 |     letter-spacing: Establece la separación entre caracteres, se puede establecer en cualquier medida válida para CSS
 96 | 
 97 |     word-spacing: Establece la separación entre palabras,
 98 |     se puede establecer en cualquier medida válida para CSS
 99 | 
100 |     line-height: Establece el alto de cada línea, se puede dar una medida concreta o se puede poner un número que se multipliará por el font size del texto al que se lo estemos aplicando.
101 | 
102 |    Orientación del texto.
103 |    writing-mode: Establece la dirección del texto
104 | 
105 | */
106 | 
107 | @font-face {
108 |   font-family: "Mano alzada";
109 |   src: local("Great Vibes"), url("../assets/fonts/GreatVibes-Regular.ttf");
110 | }
111 | 
112 | body {
113 |   background-color: #333;
114 |   color: aliceblue;
115 |   font-family: sans-serif;
116 | }
117 | 
118 | .text {
119 |   text-transform: uppercase;
120 |   /* writing-mode: vertical-rl; */
121 |   word-break: break-all;
122 |   width: 10px;
123 |   text-align: center;
124 | }
125 | 
126 | .word-container {
127 |   background-color: lightcoral;
128 |   height: 100px;
129 |   text-align: center;
130 | }
131 | 
132 | .word {
133 |   line-height: 100px;
134 | }
135 | 


--------------------------------------------------------------------------------
/23 - Fuentes/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <link rel="stylesheet" href="css/styles.css" />
 8 |     <title>Google Icons</title>
 9 |   </head>
10 |   <body>
11 |     <!-- <span class="material-icons-outlined icon"> home </span> -->
12 |     <img src="assets/icons/home.svg" class="icon" alt="" />
13 |     <p class="text">Lorem ipsum dolor sit amet.</p>
14 |     <!-- <div class="word-container">
15 |       <span class="word">DORIAN DESINGS</span>
16 |     </div> -->
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/4 - Conectar html y css/css/styles.css:
--------------------------------------------------------------------------------
1 | body{
2 |     background-color: teal;
3 | }


--------------------------------------------------------------------------------
/4 - Conectar html y css/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <link rel="stylesheet" href="css/styles.css">
 9 |     <title>Document</title>
10 | 
11 |     <style>
12 |         /* body {
13 |             background-color: slateblue;
14 |         } */
15 |         /* @import url(css/styles.css); */
16 | 
17 |     </style>
18 | </head>
19 | 
20 | <body>
21 |     <h1 style="background-color: springgreen;">Conectar HTML y CSS</h1>
22 |     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit dolore quasi aspernatur maxime
23 |         consequatur, distinctio nam error ipsa, eos quos dolorum temporibus voluptas quibusdam quae molestias, vitae
24 |         obcaecati ab cupiditate?</p>
25 | </body>
26 | 
27 | </html>
28 | 


--------------------------------------------------------------------------------
/5 - Sintaxis de css/styles.css:
--------------------------------------------------------------------------------
 1 | /* 
 2 | * Selector: El elemento al que vamos a aplicar estilos
 3 | * Propiedad: Lo que vamos a cambiar
 4 | * Valor: El nuevo valor que le vamos a dar a la propiedad
 5 | * Propiedad:Valor -> Se le denomina declaración
 6 | * Al conjunto de selector+declaracion(es) se le denomina regla
 7 | */
 8 | 
 9 | /* selector{
10 |     propiedad:valor;
11 |     propiedad2:valor;
12 |     propiedadN:valor;
13 | } */


--------------------------------------------------------------------------------
/6 - Selectores/css/styles.css:
--------------------------------------------------------------------------------
  1 | /* SELECTORES */
  2 | 
  3 | /* 
  4 |     Selectores Simples
  5 |         Selectores elementales
  6 |             Selector Universal -> *
  7 |             Selector de tipo o etiqueta -> Nombre de la etiqueta
  8 |         Selectores de atributo
  9 |             id -> id del elemento
 10 |             clase -> clase del elemento
 11 |             otros atributos
 12 |                 [atributo]->Selecciona los elementos con ese atributo
 13 |                 [atributo=valor]->Selecciona los elementos que coincidan con el atributo=valor
 14 |                 [atributo^=valor]-> Selecciona los elementos cuyo atributo comience con valor
 15 |                 [atributo*=valor]-> Selecciona los elementos cuyo atributo contenga valor
 16 |                 [atributo$=valor]-> Selecciona los elementos cuyo atributo termine con valor
 17 |                 [atributo|=valor]-> Selecciona los elementos cuyo atributo comience con valor o valor-
 18 |                 
 19 |     Selectores Compuestos
 20 |         Selectores Agrupados -> Se agrupan los selectores separados por comas y se escribe el estilo una sola vez 
 21 |         Selectores Combinadores
 22 |             Selector descendente -> Selecciona un elemento dentro de otro
 23 |             Selector de hermano siguiente + -> Selecciona al hermano siguiente adyacente 
 24 |             Selector de hermanos siguientes ~ -> Selecciona  a todos los hermanos siguientes
 25 |             Selector de hijo directo > -> Selecciona SOLO los hijos directos
 26 | */
 27 | 
 28 | .container > p{
 29 |     background-color: tomato;
 30 | }
 31 | 
 32 | .text-2 + h2{
 33 |     background-color: tomato;
 34 | }
 35 | 
 36 | .text-2 ~ .text{
 37 |     background-color: teal;
 38 | } 
 39 | 
 40 | /* .text,
 41 | .text-2,
 42 | .text-3,
 43 | .text-4{
 44 |     background-color: steelblue;
 45 | } */
 46 | 
 47 | /* *{
 48 |     background-color: lightcoral;
 49 | }
 50 | 
 51 | h1{
 52 |     background-color: lightcyan;
 53 | }
 54 | 
 55 | p{
 56 |     background-color: lightgreen;
 57 | }
 58 | 
 59 | ul{
 60 |     background-color: red;
 61 | }
 62 | 
 63 | li{
 64 |     background-color: blue;
 65 | } */
 66 | 
 67 | /* #title{
 68 |     background-color: lightgreen;
 69 | }
 70 | 
 71 | .title{
 72 |     background-color: lightsalmon;
 73 | }
 74 | 
 75 | .text{
 76 |     background-color: limegreen;
 77 | } */
 78 |  
 79 | /*[href]{
 80 |     background-color: mediumorchid;
 81 | }
 82 | 
 83 | [href="https://google.com"]{
 84 |     background-color: orangered;
 85 | }
 86 | 
 87 | [href^="color"]{
 88 |     background-color: red;
 89 | }
 90 | 
 91 | [href*="modo"]{
 92 |     background-color: green;
 93 | }
 94 | 
 95 | [href$="azul"]{
 96 |     background-color: steelblue;
 97 | }
 98 | 
 99 | [lang|="en"]{
100 |     background-color: magenta;
101 | } */
102 | 
103 | 


--------------------------------------------------------------------------------
/6 - Selectores/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <link rel="stylesheet" href="css/styles.css" />
 8 |     <title>Selectores</title>
 9 |   </head>
10 | 
11 |   <body>
12 |     <h1 class="title">Selectores CSS</h1>
13 |     <p class="subtitle">Subtítulo</p>
14 |     <p class="text">
15 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad maxime autem unde tempore. Fuga
16 |       temporibus laboriosam similique, sit nam, molestias perspiciatis dolor soluta repudiandae
17 |       dolorem nobis ipsa, amet alias laborum.
18 |     </p>
19 |     <h2 class="title-2">Título secundario</h2>
20 |     <div class="container">
21 |       <p class="text-2">
22 |         Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, necessitatibus nulla.
23 |         Atque nostrum illum enim placeat eius ad, nisi sequi obcaecati aliquam necessitatibus.
24 |         Veniam dolores similique consequatur expedita ut a.
25 |       </p>
26 |       <h2 class="title-2">Título secundario</h2>
27 |       <div>
28 |         <p class="text">
29 |           Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officiis velit iusto atque
30 |           voluptate quidem reprehenderit, quo rerum quibusdam quod aperiam repellat ab totam rem
31 |           eius quae possimus deserunt eligendi!
32 |         </p>
33 |       </div>
34 |       <h2 class="title-2">Título secundario</h2>
35 |       <p class="text">
36 |         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo necessitatibus ex voluptate,
37 |         commodi ea deleniti suscipit temporibus minus sint culpa consequuntur voluptatum. Pariatur
38 |         nostrum explicabo similique doloribus magni illum unde.
39 |       </p>
40 |     </div>
41 |     <!-- <p class="text">
42 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium vel nesciunt esse?
43 |       Voluptate qui, quas quam sed labore consequatur deleniti quidem repellendus officiis dolore
44 |       quibusdam nesciunt vero necessitatibus maiores! Quasi.
45 |     </p>
46 |     <p class="text">
47 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid ut corporis repellat,
48 |       laboriosam, laudantium at dolor cum pariatur cupiditate itaque error debitis accusamus vel
49 |       maxime nulla perspiciatis dolorem praesentium porro!
50 |     </p>
51 |     <a href="https://google.com">Enlace a google</a>
52 |     <a href="color-modo-random">Color random</a>
53 |     <a href="#seccion-verde">Color verde</a>
54 |     <a href="color-azul">Color azul</a>
55 |     <p lang="en">
56 |       Lorem, ipsum dolor sit amet consectetur adipisicing elit. Soluta perspiciatis magnam doloribus
57 |       tempora. Eum est magnam culpa, distinctio, eos at qui quibusdam possimus quasi dignissimos hic
58 |       soluta nostrum fuga? Assumenda!
59 |     </p> -->
60 |   </body>
61 | </html>
62 | 


--------------------------------------------------------------------------------
/7 - Como funciona css/css/styles.css:
--------------------------------------------------------------------------------
 1 | /* ¿CÓMO FUNCIONA CSS?
 2 |     Especificidad -> Establece cómo de específico es un selector para saber qué estilo aplicar.
 3 |     El cálculo se realiza con la siguiente fórmula:
 4 |         Etiquetas y pseudoelementos 001
 5 |         Clases, atributos y pseudoclases 010
 6 |         Ids 100
 7 |         Estilos en línea 1000
 8 |         !important GANA A TODO Y NO SE USA NUNCA
 9 | 
10 |    Cascada -> Funciona siempre que la especificidad sobre el elemento sea la misma
11 |    
12 |    Herencia -> Es la capacidad que tienen algunos elementos de heredar algunas propiedades de sus elementos contenedores (padres, abuelos, etc)
13 | */
14 | 
15 | body{
16 |     background-color: #333;
17 | }
18 | 
19 | h1{
20 |     color:cyan;
21 |     font-size: 10px;
22 | }
23 | 
24 | .text{
25 |     color: green;
26 | }
27 | 
28 | .link{
29 |     color: inherit;
30 | }
31 | 
32 | .list{
33 |     color:indianred
34 | }
35 | 
36 | .list-item-extra{
37 |     color:initial;
38 | }
39 | 
40 | .title{
41 |     color:red
42 | }
43 | 
44 | 


--------------------------------------------------------------------------------
/7 - Como funciona css/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <link rel="stylesheet" href="css/styles.css" />
 8 |     <title>Fundamentos de CSS</title>
 9 |   </head>
10 | 
11 |   <body>
12 |     <h1 id="title" class="title">Fundamentos de <span>CSS</span></h1>
13 |     <span>CSS</span>
14 |     <p class="text">
15 |       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed labore quam facilis ad doloribus
16 |       atque perferendis mollitia voluptatum iste, accusamus provident qui harum
17 |       <a class="link" href="#">ENLACE DE EJEMPLO</a> ipsam quae in eligendi voluptates adipisci?
18 |       Ducimus?
19 |     </p>
20 |     <ul class="list">
21 |       <li class="list-item">Item 1</li>
22 |       <li class="list-item">Item 2</li>
23 |       <li class="list-item">Item 3</li>
24 |       <li class="list-item-extra">Item 4</li>
25 |     </ul>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/8 - Estilos por defecto/css/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v8.0.1 | 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 iOS.
  9 |  */
 10 | 
 11 | html {
 12 |   line-height: 1.15; /* 1 */
 13 |   -webkit-text-size-adjust: 100%; /* 2 */
 14 | }
 15 | 
 16 | /* Sections
 17 |    ========================================================================== */
 18 | 
 19 | /**
 20 |  * Remove the margin in all browsers.
 21 |  */
 22 | 
 23 | body {
 24 |   margin: 0;
 25 | }
 26 | 
 27 | /**
 28 |  * Render the `main` element consistently in IE.
 29 |  */
 30 | 
 31 | main {
 32 |   display: block;
 33 | }
 34 | 
 35 | /**
 36 |  * Correct the font size and margin on `h1` elements within `section` and
 37 |  * `article` contexts in Chrome, Firefox, and Safari.
 38 |  */
 39 | 
 40 | h1 {
 41 |   font-size: 2em;
 42 |   margin: 0.67em 0;
 43 | }
 44 | 
 45 | /* Grouping content
 46 |    ========================================================================== */
 47 | 
 48 | /**
 49 |  * 1. Add the correct box sizing in Firefox.
 50 |  * 2. Show the overflow in Edge and IE.
 51 |  */
 52 | 
 53 | hr {
 54 |   box-sizing: content-box; /* 1 */
 55 |   height: 0; /* 1 */
 56 |   overflow: visible; /* 2 */
 57 | }
 58 | 
 59 | /**
 60 |  * 1. Correct the inheritance and scaling of font size in all browsers.
 61 |  * 2. Correct the odd `em` font sizing in all browsers.
 62 |  */
 63 | 
 64 | pre {
 65 |   font-family: monospace, monospace; /* 1 */
 66 |   font-size: 1em; /* 2 */
 67 | }
 68 | 
 69 | /* Text-level semantics
 70 |    ========================================================================== */
 71 | 
 72 | /**
 73 |  * Remove the gray background on active links in IE 10.
 74 |  */
 75 | 
 76 | a {
 77 |   background-color: transparent;
 78 | }
 79 | 
 80 | /**
 81 |  * 1. Remove the bottom border in Chrome 57-
 82 |  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 83 |  */
 84 | 
 85 | abbr[title] {
 86 |   border-bottom: none; /* 1 */
 87 |   text-decoration: underline; /* 2 */
 88 |   text-decoration: underline dotted; /* 2 */
 89 | }
 90 | 
 91 | /**
 92 |  * Add the correct font weight in Chrome, Edge, and Safari.
 93 |  */
 94 | 
 95 | b,
 96 | strong {
 97 |   font-weight: bolder;
 98 | }
 99 | 
100 | /**
101 |  * 1. Correct the inheritance and scaling of font size in all browsers.
102 |  * 2. Correct the odd `em` font sizing in all browsers.
103 |  */
104 | 
105 | code,
106 | kbd,
107 | samp {
108 |   font-family: monospace, monospace; /* 1 */
109 |   font-size: 1em; /* 2 */
110 | }
111 | 
112 | /**
113 |  * Add the correct font size in all browsers.
114 |  */
115 | 
116 | small {
117 |   font-size: 80%;
118 | }
119 | 
120 | /**
121 |  * Prevent `sub` and `sup` elements from affecting the line height in
122 |  * all browsers.
123 |  */
124 | 
125 | sub,
126 | sup {
127 |   font-size: 75%;
128 |   line-height: 0;
129 |   position: relative;
130 |   vertical-align: baseline;
131 | }
132 | 
133 | sub {
134 |   bottom: -0.25em;
135 | }
136 | 
137 | sup {
138 |   top: -0.5em;
139 | }
140 | 
141 | /* Embedded content
142 |    ========================================================================== */
143 | 
144 | /**
145 |  * Remove the border on images inside links in IE 10.
146 |  */
147 | 
148 | img {
149 |   border-style: none;
150 | }
151 | 
152 | /* Forms
153 |    ========================================================================== */
154 | 
155 | /**
156 |  * 1. Change the font styles in all browsers.
157 |  * 2. Remove the margin in Firefox and Safari.
158 |  */
159 | 
160 | button,
161 | input,
162 | optgroup,
163 | select,
164 | textarea {
165 |   font-family: inherit; /* 1 */
166 |   font-size: 100%; /* 1 */
167 |   line-height: 1.15; /* 1 */
168 |   margin: 0; /* 2 */
169 | }
170 | 
171 | /**
172 |  * Show the overflow in IE.
173 |  * 1. Show the overflow in Edge.
174 |  */
175 | 
176 | button,
177 | input { /* 1 */
178 |   overflow: visible;
179 | }
180 | 
181 | /**
182 |  * Remove the inheritance of text transform in Edge, Firefox, and IE.
183 |  * 1. Remove the inheritance of text transform in Firefox.
184 |  */
185 | 
186 | button,
187 | select { /* 1 */
188 |   text-transform: none;
189 | }
190 | 
191 | /**
192 |  * Correct the inability to style clickable types in iOS and Safari.
193 |  */
194 | 
195 | button,
196 | [type="button"],
197 | [type="reset"],
198 | [type="submit"] {
199 |   -webkit-appearance: button;
200 | }
201 | 
202 | /**
203 |  * Remove the inner border and padding in Firefox.
204 |  */
205 | 
206 | button::-moz-focus-inner,
207 | [type="button"]::-moz-focus-inner,
208 | [type="reset"]::-moz-focus-inner,
209 | [type="submit"]::-moz-focus-inner {
210 |   border-style: none;
211 |   padding: 0;
212 | }
213 | 
214 | /**
215 |  * Restore the focus styles unset by the previous rule.
216 |  */
217 | 
218 | button:-moz-focusring,
219 | [type="button"]:-moz-focusring,
220 | [type="reset"]:-moz-focusring,
221 | [type="submit"]:-moz-focusring {
222 |   outline: 1px dotted ButtonText;
223 | }
224 | 
225 | /**
226 |  * Correct the padding in Firefox.
227 |  */
228 | 
229 | fieldset {
230 |   padding: 0.35em 0.75em 0.625em;
231 | }
232 | 
233 | /**
234 |  * 1. Correct the text wrapping in Edge and IE.
235 |  * 2. Correct the color inheritance from `fieldset` elements in IE.
236 |  * 3. Remove the padding so developers are not caught out when they zero out
237 |  *    `fieldset` elements in all browsers.
238 |  */
239 | 
240 | legend {
241 |   box-sizing: border-box; /* 1 */
242 |   color: inherit; /* 2 */
243 |   display: table; /* 1 */
244 |   max-width: 100%; /* 1 */
245 |   padding: 0; /* 3 */
246 |   white-space: normal; /* 1 */
247 | }
248 | 
249 | /**
250 |  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
251 |  */
252 | 
253 | progress {
254 |   vertical-align: baseline;
255 | }
256 | 
257 | /**
258 |  * Remove the default vertical scrollbar in IE 10+.
259 |  */
260 | 
261 | textarea {
262 |   overflow: auto;
263 | }
264 | 
265 | /**
266 |  * 1. Add the correct box sizing in IE 10.
267 |  * 2. Remove the padding in IE 10.
268 |  */
269 | 
270 | [type="checkbox"],
271 | [type="radio"] {
272 |   box-sizing: border-box; /* 1 */
273 |   padding: 0; /* 2 */
274 | }
275 | 
276 | /**
277 |  * Correct the cursor style of increment and decrement buttons in Chrome.
278 |  */
279 | 
280 | [type="number"]::-webkit-inner-spin-button,
281 | [type="number"]::-webkit-outer-spin-button {
282 |   height: auto;
283 | }
284 | 
285 | /**
286 |  * 1. Correct the odd appearance in Chrome and Safari.
287 |  * 2. Correct the outline style in Safari.
288 |  */
289 | 
290 | [type="search"] {
291 |   -webkit-appearance: textfield; /* 1 */
292 |   outline-offset: -2px; /* 2 */
293 | }
294 | 
295 | /**
296 |  * Remove the inner padding in Chrome and Safari on macOS.
297 |  */
298 | 
299 | [type="search"]::-webkit-search-decoration {
300 |   -webkit-appearance: none;
301 | }
302 | 
303 | /**
304 |  * 1. Correct the inability to style clickable types in iOS and Safari.
305 |  * 2. Change font properties to `inherit` in Safari.
306 |  */
307 | 
308 | ::-webkit-file-upload-button {
309 |   -webkit-appearance: button; /* 1 */
310 |   font: inherit; /* 2 */
311 | }
312 | 
313 | /* Interactive
314 |    ========================================================================== */
315 | 
316 | /*
317 |  * Add the correct display in Edge, IE 10+, and Firefox.
318 |  */
319 | 
320 | details {
321 |   display: block;
322 | }
323 | 
324 | /*
325 |  * Add the correct display in all browsers.
326 |  */
327 | 
328 | summary {
329 |   display: list-item;
330 | }
331 | 
332 | /* Misc
333 |    ========================================================================== */
334 | 
335 | /**
336 |  * Add the correct display in IE 10+.
337 |  */
338 | 
339 | template {
340 |   display: none;
341 | }
342 | 
343 | /**
344 |  * Add the correct display in IE 10.
345 |  */
346 | 
347 | [hidden] {
348 |   display: none;
349 | }
350 | 


--------------------------------------------------------------------------------
/8 - Estilos por defecto/css/styles.css:
--------------------------------------------------------------------------------
1 | body{
2 |     background-color: #333;
3 |     color: #fff;
4 | }


--------------------------------------------------------------------------------
/8 - Estilos por defecto/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <link rel="stylesheet" href="css/normalize.css" />
 8 |     <link rel="stylesheet" href="css/styles.css" />
 9 |     <title>Document</title>
10 |   </head>
11 |   <body>
12 |     <h1>ESTILOS POR DEFECTO</h1>
13 |     <ul>
14 |       <li>Item 1</li>
15 |       <li>Item 2</li>
16 |       <li>Item 3</li>
17 |       <li>Item 4</li>
18 |     </ul>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/9 - prepros/css/styles-dist.css:
--------------------------------------------------------------------------------
1 | body{
2 |     background-color: lightseagreen;
3 | }


--------------------------------------------------------------------------------
/9 - prepros/css/styles.css:
--------------------------------------------------------------------------------
1 | body{
2 |     background-color: lightseagreen;
3 | }


--------------------------------------------------------------------------------
/9 - prepros/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <link rel="stylesheet" href="css/styles-dist.css" />
 8 |     <title>Document</title>
 9 |   </head>
10 |   <body>
11 |     <h1>Usando Prepros</h1>
12 |   </body>
13 | </html>
14 | 


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