Estilos de la sección de beneficios

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

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 😢😢😢

• Siempre que utilicemos un “position: absolute”, tenemos que verificar que el padre de ese elemento (el contenedor) tenga un “position: relative”. Esto nos ayudará a acomodar los elementos de la forma deseada.

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.

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ó “compartación” en vez de “conparación”.

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

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?

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

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
}

¿Por qué le da position: obsolute a la sección .main-product-detail?

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.

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

/* 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=“shortcut icon” href=”./assets/imgs/Group 16.svg" type=“image/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 “objeto” que pertenezca a un padre con position:absolute, y este, el hijo, con position: absolute …es 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.

<!–Section 2–>
<section class=“section2-container”>
<div class=“section2-top”>
<img src="./assets/icons/batata.svg" alt=“batata logo”>
<h2>Creamos un producto sin comparación.</h2>
<p>Confiable y diseñado para su uso diario.</p>
</div>
<div class=“section2-box”>
<img src="./assets/icons/clock.svg" alt=“small 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=“section2-box”>
<img src="./assets/icons/eye.svg" alt=“small 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=“section2-box”>
<img src="./assets/icons/dollar-sign.svg" alt=“dollar 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=“section2-box”>
<img src="./assets/icons/check-circle.svg" alt=“ckeck 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(–warm-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(–just-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(–grey);
}
.section2-container .section2-box {
width: 288px;
height: 152px;
border-radius: 4px;
padding: 15px 20px 20px 15px;
background-color: var(–black);
}
.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(–just-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(–grey);
}

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

Genial!

https://ui.dev/amiresponsive

.

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