No tienes acceso a esta clase

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

Estilos de la secci贸n de beneficios

19/32
Recursos

En la estructura base de la secci贸n de beneficios maquetamos las etiquetas necesarias y sus clases respectivas para empezar a aplicar estilos. 隆Pues ahora es el momento! Vamos a nuestro archivo .css y empezemos con la secci贸n del t铆tulo.

Aplicar estilos en el contenedor principal

  • Llamamos la clase del contenedor de la secci贸n con .main-product-detail.
  • Le asignamos un position: relative. Esto es porque el contenedor del logo flotante se crear谩 con position: absolute. Para que un position: absolute pueda posicionarse, busca al primer contenedor padre que tenga un position: relative. Por esto lo colocamos aqu铆 y se mantenga en este contenedor.
  • Ajustamos su ancho en un 100% y lo limitamos en un m铆nimo de 320px.
  • Colocamos la altura en auto para que se ajuste a lo que necesite el contenedor.
  • A帽adimos un padding 20px arriba y abajo y 10px a los lados.
.product-detail--title {
    position: relative;
    width: 100%;
    min-width: 320px;
    height: auto;
    padding: 20px 10px;
    background-color: var(--warm-black);
}

Pasos para aplicar estilos al logo

  • Llamamos la clase directa de la etiqueta span del logo con .product-detail鈥揵atata-logo.
  • Le asignamos un position: absolute para que est茅 por encima de los dem谩s elementos.
  • Ajustamos un ancho en 40px y un alto en 25px.

Para centrarlo entre las dos secciones:

  • Elevamos la mitad del logo hacia fuera del contenedor con top: -10px.
  • Lo centramos con ***left: calc(50% - 20px)***, donde 50% lo coloca en la mitad, pero no lo centra. Esto se debe a que el logo tiene dimensiones (40px para ser precisos), y como queremos que est茅 justo en la mitad, le quitamos la mitad de su ancho (20px), posicion谩ndolo justo en el centro.
  • Llamamos la imagen con ***background-image: url("")***.
.product-detail--batata-logo {
    position: absolute;
    width: 40px;
    height: 25px;
    top: -10px;
    left: calc(50% - 20px);
    background-image: url("./assets/icons/batata.svg");
}

Agregar estilos al t铆tulo

Ten en cuenta estos 3 elementos:

Contenedor

  • Llamamos la clase del contenedor de nuestro t铆tulo con .product-detail鈥搕itle.
  • Ajustamos su ancho para que ocupe el 90% de su contenedor principal.
  • Establecemos el ancho m铆nimo en 288px.
  • Colocamos el alto en auto para que ocupe lo que necesite el texto. Esto es una buena pr谩ctica para que el texto reaccione bien sin importar que tanto se vea comprimido por el ancho.
  • Lo centramos con un margin: 0 auto.
  • Separamos el texto del extremo superior con un margin-top: 50px.
  • Centramos el texto con text-align: center.
.product-detail--title {
    width: 90%;
    min-width: 288px;
    height: auto;
    margin: 0 auto;
    margin-top: 50px;
    text-align: center;
}

H2

  • Llamamos la etiqueta h2 desde su contenedor directo con .product-detail鈥搕itle h2.
  • Aplicamos un margin-bottom: 20px para separarlo del p谩rrafo de abajo.
  • Ajustamos el tama帽o de la fuente a 2.4rem y aplicamos un grosor bold.
  • Ajustamos el interlineado en 2.6rem.
  • Cambiamos el color con la variable 鈥搄ust-white.
.product-detail--title h2 {
    margin-bottom: 20px;
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--just-white);
}

p

  • Llamamos la etiqueta p desde su contenedor directo con .product-detail鈥搕itle p.
  • Aplicamos un margin-bottom: 20px para separarlo de las secciones de abajo.
  • Ajustamos el tama帽o de la fuente a 1.4rem y aplicamos un grosor de 500.
  • Ajustamos el interlineado en 1.8rem.
  • Cambiamos el color a #808080 como nos indica el dise帽o en Figma.
.product-detail--title p {
    margin-bottom: 20px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: #808080;
}

En el navegador, podr铆amos observar este resultado:
image.png

隆Y bien! Recordamos algo importante sobre el position: absolute y su relaci贸n directa con su padre con position: relative. Ahora hay que trabajar en las secciones de informaci贸n de nuestra secci贸n de beneficios.

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

Aportes 87

Preguntas 21

Ordenar por:

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

o inicia sesi贸n.

Al igual que con el bot贸n, les comparto otras alternativas para posicionar el logo:

Usando calc() tambi茅n en top:

.product-detail__batata-logo {
	position: absolute;
	top: calc(0% - 12.5px);
	left: calc(50% - 20px);
}

Usando translate():

.product-detail__batata-logo {
position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -50%); /* Que ser铆a lo mismo a poner translate(-20px, -12.5px); */
}

like si tu tambi茅n presionas ctrl + S cuando cambias un estilo en el inspector de elementos y se abre una ventana para guardar la pagina. xD

left: calc(50% - 20px);
  • left(atributo): Alinea un elemento con referencia al lado izquierdo de nuestro contenedor.

  • calc()(funci贸n): Nos permite realizar c谩lculos para determinar valores de propiedades CSS.

  • 50%(par谩metro): Representa la mitad del ancho del contenedor(para 320px, el 50% ser铆an = 160px), lo cual alinear谩 nuestro elemento 160px de izquierda(left) a derecha.

  • 20px: Representan la mitad del ancho(width) de nuestro elemento, esto se hace con la finalidad de poder posicionarlo en el centro de nuestro contenedor.

El segundo argumento de la funci贸n calc() es la mitad del width del elemento.

Siempre se me hab铆a hecho muy dif铆cil jugar con las Positions.
Pero no cabe duda que la practica ayuda mucho.
Ah铆 vamos poco a poco creando la Pagina 鉂わ笍

Ten cuidado con el contraste, puede ocasionar problemas grandes de accesibilidad:

  • Una herramienta que utilizo para ver si dos colores tienen contraste suficiente como para usar uno de background-color y el otro como color es contrast ratio.

  • Seg煤n la W3C todos los textos e im谩genes con texto deben tener un contraste de al menos 4.5, cosa que podemos saber con la herramienta que ya he mencionado arriba, sin embargo. Aqu铆 hay algunas excepciones. Espero les sea de mucha utilidad:)

Pens茅 que bottom: 10px era lo mismo que top: -10px pero ahora s茅 que me hace falta mucho por aprender de las positions en CSS 馃槃.

Colocando en el contenedor un padding nos ahorramos el margin-top del t铆tulo, y nos sirve tambi茅n para separar la 煤ltima tarjeta de la siguiente secci贸n.

Por cierto, el valor de heigth: auto es el que trae por defecto el navegador, por lo que no es necesario colocarlo.

.product-detail {
    padding: 50px 16px;
}

鈥 Siempre que utilicemos un 鈥減osition: absolute鈥, tenemos que verificar que el padre de ese elemento (el contenedor) tenga un 鈥減osition: relative鈥. Esto nos ayudar谩 a acomodar los elementos de la forma deseada.

Para mala suerte de nosotros los desarrolladores, el a帽o pasado sali贸 el Samsung Galaxy fold, tiene varios tama帽os de pantalla y el tama帽o m铆nimo es de 280px 馃槩馃槩馃槩

20 minutos viendo por qu茅 no me sal铆a el h2 como al profe y tratando de solucionarlo, y resulta que ten铆a un typo. Escribi贸 鈥渃ompartaci贸n鈥 en vez de 鈥渃onparaci贸n鈥.

Un Recordatorio al usar calc() respetar los espacios entre el signo y los n煤meros estuve 20 minutos buscando que clase era la que me sobre escrib铆a mi estilo incluso usaba el tag !important o estilos inline y no me funcionaba por no respetar los espacios.

Para posicionar la papa, tambi茅n pueden usar margin, sin tener una posici贸n en absolute, se hace de la siguiente forma

.contenedor-padre{
	text-align: center;
}
.logo{
	margin-top: -10px;
}

Y listo, queda exactamente igual

Otra forma de posicionar el logo de la batata

.main-product-detail span {
    display: inline-block;
    width: 4.1rem;
    height: 2.4rem;
    background: url(./assets/Icons/icon-minilogo.svg) no-repeat center/cover;
    position: relative; //lo puedo mover desde su propia posicion
    left: calc(50% - 20.5px);
    bottom: 12px; //simplemente empujarlo desde abajo la mitad de su altura
}

Durante el transcurso del proyecto hemos usado width y height con porcentajes, que hay de el viewport width y viewport height? no ser铆a mejor usar esta medida teniendo en cuenta que estamos trabajando en un proyecto responsive?

Otra opcion que utilice para centrar el logo fue la siguiente (me sirvio tambien para el boton del header)

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

Pueden leer mas sobre la propiedad margin-inline aqui, tambien les recomiendo revisar en caniuse que navegadores soportan esta propiedad.

Para centrar un elemento que tiene una posici贸n absoluta tambi茅n podr铆amos usar lo siguiente:

.product-detail__batata-logo {
    position: absolute; 
    width: 40px;
    height: 25px;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
}

Hola! Una pregunta: no es redundante colocar width: 100% a los elementos con display block, por ejemplo al section? Cre铆a que por defecto ocupaban el 100% del ancho

驴Por qu茅 le da position: obsolute a la secci贸n .main-product-detail?

/* observe que pusimos un position relative un contenedor antes de nuestro logo, esto porque el logo busca el primer position relative para posicionarse con referencia a este, si no lo ponemos se ira a buscar el siguiente contenedor con position relative, como el main o algun otro */

Aunque es un poco absurdo, me tard茅 en entender que el min/max width y height es muy importante para un dise帽o responsivo ya que son de gran ayuda al momento de adaptarse de mejor manera a ciertos tama帽os de pantallas mobile

Peque帽o detalle para los que son bien sim茅tricos: Para que la batata quede perfectamente dividida en 2 partes iguales hay que poner -12px en top.

En lo personal a mi me sirvio un poco distinto el codigo que Diego.

.product-detail--batatalogo {
    position: absolute;
    width: 50px;
    height: 25px;
    top: calc(0% - 12.5px);
	left: calc(50% - 20px);
    background-image: url("./assets/img/papita.svg");
    
}

Solo para dejar saber, se pueden usar c谩lculos dentro de otros:

.class {
	position: absolute;
	left: calc(calc(300px / 2) - (219px / 2));
}

<article class="product-detail--card">
	<span class="clock"></span>
        <p class="product-card--title">Tiempo Real</p>
        <p class="product-card--body">Nuestra Api toma informaci贸n minuto a minuto sobre las tasas que m谩s determinan el comportamiento</p>
</article>```

left: calc(50% - 20px);
left(atributo): Alinea un elemento con referencia al lado izquierdo de nuestro contenedor.

calc()(funci贸n): Nos permite realizar c谩lculos para determinar valores de propiedades CSS.

50%(par谩metro): Representa la mitad del ancho del contenedor(para 320px, el 50% ser铆an = 160px), lo cual alinear谩 nuestro elemento 160px de izquierda(left) a derecha.

20px: Representan la mitad del ancho(width) de nuestro elemento, esto se hace con la finalidad de poder posicionarlo en el centro de nuestro contenedor.

Lo trat茅 de hacer con CSS grid ac谩 el resultado
https://enriquegraficos.github.io/course-mobile-first/

me est谩 encantando el curso, se pueden sacar muchas ideas 馃槂

saben donde encontrar el dise帽o de figma

<main-product-detail {
    position: relative;
    width: 100%;
    min-width: 320px;
    height: auto;
    padding: 20px 10px;
    background-color: var(--warm-black);
}

.product-detail--batata-logo {
    position: absolute;
    width: 40px;
    height: 25px;
    top: -10px;
    left: calc(50% -20px);
    background-image: url(./assets/icons/Vector.svg);
}

.product-detail--title {
    width: 90%;
    min-width: 288px;
    height: auto;
    margin: 0 auto;
    margin-top: 50px;
    text-align: center;
    
}

.product-detail--title h2 {
    margin-bottom: 20px;
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: white;
}

.product-detail--title p {
    margin-bottom: 20px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: #808080;
}>

Una pregunta, porq jalamos desde css las imagenes y no desde el html??

Me gusta como poco a poco con lo que vamos aprendiendo se puede ir avanzando lo dem谩s, dado que las dem谩s secciones restantes comparten fuentes y muchas cosas parecidas, las he puesto en la misma regla de CSS sal帽djsaldkjal

Asi me va quedando.

Hay un peque帽o errror en el paso a paso escrito en la descripcion del video:

Lo dejo por aca por si alguien tiene dudas, en el ejemplo de codigo aparece la clase incorrecta, ya que estamos trabajando .main-product-detail.

Continuemos 馃槂

De verdad que me ha costado musimo llegar a entender ciertas cosas que me han permitido llegar a esto :'v

Si nos fijamos bien, el elemento de la batata mide 41px X 25px, lo correcto ser铆a:
left: calc(50%-25px);

/ Esto ya lo posiciona en el centro correcto/

Posisionar la patata segun las medidas de su tama帽o

<position: absolute;
    left: calc(50% - 37.5px/2);
    top: calc(0% - 24.01px/2);> 

Si quieren que el titulo de la pagina web tenga un icono como la mayoria de las paginas web, lo unico que tenes que hacer es poner en el head esta etiqueta link 鈥<link rel=鈥渟hortcut icon鈥 href=鈥./assets/imgs/Group 16.svg" type=鈥渋mage/x-icon鈥>"

Yo lo hice de esta manera, para evitar usar calc:

.product-detail--batata-logo {
  position: absolute;
  width: 40px;
  height: 25px;
  background-image: url('../assets/icons/batata.svg');
  display: block;
  bottom: 100%;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(12.5px);
}

ya va quedando:

asi lo hize yo

.main__product-detail{
	background-color: var(--warm-black);
	margin-top: 8rem; 
	position: relative;
	padding-bottom: 4rem;
}

.main__product-container{
	width: 90%;
	margin: 0 auto;
	max-width: 90rem;
	min-width: 25.5rem;
	text-align: center;
	font-family: var(--font-sans);
	margin-bottom: 4rem;
}

.main__product-title{
	font-weight: var(--size-700);
	color: var(--just-white);
	font-size: 2.4rem;
	padding-top: 5rem;
	padding-bottom: 2rem;
	line-height: 2.6rem;
}

.main__product-text{
	font-weight: var(--size-500);
	color: #808080;
	font-size: 1.4rem;
	line-height: 1.8rem;

}

Yo utilic茅 el color #808080 en la clase .main-product-detail:

.main-product-detail
{
    position: relative;
    width: 100%;
    min-width: 320px;
    height: auto;
    padding: 20px 10px;
    color: #808080;
    background-color: var(--warm-black);
}

no me sale el logo de de la papita lo descargue y me sale una sol a papay el color del titulo no me quiere salir blanco

El valor de 20px es el resultado de dividir el width: 40px en 2 
left: calc(50% - 20px); 
  ``

El key to siempre positioning algun 鈥渙bjeto鈥 que pertenezca a un padre con position:absolute, y este, el hijo, con position: absolute 鈥s poner left(50% - width del objeto/2)

En Figma hay un error en el background-color de .main-product-detail. Indica que es Warm Black pero el color #201E1C corresponde a la variable Black.

Diego lo hab铆a elegido bien y luego lo cambi贸 al leer el contenido de Figma.

[Hice esta parte previamente sin mirar los videos y me resulto bien, Ahora que veo los videos es una forma distinta de estructura y Css. Comparto el aporte, saludos.

<!鈥揝ection 2鈥>
<section class=鈥渟ection2-container鈥>
<div class=鈥渟ection2-top鈥>
<img src="./assets/icons/batata.svg" alt=鈥渂atata logo鈥>
<h2>Creamos un producto sin comparaci贸n.</h2>
<p>Confiable y dise帽ado para su uso diario.</p>
</div>
<div class=鈥渟ection2-box鈥>
<img src="./assets/icons/clock.svg" alt=鈥渟mall clock icon鈥>
<h3>Tiempo real</h3>
<p>Nuestro API toma informaci贸n minuto a minuto sobre las tasas que m谩s determinan el comportamiento.</p>
</div>
<div class=鈥渟ection2-box鈥>
<img src="./assets/icons/eye.svg" alt=鈥渟mall eye icon鈥>
<h3>No hay tasas escondidas</h3>
<p>Ni en la compra o al momento de exit, Batabit siempre te muestra el costo real de lo que est谩s adquiriendo.</p>
</div>
<div class=鈥渟ection2-box鈥>
<img src="./assets/icons/dollar-sign.svg" alt=鈥渄ollar icons鈥>
<h3>Compara monedas</h3>
<p>Ni en la compra o al momento de exit, Batabit siempre te muestra el costo real de lo que est谩s adquiriendo.</p>
</div>
<div class=鈥渟ection2-box鈥>
<img src="./assets/icons/check-circle.svg" alt=鈥渃keck icon鈥>
<h3>Informaci贸n confiable</h3>
<p>Nuestras fuentes est谩n 100% verificadas y continuamos auditando su contenido mientras se actualizan.</p>
</div>

    </section>

/section 2/
.section2-container {
width: 100%;
height: 900px;
display: flex;
flex-direction: column;
justify-content:space-evenly;
align-items: center;
background-color: var(鈥搘arm-black);
}
.section2-container .section2-top {
width: 100%;
height: 160px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.section2-container .section2-top img {
width: 40px;
height: 25px;
margin-top: -35px;
}
.section2-container .section2-top h2 {
width: 288px;
height: 52px;
margin: 0 auto;
margin-top: 40px;
margin-bottom: 25px;
font-size: 2.4rem;
font-weight: 700;
line-height: 2.6rem;
text-align: center;
color: var(鈥搄ust-white);
}
.section2-container .section2-top p {
width: 288px;
height: 18px;
margin: 0 auto;
margin-bottom: 30px;
font-size: 1.4rem;
font-weight: 500;
line-height: 1.8rem;
text-align: center;
color: var(鈥揼rey);
}
.section2-container .section2-box {
width: 288px;
height: 152px;
border-radius: 4px;
padding: 15px 20px 20px 15px;
background-color: var(鈥揵lack);
}
.section2-container .section2-box h3 {
height: 18px;
margin-top: 10px;
margin-bottom: 10px;
font-size: 1.8rem;
font-weight: 700;
line-height: 1.8rem;
color: var(鈥搄ust-white);
}
.section2-container .section2-box p {
width: 252px;
height: 54px;
margin: 0 auto;
font-size: 1.4rem;
font-weight: 500;
line-height: 1.8rem;
text-align: left;
color: var(鈥揼rey);
}

Esto hace el tener una posicion relative antes de nuestro logo para que este con position absolute re posicione cerca de nuestro contenedor de tarjetsa de secciones

Al final supongo que lo importante es llegar a los estilos, no importando c贸mo? Es que ya termin茅 de maquetar y aplicar estilos, y comparando mi c贸digo es muuuuuy diferente al de la clase. Bueno no, no tan diferente. S贸lo not茅 que a veces aplico flexbox de forma innecesario (creo), cuando bien, solo se puede usar "margin: 0 auto"
Respecto al codigo de la clase pasada: Agregar la tabla #2 y darle estilo **Index (html):** ```js

Comisiones

Bitrade $12.96
Bitpreco $13.07
Novadax $13.15
Coinext $4.96

Actualizado: 19 Julio 23:48

``` **CSS:** ```js .currency-table--container, .commissions-table--container { width: 90%; min-width: 230px; max-width: 300px; height: 250px; margin: 0 auto; } .currency-table--container table, .commissions-table--container table { width: 100%; height: 100%; } .currency-table--container td, .commissions-table--container td{ width: 50%; font-size: 1.6rem; font-weight: 500; line-height: 1.9rem; color: var(--grey); text-align: left; padding: 0 0 0 10px; background-color: var(--just-white); } .currency-table--container .table__top-left, .commissions-table--container .table__top-left { border-radius: 15px 0 0 0; } .currency-table--container .table__top-right, .commissions-table--container .table__top-right { border-radius: 0 15px 0 0; } .currency-table--container .table__bottom-left, .commissions-table--container .table__bottom-left { border-radius: 0 0 0 15px; } .currency-table--container .table__bottom-right, .commissions-table--container .table__bottom-right { border-radius: 0 0 15px 0; } .currency-table--container .table__bottom-right, .commissions-table--container .table__bottom-right { font-size: 1.4rem; font-weight: normal; line-height: 1.7rem; color: #757575; } /*iconos de las tablas*/ .currency-table--container .down { display: inline-block; width: 15px; height: 15px; margin: 0 0 0 10px; background-image: url("./assets/icons/trending-down.svg"); background-size: cover; background-position: center; background-repeat: no-repeat; } .currency-table--container .up { display: inline-block; width: 15px; height: 15px; margin: 0 0 0 10px; background-image: url("./assets/icons/trending-up.svg"); background-size: cover; background-position: center; background-repeat: no-repeat; } .currency-table--date, .commissions-table--date { width: 190px; height: 30px; margin: 0 auto; margin-top: 15px; padding: 8px; border-radius: 8px; } .currency-table--date { background-color: var(--soft-orange) } .commissions-table--date { background-color: var(--soft-blue); } .currency-table--date p, .commissions-table--date p { font-size: 1.2rem; line-height: 1.5rem; font-weight: 300; color: var(--warm-black); } ```

.

Clase 18: En la [estructura base de la secci贸n de beneficios](https://platzi.com/clases/2030-mobile-first/32317-estructura-base-de-la-seccion-de-beneficios/) maquetamos las etiquetas necesarias y sus clases respectivas para empezar a aplicar estilos. 隆Pues ahora es el momento! Vamos a nuestro archivo .css y empezemos con la secci贸n del t铆tulo. ## Aplicar estilos en el contenedor principal * Llamamos la clase del contenedor de la secci贸n con ***.main-product-detail***. * Le asignamos un ***position: relative***. Esto es porque el contenedor del logo flotante se crear谩 con ***position: absolute***. Para que un ***position: absolute*** pueda posicionarse, busca al primer contenedor padre que tenga un ***position: relative***. Por esto lo colocamos aqu铆 y se mantenga en este contenedor. * Ajustamos su ancho en un ***100%*** y lo limitamos en un m铆nimo de ***320px***. * Colocamos la altura en ***auto*** para que se ajuste a lo que necesite el contenedor. * A帽adimos un padding ***20px*** arriba y abajo y ***10px*** a los lados. `.product-detail--title` { ` position`: relative; ` width: 100%`; ` min-width: 320px`; ` height`: auto; ` padding: 20px 10px`; ` background-color: var`(--warm-black); } ## Pasos para aplicar estilos al logo * Llamamos la clase directa de la etiqueta span del logo con ***.product-detail鈥揵atata-logo***. * Le asignamos un ***position: absolute*** para que est茅 por encima de los dem谩s elementos. * Ajustamos un ancho en ***40px*** y un alto en ***25px***. Para centrarlo entre las dos secciones: * Elevamos la mitad del logo hacia fuera del contenedor con ***top: -10px***. * Lo centramos con \*\*\*left: calc(50% - 20px)\*\*\*, donde 50% lo coloca en la mitad, pero no lo centra. Esto se debe a que el logo tiene dimensiones (40px para ser precisos), y como queremos que est茅 justo en la mitad, le quitamos la mitad de su ancho (20px), posicion谩ndolo justo en el centro. * Llamamos la imagen con \*\*\*background-image: url("")\*\*\*. `.product-detail--batata-logo` { ` position`: absolute; ` width: 40px`; ` height: 25px`; ` top: -10px`; ` left: calc`(50% - 20px); ` background-image: url("./assets/icons/batata.svg"`); } ## Agregar estilos al t铆tulo Ten en cuenta estos 3 elementos: ### Contenedor * Llamamos la clase del contenedor de nuestro t铆tulo con ***.product-detail鈥搕itle***. * Ajustamos su ancho para que ocupe el ***90%*** de su contenedor principal. * Establecemos el ancho m铆nimo en ***288px***. * Colocamos el alto en ***auto*** para que ocupe lo que necesite el texto. Esto es una buena pr谩ctica para que el texto reaccione bien sin importar que tanto se vea comprimido por el ancho. * Lo centramos con un ***margin: 0 auto***. * Separamos el texto del extremo superior con un ***margin-top: 50px***. * Centramos el texto con ***text-align: center***. `.product-detail--title` { ` width: 90%`; ` min-width: 288px`; ` height`: auto; ` margin: 0` auto; ` margin-top: 50px`; ` text-align`: center; } ### H2 * Llamamos la etiqueta ***h2*** desde su contenedor directo con ***.product-detail鈥搕itle h2***. * Aplicamos un ***margin-bottom: 20px*** para separarlo del p谩rrafo de abajo. * Ajustamos el tama帽o de la fuente a ***2.4rem*** y aplicamos un grosor ***bold***. * Ajustamos el interlineado en ***2.6rem***. * Cambiamos el color con la variable ***鈥搄ust-white***. `.product-detail--title` h2 { ` margin-bottom: 20`px; ` font-size: 2.4rem;` font-weight: bold; ` line-height: 2.6rem;` ` color: var(--just-white`); } ### p * Llamamos la etiqueta ***p*** desde su contenedor directo con ***.product-detail鈥搕itle p***. * Aplicamos un ***margin-bottom: 20px*** para separarlo de las secciones de abajo. * Ajustamos el tama帽o de la fuente a ***1.4rem*** y aplicamos un grosor de ***500***. * Ajustamos el interlineado en ***1.8rem***. * Cambiamos el color a ***#808080*** como nos indica el dise帽o en Figma. `.product-detail--title` p { ` margin-bottom: 20`px; ` font-size: 1.4rem;` ` font-weight: 500`; ` line-height: 1.8rem;` color: #808080; } En el navegador, podr铆amos observar este resultado: ![image.png](https://static.platzi.com/media/articlases/Images/image%28215%29.png) 隆Y bien! Recordamos algo importante sobre el position: absolute y su relaci贸n directa con su padre con position: relative. Ahora hay que trabajar en las secciones de informaci贸n de nuestra secci贸n de beneficios.
Gracias por la clase profe...

la propiedad position sirve para posicionar elementos dentro de la pagina
por default es static
Los elementos con posici贸n absoluta se colocan en funci贸n de la posici贸n de su antecesor m谩s cercano en caso de no existir tomar谩n como referencia la ventana del navegador

la propiedad position sirve para posicionar elementos dentro de la pagina por default es static Los elementos con posici贸n absoluta se colocan en funci贸n de la posici贸n de su antecesor m谩s cercano en caso de no existir tomar谩n como referencia la ventana del navegador

Les dejo mi metodo espero les sirva:

<code> 
.product-detail__batata-logo {
   position: absolute;
   top: 0;
   left: calc(50% - 20px);
   transform: translateY(-12px);
   width: 40px;
   height: 24px;
   background-image: url(./assets/icons/batata-icon.svg);
}

Adjunto mi resolucion para posicionar el logo.

.product-detail--batata-logo {
    width: 40px;
    height: 25px;
    position: absolute;
    top: -12px;
    right: 0;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    background-image: url("./assets/icons/batata.svg");
    background-size: over;
    background-position: center;
    background-repeat: no-repeat;

Para poner la papa en el centro

.products .products__isologo{
position: absolute;
width: 40px;
height: 28px;
top: -12px;
left: 0;
right: 0;
margin: 0 auto;
background-image: url("./assets/icons/batata.svg");
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}

En mi caso, para que la batata no dependa del ancho de la imagen, utilic茅 el transform translate X y Y

.product-detail--batata-logo{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 40px;
    height: 25px;
    background-image: url('./assets/icons/batata.svg');
}

Posicionamiento en el eje horizontal utilizando la propiedad left y la funci贸n calc( )

Posicionamiento en el eje vertical utilizando la propiedad bottom y la funci贸n calc( )

Mira el resumen completo de la clase Aqu铆

馃摙馃摙 AVISO IMPORTANTE 鉂椻潡

Mira el siguiente tutorial para acceder al resumen visual de la clase 馃摋

parte de mi dise帽o

/* BENEFITS - SECTION */
.main-product-detail{
    position: relative;
    width: 100%;
    min-width: 320px;
    height: auto;
    padding: 20px 10px;
    background-color: var(--warm-black);
}
.product-detail--batata-logo{
    position: absolute;
    top: -10px;
    left: calc(50% - 20px);
    width: 40px;
    height: 25px;
    background-image: url('../assets/icons/batata.svg');
}
.product-detail--title{
    width: 90%;
    min-width: 288px;
    height: auto;
    margin: 50px auto 0;
    text-align: center;
}
.product-detail--title h2{
    margin-bottom: 20px;
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--just-white);
}
.product-detail--title p{
    margin-bottom: 20px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: #808080;

}

Cuidado con calc() si hacemos un c谩lculo que no regrese un entero porque fallar谩 en Chrome

Otra forma de centrar la imagen de la batata

Le di un estilo flotante al icono con FILTER .

 filter: drop-shadow(0px -1px 4px var(--warm1-black));

muy interesante este curso. Ya estamos cerca de terminar la pagina responsive. Gracias profesor!

hola les quiero mostrar este color que encontre para el p me dicen que opinana 馃榾

#353333

Mostrando los avances de esta Mobil first page.

![](

Primera edici贸n del html

Aparece batata logo

Using position absolute and relative, also into the setting, he puts the function calc(); first, you need to know what is the % that you want to add to move the element over the layout, after that, you can add a less x quantity. calc(50% - 30px). That is it.

Para usar position absolute es necesario que el contenedor del elemento que va a recibirlo contenga position relative.
Porque este 煤ltimo es el qu茅 delimita el 谩rea de movimiento del elemento.

Sin ese position relative antes del position absolute en el contenedor padre, este ir谩 a buscar otro contenedor que tenga el relative y mostrar谩 un comportamiento extra帽o e indeseado.

Excelente lo que vamos viendo del curso, he aprendido full!!

Position: relative => El elemento se coloca con relaci贸n a su posici贸n normal.

position: absolute => El elemento se ubica en relaci贸n con el elemento relativo m谩s cercano, podemos usar las propiedades: top, bottom, left y right

Entender bien por que position: absolute; y como se usa

A darle a las tarjeta!

como sacas las reglas en el inspector de elementos?

He aplicado ese tipo de posicionamientos para un icono como ese pero quiciera saber si es mas conveniete usarlo con clases o con ::before y ::after?

Gran clase

Increible todo lo que se aprende en este curso!

Excellent class. One step more in our project!

Poco a poco, un paso a la vez. Algun dia lograremos ser unos grandes dise帽adores web.

馃憣

Vaya, esto de calc esta muy bueno, me gusta mucho.

la clase dentro de otra clase es muy buena forma de especificar los estilos.

No pod铆a centrar el contenedor, y el inspector me dec铆a que el padding universal estaba nulo para este elemento. Lo centre con la funci贸n calc() y margin-left