No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Aplicando estilos al botón de call to action

26/32
Recursos

Para terminar esta sección ya sólo nos queda el call to action y podremos pasar a crear los slides entre las tarjetas. El botón que tenemos ahora es el típico que nos genera la etiqueta button. Para cambiarlo, vamos a la hoja de estilos de nuestro proyecto.

Cambiar el botón por defecto

  • Llamamos la clase del botón con .plan-card–ca.
  • Le damos un ancho de 150px y un alto de 48px.
  • Añadimos un margen superior de 20px.
  • Cambiamos su color de fondo a #faf8f7 de acuerdo al proporcionado en el diseño.
  • Establecemos el grosor del borde en 2px y le damos el color de la variable –bitcoin-orange.
  • Redondeamos ligeramente las esquinas con border-radius: 4px.
  • En caso que no se aplique la fuente que establecimos al inicio del documento, la traemos y la pegamos en el estilo actual con font-family: ‘DM Sans’, sans-serif.
  • Ajustamos el tamaño de fuente en 1.4rem y su peso en bold.
  • Le damos un interlineado de 1.8rem y el color de la variable –black.
.plan-card--ca {
    width: 150px;
    height: 48px;
    margin-top: 20px;
    background-color: #faf8f7;
    border: 2px solid var(--bitcoin-orange);
    border-radius: 4px;
    font-family: 'DM Sans', sans-serif;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.8rem;
    color: var(--black);
}

Cómo modificar el Ícono

  • Llamamos la etiqueta span contenedora de nuestro ícono desde la clase del botón con .plan-card–ca span.
  • Usamos display: inline-block para que se mantengan en la misma línea que el texto.
  • Le damos un ancho y alto de 20px.
  • Insertamos el ícono con un ***background-image: url("")***.
  • Para poder colocar el ícono a la misma altura del texto, usamos vertical-align: text-bottom.
.plan-card--ca span {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("./assets/icons/orange-right-arrow.svg");
    vertical-align: text-bottom;
}

Tendríamos este resultado renderizado en nuestro navegador:
ejemplo al aplicar estilos a un botón

¡Y con este terminamos los estilos de esta tarjeta! Sólo nos queda el slide que se genera de manera horizontal.

Contribución creada por: José Miguel Veintimilla (Platzi Contributor).

Aportes 207

Preguntas 18

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Así a quedado mi sección de planes:

Muy buena clase, así quedo el mío

Comparto mi ejercicio

Emocionado de pasar a la clase siguiente 😄.

🦄Amé los colores jaja

  • Para que los numeros en el precio no nos queden tan separados podemos usar la propiedad letter-spacing en -0.8px, para que nos quede mas parecido al diseño de Figma.
letter-spacing: -0.8px;

Adicionalmente al botón le añadí estas 2 propiedades:

cursor: pointer;
outline: none;

Primero con cursor:pointer hacemos que aparezca la manita cuando estemos sobre el botón.
Y con outline:none se elimine ese borde negro al hacer clic sobre el botón.

En vez de hacerlo con un background en un span use el pseudo elemento ::after para colocar la flecha.

.plan-card--ca {
    width: 150px;
    height: 48px;
    font-size: 1.4rem;
    font-weight: var(--bold);
    line-height: 1.8rem;
    color: var(--black);
    font-family: var(--font-sans);
    background-color: #faf8f7;
    border: 2px solid var(--bitcoin-orange);
    border-radius: 4px;
}

.plan-card--ca::after {
    content: url(/assets/icon/arrow_right_orange.svg);
    max-width: 20px;
    max-height: 20px;
    vertical-align: text-bottom;
    /* border: 1px solid red; */
    display: inline-block;
}

Simplemente replicando el article dos veces y borrando el recommended no me surgió ningún problema

En .plan-card–ca añadí el cursor: pointer para que cambie el cursos al pasar el mouse por encima

Así se quedaron mis tarjetas de planes 😃
Por si alguien quiere cambiar de color a sus flechas y no sabe como, puede intentar usar la propiedad filter en el ícono. Yo la usé así:

.plans-container__card:last-child button > span{
   filter: hue-rotate(180deg);
} 


Tomando en cuenta que en el card de Recomendado pone que el usuario se ahorra $129 comparado con el plan mensual… tiré números pero daba $10,75, así que lo llevé hasta 11 para no batallar. lol
La idea de los estilos (azul para el básico y negro para el otro) la tomé del aporte de Juan Jose Arcani; me pareció muy buena. Así que créditos para él.

No le cambie los colores realmente para no perder un poco el estilo dado.
Pero viendo el de mis compañeros les quedaron increíbles!!!
Yo les comparto el resultado del mío 😄

Ahí va mi modelo

¡Tarjetas listas!

Realizo mi aporte
Complementado con información de los compañeros

Aquí están las tarjetas restantes 🙌

para reutilizar el código de “recomendado” y aplicarlo en otras tarjetas solo cambiando el color, cree una clase que contenía esas propiedades menos el color naranja, que lo dejé como unica linea de la clase recommended

.price-type{
    position: absolute;
    width: 120px;
    height: 31px;
    top: -15px;
    left: calc(50% - 60px);
    font-size: 1.2rem;
    padding: 6px;
    border-radius: 8px;
    color: var(--just-white);
}
.recommended{
    background-color: var(--bitcoin-orange);
}
.basic{
    background-color: var(--secondary-blue);
}
.plus{
    background-color: var(--warm-black);
} 

Siendo el html algo así, dependiendo de la tarjeta:

<p class="price-type recommended">Recomendado</p>
<p class="price-type basic">Básico</p>
<p class="price-type plus">Destacado</p>

La forma más facil de resolver la alineación de la flecha en el span es poniendo un

    position: inherit;

de esta manera quedan alineados el texto y la flecha

Luego de un rato mirando mi HTML porque no quedaba bien el cuadro, después de descubrir que me comí un div todo quedó como iluminación.

Modifique el orden para poner el básico al extremo, el recomendado en el centro y el más caro al otro extremo.

Subí la fuente de 1.2 rem a 1.4rem porque a mi parecer era muy chica y quedaba muy lejana. Por lo demás emplee la misma paleta de colores que la colocada dentro del proyecto.

Reto Cumplido!!!


Reto completado inspirándome en uno de los aportes 😄

Heeey! Increible estar llegando a este punto.

Me fijé en la app real de Batata y para esta sección quise implemetar o replicar los estilos de las tarjetas y sumarle el feature del scroll bar usando un pseudoelemento ::webkit-scrollbar

Te quiero contar que estoy haciendo un reto de #100DaysOfCode y quiero decirte que esta comunidad me alienta a nunca parar de aprender y mejorar cada dia. Gracias por aportar.

Done!

Si desean cambiar el color a los iconos (por ejemplo la flecha naranja del botón) pueden hacerlo desde CSS! y no solo el color, pueden cambiar el contraste, saturación, transparencia, sepia, desenfoque, escala de grises y otras propiedades más.

Solo tienen que colocar la propiedad filter seguido del valor de la propiedad:

En este link podrán ver de forma más detallada todos los filtros para modificaciones visuales en CSS https://lenguajecss.com/css/efectos/filtros-css/

Al igual que el reto anterior, trate de simplificar para no repetir el código para cada contenedor

![](

HTML

<section id="plans" class="main-plans--container">
            <div class="plans--title">
                <h2>Escoge el plan que mejor se ajuste a ti.</h2>
                <p>Cualquier plan te da acceso completo a nuestra plataforma.</p>
            </div>
            <section class="plans-container--slider">
                <article class="plans-container--card">
                    <p class="recommended">Recomendado</p>
                    <div class="plan-info--container">
                        <h3 class="plan-card--title">Pago Anual</h3>
                        <p class="plan-card--price"> <sup>$</sup> 99</p>
                        <p class="plan-card--saving">*Ahorras $129 comparado al plan mensual.</p>
                        <button class="plan-card--ca button-recommended">Escoger este <span></span></button>
                    </div>
                </article>
                <article class="plans-container--card">
                    <p class="basic">Básico</p>
                    <div class="plan-info--container">
                        <h3 class="plan-card--title">Pago Mensual</h3>
                        <p class="plan-card--price"> <sup>$</sup> 19</p>
                        <p class="plan-card--saving">Paga 1 vez al mes desde el día de tu compra.</p>
                        <button class="plan-card--ca button-basic">Empieza <span></span></button>
                    </div>
                </article>
                <article class="plans-container--card">
                    <p class="supreme">Supremo</p>
                    <div class="plan-info--container">
                        <h3 class="plan-card--title">Un solo pago de por vida</h3>
                        <p class="plan-card--price"> <sup>$</sup> 129</p>
                        <p class="plan-card--saving">Ahorro infinito
                            (50 cupos).</p>
                        <button class="plan-card--ca button-supreme">Empieza <span></span></button>
                    </div>
                </article>
            </section>

CSS

.plans-container--card{
    position: relative;
    width: 70%;
    min-width: 23rem;
    max-width: 30rem;
    height: 25rem;
    margin: 5rem auto 0;
    padding: 0 1.5rem;
    background-color: var(--just-white);
    border-radius: 1.5rem;
    box-shadow: 0 .4rem .8rem rgba(89, 73, 30, 0.16);
}

.plans-container--card .recommended, .basic, .supreme{
    position: absolute;
    width: 12rem;
    height: 3.1rem;
    top: -1.5rem;
    left: calc(50% - 6rem);
    font-size: 1.2rem;
    background-color: var(--bitcoin-orange);
    border-radius: .8rem;
    color: var(--just-white);
    padding: .6rem;    /*Alinear el p dentro de este contenedor*/
}

.plans-container--card .basic{
    background-color: var(--secondary-blue);
}

.plans-container--card .supreme{
    background-color: purple;
}

.plan-card--title{
    padding-top: 3rem;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: black;
}

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

.plan-card--price sup{
    position: absolute;
    left: 6rem;
    bottom: 1.5rem;
    font-size: 1.2rem;
    font-weight: 300;
}

.plan-card--saving{
   font-size: 1.2rem;
   color: #757575; 
}

.plan-card--ca{
    width: 15rem;
    height: 4.8rem;
    margin-top: 2rem;
    background-color: var(--off-white);
    border-radius: .4rem;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.8rem;
    font-family:'DM Sans', sans-serif;
}

.button-recommended{
    border: .2rem solid var(--bitcoin-orange);
}

.button-basic{
    border: .2rem solid var(--secondary-blue);
}

.button-supreme{
    border: .2rem solid purple;
}

.plan-card--ca span{
    display: inline-block;
    width: 2rem;
    height: 2rem;
    background-image: url(./assets/icons/orange-right-arrow.svg);
    vertical-align: text-bottom;  /*Alinea al span con el */
}

Estoy contento porque he realizado el diseño de dos nuevos card basándome en el aporte de un compañero, he agregado las flechas grises a los costados, y además he agregado funciones básicas de JS para que se pueda mover a izquierda y derecha presionando las flechas y pasar de plan en plan, quedó así:

Código HTML (lo modificado):

<section class="plans-container--slider">
                <article class="plans-container--card" id="basicPlanCard">
                    <p class="basic">Básico</p>
                    <div class="plan-info-container">
                        <h3 class="plan-card--title">Pago Mensual</h3>
                        <p class="plan-card--price"><span>$</span>19</p>
                        <p class="plan-card--saving">
                            *Plan básico, aunque con todas las ventajas.
                        </p>
                        <button class="plan-card--ca">Escoger este <span></span></button>
                    </div>
                    <span class="plans-arrow-left" onclick="showUnlimitedCard2()"></span>
                    <span class="plans-arrow-right" onclick="showRecommendedCard2()"></span>
                </article>
                <article class="plans-container--card" id="recommendedPlanCard">
                    <p class="recommended">Recomendado</p>
                    <div class="plan-info-container">
                        <h3 class="plan-card--title">Pago Anual</h3>
                        <p class="plan-card--price"><span>$</span>99</p>
                        <p class="plan-card--saving">
                            *Ahorras $129 comparado al plan mensual.
                        </p>
                        <button class="plan-card--ca">Escoger este <span></span></button>
                    </div>
                    <span class="plans-arrow-left" onclick="showBasicCard()"></span>
                    <span class="plans-arrow-right" onclick="showUnlimitedCard()"></span>
                </article>
                <article class="plans-container--card-unlimited" id="unlimitedPlanCard">
                    <p class="unlimited">Ilimitado</p>
                    <div class="plan-info-container">
                        <h3 class="plan-card--title-unlimited">De por vida</h3>
                        <p class="plan-card--price-unlimited"><span>$</span>199</p>
                        <p class="plan-card--saving-unlimited">
                            *Exclusivo para los primeros 100 clientes, con un precio especial.
                        </p>
                        <button class="plan-card--ca-unlimited">Escoger este <span></span></button>
                    </div>
                    <span class="plans-arrow-left" onclick="showRecommendedCard()"></span>
                    <span class="plans-arrow-right" onclick="showBasicCard2()"></span>
                </article>
            </section>

Código CSS (lo modificado):

.plans-container--card,
.plans-container--card-unlimited {
    position: relative;
    width: 60%;
    min-width: 190px;
    max-width: 240px;
    height: 250px;
    margin: 50px auto 0;
    padding: 0 15px;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(89,73,30,0.16);
}
.plans-container--card {
    background-color: var(--just-white);
}
.plans-container--card-unlimited {
    background-color: var(--black);
}
.recommended,
.basic,
.unlimited {
    position: absolute;
    width: 120px;
    height: 31px;
    border-radius: 8px;
    left: calc(50% - 60px);
    top: -15px;
    font-size: 1.2rem;
    padding: 6px;
    font-weight: 700;
    line-height: 14.52px;
    font-family: "Inter",sans-serif;
}
.recommended {
    background-color: var(--bitcoin-orange);
    color: var(--just-white);
}
.basic {
    background-color: var(--secondary-blue);
    color: var(--just-white);
}
.unlimited {
    background-color: var(--grey);
    color: var(--warn-black);
}
.plan-card--title,
.plan-card--title-unlimited {
    padding-top: 30px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
}
.plan-card--title,
.plan-card--price {
    color: black;
}
.plan-card--title-unlimited,
.plan-card--price-unlimited {
    color: var(--just-white);
}
.plan-card--price,
.plan-card--price-unlimited {
    padding: 5px 0;
    font-size: 5.2rem;
    font-weight: bold;
    line-height: 5.3rem;
}
.plan-card--price span,
.plan-card--price-unlimited span {
    font-size: 1.2rem;
    font-weight: 300;
    position: relative;
    bottom: 29px;
    right: 2px;
}
.plan-card--saving,
.plan-card--saving-unlimited {
    font-size: 1.2rem;
}
.plan-card--saving {
    color: #757575;
}
.plan-card--saving-unlimited {
    color: var(--off-white);
}
.plan-card--ca,
.plan-card--ca-unlimited {
    width: 150px;
    height: 48px;
    margin-top: 20px;
    border: 2px solid var(--bitcoin-orange);
    border-radius: 4px;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.8rem;
    font-family: 'DM Sans', sans-serif;
}
.plan-card--ca {
    background-color: #faf8f7;
    color: var(--black);
}
.plan-card--ca-unlimited {
    background-color: var(--warn-black);
    color: var(--just-white);
}
.plan-card--ca span,
.plan-card--ca-unlimited span{
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('./assets/icons/arrow_right_orange.svg');
    vertical-align: text-bottom;
}
.plans-arrow-left,
.plans-arrow-right {
    display: inline-block;
    cursor: pointer;
    width: 12px;
    height: 12px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    bottom: 120px;
}
.plans-arrow-left {
    background-image: url('./assets/icons/arrow_left_gray.svg');
    right: 150px;
}
.plans-arrow-right {
    background-image: url('./assets/icons/arrow_right_gray.svg');
    left: 150px;
}
/*Función slide JS :)*/
#basicPlanCard,
#unlimitedPlanCard {
    display: none;
}

Código JS (lo que se usa en esta parte):

//Funciones de Planes

//Desde recommendedCard
function showBasicCard() {
    document.getElementById("basicPlanCard").style.display="block";
    document.getElementById("recommendedPlanCard").style.display="none";
}
function showUnlimitedCard() {
    document.getElementById("unlimitedPlanCard").style.display="block";
    document.getElementById("recommendedPlanCard").style.display="none";
}
//Desde unlimitedCard
function showRecommendedCard() {
    document.getElementById("recommendedPlanCard").style.display="block";
    document.getElementById("unlimitedPlanCard").style.display="none";
}
function showBasicCard2() {
    document.getElementById("basicPlanCard").style.display="block";
    document.getElementById("unlimitedPlanCard").style.display="none";
}
//Desde basicCard
function showRecommendedCard2() {
    document.getElementById("recommendedPlanCard").style.display="block";
    document.getElementById("basicPlanCard").style.display="none";
}
function showUnlimitedCard2() {
    document.getElementById("unlimitedPlanCard").style.display="block";
    document.getElementById("basicPlanCard").style.display="none";
}

Como nota, estoy bastante seguro que el código JS se puede mejorar mucho, sin embargo aún no llevo cursos de JS y mi conocimiento es casi nulo, aún así estoy bastante contento con el resultado, a pesar de no ser igual al Figma, me gusta la manera de haberlo implementado.

Para no repetir codigo agregue una clase mas para cambiar el color de background de los titulos de planes.

.plans-title {
    position: absolute;
    width: 120px;
    height: 31px;
    padding:6px;
    top: -15px;
    left: calc(50% - 60px);
    font-size: 1.6rem;
    border-radius: 8px;
    color: var(--white);
}

.recommend {
    background-color: var(--bitcoin-orange);
}
.basic {
    background-color: var(--secondary-blue);
}
.expert {
    background-color: var(--warm-black);
    color: white;

}```


Las dos tarjetas restantes, con un box-shadow distinto

Mis tarjetas:

Reto de las tarjetas faltantes completa!

Para que los números del “99” queden unidos pueden usar:

letter-spacing: -0.08em;

Me adelante un poco con el scroll

.plans-container--slider {
    display: flex;
    width: 100%;
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
    gap: 12px;
    overflow: auto;
}

Logradoo!!!

Ya están mis cards, decidí no cambiar mucho el diseño porque me agrado
.

Buenas a todos!
Este curso me ha parecido muy bueno hasta el momento y el producto que estamos creando me gusta mucho como va quedando.


Estos son los estilos que yo aplique a las tarjetas

Este es mi tabla de precios… Como les parece? Gracias por el Feedback
por si acaso mi repo es: https://github.com/Santymango/ResponsiveD-Batatabit

Listo para crear el slider 😄

Genial…!

:D ![](https://static.platzi.com/media/user_upload/image-69587773-de51-4927-b0f2-80e909f7540c.jpg)

Recomendación:::
La propiedad vertical-align en CSS
acepta varios valores. Aquí tienes algunos de los valores comunes:

baseline: Alinea el elemento con la línea de base de su contenedor.

sub: Hace que el elemento se alinee como subíndice del contenido circundante.

super: Hace que el elemento se alinee como superíndice del contenido circundante.

top: Alinea el elemento en la parte superior de la línea más alta.

text-top: Alinea el elemento con la parte superior del contenido de texto en su línea.

middle: Alinea el elemento en el centro vertical de su contenedor.

bottom: Alinea el elemento en la parte inferior de la línea más baja.

text-bottom: Alinea el elemento con la parte inferior del contenido de texto en su línea.

initial: Establece la propiedad con su valor inicial.

inherit: Hereda el valor de la propiedad de su elemento primario.

Estos valores permiten ajustar la alineación vertical de un elemento en relación con el texto o el contenido circundante. La elección del valor dependerá de la situación y del efecto deseado en el diseño de la página.

Clase 26: Para terminar esta sección ya sólo nos queda el call to action y podremos pasar a crear los slides entre las tarjetas. El botón que tenemos ahora es el típico que nos genera la etiqueta *button*. Para cambiarlo, vamos a la hoja de estilos de nuestro proyecto. ## Cambiar el botón por defecto * Llamamos la clase del botón con ***.plan-card–ca***. * Le damos un ancho de ***150px*** y un alto de ***48px***. * Añadimos un margen superior de ***20px***. * Cambiamos su color de fondo a ***#faf8f7*** de acuerdo al proporcionado en el diseño. * Establecemos el grosor del borde en ***2px*** y le damos el color de la variable ***–bitcoin-orange***. * Redondeamos ligeramente las esquinas con ***border-radius: 4px***. * En caso que no se aplique la fuente que establecimos al inicio del documento, la traemos y la pegamos en el estilo actual con ***font-family: ‘DM Sans’, sans-serif***. * Ajustamos el tamaño de fuente en ***1.4rem*** y su peso en ***bold***. * Le damos un interlineado de ***1.8rem*** y el color de la variable ***–black***. `.plan-card--ca` { ` width: 150px`; ` height: 48px`; ` margin-top: 20px`; ` background-color: #faf8f7`; ` border: 2px solid var`(--bitcoin-orange); ` border-radius: 4px`; ` font-family: 'DM Sans'`, sans-serif; ` font-size: 1.4rem`; ` font-weight`: bold; ` line-height: 1.8rem`; ` color: var`(--black); } ### Cómo modificar el Ícono * Llamamos la etiqueta span contenedora de nuestro ícono desde la clase del botón con ***.plan-card–ca span***. * Usamos ***display: inline-block*** para que se mantengan en la misma línea que el texto. * Le damos un ancho y alto de ***20px***. * Insertamos el ícono con un \*\*\*background-image: url("")\*\*\*. * Para poder colocar el ícono a la misma altura del texto, usamos ***vertical-align: text-bottom***. `.plan-card--ca span` { ` display`: inline-block; ` width: 20px`; ` height: 20px`; ` background-image: url("./assets/icons/orange-right-arrow.svg"`); ` vertical-align`: text-bottom; } Tendríamos este resultado renderizado en nuestro navegador: ![ejemplo al aplicar estilos a un botón](https://static.platzi.com/media/articlases/Images/image%28227%29.png) ¡Y con este terminamos los estilos de esta tarjeta! Sólo nos queda el slide que se genera de manera horizontal.

bendito vertical-align: text-bottom;
jajaja

![](https://static.platzi.com/media/user_upload/image-db20fc5f-cb8b-46c9-8b6c-c02d6b2d549b.jpg)![](https://static.platzi.com/media/user_upload/image-cf91bebb-bf39-40c3-9ee1-b5322b5bb7ab.jpg)

Mi resultado

Ahí quedó humildemente

listo las tres tarjetas

Ahí vamos!!!😃

DEMO:

HTML:
HTML:

CSS:

PD: Algo minimalista tomando referencia los publicados y los colores definidos.

![](

Tarjetas de planes terminadas 😃

Aquí esta mi aporte de la Sección Planes:

Los cambios de color en las flechas los hice usando la propiedad filter:

background-image: url("./assets/icons/orange-right-arrow.svg");
filter: hue-rotated( /* Aquí van los grados de rotación */);

Así me quedó, el diseño no es mi fuerte, (por el momento)

lo que yo hice fue agrerle los dos slides de a los lados como el diseño de figma 😃 !

tarea.

Por si le quieren agregar el favicon, ponen esto en su head del HTML

<link rel="shortcut icon" href="https://bnz07pap001files.storage.live.com/y4m9Qk2jkFvgyr5Aqrm1LdYCCm7qx-CpeB1FsP9omqi-gccv2kjaabZAeGYLTcPT_vuID334ip4g5miel3zShEN0PHhZyXvYrl4HAp_nmsazf7bECSLGyjodrFbE2roAu37jPZIaNTNcI80zK-qzrhbp_SIRvMUb8byVemMVVvRUIRiOPJNLrxCe5D4xP3z9aMd?width=41&height=24&cropmode=none" type="image/x-icon">

Listo!

<section class="plans-container--slider">
        <article class="plans-container--card">
          <p class="plan--tag">Recomendado</p>
          <div class="plan-info-container">
            <h3 class="plan-card--title">Pago Anual</h3>
            <p class="plan-card--price"><span>$ </span>99</p>
            <p class="plan-card--saving">Ahorras $129 comparado al plan mensual.</p>
            <button class="plan-card--ca">Escoger este <span></span></button>
          </div>
        </article>
        <article class="plans-container--card">
          <p class="plan--tag basico">Basico</p>
          <div class="plan-info-container">
            <h3 class="plan-card--title">Pago Mensual</h3>
            <p class="plan-card--price"><span>$ </span>19</p>
            <p class="plan-card--saving">Plan basico con todas las ventajas pagando solo $19 al mes.</p>
            <button class="plan-card--ca">Escoger este <span></span></button>
          </div>
        </article>
        <article class="plans-container--card limited" >
          <p class="plan--tag ilimitado">Ilimitado</p>
          <div class="plan-info-container">
            <h3 class="plan-card--title limited">De por vida</h3>
            <p class="plan-card--price limited"><span>$ </span>199</p>
            <p class="plan-card--saving">Paga $199 y solo tendras un solo pago con Batatabit.</p>
            <button class="plan-card--ca limited">Escoger este <span></span></button>
          </div>
        </article> 
</section>
.plans-container--card{
  position: relative;
  width: 70%;
  min-height: 230px;
  max-width: 300px;
  height: 250px;
  margin: 50px auto 0;
  padding: 0 15px;
  background-color: var(--just-white);
  border-radius: 15px;
  box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
}
.plan--tag{
  position: absolute;
  width: 120px;
  height: 31px;
  top: -15px;
  left: calc(50% - 60px);
  font-size: 1.2rem;
  font-weight: bold;
  padding: 6px;
  background-color: var(--bitcoin-orange);
  border-radius: 8px;
  color: var(--just-white);
}
.plan-card--title{
  padding-top: 30px;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.8rem;
  color: var(--black);
}
.plan-card--price{
  padding: 5px 0;
  font-size: 5.2rem;
  font-weight: bold;
  line-height: 5.3rem;
  color: var(--black);
}
.plan-card--price span{
  font-size: 1.2rem;
  font-weight: 300;
  vertical-align: 27px;
}
.plan-card--saving{
  font-size: 1.2rem;
  color: #757575;
}
.plan-card--ca{
  width: 150px;
  height: 48px;
  margin-top: 20px;
  background-color: var(--off-white);
  border: 2px solid var(--bitcoin-orange);
  border-radius: 4px;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.8rem;
  color: var(--black);
}
.plan-card--ca span{
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url(./assets/icons/orange-right-arrow.svg);
  vertical-align: text-bottom;
}
.plan--tag.basico{
  background-color: #1A9AF7;
}
.plan--tag.ilimitado{
  background-color: var(--grey);
  color: var(--black);
}
.plans-container--card.limited, .plan-card--ca.limited, .plan-card--title.limited, .plan-card--price.limited{
  background-color: var(--black);
  color: var(--just-white);
}

En esta web pueden cambiar el color de las flechas:

https://colorkit.co/change-svg-color/

Este fue mi resultado

opté por poner el recomendado solo en tarjeta del medio

Reto cumplido

Reto terminado.


HTML

<article class="plans-container--card">
              <p class="basic">Básico</p>
              <div class="plan-info-container">
                <h3 class="plan-card--title monthly">Pago Mensual</h3>
                <p class="plan-card--price"> <span>$</span>19</p>
                <p class="plan-card--saving"> * Para mantenerte informado siempre.</p>
                <button class="plan-card--cal">Escoger este<span></span></button>
              </div>
            </article>
            <article class="plans-container--card">
              <p class="unlimited">Ilimitado</p>
              <div class="plan-info--container">
                <h3 class="plan-card--unlimited">Unlimited</h3>
                <p class="plan-card--price"><span>$</span>129</p>
                <p class="plan-card--saving">* Acceso de por vida. Ahorro infinito.</p>
                <button class="plan-card--call">Escoger este<span></span></button>
              </div>
            </article>

css

.basic {
  position: absolute;
  width: 120px;
  height: 31px;
  padding: 6px;
  top: -15px;
  left: calc(50% - 60px);
  font-size: 1.2rem;
  background-color: var(--secondary-blue);
  border-radius: 8px;
  color: var(--just-white);
}
.plan-card--cal {
  width: 150px;
  height: 48px;
  margin-top: 20px;
  background-color: #faf8f7;
  border: 2px solid var(--secondary-blue);
  border-radius: 4px;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.8rem;
  color: var(--black);
}
.plan-card--cal span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('./assets/icons/orange-right-arrow.svg');
  vertical-align: text-bottom;
}
.unlimited {
  position: absolute;
  width: 120px;
  height: 31px;
  padding: 6px;
  top: -15px;
  left: calc(50% - 60px);
  font-size: 1.2rem;
  background-color: #5F934A;
  border-radius: 8px;
  color: var(--just-white);
}
.plan-card--call {
  width: 150px;
  height: 48px;
  margin-top: 20px;
  background-color: #faf8f7;
  border: 2px solid #5F934A;
  border-radius: 4px;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.8rem;
  color: var(--black);
}
.plan-card--call span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('./assets/icons/orange-right-arrow.svg');
  vertical-align: text-bottom;
}

Aqui esta mi reto

Codigo HTML

            <section class="plans-container--slider">
                <article class="plan-container-card">
                    <p class="recomendado">Recomendado</p>
                    <div class="plan-info-container">
                        <h3 class="plan-card--title">Pago Anual</h3>
                        <p class="plan-card--price"><span>$</span> 99</p>
                        <p class="plan-card--saving">*Ahorras $129 comparado al plan mensual.</p>
                        <button class="plan-card--ca">Escoger este<span></span></button>
                    </div>
                </article>
                <article class="basico-container--card">
                    <p class="basico">Basico</p>
                    <div class="basico-info-container">
                        <h3 class="basico-card--title">Pago Mensual</h3>
                        <p class="basico-card--price"><span>$</span> 19</p>
                        <p class="plan-card--monthly">*Pago mensual, la neta no ahorras nada</p>
                        <button class="basico-card-ca">Escoger este <span></span></button>
                    </div> 
                </article>   
                <article class="porvida-container--card">
                    <p class="premium">Premium</p>
                    <div>
                        <h3 class="porvida-card--title">Pago de por vida</h3>
                        <p class="porvida-card--price"><span>$</span> 199</p>
                        <p class="plan-card--porvida">*Un solo pago, el mas barato y conveniente</p>
                        <button class="porvida-card-ca">Escoger este <span></span></button>
                    </div>
                </article>
            </section>

Este es mi CSS

.plan-container-card{
    position: relative;
    width: 70%;
    min-width: 230px;
    max-width: 300px;
    height: 250px;
    margin: 50px auto 0;
    padding: 0 15px ;
    background-color: var(--just-white);
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(89, 73, 30, 0.16);
}
.recomendado{
    position: absolute;
    width: 120px;
    height: 31px;
    padding: 6px;
    font-size: 1.2rem;
    background-color: var(--bitcoin-orange);
    border-radius: 8px;
    color: var(--just-white);
    left: calc(50% - 60px);
    top: -15px;
}
.plan-card--title{
    padding-top: 30px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: var(--black);
}
.plan-card--price{
    padding: 5px 0;
    font-size: 5.2rem;
    font-weight: bold;
    line-height: 5.3rem;
    color: var(--black);
}
.plan-card--price span{
    position: relative;
    font-size: 1.2rem;
    font-weight: 300;
    vertical-align: 25px;
    left: 10px;
}
.plan-card--saving{
    font-size: 1.2rem;
    color: #757575;
}
.plan-card--ca{
    width: 150px;
    height: 48px;
    margin-top: 20px;
    background-color: #faf8f7;
    border: 2px solid var(--bitcoin-orange);
    border-radius: 4px;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.8rem;
    color: var(--black);
    font-family: 'DM Sans', sans-serif;
}
.plan-card--ca span{
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("./assets/icons/orange-right-arrow.svg");
    vertical-align: text-bottom;
}
.basico-container--card{
    position: relative;
    width: 70%;
    min-width: 230px;
    max-width: 300px;
    height: 250px;
    margin: 50px auto 0;
    padding: 0 15px ;
    background-color: var(--just-white);
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(89, 73, 30, 0.16);
}
.basico{
    position: absolute;
    width: 120px;
    height: 31px;
    padding: 6px;
    font-size: 1.2rem;
    background-color: var(--bitcoin-orange);
    border-radius: 8px;
    color: var(--just-white);
    left: calc(50% - 60px);
    top: -15px;
}
.basico-card--title{
    padding-top: 30px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: var(--black);
}
.basico-card--price{
    padding: 5px 0;
    font-size: 5.2rem;
    font-weight: bold;
    line-height: 5.3rem;
    color: var(--black);
}
.basico-card--price span{
    position: relative;
    font-size: 1.2rem;
    font-weight: 300;
    vertical-align: 25px;
    left: 10px;
}
.plan-card--monthly{
    font-size: 1.2rem;
    color: #757575;
}
.basico-card-ca{
    width: 150px;
    height: 48px;
    margin-top: 20px;
    background-color: #faf8f7;
    border: 2px solid var(--bitcoin-orange);
    border-radius: 4px;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.8rem;
    color: var(--black);
    font-family: 'DM Sans', sans-serif;    
}
.basico-card-ca span{
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("./assets/icons/orange-right-arrow.svg");
    vertical-align: text-bottom;    
}
.porvida-container--card{
    position: relative;
    width: 70%;
    min-width: 230px;
    max-width: 300px;
    height: 250px;
    margin: 50px auto 0;
    padding: 0 15px ;
    background-color: var(--just-white);
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(89, 73, 30, 0.16);
}
.premium{
    position: absolute;
    width: 120px;
    height: 31px;
    padding: 6px;
    font-size: 1.2rem;
    background-color: var(--bitcoin-orange);
    border-radius: 8px;
    color: var(--just-white);
    left: calc(50% - 60px);
    top: -15px;
}
.porvida-card--title{
    padding-top: 30px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: var(--black);    
}
.porvida-card--price{
    padding: 5px 0;
    font-size: 5.2rem;
    font-weight: bold;
    line-height: 5.3rem;
    color: var(--black);    
}
.porvida-card--price span{
    position: relative;
    font-size: 1.2rem;
    font-weight: 300;
    vertical-align: 25px;
    left: 10px;    
}
.plan-card--porvida{
    font-size: 1.2rem;
    color: #757575;
}
.porvida-card-ca{
    width: 150px;
    height: 48px;
    margin-top: 20px;
    background-color: #faf8f7;
    border: 2px solid var(--bitcoin-orange);
    border-radius: 4px;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.8rem;
    color: var(--black);
    font-family: 'DM Sans', sans-serif;     
}
.porvida-card-ca span{
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("./assets/icons/orange-right-arrow.svg");
    vertical-align: text-bottom;       
}

Le cambie pequeñas cosas a las cards

Despues de despejar mi mente y hablar del problema halle la solucion, el cual era darle un margin a la tabla contenedora para que mostrara el recomendado y el sombreado

📌 Aprende un poco más sobre la propiedad box-sizing , propiedad aplicada a todo el documento en el proyecto del presente curso: Video sobre propiedad Box-sizing 📘

¿Quieres obtener el siguiente resultado?

Asi me quedo el reto.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Inter:wght@300;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Batata Bit</title>
</head>
<body>
    <header>
        <img src="./assets/img/logo.svg" alt="">
        <div class="header--title-container">
            <h1>La próxima revolución en el intercambio de criptomonedas.</h1>
            <p>Batatabit te ayuda a navegar entre los diferentes precios y tendencias.</p>
            <a class="header--button" href="#plans">Conoce Nuestros Planes <span></span></a>
        </div>
    </header>
    <main>
        <section class="main-exchange-container">
            <div class="backgroundImg"></div>
            <div class="main-exchange-container--title">
                <h2>Visibilizamos todas las tasas de cambio.</h2>
                <p>Traemos información en tiempo real de las casas de cambio y las monedas más importantes del mundo.</p>
            </div>
            <section class="main-exchange-container__table--container">
                <h3>Monedas</h3>
                <li class="contenedor-item">
                    <p class="item">Bitcoin</p>
                </li>
                <li class="contenedor-item">
                    <p class="item">$ 1.96<span class="down"></span></p>
                </li>
                <li class="contenedor-item">
                    <p class="item">Ethereum</p>
                </li>
                <li class="contenedor-item">
                    <p class="item">$ 0.07<span class="up"></span></p>
                </li>
                <li class="contenedor-item">
                    <p class="item">Ripple</p>
                </li>
                <li class="contenedor-item">
                    <p class="item">$ 2.15<span class="down"></span></p>
                </li>
                <li class="contenedor-item">
                    <p class="item">Stellar</p>
                </li>
                <li class="contenedor-item">
                    <p  class="item">$ 4.96<span class="down"></span></p>
                </li>
                <div class="currency-table--date">
                    <p><span>Actualizado:</span> 9 Octubre 09:45</p>
                </div>
            </section>
            <section class="main-commissions-container__table--container">
                <h3>Comisiones</h3>
                <li class="contenedor-item">
                    <p class="item">Bitrade</p>
                </li>
                <li class="contenedor-item">
                    <p class="item">$ 12.96</p>
                </li>
                <li class="contenedor-item">
                    <p class="item">Bitpreco</p>
                </li>
                <li class="contenedor-item">
                    <p class="item">$ 13.07</p>
                </li>
                <li class="contenedor-item">
                    <p class="item">Novadax</p>
                </li>
                <li class="contenedor-item">
                    <p class="item">$ 13.15</p>
                </li>
                <li class="contenedor-item">
                    <p class="item">Coinext</p>
                </li>
                <li class="contenedor-item">
                    <p  class="item">$ 14.96</p>
                </li>
                <div class="commissions-table--date">
                    <p><span>Actualizado:</span> 9 Octubre 09:45</p>
                </div>
            </section>
        </section>
        <section class="main-product-detail">
            <span class="product-detail--batata-logo"></span>
            <div class="product-detail--title">
                <h2>Creamos un producto sin comparación.</h2>
                <p>Confiable y diseñado para su uso diario.</p>
            </div>
            <section class="product-cards-container">
                <article class="product-detail--card">
                    <span class="icon clock"></span>
                    <p class="product--card-title">Tiempo real</p>
                    <p class="product--card-body">Nuestro API toma información minuto a minuto sobre las tasas que más determinan el comportamiento.</p>
                </article>
                <article class="product-detail--card">
                    <span class="icon eye"></span>
                    <p class="product--card-title">No hay tasas escondidas</p>
                    <p class="product--card-body">Ni en la compra o al momento de exit, Batabit siempre te muestra el costo real de lo que estás adquiriendo.</p>
                </article>
                <article class="product-detail--card">
                    <span class="icon dollar-sign"></span>
                    <p class="product--card-title">Compara monedas</p>
                    <p class="product--card-body">No más rumores, con Babtabit sabrás el valor real de cada moneda en el mercado actual.</p>
                </article>
                <article class="product-detail--card">
                    <span class="icon check-circle"></span>
                    <p class="product--card-title">Información confiable</p>
                    <p class="product--card-body">Nuestras fuentes están 100% verificadas y continuamos auditando su contenido mientras se actualizan.</p>
                </article>
            </section>
        </section>
        <section class="bitcoin-img-container">
            <h2>Conócelo hoy.</h2>
        </section>
        <section id="plans" class="main-plans-container">
            <div class="plans--title">
                <h2>Escoge el plan que mejor se ajuste a ti.</h2>
                <P>Cualquier plan te da acceso completo a nuestra plataforma.</P>
            </div>
            <section class="plans-container--slider">
                <article class="plans-container--card">
                    <p class="monthly-banner banner">Mensual</p>
                    <div class="plan-info-container">
                        <h3 class="plan-card--title monthly">Pago Mensual</h3>
                        <p class="plan-card--price"><span>$</span> 19</p>
                        <p class="plan-card--saving">Plan básico para mantenerte informado.</p>
                        <button class="plan-card--ca">Escoger este <span></span></button>
                    </div>
                </article>
                <article class="plans-container--card">
                    <p class="recommended-banner banner">Recomendado</p>
                    <div class="plan-info-container">
                        <h3 class="plan-card--title anual">Pago Anual</h3>
                        <p class="plan-card--price"><span>$</span> 99</p>
                        <p class="plan-card--saving">*Ahorras $129 comparado al plan mensual.</p>
                        <button class="plan-card--ca">Escoger este <span></span></button>
                    </div>
                </article>
                <article class="plans-container--card">
                    <p class="lifetime-banner banner">Lifetime</p>
                    <div class="plan-info-container">
                        <h3 class="plan-card--title lifetime">Lifetime</h3>
                        <p class="plan-card--price"><span>$</span> 129</p>
                        <p class="plan-card--saving">Acceso de por vida. Ahorro infinito</p>
                        <button class="plan-card--ca">Escoger este <span></span></button>
                    </div>
                </article>
            </section>
        </section>
    </main>
    <footer></footer>
</body>
</html>

CSS

:root {
    /*Colores*/
    --bitcoin-orange: #F7931A;
    --soft-orange: #FFE9D5;
    --secondary-blue: #1A9AF7;
    --soft-blue: #E7F5FF;
    --warm-black: #282623;
    --black: #201E1C;
    --grey: #BABABA;
    --off-white: #FAF8F7;
    --just-white: #FFFFFF;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;
    font-family: 'DM Sans', sans-serif;
}
header {
    background: linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-width: 320px;
    height: 295px;
    text-align: center;
}
header img {
    width: 151px;
    height: 24px;
    margin-top: 38px;
    align-self: center;
}
.header--title-container {
    width: 90%;
    min-width: 288px;
    max-width: 900px;
    height: 218px;
    margin-top: 32px;
    text-align: center;
    align-self: center;
}
.header--title-container h1 {
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--just-white);
}
.header--title-container p {
    margin-top: 2.4rem;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: var(--soft-orange);
}
.header--title-container .header--button {
    position: absolute;
    left: calc(50% - 117px);
    top: 231px;
    display: block;
    margin-top: 32px;
    padding: 15px;
    width: 229px;
    height: 48px;
    background-color: var(--off-white);
    /* Sombra*/
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
    border: none;
    border-radius: 4px;
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
    color: var(--black);
}
.header--button span {
    display: inline-block;
    width: 12px;
    height: 7.41px;
    margin-left: 10px;
    background-image: url('./assets/icons/down-arrow.svg');
}
main {
    width: 100%;
    height: auto;
    background-color: var(--off-white);
}
.main-exchange-container {
    width: 100%;
    height: auto;
    padding-top: 59px;
    padding-bottom: 69px;
    text-align: center;
}
.main-exchange-container--title {
    width: 90%;
    min-width: 288px;
    max-width: 900px;
    margin: 0 auto;
}
.main-exchange-container .backgroundImg {
    width: 195px;
    height: 195px;
    margin: 0 auto;
    margin-bottom: 40px;
    background-image: url('./assets/img/Bitcoin.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.main-exchange-container h2 {
    margin-bottom: 24px;
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--black);
}
.main-exchange-container p {
    margin-bottom: 38px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.6rem;
    color: #757575;
}

.main-exchange-container__table--container, .main-commissions-container__table--container {
    display: grid;
    grid-template-columns: 101px 95px;
    grid-auto-rows: 39px;
    place-content: center;
    text-align: left;
    list-style: none;
    gap: 2px;
    font-family: "Inter", sans-serif;
}
.main-commissions-container__table--container {
    margin-top: 30px;
    display: none;
}
.contenedor-item {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 35px;
    grid-template-areas:
      ". a a a a a a"
      ". a a a a a a";
      box-shadow: 0px 8px 8px rgba(89, 73, 30, 0.16); 
}
.item {
    grid-area: a;
    align-self: center;
}
.main-exchange-container__table--container h3 {
    width: 100%;
    font-family: 'DM Sans', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 23px;
    color: var(--bitcoin-orange);
    grid-column: 1 / -1;
    margin-bottom: 15px;
}
.main-commissions-container__table--container h3 {
    width: 100%;
    font-family: 'DM Sans', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 23px;
    color: #1A9AF7;
    grid-column: 1 / -1;
    margin-bottom: 15px;
}

.main-exchange-container__table--container li:nth-child(2n), .main-commissions-container__table--container li:nth-child(2n) {
    font-size: 1.6rem;
    font-weight: 500;
    color: #B5B0AC;
    background-color: var(--just-white);
}
.main-exchange-container__table--container li:nth-child(2n+1), .main-commissions-container__table--container li:nth-child(2n+1) {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.6rem;
    color: #757575;
    background-color: var(--just-white);
}
.main-exchange-container__table--container li:nth-child(2), .main-commissions-container__table--container li:nth-child(2) {
    border-radius: 8px 0 0 0;
}
.main-exchange-container__table--container li:nth-last-child(-n+3), .main-commissions-container__table--container li:nth-last-child(-n+3) {
    border-radius: 0 0 0 8px;
}
.main-exchange-container__table--container li:nth-child(3), .main-commissions-container__table--container li:nth-child(3) {
    border-radius: 0 8px 0 0;
}
.main-exchange-container__table--container li:nth-last-child(-n+2), .main-commissions-container__table--container li:nth-last-child(-n+2) {
    border-radius: 0 0 8px 0;
}
.main-exchange-container__table--container .down {
    display: inline-block;
    background-image: url('./assets/icons/trending-down.svg');
    background-position: center;
	background-repeat: no-repeat;
    background-size: cover;
    width: 12px;
    height: 12px;
    margin-left: 10px;
}
.main-exchange-container__table--container .up {
    display: inline-block;
    background-image: url('./assets/icons/trending-up.svg');
    background-position: center;
	background-repeat: no-repeat;
    background-size: cover;
    width: 12px;
    height: 12px;
    margin-left: 10px;
}
.main-exchange-container .main-exchange-container__table--container .currency-table--date {
    margin: 0 auto;
    margin-top: 16px;
    grid-column: 1 / -1;
    width: 177px;
    height: 31px;
    padding: 6px 1px;
    text-align: center;
    justify-self: center;
    background-color: var(--soft-orange);
    border-radius: 8px;
}
.main-exchange-container .main-commissions-container__table--container .commissions-table--date {
    margin: 0 auto;
    margin-top: 16px;
    grid-column: 1 / -1;
    width: 171px;
    height: 31px;
    padding: 6px 1px;
    text-align: center;
    justify-self: center;
    background-color: #E7F5FF;
    border-radius: 8px;
}
.currency-table--date p, .commissions-table--date p {
	font-size: 1.1rem;
    font-weight: 300;
    color: var(--warm-black);
}
.currency-table--date span {
    font-weight: bold;
}

.main-product-detail {
    position: relative;
    width: 100%;
    min-width: 320px;
    height: 893px;
    padding: 16px;
    background-color: var(--black);
}
.product-detail--batata-logo {
    position: absolute;
    width: 40.57px;
    height: 24px;
    top: -12px;
    left: calc(50% - 20.28px);;
    background-image: url('./assets/icons/batata.svg');
}
.product-detail--title {
    width: 90%;
    min-width: 288px;
    height: auto;
    margin-top: 50px;
    text-align: center;
}
.product-detail--title h2 {
    margin-bottom: 24px;
    font-size: 2.4rem;
    color: var(--just-white);
    font-weight: bold;
    line-height: 2.6rem;
}
.product-detail--title p {
    margin-bottom: 32px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: #808080;
}
.product-detail--card {
    width: 100%;
    min-width: 288px;
    max-width: 400px;
    height: 152px;
    margin: 16px auto;
    padding: 16px;
    background-color: var(--warm-black);
    border-radius: 4px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16);
}
.product-detail--card .icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-bottom: 10px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.product-detail--card .clock {
    background-image: url('./assets/icons/clock.svg');
}
.product-detail--card .eye {
    background-image: url('./assets/icons/eye.svg');
}
.product-detail--card .dollar-sign {
    background-image: url('./assets/icons/dollar-sign.svg');
}
.product-detail--card .check-circle {
    background-image: url('./assets/icons/check-circle.svg');
}
.product--card-title {
    margin-bottom: 10px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.8rem;
    color: var(--just-white);
}
.product--card-body {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: #808080;
}
.bitcoin-img-container {
    width: 100%;
    min-width: 320px;
    height: 68.13vh;
    background-image: url('./assets/img/bitcoinbaby2x.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.bitcoin-img-container h2 {
    padding-top: 64px;
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--just-white);
    text-align: center;
}
.main-plans-container {
    width: 100%;
    min-width: 320px;
    padding-bottom: 64px;
    text-align: center;
}
.plans--title {
    width: 90%;
    min-width: 288px;
    height: auto;
    margin: 0 auto;
    margin-bottom: 34px;
}
.plans--title h2 {
    padding-top: 64px;
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--black);
}
.plans--title p {
    padding-top: 24px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: #757575;
}

.plans-container--card {
    position: relative;
    width: 59%;
    min-width: 190px;
    max-width: 300px;
    height: 247px;
    margin: 50px auto 0;
    padding: 0 15px;
    background-color: var(--just-white);
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
}
.banner {
    position: absolute;
    width: 101px;
    height: 31px;
    top: -15.5px;
    left: calc(50% - 50.5px);
    font-size: 1.2rem;
    font-weight: bold;
    padding: 8px;
    border-radius: 8px;
    color: var(--just-white);
}
.monthly-banner {
    background-color: var(--secondary-blue);
}
.recommended-banner {
    background-color: var(--bitcoin-orange);
}
.lifetime-banner {
    background-color: var(--warm-black);
}
.plan-card--title {
    padding-top: 31px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: #000000;
}
.plan-card--price {
    padding: 8px 0;
    font-size: 5.2rem;
    font-weight: bold;
    line-height: 6.3rem;
    color: #000000;
}
.plan-card--price span {
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 4rem;
    padding: 0.05rem;
    color: #363636;
    vertical-align: text-top;
}
.plan-card--saving {
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.5rem;
    padding: 2px;
    color: #757575;
}
.plan-card--ca {
    width: 150px;
    height: 48px;
    margin-top: 16px;
    background-color: var(--off-white);
    border: 2px solid var(--bitcoin-orange);
    border-radius: 4px;
    font-family: 'DM Sans', sans-serif;;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.8rem;
    color: var(--black);
}
.monthly-banner + div > .plan-card--ca {
    border: 2px solid var(--secondary-blue);
}
.lifetime-banner + div > .plan-card--ca {
    border: 2px solid var(--warm-black);
}
.monthly-banner + div > .plan-card--ca span{
    background-image: url('./assets/icons/blue-right-arrow.svg');
}
.lifetime-banner + div > .plan-card--ca span{
    background-image: url('./assets/icons/black-right-arrow.svg');
}
.plan-card--ca span {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url('./assets/icons/orange-right-arrow.svg');
    vertical-align: text-top;
}


Reto completado

Este es mi aporte, basado en algunos ejemplos mostrados por mis compañeros

aporte de card plans:


logrado

Hasta ahora, nunca un curso me había hecho tanta ilusión como este. aprendí muchísimo

Así quedaron todas las tarjetas:

HTML :

<section class="main-product-detail">
            <span class="product-detail--batata-logo"></span>
            <div class="product-detail--title">
                <h2>Creamos un producto sin comparación</h2>
                <p>Confiable y diseñado para su uso diario</p>
            </div>
            <section class="product-cards--container">
                <article class="product-detail--card product-detail--card__real-time">
                    <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>
                <article class="product-detail--card producto-detail--card__hide">
                    <span class="eye"></span>
                    <p class="product--card-title">No hay tasas escondidas</p>
                    <p class="product--card-body">Ni en la compra o al momento de exit, Batabit siempre te muestra el costo real de lo que estás adquiriendo</p>
                </article>
                <article class="product-detail--card">
                    <span class="cash"></span>
                    <p class="product--card-title">Compara monedas</p>
                    <p class="product--card-body">
                        No más rumores, con Batabit sabrás el valor real de cada moneda en el mercado actual
                    </p>
                </article>
                <article class="product-detail--card">
                    <span class="check"></span>
                    <p class="product--card-title">información confiable</p>
                    <p class="product--card-body">Nuestras fuentes están 100% verificadas y continuamos auditando su contenido mientras se actualizan</p>
                </article>
            </section>
        </section>
        <section class="bitcoin-img-container">
            <h2>Conócelo hoy.</h2>
        </section>
        <section id="plans" class="main-plans-container">
            <div class="plans--title">
                <h2>Escoge el plan que mejor se ajuste a ti.</h2>
                <p>Cualquier plan te da acceso completo a muestra plataforma.</p>
            </div>
            <section class="plans-container--slider">
                <article class="plans-container--card">
                    <p class="recomendado">Recomendado</p>
                    <div class="plan-info-container">
                        <h3 class="plan-card--title">Pago Anual</h3>
                        <p class="plan-card--price"><span>$</span>99</p>
                        <p class="plan-card--saving">*Ahorras $129 comparado al plan mensual</p>
                        <button class="plan-card--ca">Escoger este <span></span></button>
                    </div>
                </article>
                <article class="plans-container--card">
                    <div class="plan-info-container">
                        <h3 class="plan-card--title">Pago semestral</h3>
                        <p class="plan-card--price"><span>$</span>89</p>
                        <p class="plan-card--saving">*Ahorras $50 anualmente comparado al plan mensual</p>
                        <button class="plan-card--ca">Escoger este <span></span></button>
                    </div>
                </article>
                <article class="plans-container--card">
                    <p class="basic">Básico</p>
                    <div class="plan-info-container">
                        <h3 class="plan-card--info">Pago mensual</h3>
                        <p class="plan-card--price"><span>$</span>19</p>
                        <p class="plan-card--saving">*Paquete básico con acceso a toda la plataforma</p>
                        <button class="plan-card--ca">Escoger este <span></span></button>
                    </div>
                </article>
            </section>

Les comparto mis tarjetas

A mi me funciono para alinear la flecha con el texto dentro del button con tan solo utilizar cover y no-repeat

challenge complete

Así quedaron los míos.

Realice un cambio ligero que es en los bordes de las tarjetas como para resaltar el cambio de planes, aunque tuve un intento fallido en cambiar las flechas de color

Logre hacerlo solo, pero cuando quiero cambiar de dispositivo la pagina se me mueve todo. Hoy no lo termine de hacer, pero mañaan lo voy a seguir intentando. Creo que abuse del position: absolut

Me gustó mucho el resultado
Completo!!



le agregué unos estilos deferentes para cada paquete y con la misma linea grafica. 😉

Reto cumplido!

Reto logrado!!! 💪💚🚀 Ahí están mis otras dos tarjetas con algunos cambios. Adjunto el código.

HTML

<section id="plans" class="main-plans-container">
        <div class="plans--title">
          <h2>Escoge el plan que mejor se ajuste a ti.</h2>
          <p>Cualquier plan te da acceso completo a nuestra plataforma.</p>
        </div>
        <section class="plans-container--slider">
          <article class="plans-container--card">
            <p class="recommended">Recomendado</p>
            <div class="plan-info-container">
              <h3 class="plan-card--title">Pago Anual</h3>
              <p class="plan-card--price"><span>$</span> 99</p>
              <p class="plan-card--saving">
                *Ahorras $129 comparado al plan mensual.
              </p>
              <button class="plan-card--ca">
                Escoger este <span class="gold-button-icon"></span>
              </button>
            </div>
          </article>
          <article class="plans-container--card">
            <p class="recommended bronze">Bronze</p>
            <div class="plan-info-container">
              <h3 class="plan-card--title">Pago Mensual</h3>
              <p class="plan-card--price"><span>$</span> 12</p>
              <p class="plan-card--saving">
                Acceso ilimitado a la información.
              </p>
              <button class="plan-card--ca bronze-border">
                Escoger este <span class="bronze-button-icon"></span>
              </button>
            </div>
          </article>
          <article class="plans-container--card">
            <p class="recommended silver">Silver</p>
            <div class="plan-info-container">
              <h3 class="plan-card--title">Pago Semestral</h3>
              <p class="plan-card--price"><span>$</span> 60</p>
              <p class="plan-card--saving">
                Acceso ilimitado a la información. *Incluye asesoría.
              </p>
              <button class="plan-card--ca silver-border">
                Escoger este <span class="silver-button-icon"></span>
              </button>
            </div>
          </article>
        </section>
      </section>

CSS

.main-plans-container {
  width: 100%;
  min-width: 320px;
  padding-bottom: 70px;
  text-align: center;
}
.plans--title {
  width: 90%;
  min-width: 288px;
  height: auto;
  margin: 0 auto;
  margin-bottom: 50px;
}
.plans--title h2 {
  padding-top: 50px;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 2.6rem;
  color: var(--black);
}
.plans--title p {
  padding-top: 30px;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.8rem;
  color: #757575;
}
.plans-container--card {
  position: relative;
  width: 70%;
  min-width: 230px;
  max-width: 300px;
  height: 250px;
  margin: 50px auto 0;
  padding: 0 15px;
  background-color: var(--just-white);
  border-radius: 15px;
  box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
}
.recommended {
  position: absolute;
  width: 120px;
  height: 31px;
  padding: 8px;
  top: -15px;
  left: calc(50% - 60px);
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.5rem;
  background-color: var(--bitcoin-orange);
  border-radius: 8px;
  color: var(--just-white);
}
.bronze {
  background-color: #bc771f;
}
.silver {
  background-color: silver;
  color: var(--black);
}
.plan-card--title {
  padding-top: 30px;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.8rem;
  color: black;
}
.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;
}
.plan-card--saving {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.5rem;
  color: #757575;
}
.plan-card--ca {
  width: 150px;
  height: 48px;
  margin-top: 20px;
  background-color: #faf8f7;
  border: 2px solid var(--bitcoin-orange);
  border-radius: 4px;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.8rem;
  color: var(--warm-black);
}
.bronze-border {
  border: 2px solid #bc771f;
}
.silver-border {
  border: 2px solid silver;
}
.plan-card--ca span {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: text-bottom;
}
.gold-button-icon {
  background-image: url('./assets/icons/orange-right-arrow.svg');
}
.bronze-button-icon {
  background-image: url('./assets/icons/bronze-right-arrow.svg');
}
.silver-button-icon {
  background-image: url('./assets/icons/silver-right-arrow.svg');
}

Adjunto reto de las dos tarjetas restantes. Modificando poco pero entendiendo cómo funciona cada elemento.