Compare commits
2 Commits
17d1a78e5f
...
7eb3ca2b35
| Author | SHA1 | Date | |
|---|---|---|---|
7eb3ca2b35
|
|||
|
bb393c6e73
|
@ -324,10 +324,17 @@ utilizar [style.css](./html_css_parte4/style.css).
|
||||
- [Monserrat](https://fonts.google.com/specimen/Montserrat)
|
||||
- [Noto Sans Symbols 2](https://fonts.google.com/noto/specimen/Noto+Sans+Symbols+2)
|
||||
- [Noto Music](https://fonts.google.com/noto/specimen/Noto+Music)
|
||||
|
||||
</details>
|
||||
|
||||
- [Mapa](./html_css_parte4/index.html#L52) incrustado (embedded) y [estilo](./html_css_parte4/style.css#L237).
|
||||
- [Video](./html_css_parte4/index.html#L73) incrustado y [estilo](./html_css_parte4/style.css#L287).
|
||||
- [Mapa](./html_css_parte4/index.html#L52) incrustado (embedded) y
|
||||
[estilo](./html_css_parte4/style.css#L239).
|
||||
- [Video](./html_css_parte4/index.html#L73) incrustado y
|
||||
[estilo](./html_css_parte4/style.css#L297).
|
||||
|
||||
> [CSS Background](https://developer.mozilla.org/en-US/docs/Web/CSS/background) -
|
||||
developer.mozilla.org.
|
||||
> Juegos para [practicar](https://flexboxfroggy.com/)/aprender css.
|
||||
|
||||
#### Selectores avanzados CSS
|
||||
|
||||
@ -364,3 +371,27 @@ de aquellos que tengan el id `mision`.
|
||||
}
|
||||
```
|
||||
|
||||
#### Opacidad
|
||||
|
||||
- Selector de color RGB: `color: rgb(0,0,0)`
|
||||
- Selector de color RGB y opacidad: `color: rgba(0,0,0,0.3)`
|
||||
|
||||
#### Sombras
|
||||
|
||||
- [box-shadow](./html_css_parte4/style.css#L289)
|
||||
- [text-shadow](./html_css_parte4/style.css#L198)
|
||||
- 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).
|
||||
|
||||
|
||||
@ -5,10 +5,10 @@
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<title>Barbería Alura</title>
|
||||
<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.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
@ -70,7 +70,7 @@
|
||||
alt="hombre sentado en barbería al que le cortan la barba con tijeras"/>
|
||||
</div>
|
||||
<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"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen></iframe>
|
||||
|
||||
@ -194,6 +194,8 @@ p.test {
|
||||
font-size: 2em;
|
||||
margin: 0 0 1em;
|
||||
clear:left;
|
||||
/* color: rgba(0,0,0,0.3); RGB y opacidad */
|
||||
text-shadow: 2px 2px 4px #cd4f39;
|
||||
}
|
||||
|
||||
/* Alterando estilos con psudo-clases
|
||||
@ -252,6 +254,7 @@ p:first-line {
|
||||
.diferencias {
|
||||
padding: 3em 0;
|
||||
background: #888888;
|
||||
/* box-shadow: inset 0 0 30px red; sombra interna*/
|
||||
}
|
||||
|
||||
.contenido-diferenciales {
|
||||
@ -281,10 +284,35 @@ p:first-line {
|
||||
}
|
||||
|
||||
.imagen-diferenciales {
|
||||
width: 60%;
|
||||
width: 50%;
|
||||
margin-left: 3em;
|
||||
box-shadow: 10px 10px 20px #046dfc; /* Es posible agregar + sombras separadas por ',' */
|
||||
}
|
||||
|
||||
.imagen-diferenciales:hover {
|
||||
opacity: 0.75;
|
||||
transition: 330ms;
|
||||
}
|
||||
|
||||
.video {
|
||||
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%;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user