A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Uso de position para bot贸n flotante

11/31
Recursos

Aportes 119

Preguntas 48

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Les comparto otras alternativas para posicionar el bot贸n (quitando el margin-top):

Usando calc() tambi茅n en top:

.header__title-container .header__button {
	position: absolute;
	top: calc(100% - 24px);
	left: calc(50% - 114.5px);
}

Usando translate():

.header__title-container .header__button {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -24px);
}

Si son unos enfermos de la simetria como yo jeje, se tiene que tomar el 50% del total del width del contenedor en este caso 229px y quedaria asi:
left: calc(50% - 114.5px);

Una forma m谩s f谩cil de centrar al bot贸n ser铆a as铆:

    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto;
}```

Creo que es m谩s sencillo, queda perfectamente alineado sin necesidad de hacer c谩lculos nosotros mismos.

A m铆 me daba problemas el icono down-arrow porque hab铆a descargado de Figma lo que pone #mdi_keyboard_arrow_down.
Descargando en su lugar donde pone Vector me queda como al profe.

Hola 馃槃

Espero terminar la escuela de desarrollo web creandole una pagina web a mi esposa

Vengo a ahorrarles dolores de cabeza
Tengan cuidado con los espacios en la opcion calc por que de lo contrario no tomara el estilo.

Les comparto info sobre la funci贸n CALC.

La funci贸n CSS Calc() permite realizar operaciones con los valores de propiedades CSS.
Se puede usar para operar con medidas, frecuencias, 谩ngulos, tiempo, porcentajes, n煤meros y enteros.

Sintaxis:

/*Propiedad: calc ( expresi贸n)*/
width: calc(100% - 80px);

Se pueden utilizar operaciones de suma (+), resta (-), multiplicaci贸n (*) y divisi贸n (/). En el caso de la suma y resta, es necesario siempre dejar espacios en blanco (whitespaces) entre los valores para que no se generen errores.

Saludos comunidad

Leyendo los comentarios de la comunidad me di cuenta que mi proyecto corria peligro de romperse ya que todas mis unidades de medida estaban en rem, por lo que si el usuario hacia ajustes del tama帽o de fuente en su navegador, todo el dise帽o seria distinto. Asi que cambie todas ellas a px de inmediato! pero鈥 jugando con las dimensiones de fuente en el navegador (especificamente chrome) mi dise帽o se rompia igual, pero entendi el porque.
Cuando el font size del texto crece (al ajustar la configuracion del navegador) lo hace hacia abajo junto a su line height y el contenido puede quedar debajo de algun elemento flotante (como el boton del header en posicion absolute en este proyecto).
Usando esta linea de codigo css en el header:

height: 353px;

con una configuracion de mi browser de:

el proyecto se rompe de esta manera:

pero鈥

con este codigo en el header:

height: 35.3rem;

y la misma configuracion del navegador, el proyecto quedaba asi:

Por lo tanto podriamos concluir que鈥

De preferencia ajustar propiedades verticales que NO sean font-size usando rem.

Esto lo descubri jugando con el tama帽o de fuente del navegador y las propiedades rem y px.
De seguro deben haber buenas practicas sobre el tema ahi fuera u optimizaciones para proyectos web a todo terreno. Si conoces mas informacion sobre el tema suma tu comentario, hagamos debate e intercambio de ideas. Ese conocimiento nos ayudara a todos!

Estilos .header--title-container .header--button:

  position: absolute;
  left: calc(50% - 118px);
  top: 270px;
  display: block;
  margin-top: 35px;
  padding: 15px;
  width: 229px;
  height: 48px;
  background: var(--off-white);
  box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
  border: none;
  border-radius: 4px;
  font-size: 1.4rem;
  font-weight: bold;
  text-decoration: none;
  color: var(--black);

Estilos .header--title-container .header--button span:

  display: inline-block;
  width: 13px;
  height: 8px;
  margin-left: 10px;
  background-image: url("../assets/icons/arrdown.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

Position absolute toma a position relative como padre directo y puede reposicionarse en cualquier parte del header.

Al principio de la clase creo que el profe se equivoco, pues si es posible usar top, right, left y bottom con position: relative y lo hace desde su punto original de su posicion, a diferencia de absolute que modifica el flujo de nuestro layout. Solo position: static no nos deja usar las 4 propiedades offset antes mencionadas (top, left, etc).

Si tienen problema con la imagen como la descarg贸 Diego, les sugiero bajarla como Vector.svg

Bien!!! Genial!!

Ven铆amos _taaan _bien con las explicaciones y tuvo que aparecer un bot贸n flotante con posici贸n absoluta y ahora hay que hacer c谩lculos para que quede mitad ac谩 y mitad all谩. 馃槮

Alinear un bot贸n con:
position: absolute;
left: calc(50% - 114.5px);
width: 229px;

/* Si solo ponemos left: 50%; pone el lado izquierdo de la caja en el centro, independientemente de cuanto (width) mida nuestra caja. Para que tome el centro de la caja como referencia para posicionar y no el lado izquierdo de la caja hay que hacer el calculo. Tomamos la mitad del Width de la caja, en este caso 114.5px y lo restamos con el 50%. Le estar铆amos diciendo que la caja lo ponga a la mitad de la anchura de la ventana y que mueva 114.5 pixeles m谩s a la izquierda ya que ah铆 es el centro de mi caja. */

Para centrar a la mitad el boton, se mueve desde la izquierda un 50%, pero el boton empieza en ese 50% por lo que tenemos que restar a este 50% la mitad del ancho de nuestro boton, en este caso:
229px/2 =114.5px

No me gusta usar tantos valores fijos en px preferiria utilizar rem o % entiendo para los min-width/max-width o algunos otros. Que piensan ustedes sobre el uso de unidades absolutas como px como lo esta haciendo el profesor?

Esta es mi solucion a el problema de centrar el boton usando margin

.header--button {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding: 20px;
    width: 229px;
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
    color: var(--warm-black);
    border: none;
    border-radius: 5px;
    background-color: var(--off-white) ;
    /* Shadow */
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
    transform: translateY(-24px);
}```

Yo lo hice con el display inline-flex y me ayudo a no tener que hacer c谩lculos, quedando centrado, solo agregando el tama帽o y el margin.
Es mi aporte pero si alguien nota alg煤n error me encantar铆a que me lo comentara

.header--container-button {
    display:inline-flex;
    justify-content: center;
    align-items: center;
    margin-top: 35px;
    width: 229px;
    height: 48px;
    font-size: 1.4rem;
    font-weight: bold;
    background-color: var(--off-white);
    color: var(--warm-black);
    text-decoration: none;
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
    border-radius: 4px;
    
}

Les comparto el c贸digo de la clase:

.header--title-container .header--button {
    position: absolute;
    left: calc(50% - 114.5px);
    top: 270px;
    display: block;
    margin-top: 35px;
    padding: 15px;
    width: 229px;
    height: 48px;
    background-color: var(--off-white);
    /*Sombra*/
    box-shadow: 0px 4px 8px rgba(89,73,30,0.16);
    border: none;
    border-radius: 5px;
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
    color: var(--black);
}
.header--button span {
    display: inline-block;
    width: 13px;
    height: 8px;
    margin-left: 10px;
    background-image: url('./assets/icons/down_arrow.svg');
}

Aqu铆 les dejo la documentaci贸n que explica como se usa calc().
https://developer.mozilla.org/es/docs/Web/CSS/calc()

left: calc(50% - 114.5px);

Puede quedar de la siguiente manera para que sea justo la mitad de los 229px que se est谩n usando en el width.

Esto les servir谩 para centrar el elemento sin tener que saber las dimensiones exactas del elemento:

    left: 50%;
    transform: translateX(-50%);

El transform lo que hace es mover el elemento respecto a su propio centro. En este caso yo indico que quiero moverlo en su eje X, un 50% de su ancho actual en direcci贸n negativa, es decir, a la izquierda 馃憤

position absolute toma como referencia a su padre siempre y cuando el padre sea position relativa, caso contrario toma al padre mas cercano que tenga relative y si ninguno lo tiene toma como referencia html

Otra manera de posicionar elementos al centro con posicion absolute es:

position: absolute;
// Mueve en horizontal respento al contenedor relativo
left: 50%;	
// Retrocede el elemento respento a la mitad de su propio tama帽o
transform: translateX(-50%);

Les puedo sugeriri usar los iconos de fontawesome con la siguiente cdn, esta debe ir entre las etiquetas <head></head>

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

van a esta url
font awesome
y escogen los iconos que quieran usar y copian y pegan el html que simpre es una etiqueta <i> con las respectivas clases del icono.
Ejemplo:

<i class="fas fa-chevron-down"></i>

el 50% es para que el bot贸n se posicione justo en la mitad de la pantalla, pero no centrado como queremos, sino que ah铆 comienza.
entonces hay que restarle a eso la mitad de lo que mide nuestro bot贸n para correrlo m谩s al centro.

Centrar es mas facil como :

display: inline-block;
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%, 50%);

Yo utilice 115px en left: calc(50% - 115px);

Me pareci贸 m谩s centrado.

otro aporte al momento de usar calc en caso de querer sentrar el numero excato NOSOTROS lo debemos calcular el cual es sumar, todo lo q queda en el 鈥渆je inline鈥 q seria el margin left y right al igual q el padding y si hubiera borde tambien y alli ese resultado dividirlo a la mitad y alli sale para hacer el calculo de left

cal(50% - xxx px)

Me gust贸 much铆simo esta clase. Aprend铆 bastante con la explicaci贸n del profe Diego. Sin palabras. 馃挌

Otra forma de hacerlo ser铆a dividiendo el width del elemento por 2, por ejemplo;

.header--title-container .header--button {
	position: absolute;
	left: calc(50% - (229px / 2));
	top: 270px;
	display: block;
	width: 229px;
	height: 48px;
}

Como la tecnolog铆a BEM sugiere en lo posible no mezclar en un selector tags html con clases, he realizado la siguiente alternativa:
HTML

<header class="header">
    <img class="header__img" src="./assets/images/logo.svg" alt="Logo de Batatabin" />
    <div class="header__title">
        <h1 class="header__title__h1">La pr贸xima revoluci贸n en el intercambio de criptomonedas</h1>
        <p class="header__title__p">Batatabit te ayuda a navegar entre los diferentes precios y tendencias</p>
        <div class="header__button">
            <a class="header__button__a" href="">Conoce nuestros planes</a>
            <spam class="header__button__icon"></spam>
        </div>
    </div>
</header>

CSS

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

.header__img{
    width: 150px;
    margin-top: 60px;
}

.header__title{
    width: 90%;
    min-width: 288px;
    max-width: 900px;
    height: 218px;
    margin-top: 40px;
}

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

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

.header__button{
    position: absolute;
    top: 270px;
    left: calc((100% - 229px)/2);
    width: 229px;
    height: 48px;
    margin-top: 35px;
    padding: 15px;
    background-color: var(--off-white);
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(89,73,30,0.16);
    font-size: 1.4rem;
}

.header__button__a{
    font-weight: bold;
    color: var(--black);
    text-decoration: none;
}

.header__button__icon{
    display: inline-block;
    width: 13px;
    height: 8px;
    margin-left: 10px;
    background-image: url('../assets/icons/down-arrow.svg');
}

Espero que a alguien le sea 煤til

Si a alguien no le aparece la flechita al final, agreguen eun background-position:

.header--button span {
    display: inline-block;
    width: 13px;
    height: 8px;
    margin-left: 10px;
    background-image: url("./Assets/Icons/arrow_down.svg");
    background-position: center;
}

Para los que tambi茅n quieran posicionarlo tipo pixel perfect:

  • Vean el width del contenedor = 320px ( Equivale al 100%),
  • La posici贸n del bot贸n en figma esta justo a 45px de izquierda a derecha.
  • Apliquen regla de 3, si el 100% es 320px, 45px = 14.0625%.
    Esto colocara el bot贸n justo en el punto exacto seg煤n el dise帽o.
.header--title-container .header--button{
    position: absolute;
    left: calc(14.0625%);


Para los que no le aparece la flechita, como comento otro compa帽ero lo solucione con:
background-position: center;

Ese bot贸n no esta para nada centrado, y si tienes un container flex, no le veo el caso de centrar de esa manera, cuidado que lo que mal se aprende, no se olvida.

Yo a mi proyecto le agregu茅 un navbar con un men煤.

<h4>Repaso del Header</h4>
  • Implementamos display flex para usar column y posicionar el contenido de adentro como align self
  • Box shadow para utilizar sombras
  • Usar position para poder posicionar de la forma que queramos un elemento
  • Usar gradient para tener un fondo difuminado

Hice unas pocas modificaciones para posicionar el bot贸n de una forma m谩s precisa.

.header--title-container .header--button {
  position: absolute;
  bottom: -24px; // Es m谩s f谩cil tomar distancia desde abajo que desde arriba, lo ubiqu茅 usando la mitad de la altura del bot贸n
  left: 0;
  right: 0;
  margin: auto; // Esta y las dos declaraciones anteriores centran el bot贸n horizontalmente
  padding: 15px;
  width: 229px;
  height: 48px;
  background-color: var(--off-white);
  box-shadow: 0 4px 8px rgba(89,73, 30, 0.16);
  border: none;
  border-radius: 5px;
  font-size: 1.4rem;
  font-weight: bold;
  text-decoration: none;
  color: var(--black);
}

De esta otra forma el boton puede quedar centrado cuando sale de la caja padre:
.header鈥搕itle-container .header鈥揵uttom {
/* top: 270px; /
/
margin-top: 35px; */
bottom: -24px;
}

Al ingresar buttom 鈥0鈥 se posiciona al limite del padre, y si tomo la mitad del alto del tama帽o del boton, se centra por fuera del div padre

Super 馃槂

Algo que me ha servido mucho con la funci贸n de c谩lcculo cuando quiero algo muy exacto y no quiero estar adivinando es lo siguiente:

.class {
	position: absolute;
	left: calc(50% - calc(100px / 2));
	width: 100px;
}

De manera que si mi ancho es de 100px y suponiendo que no quiero estar buscando cuanto es la mitad o simplemente no quiero hacerlo cada vez que cambie el ancho o alto, entonces uso la funci贸n calcular para sacar primero la mitad y luego esa mitad la resto al 50% del ancho de la caja.

Hasta ahora me ha gustado mucho el curso, he visto comentarios de personas que saben m谩s y hacen sugerencias creo que esta perfecto siempre que sean constructivos.
Personalmente estoy empezando la escuela de desarrollo web y CSS hasta ahora me ha parecido complejo por lo amplio que es, con este curso he aprendido muchisimo y claro la idea es seguir practicando.

es incre铆ble ver el resultado final del header 馃槃

Ser铆a muy bueno que en alguna nueva revisi贸n de CSS implementen alguna variable o funci贸n estilo self.width para poder utilizar mejor la funci贸n calc a la hora de centrar el bot贸n.

Para los que no les sirve posicionar el button apliquen esto en su html

<div class=鈥渉eader鈥揵utton鈥><a href="" class=鈥渉eader鈥揵utton-a鈥>Conoce Nuestros Planes<span></span></a></div>

Y Esto va en el css

.header鈥搕itle-conteiner .header鈥揵utton {
position: absolute;
top: calc(100% - 24px);
left: calc(50% - 114.5px);

<h3>No es mucho, pero mi aporte: Estilos en scss</h3>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Batata Bit</title>
  <link href=鈥渉ttps://fonts.googleapis.com/css2?family=DM+Sans:[email protected];500;700&family=Inter:[email protected];500&display=swap鈥
    rel=鈥渟tylesheet鈥>
  <link rel="stylesheet" href="./assets/styles/styles.css">
</head>
<body>
  <header class="header">
    <img class="header-img" src="./assets/img/logo.svg" alt="Logo de Batatabit" title="Logo de Batatabit">
    <div class="header-title-container">
      <h1>La pr贸xima revoluci贸n en el intercambio de criptomonedas</h1>
      <p>Batatabit te ayuda a navegar entre los diferentes precios y tendencias</p>
      <a class="header-button" href="#">Conoce Nuestros Planes <span></span></a>
    </div>
  </header>
  <main>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
  </main>
  <footer></footer>
</body>
</html>
:root {
  /* Colores */
  --bitcoin-orange: #f7931a;
  --soft-orange: #ffe9d5;
  --secondary-blue: #1a9af7;
  --soft-blue: rgb(231, 245, 255); 
  --warm-black: #201e1c;
  --black: #282623;
  --grey: #bababa;
  --off-white: #faf8f7;
  --just-white: #fff;
  --shadow-btn: #59491e29;
}

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

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

.header {
  position: relative; // Esto es solo para que el bot贸n flote
  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%);

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

  &-title-container{
    width: 90%;
    min-width: 288px;
    max-width: 900px;
    height: 218px;
    margin-top: 36px;
    text-align: center;
    align-self: center;
    
    h1 {
      color: var(--just-white);
      font-size: 2.4rem;
      font-weight: bold;
      line-height: 2.6rem;
    }

    p {
      color: var(--off-white);
      font-size: 1.4rem;
      font-weight: 500;
      line-height: 1.8rem;
      margin-top: 32px;
    }
    
    .header-button {
      background: var(--off-white);
      border: none;
      border-radius: 5px;
      color: var(--warm-black);
      display: block;
      font-size: 1.4rem;
      font-weight: bold; 
      padding: 15px;
      text-decoration: none;
      height: 48px;
      width: 229px;
      position: absolute;
      top: calc(100% - (48px/2)); // 48 es el height
      left: calc(50% - (229px/2)); // 229 es el width
      box-shadow: 0 4px 8px var(--shadow-btn);

      span {
        display: inline-block;
        background: url('../icons/down-arrow.svg');
        margin-left: 10px;
        height: 8px;
        width: 13px;
      }
    }
  }
}

Para posicionar el bot贸n y no realizar los calculos yo hice lo siguiente:

.header__title-container .header__button {
    position: relative;
    display: inline-block;
    top: 20px;
}

Al a帽adir la flecha la tenia torcida y lo solucione con display flex de la siguiente manera

.header--title-container .header--button {
    	.
	.
	.
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  	.
	. 
	.
}

Yo posicion茅 el bot贸n de una manera muy diferente, les dejo mi c贸digo.

.header--title-container .header--button {
    position: relative;
    top: 2.6rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    background-color: var(--off-white);
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
    width: 229px;
    height: 48px;
    color: var(--warm-black);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.4rem;
}

Tambi茅n quer铆a hacer notar que el profesor no sigue siempre los tama帽os que el dise帽o en Figma dicen, un ejemplo en concreto es el border-radious 驴Por qu茅 le pone 5px si el dise帽o dice 4px? Me molesta que escoja de manera un poco antojadiza los tama帽os, si tenemos un dise帽o predeterminado.

vamos progresando! 鉂わ笍

.header__title-container .header__button {
    position: absolute;
    left: calc(50% - 118px);
    top: 270px;
    display: block;
    margin-top: 35px;
    padding: 15px;
    width: 229px;
    height: 48px;
    background-color: var(--off-white);
    /* Sombra*/
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
    border: none;
    border-radius: 4px;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--warm-black);
    text-decoration: none;
}
.header__button a {
   margin-left: 16px;
}
.header__button span {
    display: inline-block;
    width: 13px;
    height: 8px;
    margin-left: 14px;
    background-image: url("./assets/icons/mdi_keyboard_arrow_down.svg");
}

En el texto del boton, tuve que agregar flex porque no se veia centrado. Y la imagen la puse de 24x24

.header--title-container .header--button {
    position: absolute;
    top: 270px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 35px;
    width: 229px;
    height: 24px;
    border: none;
    border-radius: 4px;
    padding: 12px 16px;
    background-color: var(--off-white);
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
    font-size: 1.4rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--black);
    left: calc(50% - 130px);
}

.header--button span {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-left: 10px;
    background-image: url('./assets/icons/mdi_keyboard_arrow_down_3.svg');

}

Les comparto el uso de otras propiedades para obtener el mismo resultado en el bot贸n

.header--button{
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    transform: translateY(50%);
    padding: 0 16px;
    width: 229px;
    line-height: 4.8rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--warm-black);
    background-color: var(--off-white);
    border-radius: 4px;
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
    text-decoration: none;
}```

隆Este fue mi resultado final! Es m谩s dif铆cil de lo que parec铆a a simple vista jajaj. Para verse sencillo se requiere mucho conocimiento Pronto lo modificar茅 con mis propios estilos!

En mi caso me aparec铆a el 铆cono de forma extra帽a y era que no hab铆a borrado la (i) del span

Muy interesante como hacer el landing page. Yo conozco un poquito de css y html pero no a este nivel. Nunca pares de aprender!

Quise realizar el ejercicio antes de empezar a ver esta clase y mi c贸digo result贸 bastante similar, con algunas diferencias pero el mismo resultado. Ac谩 lo comparto:

.header--button {
    /* Posicionamiento */
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    top: 19px;
    width: 229px;
    height: 48px;
    /* Modelo de caja */
    border: none;
    padding: 12px 16px;
    border-radius: 4px;
    /* Tipograf铆a */
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.8px;
    text-decoration: none;
    color: var(--warm-black);
    /* Efectos visuales */
    background: var(--off-white);
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
}

.header--button span {
    background-image: url(./assets/icons/down-arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 15px;
    height: 7.41px;
}

ojeras?

Me encanto esta seccion, fue genial! Es un genio Diego 馃槂

.header--title-container a {
  position: absolute;
  left: calc(50% - 125px);
  width: 250px;
  display: block;
  /* bottom: -10%; */
  top: calc(100% - 34.5px);
  padding: 25px;
  background-color: var(--off-white);
  border-radius: 15px;
  /* sombras */
  box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
  font-size: 0.875rem;
  font-weight: bold;
  text-decoration: none;
  color: black;
}

Centrar un elemento con calc()

Centrar un elemento horizontalmente

Lo que har谩 el 50% es mover la parte izquierda del bot贸n hacia el centro y luego se le resta la mitad del width de la caja para que se coloque al centro.

.botton{
	position: absolute;
	width: 150px;
	height: 100px;
	left: calc(50% - 150px/2);
}

Centrar un elemento verticalmente

Lo que har谩 el 50% es mover la parte de abajo del bot贸n hacia la l铆nea horizontal (bajar) y luego se le resta la mitad del height de la caja para que se coloque al centro (suba).

.botton{
	position: absolute;
	width: 150px;
	height: 100px;
	top: calc(50% - 100px/2);
}

Si deseas centrar el elemento en funci贸n de su contenedor padre solo debes de cambiar el valor de position de absolute a relative.

Recuerda que HTML trabaja en el cuarto cuadrante

USO DEL calc()

Es una funci贸n la cual realiza operaciones aritm茅ticas (+, -, *, /)

/*Su width ser谩 del 100% menos 15 pixeles*/
div{
    width: calc(100% - 15px);
}

Sintaxis err贸nea

Recordar que las dos cantidades a operar deben de estar separadas del signo:

/*Incorrecto*/
calc(50%-15px)  
calc(50%- 15px)  
calc(50% -15px)  
/*Correcto*/
calc(50% -15px)

M谩s informaci贸n: https://developer.mozilla.org/es/docs/Web/CSS/calc()

馃asi fue como yo lo hice .
use mayormente el display: flex; y trate de mantener el codigo al minimo y lo mas simple que pude.

/*
    1. posicionamiento.
    2. modelo de caja.
    3. tipografia.
    4. estilos visuales (efectos como sombras y bordes).
    5. otros.

*/

:root {
    /*colores*/
    --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;
}

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

html {
    font-size: 62.5%;
    font-family: 'DM Sans', sans-serif;
}
header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-width: 320px;
    height: 334px;
    text-align: center;
    align-items: center;
    background: linear-gradient(207.8deg, var(--warm-black) 16.69%, var(--bitcoin-orange) 100%);
}

header img {
    width: 151px;
    height: 24px;
    align-self: center;
}

.header--title-container {
    width: 90%;
    min-width: 288px;
    max-width: 900px;
    margin-top: 55px;
    height: 218px;
}

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

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

header a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    width: 229px;
    height: 48px;
    position: absolute;
    top: 305px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.4rem;
    background-color: var(--off-white);
    color: var(--warm-black1);
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
    border-radius: 4px;
    border: none;
}

header a span img {
    width: 1.2rem;
    height: 0.741rem;
}

Yo use esta propiedades para posicionarl

left: 50%;
 transform: translate(-50%,0);

Aqui les dejo parte de los estilos, tuve un error al momento de aplicar calc y pude solucionar a travez de los aportes que hizo un compa帽ero

.header--title-container .header--button{
    position: absolute;
    /*left: calc(50%-118px); me salio un error no aplica el estilo*/
    top: 270px;
    display: block;
    margin-top: 35px;
    padding: 15px;
    width: 229px;
    height: 48px;
    background-color: var(--off-white);
    box-shadow: 0px 4px 8px rgba(89, 73, 70, 0.16);
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--black);
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.header--button span{
    display: inline-block;
    width: 13px;
    height: 8px;
    margin-left: 10px;
    background-image: url('./assets/icon/arrow_down.svg');
}

En caso de que no se aplique el estilo siguiente:

left: calc(50% - 118px);

tienen que tener cuidad de que el signo 鈥-鈥 (menos) tenga espacios antes y despu茅s.

Tard茅 un rato en ver ese error. 馃槄

Compa帽eros de platzi, trate de hacer una replica (no exacta, colocando colores que me gustaban) tratando de ver el video o el c贸digo ya hecho lo menos posible鈥

Aun tengo dudas en lo siguiente, mas que todo en las posiciones:

驴por que se usa la position relative para el header y el display flex y el flex-direction:colum?

Comparto mi manera de posicionar el b贸ton de manera sim茅trica:

.header--title-container .header--button {
	position: absolute;
	right: 50%;
	bottom: 0;
	transform: translate(50%, 50%)
}

De esta manera, se colocar谩 el bot贸n donde queremos independientemente del tama帽o del contenedor padre o del tama帽o del hijo.

Uso de box-shadow

Ejemplo:

box-shadow:  3px  5px 10px red;
  1. (3px)El primer valor determina la posici贸n de la sombra en el eje 鈥渪鈥 de la caja a la que se le quiere aplicar sombra.
  2. (5px) Determina la posici贸n en el eje 鈥測鈥.
  3. (10px) Define el difuminado que va a tener la sombra.
  4. (red) El cuarto determina el color de la sombra.

Tambi茅n puedes usar n煤meros negativos para mover la sombra hacia arriba o hacia la izquierda.

Otro ejemplo con valores diferentes:

box-shadow:  -3px  -5px 20px rgb(53, 12, 235); 

Existen muchas manera de dar estilos a nuestra pagina, referente al .header鈥揵utton una de las tantas que existen y que en lo personal me gusta mas, por que trabajas con porcentajes 煤nicamente es:

.header--button {
    left: 50%;
    transform: translateX(-50%);
}

Hola! Cuando coloque el 铆cono de down, se repet铆a o me quedaba posicionado muy alto en relaci贸n al texto, lo solucion{e as铆:
background-position: center;
background-repeat: no-repeat;

Le hice unos cambios al header .

12:15 minutos de invaluable informaci贸n. y lo que falta!!!

Comentario. Alt+Shift+A

Uso de la funci贸n Calc()

Lei en MDN que es mejor definir sin borde con border: 0; por temas de optimizacion

Aqui os dejo el CSS para el span:

.header-button span{
display: inline-block;
width: 13px;
height: 8px;
margin-left: 10px;
background-image: url(鈥欌/assets/icons/down-arrow.svg鈥);
}

Generador de sombras de MDN Web Docs

Me parece m谩s pr谩ctico usar la etiqueta <img> para el 铆cono del bot贸n (dentro del el span)
.
Pero eso trae este problema:

esto se soluciona cambiando el selector que asigna el margen al logo de batabit de esto:

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

a esto:

header > img
{
    width: 150px;
    height: 24px;
    margin-top:60px
}

Esto hace que nuestros estilos no afecten a nuestro bot贸n.

El resultado queda as铆:
.

.
Cuentame como te parece esta opci贸n o si se te ocurre otra mejor 馃槃 馃挌

Vamos bien鈥

Les comparto otra forma de centrar el boton sin tener que usar el calc:

.header--tittle-container .header--button {
    /* 1. Posicionamiento  */
    position: absolute;
    top: 270px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

Podemos calcular el 鈥渓eft鈥 de la forma:
calc(50% - [valor del width/2])
para ser m谩s exactos

/*

  1. Posicionamiento
  2. Modelo de caja (box model)
  3. Tipografia
  4. Visuales
  5. Otros
    */

:root {
/* Colores */
鈥揵itcoin-orange: #F7931A;
鈥搒oft-orange: #FFE9D5;
鈥搒econdry-blue: #1A9AF7;
鈥搒oft-blue: #E7F5FF;
鈥搘arn-black: #201E1C;;
鈥揵lack: #282623;
鈥揼rey: #BABABA;
鈥搊ff-white: #FAF8F7;
鈥搄ust-white: #FFFFFF;
}

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

html {
font-size: 62.5%;
font-family: 鈥楧M Sans鈥, 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鈥搕itle-container {
width: 90%;
min-width: 288px;
max-width: 900px;
height: 218px;
margin-top: 40px;
text-align: center;
align-self: center;
}

.header鈥搕itle-container h1 {
font-size: 2.4rem;
font-weight: bold;
line-height: 2.6rem;
color: var(鈥搄ust-white);
}

.header鈥搕itle-container p {
margin-top: 25px;
font-size: 1.4rem;
font-weight: 500;
line-height: 1.8rem;
color: var(鈥搒oft-orange);
}

.header鈥搕itle-container .header鈥揵utton {
position: absolute;
left: 0;
right: 0;
margin-right: auto;
margin-left: auto;
top: 270px;
display: block;
margin-top: 35px;
padding: 15px;
width: 229px;
height: 48px;
background-color: var(鈥搊ff-white);
/* Sombra */
box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
border: none;
border-radius: 5px;
font-size: 1.4rem;
font-weight: bold;
text-decoration: none;
color: var(鈥揵lack);
}

.header鈥揵utton span {
display: inline-block;
width: 13px;
height: 8px;
margin-left: 10px;
background-image: url(鈥欌/assets/icons/down-arrow.svg鈥);

}

Mejor centrar el bot贸n as铆 :

left: 0;
right: 0;
margin-right: auto;
margin-left: auto;

Hola, aqu铆 una herramienta para generar sombras tipo drag and drop https://www.cssmatic.com/es/box-shadow

usar .header鈥揵utton ya es muy especifico, no hay necesidad de usar todo : .header__title-container .header__button , esto es justo lo que bem trata de eliminar. 馃槃

Para la gente obsesiva como yo.
El background tiene un alto de 295px no de un 334px pues ah铆 coge lo que viene por defecto del smarphone.

Me siento un rebelde y anti-sistema usando posici贸n absoluta y px.

馃憣

left: calc(50% menos practicamente la mitad en pixeles de lo que mide tu elemento)

Peque帽as cosas que cuando las analizas aprendes. :mind-blowing:

que genial ver como toma vida! grande @degranda !

De locos lo que hizo con la funci贸n calc();

Donde le doy me encanta cx

siempre quise saber como se configura un elemento flotante en secciones, muy buen dato, todo claro.

excelente lo pude hacer vamos con todo diego

隆Que bonito que ha quedado!
Estoy muy feliz cursando este curso y todo lo que se va aprendiendo esta super incre铆ble 馃槃

Les comparto mi c贸digo!


.header__button{
    display: block;
    width: 229px;
    height: 48px;
    margin-top: 35px;
    padding: 15px;
    position: absolute;
    top: 270px;
    left: calc(50% - 114.8px);
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
    border: none;
    border-radius: 5px;
    background-color: var(--off-white);
    font-size: 1.4rem;
    text-transform: capitalize;
    text-decoration: none;
    color: var(--warm-black);
    font-weight: bold;
}

.header__button span{
    display: inline-block;
    background-image: url('../assets/icons/vector.svg');
    width: 13px;
    height: 8px;
    background-repeat: no-repeat;
    margin-left: 10px;
}
header{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-width: 32rem;
    height: 33.4rem;
    text-align: center;
    background: linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%);
}
header img{
    width: 15rem;
    height: 2.4rem;
    margin-top: 6rem;
    align-self: center; /*Es por el flex*/
}
.header--title-container{
    width: 90%;
    min-width: 28.8rem;
    max-width: 90rem;
    height: 21.8rem;
    margin-top: 4rem;
    text-align: center;
    align-self: center; /*Es por el flex*/
}
.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: 2.5rem;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: var(--soft-orange);
}
.header--title-container .header--button{
    position: absolute;
    top: calc(100% - 2.4rem);
    left: calc(50% - 11.45rem);
    display: block;
    padding: 1.5rem;
    width: 22.9rem;
    height: 4.8rem;
    background-color: var(--off-white);
    /*Sombra*/
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
    border: none;
    border-radius: .5rem;
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
    color: var(--black);
}
.header--button span{
    display: inline-block;
    width: 1.3rem;
    height: .8rem;
    margin-left: 1rem;
    background-image: url('./assets/icons/down-arrow.svg');
}

El icono no me funcion贸 pero bueno, toc贸 omitirlo porque no encuentro el porque no sale 馃槬

Recuerda que si estas en una carpeta css, debes usar los dos puntos para salirte de la carpeta y entrar en la correcta donde est谩 el archivo. puede pasar. saludos :v