50 Day - Buy Subscription Section

Este proyecto hermoso pondrá a prueba tus habilidades en HTML y CSS. Si te parece sencillo, puedes agregar diseño responsive y contenido interactivo con JavaScript.

Frontend Club

Feb 26, 2024

100daysofprojects

TABLE OF CONTENTS

Buy Subscription Section

Bienvenido

Requerimientos

Diseño

Envía tu solución

Recursos

Medidas

Colores

Plantilla

Buy Subscription Section

Bienvenido

Gracias por aceptar codificar este proyecto como parte del reto #100DaysOfProjects.

En líneas generales, el objetivo del 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 original de UI Design Daily.

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

Requerimientos

Tu misión será desarrollar esta sección de suscripciones y lograr que se parezca lo más posible al diseño.

Los usuarios deberían poder:

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

Ver estados hover para los elementos interactivos en la página.

¿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.

Medidas

El diseño debería verse bien en pantallas con estas medidas.


### Widths
- Mobile: 375px
- Desktop: 1200px

Colores


### Paleta de colores
- #171435 - text body color
- #F0F0F6 - body background color
- #F4F5FA - card background color
- #FFFFFF - item card background color
- #FFFBEC - first item card box shadow color
- #F9ECFF - second item card box shadow color
- #ECEEFF - third item card box shadow color
- #F4F5FA - button background color

### Tipografia
- Fuente: [Merriweather](https://fonts.google.com/specimen/Merriweather)
- Peso: (heading)900
- Heading: 32px

- Fuente: [Poppins](https://fonts.google.com/specimen/Poppins)
- Peso: (text)500, (title item card)600, (number item card)700
- Paragraph: 18px
- Title Item Card: 24px

Plantilla

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

Contenido de texto del diseño.


Get the most out of your mobile with the right subscription

All devices come with free delivery or pickup as standard. See information on available shopping options for your location.

Ice
Ice Mobile 10GB
Up to 100Mbit/s
299,-/month
Add subscription

Telia
Telia Mobil 15GB
Unlimited calls, SMS and MMS
953,-/month
Add subscription

Telenor
Telenor Next Fast
Up to 100Mbit/s
1028,-/month
Add subscription

See all subscriptions