Estilos CSS para Tarjetas y Botones en HTML

El siguiente paso para finalizar tu sección de planes es agregar estilos en las tarjetas. Vamos a nuestra hoja de estilos.

Agregando estilos en las tarjetas de planes

Ten en cuenta los siguientes elementos:

Botón flotante

• Llamamos la clase del párrafo con .recommended.
• Establecemos su posición en absolute para moverlo dentro del contenedor.
• Ajustamos su ancho en 120px y su alto en 31px.
• Lo movemos hacia arriba hasta sacarlo del contenedor con top: -15px.
• Centramos la caja con left: calc(50% - 60px).
• Ajustamos el tamaño de fuente en 1.2rem.
• Le damos un espaciado interno en todos los lados de padding: 6px.
• Ajustamos el color de fondo con la variable --bitcoin-orange y el color del texto con --just-white.
• Redondeamos las esquinas de la caja con border-radius: 8px.

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

Título

• Llamamos la clase de la etiqueta h3 con .plan-card--title.
• Le damos un espaciado superior con padding: 30px.
• Ajustamos el tamaño de fuente en 1.4rem y su peso en 500.
• Le damos un interlineado de 1.8rem.
• Ajustamos el color del texto con la variable --black.

.plan-card--title {
    padding-top: 30px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: var(--black);
}

Precio

• Llamamos la clase de la etiqueta p con .plan-card--price.
• Le damos un espaciado superior e inferior de 30px y 0 a los lados.
• Ajustamos el tamaño de fuente en 5.2rem y su peso en bold.
• Le damos un interlineado de 5.3rem.
• Ajustamos el color del texto con la variable --black.

Para el signo de dólar:

• Llamamos la etiqueta sup desde su clase contenedora con .plan-card--price sup.
• Ajustamos el tamaño de fuente en 1.2rem y su peso en 300.
• Ubicamos el signo hasta arriba con vertical-align: 25px.

.plan-card--price {
    padding: 5px 0;
    font-size: 5.2rem;
    font-weight: bold;
    line-height: 5.3rem;
    color: var(--black);
}
.plan-card--price sup {
    font-size: 1.2rem;
    font-weight: 300;
    vertical-align: 25px;
}

Descripción

Llamamos la etiqueta de párrafo con su clase .plan-card--saving. Le damos un tamaño de fuente de 1.2rem y cambiamos su color a #757575.

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

Hasta ahora, este sería nuestro resultado en pantalla:

¿Te diste cuenta que el color #757575 lo hemos usado varias veces a lo largo del proyecto, pero aún no está en una variable? ¡Buena observación! De eso se trata el ser un desarrollador. Aplica lo aprendido y mejora cada parte. Aunque el equipo de diseño no lo ha agregado, nosotros podemos hacerlo.

Contribución creada por: José Miguel Veintimilla (Platzi Contributor) con aportes de Juan Carlos Verdugo Salazar.