diff --git a/004_primeras_paginas/README.md b/004_primeras_paginas/README.md index 9db2624..8b56fbb 100644 --- a/004_primeras_paginas/README.md +++ b/004_primeras_paginas/README.md @@ -302,3 +302,5 @@ transform (scale, rotate). Final curso HTML5 y CSS parte 3 +### Parte 4 - Avanzando en CSS + diff --git a/004_primeras_paginas/html_css_parte4/banner/banner.jpg b/004_primeras_paginas/html_css_parte4/banner/banner.jpg new file mode 100644 index 0000000..a5198bc Binary files /dev/null and b/004_primeras_paginas/html_css_parte4/banner/banner.jpg differ diff --git a/004_primeras_paginas/html_css_parte4/contacto.html b/004_primeras_paginas/html_css_parte4/contacto.html new file mode 100644 index 0000000..285e276 --- /dev/null +++ b/004_primeras_paginas/html_css_parte4/contacto.html @@ -0,0 +1,97 @@ + + + + + + Contacto - Barbería Alura + + + + +
+
+

logo Barbería Alura

+ +
+
+
+
+ + + + + + + + + + + +
+ ¿Como prefieres que te contactemos? + + + + + + +
+
+ ¿En que horario prefieres ser contactado? + +
+ + +
+ + + + + + + + + + + + + + + + + + + + + + +
DíasHorario
Lunes9h ~ 20h
Miercoles9h ~ 20h
Viernes9h ~ 20h
+ +
+ + + diff --git a/004_primeras_paginas/html_css_parte4/diferenciales/diferenciales.jpg b/004_primeras_paginas/html_css_parte4/diferenciales/diferenciales.jpg new file mode 100644 index 0000000..5b15eec Binary files /dev/null and b/004_primeras_paginas/html_css_parte4/diferenciales/diferenciales.jpg differ diff --git a/004_primeras_paginas/html_css_parte4/imagenes/barba.jpg b/004_primeras_paginas/html_css_parte4/imagenes/barba.jpg new file mode 100644 index 0000000..3151d86 Binary files /dev/null and b/004_primeras_paginas/html_css_parte4/imagenes/barba.jpg differ diff --git a/004_primeras_paginas/html_css_parte4/imagenes/bg.jpg b/004_primeras_paginas/html_css_parte4/imagenes/bg.jpg new file mode 100644 index 0000000..164742f Binary files /dev/null and b/004_primeras_paginas/html_css_parte4/imagenes/bg.jpg differ diff --git a/004_primeras_paginas/html_css_parte4/imagenes/cabello+barba.jpg b/004_primeras_paginas/html_css_parte4/imagenes/cabello+barba.jpg new file mode 100644 index 0000000..1757568 Binary files /dev/null and b/004_primeras_paginas/html_css_parte4/imagenes/cabello+barba.jpg differ diff --git a/004_primeras_paginas/html_css_parte4/imagenes/cabello.jpg b/004_primeras_paginas/html_css_parte4/imagenes/cabello.jpg new file mode 100644 index 0000000..53a8538 Binary files /dev/null and b/004_primeras_paginas/html_css_parte4/imagenes/cabello.jpg differ diff --git a/004_primeras_paginas/html_css_parte4/imagenes/css_display_property.png b/004_primeras_paginas/html_css_parte4/imagenes/css_display_property.png new file mode 100644 index 0000000..f88d8b8 Binary files /dev/null and b/004_primeras_paginas/html_css_parte4/imagenes/css_display_property.png differ diff --git a/004_primeras_paginas/html_css_parte4/imagenes/logo-blanco.png b/004_primeras_paginas/html_css_parte4/imagenes/logo-blanco.png new file mode 100644 index 0000000..90d36a3 Binary files /dev/null and b/004_primeras_paginas/html_css_parte4/imagenes/logo-blanco.png differ diff --git a/004_primeras_paginas/html_css_parte4/imagenes/logo.png b/004_primeras_paginas/html_css_parte4/imagenes/logo.png new file mode 100644 index 0000000..34cfa69 Binary files /dev/null and b/004_primeras_paginas/html_css_parte4/imagenes/logo.png differ diff --git a/004_primeras_paginas/html_css_parte4/imagenes/utiles.jpg b/004_primeras_paginas/html_css_parte4/imagenes/utiles.jpg new file mode 100644 index 0000000..c77a3f0 Binary files /dev/null and b/004_primeras_paginas/html_css_parte4/imagenes/utiles.jpg differ diff --git a/004_primeras_paginas/html_css_parte4/index.html b/004_primeras_paginas/html_css_parte4/index.html new file mode 100644 index 0000000..5adf8e4 --- /dev/null +++ b/004_primeras_paginas/html_css_parte4/index.html @@ -0,0 +1,69 @@ + + + + + + Barbería Alura + + + + +
+

Barbería Alura

+
+
+

+ +
+
+
+ +
+
+

Sobre Barbería Alura

+ + Utensilios de barbero + +

Ubicada en el corazón de la ciudad, la Barbería Alura trae + para el mercado lo que hay de mejor para su cabello y barba. Fundada en 2020, + la Barbería Alura ya es destaque en la ciudad y conquista nuevos clientes + diariamente.

+ +

Nuestra misión es: "Proporcionar autoestima y calidad de vida a + nuestros clientes"

+ +

Ofrecemos profesionales experimentados que están constantemente observando los + cambios y movimiento en el mundo de la moda, para así ofrecer a nuestros clientes + las últimas tendencias. El atendimiento posee un padrón de excelencia y agilidad, + garantizando calidad y satisfacción de nuestros clientes.

+
+
+

Lo que nos diferencia

+ + + hombre sentado en barbería al que le cortan la barba con tijeras +
+
+ + + diff --git a/004_primeras_paginas/html_css_parte4/productos.html b/004_primeras_paginas/html_css_parte4/productos.html new file mode 100644 index 0000000..11be098 --- /dev/null +++ b/004_primeras_paginas/html_css_parte4/productos.html @@ -0,0 +1,52 @@ + + + + + + Barbería Alura - Productos + + + + +
+
+

+ +
+
+
+ +
+ + + diff --git a/004_primeras_paginas/html_css_parte4/reset.css b/004_primeras_paginas/html_css_parte4/reset.css new file mode 100644 index 0000000..3bc676a --- /dev/null +++ b/004_primeras_paginas/html_css_parte4/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_parte4/style.css b/004_primeras_paginas/html_css_parte4/style.css new file mode 100644 index 0000000..ceafab9 --- /dev/null +++ b/004_primeras_paginas/html_css_parte4/style.css @@ -0,0 +1,213 @@ +header { + background: #046dfc; + padding: 20px 0; +} + +.caja { + width: 80%; + position: relative; + margin: 0 auto; +} + +nav { + position: absolute; + top: 118px; + right: 0px; +} + +nav li { + display: inline; + margin: 0 0 0 15px; +} + +nav a { + text-transform: uppercase; + color: #000000; + font-weight: bold; + font-size: 22px; + text-decoration: none; +} + +nav a:hover { + color: #cd4f39; + text-decoration: underline; +} + +.productos { + width: 80%; + margin: 0 auto; + padding: 30px; +} + +.productos li { + display: inline-block; + text-align: center; + width: 30%; + vertical-align: top; + /*background: #cd4f39; <- se usó para visualizar modificaciones */ + margin: 0 1.5%; + /*padding: 30px 20px;*/ + padding: 5% 2%; + box-sizing: border-box; + /*border-width: 2px; <- estas 3 propiedades se + border-style: solid; <- pueden reemplazar con la + border-color: #cd4f39; <- propiedad de abajo */ + border: 2px solid #cd4f39; + border-radius: 10px; +} + +.productos li:hover { + border-color: #046dfc; +} + +.productos li:active { + border-color: #088C19; +} + +.productos h2 { + font-size: 26px; + font-weight: bold; +} + +.productos li:hover h2 { + font-size: 32px; +} + +.prod_descripcion { + font-size: 18px; +} + +.prod_precio { + font-size: 20px; + font-weight: bold; + margin-top: 10px; +} + +footer { + text-align: center; + background: url(./imagenes/bg.jpg); + padding: 40px; +} + +.copyright { + color: #6f6f6f; + font-size: 14px; +} + +main { + width: 80%; + margin: 0 auto; +} + +form { + margin: 50px 0%; +} + +form label, form legend { + display: block; + font-size: 20px; + margin: 0 0 10px; +} + +.input-padron { + display: block; + margin: 0 0 20px; + padding: 10px 25px; + width: 50%; +} + +.checkbox { + margin: 20px 0; +} + +.enviar { + width: 40%; + padding: 15px 0; + font-size: 18px; + font-weight: bold; + color: #f1f1f1; + background: #046dfc; + border: none; + border-radius: 5px; + /*transition: 0.3s background;*/ + transition: 0.3s all; + cursor: pointer; +} + +.enviar:hover{ + background-color: #cd4f39; + transform: scale(1.2) rotate(4deg); +} + +table { + margin: 40px 40px; +} + +thead { + background: #046dfc; + color: #f1f1f1; + font-weight: bold; +} + +td, th { + border: 1px solid #046dfc; + padding: 8px 15px; +} + +/* Usados para observar Jerarquía en CSS +form p { + color: blue; +} + +p { + color: red; +} + +.test { + color: yellow; +} + +p.test { + color: magenta; +} + +#test { + color: cyan; +} */ + +/* la configuración de stilo inline sobrescribe todo */ + +/* CSS para index.html */ + +.banner { + width: 100%; +} + +.titulo-principal { + text-align: center; + font-size: 2em; + margin: 0 0 1em; + clear:left; +} + +.principal p{ + margin: 0 0 1em; +} + +.principal strong { + font-weight: bold; +} + +.principal em { + font-style: italic; +} + +.utiles { + width: 120px; + float: left; + margin: 0 20px 20px 0; +} + +.imagen_diferencias { + width: 60%; +}