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

Compare commits

base: devfzn:17d1a78e5f9f8012826b0bc68785c410018601c4
Branches Tags
devfzn:master
...
compare: devfzn:7eb3ca2b356ab72fcb6d3cdd378f6e4ea86f7fcc
Branches Tags
devfzn:master

2 Commits
17d1a78e5f ... 7eb3ca2b35

Author SHA1 Message Date
devfzn
7eb3ca2b35
HTML5 y CSS3 pt. 4: Avanzando en CSS 06 
Diseño responsivo - fin del curso.
 2023-04-13 21:31:07 -04:00
devfzn
bb393c6e73
HTML5 y CSS3 pt. 4: Avanzando en CSS 05 
Uso de: opacity, box-shadow, text-shadow.
Selección de colores RGB y RGBA.
 2023-04-13 18:59:51 -04:00
3 changed files with 64 additions and 5 deletions
Show Stats Expand all files Collapse all files

35
004_primeras_paginas/README.md
View File

@ -324,10 +324,17 @@ utilizar [style.css](./html_css_parte4/style.css).
- [Monserrat](https://fonts.google.com/specimen/Montserrat) - [Monserrat](https://fonts.google.com/specimen/Montserrat)
- [Noto Sans Symbols 2](https://fonts.google.com/noto/specimen/Noto+Sans+Symbols+2) - [Noto Sans Symbols 2](https://fonts.google.com/noto/specimen/Noto+Sans+Symbols+2)
- [Noto Music](https://fonts.google.com/noto/specimen/Noto+Music) - [Noto Music](https://fonts.google.com/noto/specimen/Noto+Music)
</details> </details>
- [Mapa](./html_css_parte4/index.html#L52) incrustado (embedded) y [estilo](./html_css_parte4/style.css#L237). - [Mapa](./html_css_parte4/index.html#L52) incrustado (embedded) y
- [Video](./html_css_parte4/index.html#L73) incrustado y [estilo](./html_css_parte4/style.css#L287). [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 #### 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).

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>

30
004_primeras_paginas/html_css_parte4/style.css
View File

@ -194,6 +194,8 @@ p.test {
font-size: 2em; font-size: 2em;
margin: 0 0 1em; margin: 0 0 1em;
clear:left; clear:left;
/* color: rgba(0,0,0,0.3); RGB y opacidad */
text-shadow: 2px 2px 4px #cd4f39;
} }
/* Alterando estilos con psudo-clases /* Alterando estilos con psudo-clases
@ -252,6 +254,7 @@ p:first-line {
.diferencias { .diferencias {
padding: 3em 0; padding: 3em 0;
background: #888888; background: #888888;
/* box-shadow: inset 0 0 30px red; sombra interna*/
} }
.contenido-diferenciales { .contenido-diferenciales {
@ -281,10 +284,35 @@ p:first-line {
} }
.imagen-diferenciales { .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 { .video {
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%;
}
}