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鈥揷a.
  • 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 鈥揵itcoin-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: 鈥楧M 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 鈥揵lack.
.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鈥揷a 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 203

Preguntas 18

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

El profe al verte copiar y pegar el HTML para las tarjetas

As铆 a quedado mi secci贸n de planes:

Muy buena clase, as铆 quedo el m铆o

Comparto mi ejercicio

锟糆mocionado de pasar a la clase siguiente 馃槃.

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

馃Am茅 los colores jaja

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

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.

Simplemente replicando el article dos veces y borrando el recommended no me surgi贸 ning煤n problema

En .plan-card鈥揷a 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 鈥渞ecomendado鈥 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 馃槃

![](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.

No hice muchas variaciones para tener un c贸digo m谩s limpio

My cards

.plan-card--ca span