├── 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 | Logo 4 | 5 |

Music Library Page by Emmanuel Messias

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 --------------------------------------------------------------------------------