Aplicando estilos a las tarjetas de la sección de planes

No consigo entender la metodología BEM que utiliza 😕

Les comparto la página (gradientes). Pora un futuro. https://webgradients.com/

Intente hacer los estilos del párrafo flotante y si se logro 😄
La verdad estoy aprendiendo un montón y puliendo ciertos detalles que no me quedaban claro.
Muchas Gracias a Diego, Platzi y a la comunidad por siempre compartir sus conocimientos y ayudar a los demás!!!

Para no calcular el min-width manualmente uso calc() multiplicando 320 * (porcentaje en relación a 1)px:

min-width: calc(320 * .70px);

Reto terminado! Hice colocando los cards a ambos lados en position absolute y tomando la clase .plans-container–slider con un position relative. No me gusto mucho usar tanto posicionamiento con medidas absolutas, pero no sabía cómo hacerlo sin implementar position absoluto en estas tarjetas. Quién lo hizo distinto? Quisiera tener feedback sobre otras maneras de hacer esto.

Yo no usaría una etiqueta <button> o <input type=“button”> para otra cosa que no fueran formularios.
En este caso porque lo que queremos que suceda es que al hacer click al botón lleve al usuario a otro sitio a comprar el plan seleccionado, lo que yo haría en este caso sería usar una etiqueta de enlace <a> y a esa etiqueta le daría estilos de botón con CSS

Ya casi:

solo debrias de ocupar mas REM que PX pues eso nos enseñastes a nosotros

Siempre los p me heredaban el width 90% del main-container, lo arreglo siendo especifico pero no se porque a diego no le sucede

Les comparto mi tarjeta usando otros colores

excelente DIEGO de hecho no me quejo

Navegador.

Comparto esta pagina para creación de gradientes para nuestra página web.

👌

Ya va quedando la página, estoy ansioso en vez cómo termina.

.plan-card--price{
  position: relative;
  padding: 5px 0;
  font-size: 5.2rem;
  font-weight: bold;
  line-height: 5.3rem;
  color: var(--black);
}

.plan-card--price span {
  position: absolute;
  font-size: 1.2rem;
  font-weight: 300;
  left: 60px;
  top: -10px;
}

aqui el simbolo del dolar en la posicion del figma

<
.plan-card--price span{
    position: absolute;
    left: calc(50% - 45px);
    top: calc(50% - 85px);
    font-size: 1.2rem;
    font-weight: 500;

}> 

En lugar de darle

<margin: 0 auto;> 

a todas las etiquetas ‘p’, le pones un

<padding: 15px;> 

a todo el contenedor…
y ya.

Muy lindo me esta quedando mi landing page.

resultado final de la lección

Fantastic! 👨🏻‍🏫

No sé si es un error mio pero yo no utilicé margin para centrar la caja solo utilicé:
{
display: inline-block;
}