diff --git a/004_primeras_paginas/README.md b/004_primeras_paginas/README.md index 75b5113..555d4ed 100644 --- a/004_primeras_paginas/README.md +++ b/004_primeras_paginas/README.md @@ -84,3 +84,10 @@ estilo.[css](./html_css_parte1/style.css). #### Parte 2 - Posicionamiento, listas y navegación +Página [productos](./html_css_parte2/productos.html) y +[estilo](./html_css_parte2/productos.css). + +- Base de un archivo HTML. +- Lista html no ordenada. +- Posicionamiento listas y 'menu' de navegación. +- Posicionamiento encabezado de página. diff --git a/004_primeras_paginas/html_css_parte2/productos.css b/004_primeras_paginas/html_css_parte2/productos.css index 5a2a20b..cb25257 100644 --- a/004_primeras_paginas/html_css_parte2/productos.css +++ b/004_primeras_paginas/html_css_parte2/productos.css @@ -1,5 +1,18 @@ header { background: #046dfc; + padding: 20px 0; +} + +.caja { + width: 80%; + position: relative; + margin: 0 auto; +} + +nav { + position: absolute; + top: 118px; + right: 0px; } nav li{ diff --git a/004_primeras_paginas/html_css_parte2/productos.html b/004_primeras_paginas/html_css_parte2/productos.html index c76ff64..29b1f53 100644 --- a/004_primeras_paginas/html_css_parte2/productos.html +++ b/004_primeras_paginas/html_css_parte2/productos.html @@ -4,18 +4,21 @@ Barbería Alura - Productos +
-

- +
+

+ +
diff --git a/004_primeras_paginas/html_css_parte2/reset.css b/004_primeras_paginas/html_css_parte2/reset.css new file mode 100644 index 0000000..3bc676a --- /dev/null +++ b/004_primeras_paginas/html_css_parte2/reset.css @@ -0,0 +1,52 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) + + *PROBAR* version fork actual: + https://github.com/elad2412/the-new-css-reset + https://raw.githubusercontent.com/elad2412/the-new-css-reset/main/css/reset.css +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/004_primeras_paginas/html_css_parte2/reset2.css b/004_primeras_paginas/html_css_parte2/reset2.css new file mode 100644 index 0000000..42249d8 --- /dev/null +++ b/004_primeras_paginas/html_css_parte2/reset2.css @@ -0,0 +1,99 @@ +/*** + The new CSS reset - version 1.8.4 (last updated 14.2.2023) + GitHub page: https://github.com/elad2412/the-new-css-reset +***/ + +/* + Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property + - The "symbol *" part is to solve Firefox SVG sprite bug + */ +*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { + all: unset; + display: revert; +} + +/* Preferred box-sizing value */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Reapply the pointer cursor for anchor tags */ +a, button { + cursor: revert; +} + +/* Remove list styles (bullets/numbers) */ +ol, ul, menu { + list-style: none; +} + +/* For images to not be able to exceed their container */ +img { + max-inline-size: 100%; + max-block-size: 100%; +} + +/* removes spacing between cells in tables */ +table { + border-collapse: collapse; +} + +/* Safari - solving issue when using user-select:none on the text input doesn't working */ +input, textarea { + -webkit-user-select: auto; +} + +/* revert the 'white-space' property for textarea elements on Safari */ +textarea { + white-space: revert; +} + +/* minimum style to allow to style meter element */ +meter { + -webkit-appearance: revert; + appearance: revert; +} + +/* preformatted text - use only for this feature */ +:where(pre) { + all: revert; +} + +/* reset default text opacity of input placeholder */ +::placeholder { + color: unset; +} + +/* remove default dot (•) sign */ +::marker { + content: initial; +} + +/* fix the feature of 'hidden' attribute. + display:revert; revert to element instead of attribute */ +:where([hidden]) { + display: none; +} + +/* revert for bug in Chromium browsers + - fix for the content editable attribute will work properly. + - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ +:where([contenteditable]:not([contenteditable="false"])) { + -moz-user-modify: read-write; + -webkit-user-modify: read-write; + overflow-wrap: break-word; + -webkit-line-break: after-white-space; + -webkit-user-select: auto; +} + +/* apply back the draggable feature - exist only in Chromium and Safari */ +:where([draggable="true"]) { + -webkit-user-drag: element; +} + +/* Revert Modal native behavior */ +:where(dialog:modal) { + all: revert; +} \ No newline at end of file