diff --git a/004_primeras_paginas/README.md b/004_primeras_paginas/README.md index 50a396c..91cc6e0 100644 --- a/004_primeras_paginas/README.md +++ b/004_primeras_paginas/README.md @@ -383,3 +383,15 @@ de aquellos que tengan el id `mision`. - Mozilla Box-shadow [generator](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator) +#### Diseño responsive + +Marcar elemento para modificar según resolución de pantalla de hasta 480px +`@media screen and (max-width:480px){ body: red; }` + +Diseño [responsive](./html_css_parte4/style.css#L302) + +Final curso HTML5 y CSS parte 4 + +Extra: +[Organizar estudio y portafolio con notion en alura](https://www.aluracursos.com/blog/organizar-estudio-y-portafolio-con-notion-en-alura). + diff --git a/004_primeras_paginas/html_css_parte4/index.html b/004_primeras_paginas/html_css_parte4/index.html index ae89aba..f6cd679 100644 --- a/004_primeras_paginas/html_css_parte4/index.html +++ b/004_primeras_paginas/html_css_parte4/index.html @@ -5,10 +5,10 @@ Barbería Alura + -
@@ -70,7 +70,7 @@ alt="hombre sentado en barbería al que le cortan la barba con tijeras"/>
- diff --git a/004_primeras_paginas/html_css_parte4/style.css b/004_primeras_paginas/html_css_parte4/style.css index d3e29f8..71a11ea 100644 --- a/004_primeras_paginas/html_css_parte4/style.css +++ b/004_primeras_paginas/html_css_parte4/style.css @@ -298,3 +298,21 @@ p:first-line { width: 560px; margin: 1em auto; } + +@media screen and (max-width:480px){ + h1 { + text-align: center; + } + + nav { + position: static; + } + + .caja, .principal, .mapa-contenido .contenido-diferenciales, .video { + width: auto; + } + + .lista-diferenciales, .imagen-diferenciales { + width: 100%; + } +}