PROY70: Dark Pricing Cards

Este desafío nos ayudará a mejorar nuestras habilidades en HTML y CSS. Es una oportunidad para ir construyendo nuestro portafolio de proyectos.

Frontend Club

Mar 17, 2024

100daysofprojects

TABLE OF CONTENTS

Pricing Cards

Ideas

Recursos

Agradecimientos

Pricing Cards

Bienvenido👋,

Nuestra misión será crear un componente de tarjeta de precios, usando HTML y CSS, 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 el borde resaltado (hover) al pasar el mouse sobre la tarjeta.

¿Quieres apoyo con el desafío?

Únete al grupo de Facebook y haz tus preguntas.

Tutor disponible en el chat del blog.

Ideas

Aquí hay algunas ideas que puedes emplear para iniciar con el desafío.⚡

Analiza: Analiza el diseño para saber cómo abordarás el proyecto. Este paso es crucial para ayudarte a pensar en el marcado HTML y las clases CSS.

Marcado HTML: Comience por el marcado HTML. Utilice las etiquetas que sean coherentes con el contenido.

Estilos CSS: De arriba hacia abajo, comience escribiendo los estilos base del proyecto, estilos generales, estilos reutilizables, etc.

Despliega: Deja que el mundo sepa lo que has construido. Puedes utilizar un hosting gratuito como Netlify, Vercel, GitHub Pages.

Documenta: Agrega un archivo README.md donde describas la solución del proyecto.

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

Crea contenido: Comparte tu experiencia escribiendo un artículo en LinkedIn, estaremos encantados de leer y apoyarte.

Recursos

Brindamos los recursos necesarios para completar el desafío.🚀

📓Plantillas

Plantilla: descargar proyecto

Plantilla en línea: duplicar proyecto

🗃️Recursos del proyecto


🎨Paleta
--body-background: #19223E
--card1-border: #7A3AF4
--card2-border: #212C4D
--button-background: #7A3AF4
--button-border: #7A3AF4
--text: #FFFFFF

⚙️Config.
--border-radius card: 20px
--border-radius button: 10px

✍️Tipografía
[Merriweather](https://fonts.google.com/specimen/Merriweather)
--title card number: 400, 60px
--subtitle card number: 500, 20px
--button text: 500, 20px
--list text item: 500, 20px

[IBM Plex Sans](https://fonts.google.com/specimen/IBM+Plex+Sans)
--plan title card: 500, 20px

📄Contenido de texto


BASIC
100GB
1 month, then $1,7/month
Purchase
✔️100 GB storage
✔️Option to add members
✔️Extra member benefits

STANDARD
200GB
1 month, then $2,9/month
Purchase
✔️200 GB storage
✔️Option to add members
✔️Extra member benefits

PREMIUM
2TB
Purchase
1 month, then $8,9/month
✔️2 TB storage
✔️Option to add members
✔️Extra member benefits

🎁Recursos adicionales

HTML: Elementos bloque & linea

Lista de elementos en bloque & línea HTML, con ejemplos prácticos.

Modelo de caja CSS

Todos los elementos HTML son considerados cajas. Este tutorial explica de forma sencilla su concepto.

CSS Position

La propiedad position explica el tipo de posicionamiento que usará un elemento.

W3Schools

Aprende a programar con el sitio de desarrolladores web más grande del mundo.

CSS Flexbox

CSS Flexbox facilita el diseño de una estructura de diseño flexible y responsiva sin utilizar float ni position.

CSS Grid

CSS Grid ofrece un sistema de diseño basado en cuadrículas, con filas y columnas, lo que facilita el diseño de páginas web sin tener que utilizar elementos float ni position.

BEM 101

La metodología Bloque, Elemento, Modificador (comúnmente conocida como BEM) es una convención de nomenclatura popular para clases en HTML y CSS. Desarrollado por el equipo de Yandex, su objetivo es ayudar a los desarrolladores a comprender mejor la relación entre HTML y CSS en un proyecto determinado.

BEM Cheat Sheet

BEM (Block-Element-Modifier) es una convención de nomenclatura CSS desarrollada por el equipo de Yandex para mejorar la escalabilidad y la mantenibilidad en el desarrollo web.

BEM CHEAT SHEET

Cuando se trata de encontrar el nombre de clase correcto, rápidamente puede llevarte a la desesperación. Incluso los desarrolladores de CSS más experimentados no siempre encuentran el nombre de clase correcto de inmediato. Esta herramienta tiene como objetivo ayudarle a no perderse en el cosmos BEM brindándole sugerencias de nombres para algunos de los componentes web más comunes.

Guía paso a paso: despliega un proyecto en Netlify

Una guía para alojar un sitio web estático en Netlify, incluida la configuración de la implementación continua.