Frontend Mentor - Social media dashboard with theme switcher solution

Links

• Repositorio URL : Github
• Demo URL : GitHub-Pages

General

Esta es una solucion al reto de Social media dashboard with theme switcher challenge on Frontend Mentor. Frontend Mentor retos que ayudan a mejorar las habilidades de coding y construir proyectos realistas

El reto

Los usuarios deberian poder

• Ver el diseño óptimo para el sitio según el tamaño de la pantalla de su dispositivo
• Ver estados de desplazamiento para todos los elementos interactivos en la página
• Alternar el tema de color a su preferencia

Screenshot

Mi proceso

Construido con

• HTML5
• CSS
• Sass
• Flexbox
• media queries
• javascript

Que aprendi?

Aprendi como modificar un checkbox con css, organizar mediante flexbox y como hacer un cambio de colores en la vista utilizando solamente css y javascript

Como cambiar los colores de forma facil con Javascript y CSS

$white: #1e202a;
$dark: #ffffff;
body {
  background: $white;
  color: $dark;

  &.dark : {
    color: $white;
    background: $dark;
  }
}

document.querySelector('body').classlist.toggle('dark');

Recursos utilies

• Css Gradient - Esta pagina me ayudo para realizar el gradiente de instagram

• Switch, dark mode with css and js -Este video me ayudo a construir el switch que utilice en esta practica.

Autor

• Github - SamuelNarciso
• Instagram - Samuel_Narciso
• Twitter - SamuelNarciso28
• Youtube - SamuelNarciso