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–title-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(–just-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–title-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(–soft-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 91

Preguntas 39

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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)
}

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!😃

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

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 “to”
    • 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 “rem” 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 “rem” 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.

estoy usando sas y en esta linea de codigo estoy intentado hacer lo de el back ground color, pero no entiendo porque simplemente no me renderiza ```js background-color: linear-gradient(207.8deg,#282623 17%,$bitcoin-orange 83%); ```  background-color: linear-gradient(207.8deg,#282623 17%,$bitcoin-orange 83%);
No entiendo porque la altura no me queda igual, 334 se me hace muy pequeño y el texto sobresale del fondo
el background del header se me parte a la mitad del texto cuando lo coloco en telefonos chicos
**Clase 10 - Uso de linear-gradient** * **¿Cómo se le llama en CSS al background que tiene dos colores diferentes?** * Linear gradient. * **¿Cómo podemos aplicar un Linear gradient en CSS?** * Para poder aplicar un linear gradient en CSS debemos de usar la propiedad “background” y en su valor escribir los colores que vayamos a usar. * **¿Cuál es la sintaxis que debemos de usar para aplicar un Linear gradient en CSS y cómo funciona?** * La sintaxis que debemos de usar es la siguiente: ```js selector { background: linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%); } ``` * **¿Qué cosas debemos de tener en cuenta cuando queremos usar un linear gradient?** * No se debe dejar espacios entre el valor “linear-gradient” y sus paréntesis. * Esta propiedad recibe 3 valores: * Coordenadas del punto de separación de los colores. * Color 1 y su porcentaje. * Color 2 y su porcentaje. * Cada valor dentro del paréntesis debe ir separado por una coma. * **¿Qué herramienta web podemos usar para crear gradientes para nuestras webs?** * CSS Gradiente**** [**<u>https://cssgradient.io/</u>**](https://cssgradient.io/)****  * **¿La especificidad nos ayuda a prevenir inconvenientes con frameworks de CSS?** * Sí. * **¿Para qué nos sirve la propiedad line-height?** * Esta nos permite modificar el interlineado de un texto. * **¿Cómo se le llama a un elemento de una página web que se encuentra entre dos secciones?** * Elemento flotante.

line-height: Comúnmente se usa para establecer la distancia entre líneas de texto.

genial…!

Clase 10: Luego de [implementar el BEM](https://platzi.com/clases/2030-mobile-first/32306-implementando-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](https://www.figma.com/file/sMmlQaZldfDcLERYYWe6h4/Bata-Bit?node-id=68%3A168). 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](https://static.platzi.com/media/articlases/Images/image%28166%29.png) 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](https://cssgradient.io/). 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](https://static.platzi.com/media/articlases/Images/image%28167%29.png) * Llamamos la etiqueta ***h1*** usando el nombre de la clase contenedora ***.header–title-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(–just-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–title-container***. ![image.png](https://static.platzi.com/media/articlases/Images/image%28168%29.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(–soft-orange)\*\*\*. `.header--title`-container p { ` margin-top: 25`px; ` 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](https://static.platzi.com/media/articlases/Images/image%28169%29.png) ¡Se ve mucho mejor! Continuemos con la última parte del header, el botón flotante.

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=“shortcut icon” href="./assets/icons/batata.svg" type=“image/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.