├── README.md
├── assets
├── playlist1.jpg
├── playlist2.jpg
├── playlist3.jpg
├── playlist4.jpg
├── profile.jpg
├── track1.jpg
├── track2.jpg
├── track3.jpg
├── track4.jpg
├── track5.jpg
├── track6.jpg
├── track7.jpg
├── view1.jpg
├── view2.jpg
└── view3.jpg
├── design
├── desktop.png
└── mobile.png
└── index.html
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Página de biblioteca de músicas
9 |
10 |
11 | Desafio
12 | ·
13 | DevChallenge
14 |
15 |
16 |
17 | ## Índice
18 |
19 | * [Devchallenge](#devchallenge)
20 | * [Desafio](#desafio)
21 | * [Techs](#techs)
22 | * [Como começar](#como-começar)
23 | * [Dicas](#dicas)
24 | * [Cores](#cores)
25 | * [Modelo](#modelo)
26 | * [Imagens](#imagens)
27 | * [Icones](#icones)
28 | * [Tipo de fonte](#tipo-de-fonte)
29 | * [Compartilhe](#compartilhe)
30 |
31 | # Devchallenge
32 | DevChallenge permite que você evolua suas skills como programador! Participe da nossa comunidade o/
33 |
34 | # Desafio
35 | O desafio consiste em reproduzir um dashboard de um sistema de músicas semelhante ao Spotify, onde é possível visualizar playlists, tracks e artistas.
36 | O modelo final está disponível na pasta "design"
37 |
38 | ## Requisitos:
39 | - Sua página deverá conter uma barra lateral fixa com as opções de menu
40 | - Sua página deverá contar com listas de visualização das playlists, dos perfils e das músicas
41 | - Sua página deverá ser responsiva
42 |
43 | ### Requisitos bônus
44 | - Você poderá adicionar uma visualização individual da música quando o usuário clicar na mesma
45 |
46 | # Techs:
47 | - HTML, CSS e JavaScript
48 |
49 | # Como começar:
50 | 1 - Use esse template (clicando em Use this template) ou faça um fork deste repositório com o código inicial
51 | 2 - Leia as instruções no readme.md
52 | 3 - Comece a codar! Sinta-se livre para utilizar o fluxo de trabalho que ache mais confortável
53 | 4 - Compartilhe seu resultado com a comunidade! Se puder, mostre seus resultado aqui no repositório também, criando uma Issue :)
54 |
55 | # Dicas
56 |
57 | ## Cores:
58 | Preto: #040517;
59 | Branco: #e5e5e5e7;
60 | Azul: rgb(32, 15, 86);
61 |
62 | ## Modelo:
63 | O modelo final desktop e mobile está disponível na pasta `./design`
64 |
65 | ## Imagens
66 | As imagens utilizadas estão disponíveis na pasta `./assets`
67 |
68 | ## Icones
69 | Para os ícones, recomendamos que utilize alguma biblioteca, como o Font Awesome
70 |
71 | ## Tipo de fonte:
72 | - Montserrat
73 |
74 | # Compartilhe!
75 | Inicie seu projeto utilizando esse template no seu github como um repositório público
76 | Faça um print, gif ou vídeo e compartilhe o resultado no seu Linkedin
77 |
78 | Desafio criado por Emmanuel Messias :)
79 |
--------------------------------------------------------------------------------
/assets/playlist1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devchallenge-io/music-library-page/0a631c900bfbf970f28564d1be1f86c1014e3ca1/assets/playlist1.jpg
--------------------------------------------------------------------------------
/assets/playlist2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devchallenge-io/music-library-page/0a631c900bfbf970f28564d1be1f86c1014e3ca1/assets/playlist2.jpg
--------------------------------------------------------------------------------
/assets/playlist3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devchallenge-io/music-library-page/0a631c900bfbf970f28564d1be1f86c1014e3ca1/assets/playlist3.jpg
--------------------------------------------------------------------------------
/assets/playlist4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devchallenge-io/music-library-page/0a631c900bfbf970f28564d1be1f86c1014e3ca1/assets/playlist4.jpg
--------------------------------------------------------------------------------
/assets/profile.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devchallenge-io/music-library-page/0a631c900bfbf970f28564d1be1f86c1014e3ca1/assets/profile.jpg
--------------------------------------------------------------------------------
/assets/track1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devchallenge-io/music-library-page/0a631c900bfbf970f28564d1be1f86c1014e3ca1/assets/track1.jpg
--------------------------------------------------------------------------------
/assets/track2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devchallenge-io/music-library-page/0a631c900bfbf970f28564d1be1f86c1014e3ca1/assets/track2.jpg
--------------------------------------------------------------------------------
/assets/track3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devchallenge-io/music-library-page/0a631c900bfbf970f28564d1be1f86c1014e3ca1/assets/track3.jpg
--------------------------------------------------------------------------------
/assets/track4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devchallenge-io/music-library-page/0a631c900bfbf970f28564d1be1f86c1014e3ca1/assets/track4.jpg
--------------------------------------------------------------------------------
/assets/track5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devchallenge-io/music-library-page/0a631c900bfbf970f28564d1be1f86c1014e3ca1/assets/track5.jpg
--------------------------------------------------------------------------------
/assets/track6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devchallenge-io/music-library-page/0a631c900bfbf970f28564d1be1f86c1014e3ca1/assets/track6.jpg
--------------------------------------------------------------------------------
/assets/track7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devchallenge-io/music-library-page/0a631c900bfbf970f28564d1be1f86c1014e3ca1/assets/track7.jpg
--------------------------------------------------------------------------------
/assets/view1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devchallenge-io/music-library-page/0a631c900bfbf970f28564d1be1f86c1014e3ca1/assets/view1.jpg
--------------------------------------------------------------------------------
/assets/view2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devchallenge-io/music-library-page/0a631c900bfbf970f28564d1be1f86c1014e3ca1/assets/view2.jpg
--------------------------------------------------------------------------------
/assets/view3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devchallenge-io/music-library-page/0a631c900bfbf970f28564d1be1f86c1014e3ca1/assets/view3.jpg
--------------------------------------------------------------------------------
/design/desktop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devchallenge-io/music-library-page/0a631c900bfbf970f28564d1be1f86c1014e3ca1/design/desktop.png
--------------------------------------------------------------------------------
/design/mobile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devchallenge-io/music-library-page/0a631c900bfbf970f28564d1be1f86c1014e3ca1/design/mobile.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 | Search artists, playlists or tracks
2 | Dany Schudler
3 | Edit Profile
4 | Overview
5 | News
6 | Playlists
7 | Discover
8 | Dashboard
9 | Messages
10 | Notifications
11 | Account
12 | Featured Playlists
13 | Profile Views
14 | Tracks
--------------------------------------------------------------------------------