56 Day - Pricing Card

Este diseño hermoso de una tarjeta de selección de productos, te permitirá mejorar tus habilidades de diseño. Utiliza las herramientas que más domines para completar este reto.

Frontend Club

Mar 3, 2024

100daysofprojects

TABLE OF CONTENTS

Pricing Card

Bienvenido

Requerimientos

Diseño

Envía tu solución

Recursos

Colores

Plantilla

Pricing Card

Bienvenido

En líneas generales, el objetivo de este reto es transformar el diseño en código, y hacer que se parezca lo más posible al diseño.

El diseño de este reto es propiedad de UI Design Daily.

Para realizar este desafío, necesitas conocimientos básicos de HTML y CSS.

Requerimientos

Los usuarios deberían poder:

Ver el diseño óptimo según el tamaño de pantalla del dispositivo.

Ver un borde de color azul al seleccionar el producto.

¿Quieres apoyo en el desafío? Únete a nuestro canal de Telegram.

Diseño

Pantallas grandes:

Envía tu solución

Envía tu solución a nuestro grupo de Facebook para que lo vea el resto de la comunidad con el siguiente texto:


Hola Frontend Club👋,

Acabo de completar el reto # como parte del desafío #100DaysOfProjects.

Mi solución:
Página web - https://profile-card.netlify.app/
Repositorio - https://github.com/01-day-profile-card.git

Recursos

Proporcionamos los recursos necesarios para completar el proyecto.

Colores


### Paleta de colores
- Body background - #E9EBF8
- Card background - #ffffff
- Text body - #0C1033
- Button background, border card selection, text decoration - #2F42EE
- Card and button border color - #E9EBF8

### Tipografia
- Fuente: [Poppins](https://fonts.google.com/specimen/Poppins)
- Peso: 500, 600


### Config
- Title - 32px
- Title card - 24px
- Paragraph - 18px
- Card border radius - 32px
- Card selection border radius - 8px

Plantilla

Puedes utilizar la plantilla base del proyecto para empezar a codificar.

Contenido de texto del diseño.


Try FREE for 4 weeks

We uncover the facts around the clock, all over the globe.

Monthly
4 weeks for free
Then $3 every month for the first year

Best value
Yearly
4 weeks for free
Then $30 for the first year

Continue
Continue with

View more offers