No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Uso de linear-gradient

10/32
Recursos

Luego de implementar el BEM, es momento de aplicar los estilos restantes al header de nuestro proyecto, como son el degradado en el background, las etiquetas h1 y p.

C贸mo dar estilos al fondo

Vamos al prototipo del proyecto en Figma. Si hacemos clic sobre el fondo observamos los colores que tiene. En la secci贸n de c贸digo css encontramos un linear-gradient con la informaci贸n que necesitamos. Lo copiamos y lo agregamos dentro de los estilos del header.

background: linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%);
estilos al fondo

El c贸digo nos muestra el pocentaje de color que le da a cada uno. 16.69% al negro hasta un 100% de naranja. Al renderizarlo en el navegador vemos que el naranja ocupa un mayor espacio que el negro, posicion谩ndose cada uno en esquinas opuestas.

Nota: Si quieres crear degradados de manera sencilla, te recomiendo usar CSS Gradient. Es muy sencillo e intuitivo de usar.

C贸mo dar estilos al t铆tulo

  • Revisamos los estilos del t铆tulo principal en el prototipo, no con la intenci贸n de copiarlos, sino solo tomar detalles como el tama帽o y grosor del texto.
image.png
  • Llamamos la etiqueta h1 usando el nombre de la clase contenedora .header鈥搕itle-container. Y s铆, podr铆amos llamar solo la etiqueta h1, despu茅s de todo s贸lo debe existir una en todo el documento, 驴verdad? Es as铆, sin embargo, ser espec铆ficos es parte de las buenas pr谩cticas. Cuando avances m谩s usar谩s librer铆as como Bootstrap que pueden traer consigo estilos para ciertas etiquetas. Siendo espec铆ficos los estilos que apliquemos no se ver谩n afectados por estas. Ya sabes, siempre trata de ser espec铆fico.
  • Ajustamos el tama帽o de fuente con font-size: 2.4rem (24px) y el ancho con font-weight: bold.
  • Ajustamos la dimensi贸n entre l铆neas o interlineado con line-height: 2.6rem.
  • Cambiamos su color con la variable correspondiente, ***color: var(鈥搄ust-white)***.
.header--title-container h1 {
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--just-white);
}

C贸mo dar estilos al p谩rrafo

  • Llamamos nuestra etiqueta de p谩rrafo desde la clase contenedora .header鈥搕itle-container.
image.png
  • A帽adimos un margen superior para separarla un poco del t铆tulo con margin-top: 25px.
  • Ajustamos el tama帽o con font-size: 1.4rem y su grosor con font-weight: 500.
  • Le damos un interlineado con line-height 1.8rem.
  • Cambiamos el color de fuente con la variable correspondiente, ***color: var(鈥搒oft-orange)***.
.header--title-container p {
    margin-top: 25px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: var(--soft-orange)
}

En el navegador deber铆amos poder ver este resultado:
image.png

隆Se ve mucho mejor! Continuemos con la 煤ltima parte del header, el bot贸n flotante.

Contribuci贸n creada por: Jos茅 Miguel Veintimilla (Platzi Contributor).

Aportes 84

Preguntas 37

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%);```

Una excelente herramienta para trabajar con gradients: CSS Gradient.

si le a帽aden una animacion queda muy cool

header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-width: 320px;
    height: 334px;
    text-align: center;
    background: linear-gradient(232deg, #201e1c, #f7931a);
    background-size: 400% 400%;

    -webkit-animation: bgAnimateBitcoin 20s ease infinite;
    -moz-animation: bgAnimateBitcoin 20s ease infinite;
    animation: bgAnimateBitcoin 20s ease infinite;
}

@-webkit-keyframes bgAnimateBitcoin {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes bgAnimateBitcoin {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes bgAnimateBitcoin {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

En el gradiente ya podemos utilizar nuestras variables:

    background: linear-gradient(207.8deg, var(--warm-dark) 16.69%, var(--bitcoin-color) 100%);

Estoy muy Feliz del resultado que va tomando estas clases 馃槃

C贸digo

/* Dando estilos al Header*/

header{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-width: 320px;
    height: 333px;
    position: relative;
    background: linear-gradient(207.8deg, var(--warm-black) 16.69%, var(--bitcoin-orange) 100%);
}

.header__img--container{
    margin-top: 40px;
}

.header__img{
    width: 150px;
    height: 24px;
    align-self: center;
}

.header__title{
    width: 90%;
    min-width: 288px;
    max-width: 900px;
    height: 218px;
    margin-top: 30px;
    text-align: center;
    align-self: center;
}

.header__title h1{
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--just-white);
}

.header__title p{
    margin-top: 24px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    font-style: normal;
    color: var(--soft-orange)
}

creo que empezare a aprender Figma, es increible lo sencillo que podemos ir pasando de dise帽o a codigo teniendo ya un prototipo del proyecto. :0

Hola! 馃憢
Para m铆 line-height NO modifica la altura de la tipograf铆a sino la distancia entre la l铆nea base de las palabras (cuando estas se colocan una encima de otra).

Exceleeente curso!馃槂

Excelente clase, me emociona ver como vamos construyendo este landing page, como recurso adicional quisiera compartir la sintaxis o ingredientes para generar estas l铆neas degradadas en nuestro background:

background: linear-gradient(grados掳- lados o esquinas, Color_1 %opcional, color_2 %opcional);
  • Los grados van de 0掳 a 360掳, los puedes ingresar en entero o decimal seguido del acr贸nimo de medida deg.
    • ej.
/*Entero*/
background: linear-gradient(270deg, #201E1C 16.69%, #F7931A 100%);
/*Decimal*/
background: linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%);
  • Los lados (left, right, top y bottom) se usan de manera simple o conjunta para indicar esquinas (to left top), recuerda agregar al inicio del lado o esquina que vas a ingresar la palabra 鈥渢o鈥
    • ej.
/*Lado*/
background: linear-gradient(to left, #201E1C 16.69%, #F7931A 100%);
/*Esquina inferior derecha*/
background: linear-gradient(to right bottom, #201E1C 16.69%, #F7931A 100%);
  • El porcentaje % es opcional ten en cuenta que el default para el Color_1 es de 0%, el del Color_2 es del 100%.
    • ej.
/*Default Color 1 0% y Color_2 100%)*/
background: linear-gradient(207.8deg, #201E1C, #F7931A);
/*% de color asignado manualmente)*/
background: linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%);

Una colecci贸n seleccionada de hermosos degradados de color.
馃憠馃徎馃憠馃徎https://uigradients.com/#Kyoto

La funci贸n CSS linear-gradient() crea una imagen la cual representa un degradado lineal de colores. El resultado es un objeto CSS de tipo <gradient>, que es una forma especial de <image>.

El c贸digo:

Formal grammar: linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
                                  \---------------------------------/ \----------------------------/
                                    Definition of the gradient line         List of color stops  

                      where <side-or-corner> = [left | right] || [top | bottom]
                        and <color-stop>     = <color> [ <percentage> | <length> ]?

Fuente: MDN Web Docs

Update al estilo en header:

background: linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%);

Estilo .header--title-container h1:

      font-size: 2.4rem;
      font-weight: bold;
      line-height: 2.6rem;
      color: var(--just-white);

Estilo .header--title-container p:

      margin-top: 25px;
      font-size: 1.4rem;
      font-weight: 500;
      line-height: 1.8rem;
      color: var(--soft-orange);

Se le dice bot贸n flotante porque no esta dentro de una secci贸n o un contenedor, sino esta entre dos contenedores.

Cada vez el desarrollo web empieza a tener mas sentido en cuanto al posicionamiento de los elementos, colores y en general de todo. Un buen truco que uso es antes de que el profesor diga los estilos que van, tratar de implementarlos por mi mismo para poder entender el porque de cada uno y que no se vuelva algo sistem谩tico.

Ah铆 vamos avanzando

Tenia un problema con el font-size. Al revisar para corroborar el tama帽o de fuente el inspector de elementos me daba un font-size de 15.75px. No entend铆a porque me arrojaba esa cantidad. Los navegadores, la mayor铆a, por defecto tiene 16px como tama帽o de fuente. Le di varias vueltas al asunto sin hallar la respuesta de porque pasaba esto. Fue hasta que se me ocurri贸 revisar la configuraci贸n del navegador. Lo tenia configurado en 18px.
Estaba a punto de odiar rem.
Coclusi贸n: Revisar la configuraci贸n del navegador antes de empezar a usar rem.

Tambien lo pueden guardar en el :root del CSS y ya luego lo agregan

:root {
  /* Colors */
  --linear-BG: linear-gradient(207.8deg, #201e1c 16.69%, #f7931a 100%);
  --bitcoin-orange: #f7931a;
  --soft-orange: #ffe9d5;
  --secondary-blue: #1a9af7;
  --soft-blue: #e7f5ff;
  --warm-black: #201e1c;
  --warm-black1: #282623;
  --grey: #bababa;
  --off-white: #faf8f7;
  --just-white: #ffffff;

  /* Typefaces */
  --font-primary: "DM Sans";
  --font-secondary: "Inter";
}

Es recomendable que se evite copiar el codigo del background y tratar de escribir en el css para que la memoria muscular mejore.

Puedes usar el linear- gradient de la siguiente manera para obtener un background de dos colores: Eliges un 谩ngulo y colocas

<code>
background: rgb(108,58,92);
background: linear-gradient(90deg, rgba(108,58,92,1) 20%, rgba(58,108,58,1) 20%, rgba(58,108,58,1) 40%, rgba(108,58,92,1) 40%, rgba(108,58,92,1) 60%, rgba(58,108,58,1) 60%, rgba(58,108,58,1) 80%, rgba(108,58,92,1) 80%);!

Este c贸digo generar铆a 5 columnas de 20% cada una que alternan entre los colores morado y verde.
Las posibilidades son infinitas, puedes usar m谩s colores o combinar contenedores para obtener diferentes formas.

https://uigradients.com/#Joomla esta tambien es una excelente herramienta

As铆 vamos por ahora鈥 Me encanta ir avanzando en gran parte por mi cuenta y continuar tomando ejemplo del v铆deo cuando se me aparece una duda en la mente. 隆S煤per contenta!

Tengo varios d铆as programando, y hasta ahora me parece que Diego explica de maravilla.

Una manera para alinear el h1, el p谩rrafo y el bot贸n (etiqueta <a>) es poniendo el siguiente c贸digo en el div donde est谩n estos tres elementos

div{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-align: center;
	align-self: center;
}
.header--title-container h1{
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--just-white);
}
.header--title-container p{
    font-size: 1.4rem;
    margin-top: 25px;
    line-height: 1.8rem;
    color: var(--soft-orange);
}```

Hola amigos,

El gradiente puede tambi茅n ser creado a trav茅s de las variables definidas en :root.

header {
    background: linear-gradient(207.8deg, var(--warm-black), var(--bitcoin-orange));
}

Gran herramienta!. Me romp铆a la cabeza antes utilizando im谩genes de fondo, pero con 茅sta se ve mucho m谩s amigable.

Alguien que me pueda ayudar!! las variable no me funcionan en CSS pero si le pongo el color directamente si 馃馃馃

:root {
    /* Colores */
--bitcoin-orange: #F7931A;
--soft-orange: #ffe9d5;
--seconday-blue: #1a9af7;
--soft-blue: #e7f5ff;
--warm-black: #201e1c;
--black: #282623;
--grey: #bababa;
--off-white: #FAf8f7;
    --just-white:#fff;
}
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    font-size: 62.5%;
    font-family: Arial, Helvetica, sans-serif;
}
header{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-width: 320px;
    height: 334px;
    text-align: center;
    background: linear-gradient(207.8deg, #201e1c 16.69%, #f7931a 100%);
}
header img{
    width: 150px;
    height: 24px;
    margin-top: 60px;
    align-self: center;
}
.header--title-container {
    width: 90%;
    min-width: 288px;
    max-width: 900px;
    height: 288px;
    margin-top: 50px;
    text-align: center;
    align-self: center;
}
.header--title-container h1 {
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--just-white);
}
<co
background: linear-gradient(#e66465, #9198e5);
Copy to Clipboard
background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);
background: linear-gradient(to left, #333, #333 50%, #eee 75%, #333 75%);
background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0de> 

pense que con un 50% de negro y un 50% de anaranjado, tambien se difuminaria solo que mas parejo para ambos colores鈥 seg煤n yo, pero me sali贸 esto鈥 馃槀馃槀

Si a alguien le sale la fuente m谩s grande a la del ejemplo y tiene todo igual, es porque el navegador no tiene el tama帽o de fuente por defecto de 16px. Not茅 que mi navegador lo tiene de 20px. Para este caso, hay dos alternativas de soluci贸n en el selector html:

html {
    font-size: 50%; /*alternativa 1: 20px*0.5=10px*/
    font-size: 10px; /*alternativa 2: constante*/
    font-family: "DM Sans", sans-serif;
}

Les recomiendo esta pagina para que puedan copiar cientos de estilos en degradacion de colores: https://uigradients.com/#GradeGrey

Si alguien m谩s se pregunta 驴por qu茅 2.6 rem son 26px y 2.4 rem son 24px? aqu铆 les va la respuesta corta

Primero que nada la definici贸n de 鈥渞em鈥 es un tipo de atributo que escala en funci贸n del tama帽o de fuente raiz, as铆 por ejemplo si tu fuente raiz es de 30px, 1rem= 30px, 2rem = 60px

Si recuerdan al principio definimos estos estilos para el HTML

html {
     font-size: 62.5%;
     font-family: 'DM Sans', sans-serif;
 }

Resulta que en la mayoria de los navegadores 62.5% es igual a 10px, por lo tanto el 鈥渞em鈥 se vuelve m谩s facil de calcular

As铆 que 62.5% = 10px
1rem= 10px
2rem=20px
2.4rem=24px

Linear Gradient:

En la propiedad background-image: podemos pasarle por valor una funci贸n que nos crear谩 un degradado y esta es:

background-image: linear-gradient(red, blue);

C贸mo cualquier otro degradado, un degradado lineal no tiene dimensiones intr铆nsecas; es decir, no tiene un tama帽o natural o predefinido, ni una relaci贸n de aspecto. Su tama帽o concreto se ajustar谩 al del elemento al cual se le aplica.

Los gradientes lineales est谩n definidos por un eje, la l铆nea gradiente, donde cada punto representa el inicio de un color diferente. Las l铆neas perpendiculares a la l铆nea gradiente tienen un 煤nico color, para cada punto de la l铆nea gradiente.

Dependiendo de su orientaci贸n puede cambiar la l铆nea perpendicular de Start and End.

Magic corners (esquinas m谩gicas): La esquina m谩s cercana de los puntos de inicio y fin, tienen el mismo color que su respectivos puntos de inicio y fin.

Sintaxis:

Formal grammar: linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ ) \---------------------------------/ \----------------------------/ Definition of the gradient line List of color stops where <side-or-corner> = [left | right] || [top | bottom] and <color-stop> = <color> [ <percentage> | <length> ]?

Ejemplo:

linear-gradient( 45deg, blue, red ); /* A gradient on 45deg axis starting blue and finishing red */ linear-gradient( to left top, blue, red); /* A gradient going from the bottom right to the top left starting blue and finishing red */

Para el gradiente tambi茅n se pueden usar las variables que ya ten铆amos de esos colores

background: linear-gradient(207.8deg, var(--warm-black) 16.69%, var(--bitcoin-orange) 100%);

para que tengas una mejor visualizaci贸n del contenido utiliza la opcion

en mac:

en windows:

Estaba todo bien solo que al final empezo a salirse todo del context, unos barras overflow en el width, me volvi loco buscando el problema y era el navegador fallando, si tienen problemas toquen varias veces la opcion en el simbolo responsive(unos celulares) toggle device toolbar(ctrl + shift + m).

Degradados lineales CSS:
Para crear un degradado lineal, se debe definir al menos dos paradas de color. Las paradas de color son los colores entre los que desea generar transiciones suaves. Tambi茅n puede establecer un punto de partida y una direcci贸n (o un 谩ngulo) junto con el efecto de degradado.

Syntaxis:

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

EJEMPLO:

#grad {
  background-image: linear-gradient(red, yellow);
}

C贸digo CSS de la clase:

.header--title-container h1 {
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--just-white);
}
.header--title-container p {
    margin-top: 25px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: var(--soft-orange);
}

Listo!

header {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-width: 320px;
    height: 334px;
    text-align: center;
    background: linear-gradient(207.8deg, #201E1C 16.69%, var(--bitcoin-orange) 100%);
}
.header__title-container h1 {
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--just-white);
}
.header__title-container p {
   margin-top: 24px; 
   font-size: 1.4rem;
   font-weight: 500;
   line-height: 1.8rem;
   color: var(--soft-orange); 
}

Con esto veo lo importante que es hacer primero un proyecto en Figma y aprender a usar esa herramienta. Sin duda es una gran ayuda al momento de querer darle vida a cualquier proyecto que tengamos en mente

Diego is an excellent teacher! 馃懆馃徎鈥嶐煉

Con la combinaci贸n alt + z puedes ajustar el c贸digo al tama帽o del monitor.

Ah铆 vamos:

El degradado usando las variables.

background: linear-gradient(207.8deg, var(--warm-black) 16.69%, var(--bitcoin-orange) 100%);

pasito a pasito

voy asi:

*{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}

:root {  /* Colores */
   
        --bitcoin-orange: #f7931a;
        --soft-orange: #ffe9d5;
        --secondary-blue: #1a9af7;
        --soft-blue: #e7f5ff;
        --warm-black: #282623;
        --black: #201e1c;
        --grey: #bababa;
        --off-white: #faf8f7;
        --just-white: #fff;
        }

html {
     font-size: 62.5%;
     font-family: 'DM Sans', sans-serif;
}
/* 
1.Posicionamiento --> static, absolute, relative, fixed
2.Modelo de caja (Box model) --> margin, border, padding, content
3.Tipograf铆a --> tipos, tama帽os de fuente, etc
4.Estilos visuales --> box-shadow, border-radius, gradient, etc
5.Otros --> reglas CSS y m谩s
*/

header {
    position: relative; /*posicion relativa para que pueda moverse */
    display: flex; /* aplicamos flex al contenedor*/
    flex-direction: column;
    justify-content: center; /*justifica el contenido entre si*/
    width: 100%;
    min-width: 334px;
    text-align: center; /*alinea los elementos en el area*/
    background: 
    linear-gradient(207.8deg,
     #201E1C 16.69%,
     #F7931A 100%);
        
    }

header img {
    width: 150px;
    height: 24px;
    margin-top: 60px;
    align-self: center;
}

.header__title--container {
    width: 90%;
    min-width: 288px;
    max-width: 900px;
    height: 218px;
    margin-top: 40px;
    text-align: center; /* alinea texto */
    align-self: center; /*alinea posici贸n del texto en el area -centralizar-*/
}
.header__title--container h1 {

    font-size: 2.4rem; /*24px*/
    font-weight: bold;
    line-height: 2.6 rem; /* 26px separacion entre lineas*/
    color: var(--just-white);
}
.header__title--container p {
    margin-top: 25px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: var(--soft-orange)
}

En el font-weight de 500 le puse normal 馃憖

No conoc铆a esta herramienta line-height, pero vaya que si es muy 煤til! Justamente la semana pasada estuve practicando en mi portafolio y me parec铆a muy espaciado, pero no pens茅 que se pudiera modificar
Simplemente CSS es maravilloso, si lo conoci茅ramos por completo nos dariamos cuenta de todo lo que puede hacer por si solo

Hola!
Quer铆a aportar con algo que no s茅 si en el futuro del curso lo implementar谩 el profesor, pero lo quer铆a hacer:
Para a帽adirle un icono a la p谩gina pueden usar esta l铆nea de c贸digo de html:
<link rel=鈥渟hortcut icon鈥 href="./assets/icons/batata.svg" type=鈥渋mage/x-icon鈥>
Espero les sirva!

Les comparo mi codigo espero les sea de ayuda

<code> /* 
 1. Posicionamiento
 2. Modelo de caja (Box model)
 3. Tipografia
 4. Visuales
 5. Otros
 */
:root {
    /* Colores */
    --bitcoin-naranja: #F7931A;
    --soft-naranja: #FFE9D5;
    --secondary-azul: #1A9AF7;
    --soft-azul: #E7F5FF;
    --warm-negro: #282623;
    --negro: #201E1C;
    --gris: #BABABA;
    --off-blanco: #FAF8F7;
    --just-blanco: #FFF;    
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;
    font-family: 'DM Sans', sans-serif;
}
header {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-width: 32rem;
    height: 33.4rem;
    text-align: center;
    background: linear-gradient(232deg, #201e1c, #f7931a);
    background-size: 175% 175%;
    -webkit-animation: bgAnimateBitcoin 10s ease infinite;
    -moz-animation: bgAnimateBitcoin 10s ease infinite;
    animation: bgAnimateBitcoin 10s ease infinite;
}

@-webkit-keyframes bgAnimateBitcoin {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes bgAnimateBitcoin {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes bgAnimateBitcoin {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

header img {
    width: 15rem;
    height: 2.4rem;
    margin-top: 6rem; 
}
.header__container {
    width: 90%;
    min-width: 28.8rem;
    max-width: 90rem;
    height: 21.8rem;
    margin-top: 3rem;
}
.header__container h1 {
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--just-blanco);
}
.header__container p {
    margin-top: 2.5rem;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: var(--soft-naranja)
}

馃摙馃摙 AVISO IMPORTANTE 鉂椻潡

Notas de la clase:

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11

Gracias!

para las personas que deseen agregar un background-image a su header

background-position: center;
  background-attachment:unset;
  background-size: cover;
  background-image:linear-gradient(205.3deg, rgba(89, 158, 25, 0.753) 16.8%, rgba(255, 255, 255, 0.589) 100% ), url(nombre-de-la-imagen.jpg);

Puedes usar align-items: center, space-around o space-evenly para distribuir el espacio vertical entre los elementos si el contenedor padre es display flex, o justify content: center si el flex-direction es column, de ese modo te ahorras el tener que asignar m谩rgenes manualmente a cada elemento porque siempre y cuando tengas width/height establecido en los elementos flex padre, este espacio se repartir谩 seg煤n sea el valor de justify-content o align-items si es row/column

Esta p谩gina explica muy bien el funcionamiento del linear-gradient 馃槉

.header--title-container h1 {
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--just-white);
}
.header--title-container p{
    margin-top: 25px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: var(--soft-orange);
}

Super cosas que no conocia en este curso! Todos los dias se aprende practicando y estudiando!

asi me quedo

A tener en cuenta el uso de rem en vez de px para fuentes.

para hacer un backgraund difuminado se usa:
background: linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%);
(grados , color, porcentaje del color, color2, porcentaje del color2)

todos las variantes de background incluido el linear grandient https://cssreference.io/backgrounds/

Si no quieres buscar el apartado de Toggle Word Wrap
En Windows solo presiona las siguientes combinaciones en el teclado:

<code> 
ALT + Z 
<code>
.header--title-container h1{
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--just-white);
}

.header--title-container p{
    margin-top: 25px;
    font-size: 1.4rem;
    line-height: 1.8rem;
    font-weight: 500;
    color: var(--soft-orange);
}

Peque帽o detalle en el inspector (MS Edge) para entender el tema de los grados

Les recomiendo darse una vuelta a estudiar un poco de SASS, con las bases que se han dado en el curso realmente es muy f谩cil poder comprender este preprocesador, les har谩 la vida muy f谩cil una vez que lo dominan, les dejo mi ejemplo de estilos con SASS.

Les comparto una excelente web para usar hermosos gradientes predefinidos https://uigradients.com/

Un peque帽o aporte, creo que es mejor trabajar con var() para as铆 tener m谩s ordenado el c贸digo:

background: linear-gradient(207.8deg, var(--black) 16.99%, var(--bitcoin-orange) 100%);    

el 100% en 煤ltimo color del gradiente es innecesario ya que este viene por default, quedar铆a as铆 si lo quitamos.

  background: linear-gradient(207.8deg, #201E1C 16.69%, #F7931A);

Este porcentaje indica en que parte del gradiente este 煤ltimo color se vuelve fijo Documentaci贸n de linear gradient.

Otra linea que podr铆amos ahorrarnos es la de font-weight: bold ya que este viene por default en el h1

Creo que alguien ya lo coment贸 en la clase pasada pero para no estar escribiendo a cada rato el text-align y align-self en cada parte del header mejor aprovechamos que estamos usando flex en el header y usamos align-items: center para alinear los elementos del header y text-align: center para que este sea heredado, as铆:

.header{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 32rem;
  height: 33.4rem;
  text-align: center;
  background: linear-gradient(207.8deg, #201E1C 16.69%, #F7931A);
}

line-height es como el llamado interlineado en Microsoft Word

Si a alguien le sale el bug de chrome con la propiedad font-size: 62.5% usen 10 px en cambio

Grande degranda.

馃憣

muy interesante las propiedades usadas en esta clase.

buena clase

muy buen video vamos con todo en estos momentos

line-height: 2.6rem; /* altura del interlineado ;D */

Documentaci贸n de CSS gradient

Les dejo una pagina que explica los degradados en CSS
Aporte

header{
background: linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%);
}

Para agregar el fondo con degradado a nuestro header es necesario utilizar:
background: linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%);

CSS Header

header img{
    width: 150px;
    height: 24px;
    margin-top: 60px;
    align-self: center;
}


.header--tittle-container{
    width: 90%;
    min-width: 288px;
    max-width: 900px;
    height: 218px;
    margin-top: 50px;
    text-align: center;
    align-self: center;
}

.header--tittle-container h1{
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color:var(--just-white);
}

.header--tittle-container p{
    margin-top: 25px;
    font-size: 1.4rem;
    line-height: 1.8rem;
    color:var(--soft-orange);

}

Si quieren aprender m谩s sobre somo usar linear-gradient les recomiendo leer la documentaci贸n de mozilla. Linear Gradient MDN

Hola, puede sucederle como a mi que con la linea background: linear-gradient() no les de.

En cambio si la ponen asi background-image: linear-gradient(); les da.