No tienes acceso a esta clase

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

Detallando estilos en tarjetas de planes

25/31
Recursos

Aportes 124

Preguntas 10

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Para poner en arriba el $ agregar lo siguiente

.plan-card--price span {
    font-size: 1.2rem;
    font-weight: 300;
    vertical-align: text-top;
}```

Hola a todos!
Decid铆 agregar el signo $ a trav茅s de un pseudo elemento creado con ::before (utilic茅 ::before porque el s铆mbolo est谩 _antes _del n煤mero).

.price-card .price-card__planPrice {
    font-size: 5.2rem;
    line-height: 6.3rem;
    font-weight: bold;
    position: relative; /*para qeu el s铆mbolo se posicione en relaci贸n al n煤mero*/
}
.price-card .price-card__planPrice::before {
    position: absolute;
    top: 20%;
    left: calc(50% - 45px);
    content: '$';
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1;  /*La altura de la l铆nea del texto es igual a la altura del texto (ser铆a algo as铆 como sacarle el padding  top y bottom a una caja)*/
}

Este es el resultado:

驴Qu茅 les parece?

La primera soluci贸n que se me ocurri贸 fue usar la posici贸n absoluta y colocar un top y left.
Al principio puse 鈿 left: -60px; pero al hacer m谩s grande la resoluci贸n de la p谩gina esto se corr铆a de lugar por lo cual no era viable. Entonces us茅 el siguiente c贸digo que nos ense帽o Diego en las clases anteriores.

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

.plan-card__price span {
    position: absolute;
    top: -7px;
    left: calc(50% - 40px);
    font-size: 1.2rem;
    font-weight: 300;
}

Usando calc podemos mover el elemento desde la l铆nea central del elemento, y como la l铆nea central nunca va a variar porque el centro siempre ser谩 el centro, entonces no se mueve del lugar a pesar de cambiar el tama帽o de la p谩gina. En cambio, tomando como referencia los costados como left o right porque estos pueden variar al hacer m谩s grande la pantalla.

Otra manera de centrar de manera vertical el texto de 鈥Recomendado鈥 es usando line-height:

.recommended {
	line-height: 31px; /* El mismo valor que se asigna a height */
} 

Yo lo que hice fu茅 usar la etiqueta de HTML5 <sup></sup>
As铆

<sup><span>$</span></sup>

Este fue el c贸digo que utilice para posicionar la etiqueta de span 馃槂

As铆 lo hice con Flex

.card-planes__precio {
    display: flex;
    justify-content: center;
    align-content: flex-start;
    font: bold 5.2rem/6rem 'Inter', 'sans serif';
    letter-spacing: -.5rem;
    color: #000000;
}

.card-planes__precio span {
    margin-right: 7px;
    padding-top: 9px;
    font: 500 1.2rem/1.45rem 'Inter', 'sans serif';
    color: #363636;
}

Asi lo realice yo 馃槂

<.plan-card__price span {
    font-size: 1.2rem;
    font-weight: 300;
    vertical-align: 27px; /*para posicionar un elemento en la parte de arriba de un texto*/
    margin-right: -8px;
}> 

Si por alguna razon, los estilos no les salen en los parrafos, es porque esta interfiriendo la parte de

.plans--title p {
    padding-top: 30px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: #757575;
}

interfieren con los estilos marcados hace dos videos, les recomiendo que a la parte de ese parrafo, le pongan una clase extra, que aumente la especificidad.

Una de las formas mas rapidas de posionar el texto de recomendado, aprovechando que ya tenemos un text-align: center aplicado a toda la seccion, es simplemente darle un display: inline-block, y position: relative con un bottom: 7.5px (la mitad del alto del parrafo), para que lo empuje desde su misma posicion hacia arriba.

.plans-container__card>p {
    display: inline-block;
    position: relative;
    bottom: 7.5px;
}
  • Y agregarle los demas estilos que son los mismos, backround, padding, etc.

Ya hice el bot贸n y sub铆 el signo de dolar. Lo hice con position: relative; y position: absolute;. Veo que diego prefiere centrar usando padding, yo uso flexbox.

Este es el c贸digo:

Esta es mi soluci贸n al problema:

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

.plan-card--price span {
  font-size: 1.2rem;
  font-weight: 300;
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  transform: translateX(-40px)
}

No s茅 si me compliqu茅 mucho pero as铆 me funcion贸 馃槄馃お:

.main-plans-container .plans-container--slider .plans-container--card .plan-info-container .plan-card--price
{
    padding: 5px 0;
    font-size: 5.2rem;
    font-weight: bold;
    line-height: 5rem;
    color: var(--black);
    position: relative;
}
.main-plans-container .plans-container--slider .plans-container--card .plan-info-container .plan-card--price span
{
    font-size: 1.2rem;
    font-weight: 300;
    position: absolute;
    top: -6px;
    left: calc(50% - 40px);
}

Espero le sirva a alguien mi aporte.
Lo que pasa es que intente de varias maneras el reto(ubicar el $ en la parte superior).

    • una fue usando** position:relative **en el contenedor padre y **position:absolute **en el contenedor hijo(el del span)

    • El problema de ese es si quieres aumentar el n煤mero a las de 99, se sobrepone con el signo $

  1. Fue intentando usar display:flex;

    • Este funciono muy bien, sin embargo, se centraba tanto el $ como el 99, y en Figma se puede ver que el 99 es el que esta en medio y el $ a un costado, no los dos centrados juntos.

鈥 Intente otros m茅todos m谩s; sin embargo, mi soluci贸n fue la siguiente

As铆 que mi soluci贸n fue la siguiente

  • En el span us茅 vertical-align: top;, lo que hace que se ponga en la parte superior

  • y para que quede centrado al contenedor padre le agregue ** position: relative;** y le reste con left:-7px; el grosor del signo $

  • Luego ya hice varias pruebas, n煤meros muchos m谩s grandes y siempre quedaba centrado y con el signo a un lado

.plan-card--price{
  padding:5px 0;
  font-size: 5.2rem;
  font-weight: bold;
  line-height: 6.3rem;
  font-family: "Inter",sans-serif;
  color:black;
  position: relative;
  left:-7px;
}



.plan-card--price span{
  vertical-align: top;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.5rem;
  
  
}

Compa帽eros yo utilic茅 el cal() y un absolute para poner el signo $ arriba del n煤mero:

.plan-card--price span {
    font-size: 1.2rem;
    font-weight: 300;
    position: absolute;
    left: calc(50% - 40px);
    top: calc(50% - 90px);
}

Si se hubiese usado Flexbox con flex-direction row el signo $ hubiese quedado bien alineado

Hice el centrado de otra forma :

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

Tambi茅n puse como width el m谩ximo del contenido

width: max-content;

La forma que lo resolvi fue la siguiente

.plan-card--price span {
  position: absolute;
  font-size: 1.2rem;
  font-weight: 300;
  right: calc(50% + 35px);
  bottom: calc(50% + 25px); 
}

Yo lo movi hacia arriba asi:

.plans-container--card .plan-card--price span {
    font-size: 1.2rem;
    font-weight: 300;
    vertical-align: 2.5rem; /* Mover el $ arriba*/
}```

Muchachos, creo que la mejor forma es utilizas el pseudoelemento 鈥::before鈥, Ya que se va a acomodar sin importar a la cantidad de cifras que pueda tener el precio en la tarjeta. Aqu铆 les dejo una foto y el c贸digo

Mi solucion

.plan-card--price span {
    position:absolute;
    margin: -10px;
    font-size: 1.3rem;
    font-weight: bold;
    margin-top: -15px;
}

Los tres planes quedaron listos.

Se ve铆a muy separado los numeros y agregue un letter-spacing

.change-card .price {
    padding: 6px 0;
    font-size: 5.4rem;
    font-weight: 700;
    line-height: 6.2rem;
    letter-spacing: -4px;
    color: var(--black);
}

.change-card .price span {
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 4rem;
    vertical-align: text-top;
}

.plan-card-price span {
font-size: 1.2rem;
font-weight: 300;
vertical-align: text-top;
}

Mi avance :

.main__plans--cards {
    position: relative;
    width: 70%;
    min-width: 230px;
    max-width: 300px;
    height: 250px;
    margin: 50px auto 0;
    padding: 0 15px;
    background-color: var(--white);
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(89 73 30 / 0.16);
}

.card--title {
    position: absolute;
    /* padding: 10px; */
    width: 120px;
    height: 31px;
    padding: 8px;
    top: -15px;
    left: calc(50% - 60px);
    background-color: var(--bitcoin-orange);
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.4rem;
    color:var(--white);
    text-align: center;
}

.card__info-title {
    padding-top: 30px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: black;
}

.card__price {
    position: relative;
    right: 8px;
    padding: 10px 0;
    font-family: 'Inter', sans-serif;
    font-size: 5.2rem;
    font-weight: 700;
    line-height: 6.3rem;
}
.card__price sup {
    position: relative;
    top: -13px;
    left: 10px;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.4rem;
}

.card__saving {
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.4rem;
    text-align: center;
    color: var(--dark-grey);
}

Para poner el $ arribar puse este c贸digo:

<code> 
.plan-card--price span{
    font-size: 1.2rem;
    font-weight: 300;
    vertical-align: 30px;
    padding: 10px;
}

Espero que mi comentario pueda ayudar.

Para posicionar el $ es muy facil, lo hice con position relative y le coloque un bottom de 28px

.plan-card-price span {
    font-size: 1.2rem;
    font-weight: 300;
    position: relative;
    bottom: 28px;

2 soluciones que encontr茅:

Usando Position

.plans-card-body__price {
    position: relative;
}

.plans-card-body__dollar {
    position: absolute;
    top: -12px;
    left: calc(50% - 45px);

    font-size: 1.2rem;
    font-weight: 300;
}
Usando vertical align

.plans-card-body__dollar {
    vertical-align: 28px;

    font-size: 1.2rem;
    font-weight: 300;
}

Buenas noches envi贸 imagen de como me quedo, verificando los dem谩s comentarios evidencio que no utilizaron tantos 鈥渃贸digo鈥 pero bueno lo quer铆a intentar no soy para nada experta en el tema. de igual forma no se si as铆 tambi茅n esta bien. acepto comentarios. Gracias

Reto logrado!!! 馃挌馃挭馃殌

Me pareci贸 un reto interesante porque era posicionar una etiqueta span la cual no se muy bien como se comporta del todo por defecto. Intent茅 muchas cosas y finalmente se me ocurri贸 lo siguiente:

Coloqu茅 position: absolute al span para luego jugar con las posiciones left y right, tambi茅n le di un margin-top. A la etiqueta p que contiene el span le di un position: relative. Y de resto le agregu茅 los dem谩s estilos seg煤n el dise帽o en Figma.

Adjunto el c贸digo CSS

.plan-card--price {
  position: relative;
  padding: 5px 0;
  font-size: 5.2rem;
  font-weight: bold;
  line-height: 5.3rem;
  color: black;
}
.plan-card--price span {
  position: absolute;
  margin-top: 4px;
  left: 0;
  right: 80px;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.5rem;
  color: #363636;
}

Yo lo hice as铆 馃槄

.plan-card--price span {
    font-size: 1.2rem;
    font-weight: 300;
    position: relative;
    top: -28px;
}

creo que lo mas f谩cil y obvio es usar

.plan-card--price span {
    vertical-align: top;
    font-size:1.2rem;
    font-weight: 500;
    line-height: 1.5rem;
}
.plan-card--price {
    position: relative;
    padding: 5px 0;
    font-size: 5.2rem;
    line-height: 6.3rem;
    color: black
}

.plan-card--price span {
    position: absolute;
    left: calc(50% - 45px);
    bottom: 20px;
    font-size: 1.2rem;
    font-weight: 300;

}

Lo que me encantan de las clases de este profesor es que las respuestas a los retos salen solas si prestas atencion!

.plan-card--price{
  position: relative;/*para poder posicionar el $*/
  padding: 5px 0;
  font-size: 5.2rem;
  font-weight: bold;
  line-height: 5.3rem;
  color: black;
}

.plan-card--price span{
  position: absolute;
  top: -7px;
  left: calc(50% - 40px);
  font-size: 1.2rem;
  font-weight: 300;
}

/centrar boton/
left: 0;
right: 0;
margin-right: auto;
margin-left: auto;

.plan-card--price

.plan-card--title

resultado intermedio

.recommed

Edici贸n de style.css

La soluci贸n que desarroll茅 como respuesta al reto, est谩 enfocada en aprovechar que a la clase plans-container鈥揷ard se le hab铆a asignado el valor relative en la propiedad position:

Dado que esta clase es la asignada en HTML, al contenedor article que aloja toda esta secci贸n:

Se puede utilizar la propiedad position con valor absolute, para ubicar los elementos hijos del contenedor mencionado, seg煤n el dise帽o planteado en Figma, tal y como se hizo con la clase recommended:

Teniendo en cuenta lo anterior, utilic茅 la propiedad position con valor absolute, asign茅 dimensiones a la etiqueta span y realic茅 el c谩lculo similar al realizado con la etiqueta p clase recommended, para poder ubicar el signo $ en el lugar que indica Figma, el cual debe quedar en la misma horizontal superior que forman los 2 d铆gitos del precio del plan. Estos estilos me quedaron as铆:

Posicione el $ de esta manera

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

As铆 fue como lo soluci贸ne a ojo del buen cubero.

.plan-card--price span{
    position: absolute;
   font-size: 1.2rem;
  font-weight: 300;
  right: calc(50% + 40px);
  bottom: calc(50% - 20px); 
}

peque帽o recordatorio:

al usar la funci贸n calc deben asegurarse que est茅n bien separados los n煤meros/variables del signo de la operaci贸n.

Mal:

left: calc(50%-60px);

Bien:

left: calc(50% - 60px);

Observ茅 en el dise帽o que el 鈥99鈥 est谩 m谩s pegado y el signo 鈥$鈥 un poco alejado. As铆 que us茅 letter-spacing para acomodarlo.

.card-plan__price{
  letter-spacing: -4px;
/*El letter spacing de ambos corre el texto, sumando los dos letter spacing como valor del padding, hago que el texto se vuelva a centrar*/
  padding-right: 8px;
}

.card-plan__price span{
  letter-spacing: 4px;
}

Sin letter-spacing ni padding


Con letter-spacing y padding

Para saber cu谩l es el valor de 鈥渃alc(50% - ?)鈥 para que quede centrado es sacar el 50% del ancho total.
por ejemplo: 120px * 50 / 100 = 60px

鈥渃alc(50% - 60px)鈥

Seguimos avanzando ya falta poco

Trate de hacer sin ver las dos ultimas clases y vaya que me salio, aunque un poco diferente a lo que explico el profe diego pero lo bueno que no se rompen los estilos al agrandar, anteriormente me solia pasar seguido jeje.
Lo unico que revise aqui fue la alineacion del $ vertical

Usando <sup> en vez de <span> ;

.plan-card--price sup {
    font-size: 1.2rem;
    font-weight: 300;
    vertical-align: 25px;
}

Hola a todos:
Yo para el signo $ use la propiedad de position

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

Hice lo siguiente:

.plan-card--price span{
    font-size: 1.2rem;
    font-weight: 500;
    margin-right: 4px;
    position: relative;
    top: -3rem;
}

Tal vez fue la soluci贸n m谩s b谩sica pero yo lo hice con Flexbox

.main-plan-cards .main-plan-price {
    display: flex;
    justify-content: center;
    align-items: stretch;
    margin-top: 16px;
}

Con esto se centra el el contenido y el icono de d贸lar queda arriba, igualmente se puede usar flex-start en vez de stretch

hola, yo lo hice simple desde el html, cambie la etiqueta span por la etiqueta sup, que es superindice鈥 no sera la gran solucion ni la mejor pero dije para que css si existe una etiqueta html para ello

<p class="plan-card--price"><sup>$ </sup>99</p> 

Aqu铆 mi c贸digo, el calc si lo sabes usar ayuda bastante como dice Diego

.plan-card--price {
    position: relative;
    padding: 5px 0;
    font-size: 5.2rem;
    font-weight: bold;
    line-height: 6.3rem;
    color: black;
}
.plan-card--price span {
    position: absolute;
    height: 12px;
    top: -10px;
    left: calc(50% - 50px);
    font-size: 1.2rem;
    font-weight: 300;
}
.plan-card__price span{
    font-size: 1.2rem;
    font-weight: 500;
    vertical-align: 27px;
}

My code

隆Hola! Agregando la propiedad letter-spacing van a poder juntar los n煤meros 鈥99鈥 馃槂

.plan-card--price {
    letter-spacing: -0.4rem;
    padding: 5px 0;
    font-size: 5rem;
    font-weight: bold;
    color: #000;
}

As铆 va quedando

Para subir el 鈥$鈥 us茅:

.plan-card--price span{
    font-size: 1.2rem;
    font-weight: 300;
    vertical-align: 27px;   
}

Luego, en el html le d铆 un espacio dentro del <span> para que se separe un poco el singo $. Antes le d铆 el espacio fuera del <span> y era mucho.

<p class="plan-card--price"><span>$ </span>99</p> 

Yo resolv铆 el reto del 鈥$鈥 as铆

.plan-card--price{
    position: relative;
    padding: 5px 0px;
    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: calc(50% - 42px);
    bottom: 20px;
}
.plan-card--saving{
    font-size: 1.2rem;
    color: #757575;
}

Usando position relative y absolute.

a mi se me ocurrio esta soluci贸n y creo se ve bien, que opinan?

.plan-card--price {
    padding: 5px 0;
    font-size: 5.2rem;
    font-weight: bold;
    line-height: 5.3rem;
    color: black;
}
.plan-card--price span{
    position: absolute;
    font-size: 1.2rem;
    font-weight: 300;
    margin: -10px;
}
.plan-card--saving {
    font-size: 1.2rem;
    color: #757575;
}

para poner el $ en su posici贸n utilice lo siguiente:

.plan-card--price{
    position: relative;
    padding: 5px 0;
    font-size: 5.2rem;
    font-weight: bold;
    color: black;
}

.plan-card--price span{
    position: absolute;
    font-size: 1.2rem;
    font-weight: 300;
    left: 30%;
    top: 20%;
}

.plan-card鈥損rice span{
font-size: 1.2rem;
font-weight: bold;
position: absolute;
left: calc(36%);
top: calc(14%);
}
Este si =)

Les recomiendo poner un letter-spacing para el espaciado entre caracteres

(Notan con en el dise帽o el numero 99 tiene menos espacio entre si)

y les dejo la soluci贸n de signo del $

main .plan-card--price {
    padding-top: 5px 0;
    font-size: 5.2rem;
    font-weight: bold;
    line-height: 6.3rem;
    color: black;
    font-family: var(--second-font);
    letter-spacing: -0.4rem;
}

main .plan-card--price span {
    position: relative;
    font-size: 1.2rem;
    top: -27px;
    left: -8px;
    font-family: var(--second-font);
}

Listo

馃憣

Hasta ahora voy as铆:
.

.

Para posicionarlo use

.plan-card--price {
  position: relative;
  padding: 5px 0;
  font-size: 5.2rem;
  font-weight: bold;
}
.plan-card--price span {
  position: absolute;
  top: 18px;
  left: 56px;
  font-size: 1.2rem;
  font-weight: 300;
}

Para posicionar el span, utilizando las flechas en el inspector de elementos para irlo moviendo poco a poco hasta que vemos que llega a la posici贸n que queremos

.plan-card__price span {
    vertical-align: 25px;
}

Para poner el signo $ arriba del precio. Tenemos que posicionarlo y luego con top moverlo.

.plan-card--price span {
    position: relative;
    top: -22px;
    font-size: 1.2rem;
    font-weight: 300;
}```

excelente Diego

Por alguna extra帽a raz贸n para aplicar los estilos de 鈥減lan-card鈥損rice鈥 no me deja hacerlo, si me voy a las herramietas de desarrollador de Chrome solamente me dice que esta heredando o que le da prioridad a los estilos de la etiqueta P de ".main-exchange-container p "

Para poder aplicar los estilos tuve que caer en la mala practica de un !Important鈥 alguien sabe que pudo haber pasado?

agregu茅 esto para subir el signo de precio

    position: relative;
    bottom: 27px;

Esta es la forma en la que yo solucione el reto.

Decidi hacerlo con Absolute:

.plan-card--price {
  font-family: 'Inter', sans-serif;
  font-size: 5.2rem;
  font-weight: 700;
  line-height: 6.3rem;
  margin-top: 0;
  margin-bottom: 16px;
  color: var(--black);
  position: relative;
}
.plan-card--price span{
  font-size: 1.2rem;
  line-height: 1.45rem;
  position: absolute;
  top: 15px;
  left: calc(50% - 42px);
}

Aunque tambi茅n se puede:

.plan-card--price span{
  font-size: 1.2rem;
  line-height: 1.45rem;
  vertical-align: top;
}

No s茅 si luego de alg煤n tipo de problema o sea la mejor manera, pero para posicionar el 鈥$鈥 hice uso del position relative y medidas en top y left

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

Creo que se les paso el detalle de la accesibilidad en el curso, debido a que si alg煤n usuario decide cambiar el tama帽o de fuente desde los ajustes del navegador la pagina comienza a presentar fallos en el dise帽o: el contenido se desborda de algunos elementos, en algunos corta el contenido por lo que se ve incompleto, etc.

Note que el precio estaba m谩s a la derecha que lo que est谩 mostrando el dise帽o original. Use position relative

.plan_card--price {
  position: relative;
  left: -7px;
  padding: 5px 0;
  font-family: "Inter", sans-serif;
  letter-spacing: -0.4rem;
  font-size: 5.2rem;
  font-weight: bold;
  line-height: 5.3rem;
  color: black;
}

Agrege el letter-spacing como esta en figma para que el 99 se vea mas junto鈥dicional el signo $ lo ajuste con ayuda de line-height y vertical-align

.plans-card--price{
    padding: 5px 0;
    font-weight: bold;
    font-size: 5.2rem;
    line-height: 6.3rem;
    color: var(--black);
    letter-spacing: -0.08em;
}

.plans-card--price span{
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 3.5rem;
    color: var(--black);
    vertical-align: top;
}

Yo le aplique el tipo de fuente Inter al precio y queda como el dise帽o de figma y se ve un poco mejor.
Saludos

Para posicionar el $ us茅:

    position: absolute;
    top: 30px;
    left: 75px;

Yo coloque el signito de d贸lar de esta forma:

.plan-card--price {
    position: relative;
    padding: 5px 0;
    font-size: 5.2rem;
    font-weight: 700;
    color: var(--black);
    display: inline-block;
}

.plan-card--price span {
    position: absolute;
    top: 20px;
    left: -10px;
    font-size: 1.4rem;
    font-weight: 300;
}
.plan-card--price span{
    position: relative;
    font-size: 1.2rem;
    font-weight: 300;
    left: -5px;
    top: -30px;
  }
Esta clase me encanto ya que aprend铆 el scroll horizontal que lo desconoc铆a. Vamos bien 馃憤

Lo hice de esta manera :

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

}

.plan-card--price span {
    font-size: 1.2rem;
    font-weight: 300;
    position: absolute;
    top: -7px;
    left: calc(50% - 42px);
  
}```

.plan-card鈥損rice span{
font-size: 1.2rem;
font-weight: bold;
position: absolute;
left: calc(50% - 40px);
top: calc(50% - 90px);
}
Esta si =*

Aca hay otra variante

.plan-card鈥損rice span {
font-size: 1.2rem;
position: relative;
font-weight: 700;
top: -26px;
left: -3px;
}

Yo posicione el signo de 鈥$鈥 con position: absolute.
.
.

.plans-container-card .dollar-small {
    position: absolute;
    top: 70px;
    left: 71px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 1.2rem;
    line-height: 1.5rem;
}```

Yo utilice 2.8rem ya que el dolar debe estar alineado a la altura del 99
.plan-card鈥損rice span {
font-size: 1.2rem;
font-weight: 300;
vertical-align: 2.8rem;
}

Hola PlatziNautas;

Este es mi soluci贸n para el reto del span:

Saludos!

si miran bien, el span tiene otro color, es el:
#363636

Para el $ yo he usado esto no se si ser谩 lo mas correcto

.plan-card--price{
    position: relative;
    padding:5px 0;
    font-size: 5.2rem;
    font-weight: bold;
    line-height: 6.3rem;
    color: black;
}
.plan-card--price span{
    position: absolute;
    font-size: 1.2rem;
    font-weight: 300;
    top: -5%;
    left: calc(50% - 40px);
}```

Yo lo hice de la siguiente manera. Que opinan?

<.plan-card--price span {
    position: relative;
    font-size: 1.2rem;
    font-weight: 300;
    bottom: 20px;
}>

Buen dia campeones.

Yo solamente agregu茅 un position relative y lo empece a colocar con top y left:

.plan-card__price span {
    font-weight: 300;
    font-size: 1.2rem;
    position: relative;
    top: -27px;
    left: -2px;
}