51 Day - Pricing Component With Toggle

Este desafío lo hará pensar en crear un control de alternancia (toggle) personalizado accesible y también probará sus habilidades de diseño.

Frontend Club

Feb 27, 2024

100daysofprojects

TABLE OF CONTENTS

Pricing Component With Toggle

Bienvenido

Requerimientos

Diseño

Envía tu solución

Recursos

Colores

Plantilla

Pricing Component With Toggle

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 Frontend Mentor.

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

Requerimientos

Los usuarios deberían poder:

Controlar el botón `toggle` tanto con el mouse/trackpad como con el teclado.

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

Ver un estado hover al pasar el mouse sobre la lista en la página.

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

Diseño

Pantallas grandes:

Pantallas pequeñas:

Elementos interactivos (hover):

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
- Linear Gradient: hsl(236, 72%, 79%) to hsl(237, 63%, 64%)
- Very Light Grayish Blue: hsl(240, 78%, 98%)
- Light Grayish Blue: hsl(234, 14%, 74%)
- Grayish Blue: hsl(233, 13%, 49%)
- Dark Grayish Blue: hsl(232, 13%, 33%)

### Tipografia
- Family: [Montserrat](https://fonts.google.com/specimen/Montserrat)
- Weight: 700
- Font size: 15px

Plantilla

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

Contenido de texto del diseño.


Our Pricing 

Annually Monthly 

Basic 
$19.99 $199.99 
500 GB Storage 
2 Users Allowed 
Send up to 3 GB 
Learn More 

Professional 
$24.99 $249.99 
1 TB Storage 
5 Users Allowed 
Send up to 10 GB 
Learn More 

Master 
$39.99 $399.99 
2 TB Storage 
10 Users Allowed 
Send up to 20 GB 
Learn More