Social Media Dashboard Theme Switcher
Nuestro desafío será codificar un dashboard modo oscuro, usando HTML, CSS y JavaScript, y lograr que se parezca lo más posible al diseño original.
Recursos
Aquí encontrarás los recursos necesarios para completar el desafío.
## Diseño
- Móvil: 375px
- Escritorio: 1200px
## Colores
### Primary
- Lime Green: hsl(163, 72%, 41%)
- Bright Red: hsl(356, 69%, 56%)
- Facebook: hsl(208, 92%, 53%)
- Twitter: hsl(203, 89%, 53%)
- Instagram: linear gradient hsl(37, 97%, 70%) to hsl(329, 70%, 58%)
- YouTube: hsl(348, 97%, 39%)
#### Dark Theme
- Toggle: linear gradient hsl(210, 78%, 56%) to hsl(146, 68%, 55%)
#### Light Theme
- Toggle: hsl(230, 22%, 74%)
### Neutral
#### Dark Theme
- Very Dark Blue (BG): hsl(230, 17%, 14%)
- Very Dark Blue (Top BG Pattern): hsl(232, 19%, 15%)
- Dark Desaturated Blue (Card BG): hsl(228, 28%, 20%)
- Desaturated Blue (Text): hsl(228, 34%, 66%)
- White (Text): hsl(0, 0%, 100%)
#### Light Theme
- White (BG): hsl(0, 0%, 100%)
- Very Pale Blue (Top BG Pattern): hsl(225, 100%, 98%)
- Light Grayish Blue (Card BG): hsl(227, 47%, 96%)
- Dark Grayish Blue (Text): hsl(228, 12%, 44%)
- Very Dark Blue (Text): hsl(230, 17%, 14%)
## Tipografía
### Body
- Font size (Overview Card Headings): 14px
### Font
- Weights: 400, 700
- Family: [Inter](https://fonts.google.com/specimen/Inter)
Ideas
Eres libre de utilizar las tecnologías que quieras. Lo importante es practicar y completar un proyecto todos los días:
Comunidad
Únete a cientos de miembros que están mejorando sus habilidades de codificación y hablando sobre el desafío 100 days of projects.
Referencias
- Diseño tomado de: Frontend Mentor
🏷️"La mejor manera de aprender a programar es practicando todos los días."