Cursos Empresas Blog Live Conf Eventos Precios

0:0010:18

Recursos

Resumen

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.

Estilos CSS para Tarjetas y Botones en HTML

Curso de Responsive Design: Maquetación Mobile First

Clase 25 de 32

Clase 25 / 32

Comentarios (188)188 comentarios

Horacio Andres Flores Alberto

Hace 6 años

Para poner en arriba el $ agregar lo siguiente

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

Juan Carlos Verdugo Salazar

Christian Velázquez

Gracias por el dato.

Julieta Gallego

Victor Andres Castillo Zambrano

buenisimo

Luis Alejandro Nieto Ruth

Muy bien

Anderson Josué Oroya Silva

Jeyson David Vargas Crespo

Hola, que bien, pero porque tomas 40px de donde puede uno sacar ese dato???

Hola, entiendo lo que me comentás. Te hice una pequeña explicación que creo que te servirá :)

Sneyder Barreto

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

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

Santiago Yepes

Piero Angulo Cubas

Sí, es una forma sin embargo hay que tener cuidado al aplicar esto , ya que solo funciona cuando el texto ocupa solo una linea , sino , puede verse muy mal.

Duarte Rosa

Hace 5 años

Este fue el código que utilice para posicionar la etiqueta de span :)

Orangel Brito

Hace 4 años

Gracias!!

Melquin Umanzor

¡Muchas gracias! Me sirvió el recordatorio de la propiedad relative.

Para la altura, tome como base el tamaño de la fuente del numero y lo dividí entre 2. Así que en el top lo hice retroceder esa medida -2.6rem y por último le di un ligero margin-right para separar el signo del número.

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

Yosef Enmanuel Blandin Rios

Rubén Darío Rodríguez Mora

Yo lo que hice fué usar la etiqueta de HTML5 <sup></sup> Así

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

Me quedó así

JuanPa Restrepo Muñoz

Yo tambien utilize sup, pero sin la etiqueta span, me dio el mismo resultado creo que con sup es la forma mas facil de hacer esa parte de la card. 👌

Javier Estuardo Borja González

Así lo hice con Flex

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

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

Israel Gutierrez

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

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

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

Diana Florez

sip me paso ... yo le puse .plans--title > p { ... }

Mauricio Moo Aguilar

Gracias por el apoyo!

Diego Hanssel Perez

Este es el codigo que ultice para posicioner el boton de Recomendado:

display: inline-block;
position: relative;
bottom: 17px;

Juan Diego Sastre Moreno

Hola Diego, muchas gracias por tu aporte, me sirvió mucho.

Axel Yaguana

Team Platzi

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

Este es el código:

se ve genial

HECTOR CAMILO RAMIREZ PEREIRA

Se ve muy bien. Como dato adicional, viendo el diseño en Figma, la fuente de los números es 'Inter' y el font-weight es de 700. Así se mostrará el precio de forma más similar al diseño.

Obed Paz

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

.plans-container__card>p {
    display: inline-block;
    position: relative;
    bottom: 7.5px;
}

Y agregarle los demas estilos que son los mismos, backround, padding, etc.

Juan José Rodríguez Portillo

Por alguna razón no me funiciona el left: calc(50% -6rem);

solo funciona cuando lo dejo asi: left: calc(25%), tengo que dejarlo en 25% para que pueda quedar centrado, ya cuando empiezo a poner el -6rem no me funciona.

Carlos Eduardo Gomez García

¡Hola! Es porque debes dejar un espacio entre el signo - y el 6, no puedes escribirlo todo junto, CSS es muy estricto con esos espacios, debería ser así:

left: calc(50% - 6rem);

Gracias, increíble como algo tan pequeño te puede hacer las cosas muy difíciles, pero ya esta todo solucionado.

Diego Alejandro Presiga

Compañeros yo utilicé el cal() y un absolute para poner el signo $ arriba del número:

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

Juan Sebastian Monje Camacho

yo usé la misma tecnica pero** como referencia los tamaños de fuente del $**, y salió super sencillo

Lex Urrea

Asi lo realice yo :)

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