Criado por Filipe Gomes

Dashboard com neumorfismo.

Desafio · DevChallenge

Índice

• Devchallenge
• Desafio
• Tecnologias
• Dicas
  • Biblioteca
  • Cores
  • Icones
  • Tipo de fonte
  • Layout
• Compartilhe

Devchallenge:

DevChallenge permite que você evolua suas skills como programador! Participe da nossa comunidade o/

Desafio:

Seu desafio é criar uma tela de Dashboard com neumorfismo e modo noturno! O modelo final está disponível na pasta "design".
Aqui segue o Link para demonstração do projeto, o responsivo ainda esta precisando de alguns ajustes!

Requisitos

• A pagina precisa ter os gráficos que serão disponibilizados através da biblioteca Chart.js e faz parte do seu desafio descobrir como utilizar esta linda biblioteca!
  
• A página precisa ser feita com o uso de flexbox ou css grid layout
  
• A página precisa ter a versão dark theme
  

Tecnologias:

• HTML
• CSS
• SASS (Opcional)
• JAVASCRIPT (Básico)

Biblioteca:

Documentação Chart.Js (Biblioteca de gráficos): Chart.Js

Dicas:

Cores

Light theme:

• #D478FF
• #a3a3a3
• #53565a
• #f8f8f8
• #F1F2F6
• #ccc
• #ffffff

Dark theme:

• #e9e9e9
• #8d8d8d
• #000000
• #24252b
• #2a2c36
• #202633

Icones

Para os ícones, recomendamos que utilize alguma biblioteca, como o Font Awesome

Fonte

• Poppins

Layout

O modelo final desktop e mobile está disponível na pasta ./design

Compartilhe:

Inicie seu projeto utilizando esse template no seu github como um repositório público
Faça um print, gif ou vídeo e compartilhe o resultado com a #devchallenge ou marcando nosso perfil @devchallenge!

Desafio criado por Filipe Gomes :)

Comunidade DevChallenge:

Site: https://www.devchallenge.com.br/
Discord: https://discord.gg/yvYXhGj
Linkedin: https://www.linkedin.com/company/devchallenge/
Twitter: https://twitter.com/dev_challenge
Instagram: https://www.instagram.com/devchallenge/