A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

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

24/31
Recursos

Aportes 24

Preguntas 11

Ordenar por:

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

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鈥搒lider 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=鈥渂utton鈥> 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 鈥榩鈥, 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;
}