devfzn/Oracle_One-Alura_Latam
devfzn/Oracle_One-Alura_Latam
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

HTML5 y CSS3 pt. 4: Avanzando en CSS 06

Browse Source 
Diseño responsivo - fin del curso.
This commit is contained in:
devfzn 2023-04-13 21:31:07 -04:00
parent bb393c6e73
commit 7eb3ca2b35
Signed by: devfzn
GPG Key ID: E070ECF4A754FDB1
3 changed files with 32 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
004_primeras_paginas/README.md
View File

@ -383,3 +383,15 @@ de aquellos que tengan el id `mision`.
- Mozilla Box-shadow - Mozilla Box-shadow
[generator](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator) [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).

4
004_primeras_paginas/html_css_parte4/index.html
View File

@ -5,10 +5,10 @@
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<title>Barbería Alura</title> <title>Barbería Alura</title>
<link rel="stylesheet" href="./reset.css"> <link rel="stylesheet" href="./reset.css">
<link rel="stylesheet" href="./style.css">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
</head> </head>
<body> <body>
<header> <header>
@ -70,7 +70,7 @@
alt="hombre sentado en barbería al que le cortan la barba con tijeras"/> alt="hombre sentado en barbería al que le cortan la barba con tijeras"/>
</div> </div>
<div class="video"> <div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/TnJ_ObLRM9w" <iframe width="100%" height="315" src="https://www.youtube.com/embed/TnJ_ObLRM9w"
title="YouTube video player" frameborder="0" title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe> allowfullscreen></iframe>

18
004_primeras_paginas/html_css_parte4/style.css
View File

@ -298,3 +298,21 @@ p:first-line {
width: 560px; width: 560px;
margin: 1em auto; 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%;
}
}