linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%);```
Bienvenida al curso
Por qué aprender Responsive Design con Mobile First
Setup inicial
Analizando el diseño: proyecto del curso
El valor de Mobile First
Arquitectura inicial
Assets de nuestro proyecto
Fuentes de nuestro proyecto
Estilos base
Sección de Header
Maquetación del header
Implementando BEM
Uso de linear-gradient
Uso de position para botón flotante
Sección de Intercambios
Estructura base de la sección de intercambio
Imagen de background
Estructura de tabla de monedas
Estilos base de tabla de monedas
Detallando estilos de tabla de monedas
Finalizando estilos de tabla de monedas
Sección de Beneficios
Estructura base de la sección de beneficios
Estilos de la sección de beneficios
Maquetando tarjetas de beneficios
Sección de Planes
Maquetando sección comodín
Estructura de sección de planes
Aplicando estilos a sección de planes
Aplicando estilos a las tarjetas de la sección de planes
Detallando estilos en tarjetas de planes
Aplicando estilos al botón de call to action
Scroll horizontal con CSS
Sección de Footer
Footer
Media Queries
Aplicando media queries
Lighthouse
Análisis con Lighthouse
Próximos pasos
Cierre y próximos pasos
Comparte tu proyecto y certifícate
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
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.
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%);
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.
.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)
}
En el navegador deberíamos poder ver este resultado:
¡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
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);
/*Entero*/
background: linear-gradient(270deg, #201E1C 16.69%, #F7931A 100%);
/*Decimal*/
background: linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%);
/*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%);
/*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>
Para comprender mejor linear gradient https://developer.mozilla.org/es/docs/Web/CSS/linear-gradient
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
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.
line-height: Comúnmente se usa para establecer la distancia entre líneas de texto.
genial…!
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:
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.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?