├── README.md ├── spotify-imersao-alura-aula-01 ├── assets │ ├── icons │ │ ├── favicon.png │ │ ├── logo-spotify.png │ │ ├── search.png │ │ ├── small-left.png │ │ └── small-right.png │ └── playlist │ │ ├── 1.jpeg │ │ ├── 10.jpeg │ │ ├── 11.jpeg │ │ ├── 12.jpeg │ │ ├── 13.jpeg │ │ ├── 14.jpeg │ │ ├── 15.jpeg │ │ ├── 2.png │ │ ├── 3.jpeg │ │ ├── 4.jpeg │ │ ├── 5.jpeg │ │ ├── 6.jpeg │ │ ├── 7.jpeg │ │ ├── 8.jpeg │ │ └── 9.jpeg ├── index.html ├── reset.css ├── script.js └── style.css ├── spotify-imersao-alura-aula-02 ├── assets │ ├── icons │ │ ├── favicon.png │ │ ├── logo-spotify.png │ │ ├── search.png │ │ ├── small-left.png │ │ └── small-right.png │ └── playlist │ │ ├── 1.jpeg │ │ ├── 10.jpeg │ │ ├── 11.jpeg │ │ ├── 12.jpeg │ │ ├── 13.jpeg │ │ ├── 14.jpeg │ │ ├── 15.jpeg │ │ ├── 2.png │ │ ├── 3.jpeg │ │ ├── 4.jpeg │ │ ├── 5.jpeg │ │ ├── 6.jpeg │ │ ├── 7.jpeg │ │ ├── 8.jpeg │ │ └── 9.jpeg ├── index.html ├── reset.css ├── script.js └── style.css ├── spotify-imersao-alura-aula-03 ├── index.html ├── script.js └── src │ ├── assets │ ├── icons │ │ ├── favicon.png │ │ ├── logo-spotify.png │ │ ├── search.png │ │ ├── small-left.png │ │ └── small-right.png │ └── playlist │ │ ├── 1.jpeg │ │ ├── 10.jpeg │ │ ├── 11.jpeg │ │ ├── 12.jpeg │ │ ├── 13.jpeg │ │ ├── 14.jpeg │ │ ├── 15.jpeg │ │ ├── 2.png │ │ ├── 3.jpeg │ │ ├── 4.jpeg │ │ ├── 5.jpeg │ │ ├── 6.jpeg │ │ ├── 7.jpeg │ │ ├── 8.jpeg │ │ └── 9.jpeg │ └── styles │ ├── main-content.css │ ├── reset.css │ ├── sidebar-footer.css │ └── vars.css ├── spotify-imersao-alura-aula-04 ├── api-artists │ └── artists.json ├── index.html ├── script.js └── src │ ├── assets │ ├── icons │ │ ├── favicon.png │ │ ├── logo-spotify.png │ │ ├── search.png │ │ ├── small-left.png │ │ └── small-right.png │ └── playlist │ │ ├── 1.jpeg │ │ ├── 10.jpeg │ │ ├── 11.jpeg │ │ ├── 12.jpeg │ │ ├── 13.jpeg │ │ ├── 14.jpeg │ │ ├── 15.jpeg │ │ ├── 2.png │ │ ├── 3.jpeg │ │ ├── 4.jpeg │ │ ├── 5.jpeg │ │ ├── 6.jpeg │ │ ├── 7.jpeg │ │ ├── 8.jpeg │ │ └── 9.jpeg │ └── styles │ ├── main-content.css │ ├── media-queries.css │ ├── reset.css │ ├── sidebar-footer.css │ └── vars.css └── spotify-imersao-alura-aula-05 ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── manifest.json └── robots.txt └── src ├── App.css ├── App.js ├── App.test.js ├── api-artists └── artists.json ├── assets ├── icons │ ├── logo-spotify.png │ ├── search.png │ ├── small-left.png │ └── small-right.png └── playlist │ ├── 1.jpeg │ ├── 10.jpeg │ ├── 11.jpeg │ ├── 12.jpeg │ ├── 13.jpeg │ ├── 14.jpeg │ ├── 15.jpeg │ ├── 2.png │ ├── 3.jpeg │ ├── 4.jpeg │ ├── 5.jpeg │ ├── 6.jpeg │ ├── 7.jpeg │ ├── 8.jpeg │ └── 9.jpeg ├── componentes ├── Footer │ ├── Footer.css │ └── Footer.js ├── Header │ ├── Header.css │ └── Header.js ├── Main │ ├── Main.css │ └── Main.js └── Sidebar │ ├── Sidebar.css │ └── Sidebar.js ├── index.css ├── index.js ├── reportWebVitals.js └── setupTests.js /README.md: -------------------------------------------------------------------------------- 1 |

Imersão Front-End: Spotify

2 | 3 |
4 |

5 | Licença do projeto com os dizeres: MIT 6 | Status do projeto com os dizeres: Concluído 7 |

8 |
9 | 10 | ## Descrição do Projeto 11 | 12 | Projeto desenvolvido para a 1ª Imersão Front-End da Alura com o objetivo de recriar a página do Spotify utilizando as principais tecnologias do Front-End (HTML, CSS, JS) e por em prática uma das bibliotecas mais populares o React. 13 | 14 | ## Como posso utilizar os arquivos? 15 | 16 | Para usar os arquivos basta clonar este repositório ou baixá-lo em seu desktop, abrir o terminal na pasta onde os arquivos estão baixados. No caso da pasta da aula 5 é necessário usar o comando `npm install` para instalar as dependências do projeto e usar o comando `npm start` para abrir o site no navegador. Lembre-se de ter o Node instalado, caso não tenha você pode acessar o [site do Node](https://nodejs.org/en). 17 | 18 | ## Tecnologias 19 | 20 |
21 | Retângulo preto escrito React 22 | HTML 23 | JavaScript 24 | Retângulo azul escrito CSS 25 |
26 | -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-01/assets/icons/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-01/assets/icons/favicon.png -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-01/assets/icons/logo-spotify.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-01/assets/icons/logo-spotify.png -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-01/assets/icons/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-01/assets/icons/search.png -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-01/assets/icons/small-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-01/assets/icons/small-left.png -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-01/assets/icons/small-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-01/assets/icons/small-right.png -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-01/assets/playlist/1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-01/assets/playlist/1.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-01/assets/playlist/10.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-01/assets/playlist/10.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-01/assets/playlist/11.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-01/assets/playlist/11.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-01/assets/playlist/12.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-01/assets/playlist/12.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-01/assets/playlist/13.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-01/assets/playlist/13.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-01/assets/playlist/14.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-01/assets/playlist/14.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-01/assets/playlist/15.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-01/assets/playlist/15.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-01/assets/playlist/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-01/assets/playlist/2.png -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-01/assets/playlist/3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-01/assets/playlist/3.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-01/assets/playlist/4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-01/assets/playlist/4.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-01/assets/playlist/5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-01/assets/playlist/5.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-01/assets/playlist/6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-01/assets/playlist/6.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-01/assets/playlist/7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-01/assets/playlist/7.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-01/assets/playlist/8.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-01/assets/playlist/8.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-01/assets/playlist/9.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-01/assets/playlist/9.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Spotify Imersão 8 | 9 | 10 | 11 | 12 | 14 | 16 | 17 | 18 | 19 | 20 |
21 | 42 |
43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-01/reset.css: -------------------------------------------------------------------------------- 1 | html, 2 | body, 3 | div, 4 | span, 5 | applet, 6 | object, 7 | iframe, 8 | h1, 9 | h2, 10 | h3, 11 | h4, 12 | h5, 13 | h6, 14 | p, 15 | blockquote, 16 | pre, 17 | a, 18 | abbr, 19 | acronym, 20 | address, 21 | big, 22 | cite, 23 | code, 24 | del, 25 | dfn, 26 | em, 27 | img, 28 | ins, 29 | kbd, 30 | q, 31 | s, 32 | samp, 33 | small, 34 | strike, 35 | strong, 36 | sub, 37 | sup, 38 | tt, 39 | var, 40 | b, 41 | u, 42 | i, 43 | center, 44 | dl, 45 | dt, 46 | dd, 47 | ol, 48 | ul, 49 | li, 50 | fieldset, 51 | form, 52 | label, 53 | legend, 54 | table, 55 | caption, 56 | tbody, 57 | tfoot, 58 | thead, 59 | tr, 60 | th, 61 | td, 62 | article, 63 | aside, 64 | canvas, 65 | details, 66 | embed, 67 | figure, 68 | figcaption, 69 | footer, 70 | header, 71 | hgroup, 72 | menu, 73 | nav, 74 | output, 75 | ruby, 76 | section, 77 | summary, 78 | time, 79 | mark, 80 | audio, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | vertical-align: baseline; 87 | } 88 | 89 | /* HTML5 display-role reset for older browsers */ 90 | article, 91 | aside, 92 | details, 93 | figcaption, 94 | figure, 95 | footer, 96 | header, 97 | hgroup, 98 | menu, 99 | nav, 100 | section { 101 | display: block; 102 | } 103 | 104 | body { 105 | line-height: 1; 106 | background: #000; 107 | font-family: var(--font-dm-sans); 108 | } 109 | 110 | ol, 111 | ul { 112 | list-style: none; 113 | } 114 | 115 | blockquote, 116 | q { 117 | quotes: none; 118 | } 119 | 120 | blockquote:before, 121 | blockquote:after, 122 | q:before, 123 | q:after { 124 | content: ""; 125 | content: none; 126 | } 127 | 128 | table { 129 | border-collapse: collapse; 130 | border-spacing: 0; 131 | } 132 | 133 | button { 134 | border: none; 135 | cursor: pointer; 136 | } -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-01/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-01/script.js -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-01/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: #000; 3 | } 4 | 5 | .sidebar{ 6 | position:fixed; 7 | top:0; 8 | left:0; 9 | bottom:0; 10 | padding:12px; 11 | width:300px; 12 | } 13 | 14 | .sidebar__navigation{ 15 | background-color: #121212; 16 | border-radius:8px; 17 | padding:16px 0 0 16px; 18 | } 19 | 20 | .logo{ 21 | background: #121212; 22 | display:flex; 23 | border-radius:8px ; 24 | padding:16px 0 0 16px; 25 | } 26 | 27 | .sidebar__navigation .logo img{ 28 | width:80px; 29 | } 30 | 31 | .sidebar nav ul{ 32 | margin-top: 20px; 33 | padding:0 20px 10px 20px; 34 | } 35 | 36 | .sidebar ul li{ 37 | padding: 10px 0; 38 | } 39 | 40 | .sidebar nav ul li a{ 41 | color: #b3b3b3; 42 | text-decoration: none; 43 | font-weight: 600; 44 | font-size: 14px; 45 | font-family: "DM Sans", sans-serif; 46 | } 47 | -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-02/assets/icons/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-02/assets/icons/favicon.png -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-02/assets/icons/logo-spotify.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-02/assets/icons/logo-spotify.png -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-02/assets/icons/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-02/assets/icons/search.png -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-02/assets/icons/small-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-02/assets/icons/small-left.png -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-02/assets/icons/small-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-02/assets/icons/small-right.png -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-02/assets/playlist/1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-02/assets/playlist/1.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-02/assets/playlist/10.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-02/assets/playlist/10.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-02/assets/playlist/11.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-02/assets/playlist/11.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-02/assets/playlist/12.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-02/assets/playlist/12.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-02/assets/playlist/13.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-02/assets/playlist/13.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-02/assets/playlist/14.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-02/assets/playlist/14.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-02/assets/playlist/15.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-02/assets/playlist/15.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-02/assets/playlist/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-02/assets/playlist/2.png -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-02/assets/playlist/3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-02/assets/playlist/3.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-02/assets/playlist/4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-02/assets/playlist/4.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-02/assets/playlist/5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-02/assets/playlist/5.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-02/assets/playlist/6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-02/assets/playlist/6.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-02/assets/playlist/7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-02/assets/playlist/7.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-02/assets/playlist/8.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-02/assets/playlist/8.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-02/assets/playlist/9.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-02/assets/playlist/9.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Spotify Imersão 8 | 9 | 10 | 11 | 12 | 14 | 16 | 17 | 18 | 19 | 20 |
21 | 42 |
43 |
44 | 48 | 49 |
50 |
51 |
52 | Crie sua primeira playlist 53 | É fácil, vamos te ajudar. 54 | 57 |
58 |
59 |
60 | Cookies 61 |
62 |
63 | 67 |
68 |
69 |
70 | 71 | 72 | -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-02/reset.css: -------------------------------------------------------------------------------- 1 | html, 2 | body, 3 | div, 4 | span, 5 | applet, 6 | object, 7 | iframe, 8 | h1, 9 | h2, 10 | h3, 11 | h4, 12 | h5, 13 | h6, 14 | p, 15 | blockquote, 16 | pre, 17 | a, 18 | abbr, 19 | acronym, 20 | address, 21 | big, 22 | cite, 23 | code, 24 | del, 25 | dfn, 26 | em, 27 | img, 28 | ins, 29 | kbd, 30 | q, 31 | s, 32 | samp, 33 | small, 34 | strike, 35 | strong, 36 | sub, 37 | sup, 38 | tt, 39 | var, 40 | b, 41 | u, 42 | i, 43 | center, 44 | dl, 45 | dt, 46 | dd, 47 | ol, 48 | ul, 49 | li, 50 | fieldset, 51 | form, 52 | label, 53 | legend, 54 | table, 55 | caption, 56 | tbody, 57 | tfoot, 58 | thead, 59 | tr, 60 | th, 61 | td, 62 | article, 63 | aside, 64 | canvas, 65 | details, 66 | embed, 67 | figure, 68 | figcaption, 69 | footer, 70 | header, 71 | hgroup, 72 | menu, 73 | nav, 74 | output, 75 | ruby, 76 | section, 77 | summary, 78 | time, 79 | mark, 80 | audio, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | vertical-align: baseline; 87 | } 88 | 89 | /* HTML5 display-role reset for older browsers */ 90 | article, 91 | aside, 92 | details, 93 | figcaption, 94 | figure, 95 | footer, 96 | header, 97 | hgroup, 98 | menu, 99 | nav, 100 | section { 101 | display: block; 102 | } 103 | 104 | body { 105 | line-height: 1; 106 | background: #000; 107 | font-family: var(--font-dm-sans); 108 | } 109 | 110 | ol, 111 | ul { 112 | list-style: none; 113 | } 114 | 115 | blockquote, 116 | q { 117 | quotes: none; 118 | } 119 | 120 | blockquote:before, 121 | blockquote:after, 122 | q:before, 123 | q:after { 124 | content: ""; 125 | content: none; 126 | } 127 | 128 | table { 129 | border-collapse: collapse; 130 | border-spacing: 0; 131 | } 132 | 133 | button { 134 | border: none; 135 | cursor: pointer; 136 | } -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-02/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-02/script.js -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-02/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: #000; 3 | } 4 | 5 | .sidebar{ 6 | position:fixed; 7 | top:0; 8 | left:0; 9 | bottom:0; 10 | padding:12px; 11 | width:300px; 12 | } 13 | 14 | .sidebar__navigation{ 15 | background-color: #121212; 16 | border-radius:8px; 17 | padding:16px 0 0 16px; 18 | } 19 | 20 | .logo{ 21 | background: #121212; 22 | display:flex; 23 | border-radius:8px ; 24 | padding:16px 0 0 16px; 25 | } 26 | 27 | .sidebar__navigation .logo img{ 28 | width:80px; 29 | } 30 | 31 | .sidebar nav ul{ 32 | margin-top: 20px; 33 | padding:0 20px 10px 20px; 34 | } 35 | 36 | .sidebar ul li{ 37 | padding: 10px 0; 38 | } 39 | 40 | .sidebar nav ul li a{ 41 | color: #b3b3b3; 42 | text-decoration: none; 43 | font-weight: 600; 44 | font-size: 14px; 45 | font-family: "DM Sans", sans-serif; 46 | } 47 | 48 | .library{ 49 | background-color:#121212; 50 | border-radius:8px; 51 | display:flex; 52 | justify-content: space-between; 53 | flex-direction: column; 54 | padding:4px 8px; 55 | color:#b3b3b3; 56 | font-weight: 600; 57 | font-size:14px; 58 | margin-top: 10px; 59 | } 60 | 61 | .library .library__content{ 62 | display:flex; 63 | justify-content: space-between; 64 | } 65 | 66 | .library .library__button{ 67 | display:flex; 68 | margin-right: 10px; 69 | color:#b3b3b3; 70 | background-color: transparent; 71 | border:0px; 72 | font-size: 14px; 73 | font-weight: 700; 74 | font-family: "DM Sans", sans-serif; 75 | text-align: center; 76 | text-decoration: none; 77 | text-transform: none; 78 | padding:20px 10px; 79 | } 80 | 81 | .library .library__button .fa{ 82 | font-size:20px; 83 | font-weight: 300; 84 | color:#b3b3b3; 85 | margin-right: 10px; 86 | padding-right:8px; 87 | } 88 | 89 | .library .library__content .fa-plus{ 90 | margin: 24px 10px; 91 | } 92 | 93 | .section-playlist{ 94 | display:flex; 95 | align-items: flex-start; 96 | justify-content: space-between; 97 | gap:20px; 98 | background-color: #242424; 99 | color:#b3b3b3; 100 | font-weight: 600; 101 | font-size: 14px; 102 | margin: 8px 0; 103 | padding:16px 20px; 104 | border-radius:10px; 105 | } 106 | 107 | .section-playlist .section-playlist__content{ 108 | display:flex; 109 | flex-direction: column; 110 | } 111 | 112 | .section-playlist__content .text{ 113 | padding-bottom:14px; 114 | color:#FFF; 115 | font-family: "DM Sans", sans-serif; 116 | } 117 | 118 | .section-playlist__content .title{ 119 | font-weight: 700; 120 | } 121 | 122 | .section-playlist__content .subtitle{ 123 | font-weight: 500; 124 | font-size: 12px; 125 | } 126 | 127 | .section-playlist__content .section-playlist__button{ 128 | display: flex; 129 | justify-content: center; 130 | background-color: #FFF; 131 | color:#000; 132 | border-radius: 20px; 133 | font-size: 12px; 134 | font-weight: 700; 135 | font-family: "DM Sans", sans-serif; 136 | text-decoration:none; 137 | text-transform: none; 138 | padding:10px; 139 | margin-top: 12px; 140 | border:0; 141 | width: 113px; 142 | } 143 | 144 | .sidebar .cookies{ 145 | margin:25px 20px; 146 | } 147 | 148 | .sidebar .cookies a{ 149 | color:#b3b3b3; 150 | font-family: "DM Sans", sans-serif; 151 | font-weight: 500; 152 | font-size:10px; 153 | text-decoration: none; 154 | } 155 | 156 | .sidebar .cookies a:hover{ 157 | text-decoration: underline; 158 | } 159 | 160 | .languages .languages__button{ 161 | align-items: center; 162 | background-color: transparent; 163 | border: 1px solid #878787; 164 | color:#FFF; 165 | font-weight: bold; 166 | cursor:pointer; 167 | width: 170px; 168 | margin:8px; 169 | padding:8px; 170 | border-radius:20px; 171 | } 172 | -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Spotify Imersão 8 | 9 | 10 | 11 | 12 | 13 | 14 | 16 | 18 | 19 | 20 | 21 | 22 |
23 | 44 |
45 |
46 | 50 | 51 |
52 |
53 |
54 | Crie sua primeira playlist 55 | É fácil, vamos te ajudar. 56 | 59 |
60 |
61 |
62 | Cookies 63 |
64 |
65 | 69 |
70 |
71 |
72 |
73 |
74 | 92 |
93 |
94 | 106 | 107 | 108 | -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-03/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-03/script.js -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-03/src/assets/icons/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-03/src/assets/icons/favicon.png -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-03/src/assets/icons/logo-spotify.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-03/src/assets/icons/logo-spotify.png -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-03/src/assets/icons/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-03/src/assets/icons/search.png -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-03/src/assets/icons/small-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-03/src/assets/icons/small-left.png -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-03/src/assets/icons/small-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-03/src/assets/icons/small-right.png -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-03/src/assets/playlist/1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-03/src/assets/playlist/1.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-03/src/assets/playlist/10.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-03/src/assets/playlist/10.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-03/src/assets/playlist/11.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-03/src/assets/playlist/11.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-03/src/assets/playlist/12.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-03/src/assets/playlist/12.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-03/src/assets/playlist/13.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-03/src/assets/playlist/13.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-03/src/assets/playlist/14.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-03/src/assets/playlist/14.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-03/src/assets/playlist/15.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-03/src/assets/playlist/15.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-03/src/assets/playlist/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-03/src/assets/playlist/2.png -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-03/src/assets/playlist/3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-03/src/assets/playlist/3.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-03/src/assets/playlist/4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-03/src/assets/playlist/4.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-03/src/assets/playlist/5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-03/src/assets/playlist/5.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-03/src/assets/playlist/6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-03/src/assets/playlist/6.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-03/src/assets/playlist/7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-03/src/assets/playlist/7.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-03/src/assets/playlist/8.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-03/src/assets/playlist/8.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-03/src/assets/playlist/9.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-03/src/assets/playlist/9.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-03/src/styles/main-content.css: -------------------------------------------------------------------------------- 1 | /* HEADER */ 2 | 3 | .main-container{ 4 | max-width: 80vw; 5 | height: 100vh; 6 | margin-left: 320px; 7 | margin-right: 56px; 8 | } 9 | 10 | .header__navigation { 11 | display: flex; 12 | justify-content: space-between; 13 | align-items: center; 14 | padding: 16px; 15 | margin: 10px; 16 | border-radius: 8px; 17 | background-color: #121212; 18 | padding: 12px; 19 | } 20 | 21 | .header__navigation .navigation { 22 | display: flex; 23 | justify-content: space-around; 24 | align-items: center; 25 | } 26 | 27 | .header__navigation .navigation .arrow-left { 28 | margin-right: 1.25rem; 29 | } 30 | 31 | .arrow-left, 32 | .arrow-right { 33 | display: flex; 34 | align-items: center; 35 | justify-content: center; 36 | width: 32px; 37 | height: 32px; 38 | background: var(--bg-icon); 39 | background-color:var(--bg-arrow-color); 40 | border-radius: 50%; 41 | border: none; 42 | cursor: pointer; 43 | } 44 | 45 | .header__login { 46 | display: flex; 47 | align-items: center; 48 | } 49 | 50 | .header__search { 51 | display: flex; 52 | align-items: center; 53 | width: 364px; 54 | height: 48px; 55 | margin-left: 8px; 56 | background-color: #242424; 57 | border-radius: 500px; 58 | border: 1px solid transparent; 59 | } 60 | 61 | .header__search img { 62 | width: 16px; 63 | height: 16px; 64 | margin-left: 10px; 65 | } 66 | 67 | .header__search input { 68 | background: transparent; 69 | border: none; 70 | padding: 0px 100px 0 12px; 71 | color: #fff; 72 | text-overflow: ellipsis; 73 | overflow:hidden; 74 | white-space: nowrap; 75 | outline: none; 76 | } 77 | 78 | .header__login .subscribe { 79 | color: #a7a7a7; 80 | font-size: 16px; 81 | font-weight: 700; 82 | background-color: transparent; 83 | margin-right: 32px; 84 | } 85 | 86 | .header__login .login { 87 | width: 100px; 88 | height: 48px; 89 | color: #000; 90 | font-size: 16px; 91 | font-weight: 700; 92 | border-radius: 40px; 93 | } -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-03/src/styles/reset.css: -------------------------------------------------------------------------------- 1 | html, 2 | body, 3 | div, 4 | span, 5 | applet, 6 | object, 7 | iframe, 8 | h1, 9 | h2, 10 | h3, 11 | h4, 12 | h5, 13 | h6, 14 | p, 15 | blockquote, 16 | pre, 17 | a, 18 | abbr, 19 | acronym, 20 | address, 21 | big, 22 | cite, 23 | code, 24 | del, 25 | dfn, 26 | em, 27 | img, 28 | ins, 29 | kbd, 30 | q, 31 | s, 32 | samp, 33 | small, 34 | strike, 35 | strong, 36 | sub, 37 | sup, 38 | tt, 39 | var, 40 | b, 41 | u, 42 | i, 43 | center, 44 | dl, 45 | dt, 46 | dd, 47 | ol, 48 | ul, 49 | li, 50 | fieldset, 51 | form, 52 | label, 53 | legend, 54 | table, 55 | caption, 56 | tbody, 57 | tfoot, 58 | thead, 59 | tr, 60 | th, 61 | td, 62 | article, 63 | aside, 64 | canvas, 65 | details, 66 | embed, 67 | figure, 68 | figcaption, 69 | footer, 70 | header, 71 | hgroup, 72 | menu, 73 | nav, 74 | output, 75 | ruby, 76 | section, 77 | summary, 78 | time, 79 | mark, 80 | audio, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | vertical-align: baseline; 87 | } 88 | 89 | /* HTML5 display-role reset for older browsers */ 90 | article, 91 | aside, 92 | details, 93 | figcaption, 94 | figure, 95 | footer, 96 | header, 97 | hgroup, 98 | menu, 99 | nav, 100 | section { 101 | display: block; 102 | } 103 | 104 | body { 105 | line-height: 1; 106 | background: #000; 107 | font-family: var(--font-dm-sans); 108 | } 109 | 110 | ol, 111 | ul { 112 | list-style: none; 113 | } 114 | 115 | blockquote, 116 | q { 117 | quotes: none; 118 | } 119 | 120 | blockquote:before, 121 | blockquote:after, 122 | q:before, 123 | q:after { 124 | content: ""; 125 | content: none; 126 | } 127 | 128 | table { 129 | border-collapse: collapse; 130 | border-spacing: 0; 131 | } 132 | 133 | button { 134 | border: none; 135 | cursor: pointer; 136 | } -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-03/src/styles/sidebar-footer.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: #000; 3 | font-family: var(--font-dm-sans); 4 | } 5 | 6 | .sidebar{ 7 | position:fixed; 8 | top:0; 9 | left:0; 10 | bottom:0; 11 | padding:12px; 12 | width:300px; 13 | } 14 | 15 | .sidebar__navigation{ 16 | background-color: #121212; 17 | border-radius:8px; 18 | padding:16px 0 0 16px; 19 | } 20 | 21 | .logo{ 22 | background: #121212; 23 | display:flex; 24 | border-radius:8px ; 25 | padding:16px 0 0 16px; 26 | } 27 | 28 | .sidebar__navigation .logo img{ 29 | width:80px; 30 | } 31 | 32 | .sidebar nav ul{ 33 | margin-top: 20px; 34 | padding:0 20px 10px 20px; 35 | } 36 | 37 | .sidebar ul li{ 38 | padding: 10px 0; 39 | } 40 | 41 | .sidebar nav ul li a{ 42 | color: #b3b3b3; 43 | text-decoration: none; 44 | font-weight: 600; 45 | font-size: 14px; 46 | } 47 | 48 | .library{ 49 | background-color:#121212; 50 | border-radius:8px; 51 | display:flex; 52 | justify-content: space-between; 53 | flex-direction: column; 54 | padding:4px 8px; 55 | color:#b3b3b3; 56 | font-weight: 600; 57 | font-size:14px; 58 | margin-top: 10px; 59 | } 60 | 61 | .library .library__content{ 62 | display:flex; 63 | justify-content: space-between; 64 | } 65 | 66 | .library .library__button{ 67 | display:flex; 68 | margin-right: 10px; 69 | color:#b3b3b3; 70 | background-color: transparent; 71 | border:0px; 72 | font-size: 14px; 73 | font-weight: 700; 74 | text-align: center; 75 | text-decoration: none; 76 | text-transform: none; 77 | padding:20px 10px; 78 | } 79 | 80 | .library .library__button .fa{ 81 | font-size:20px; 82 | font-weight: 300; 83 | color:#b3b3b3; 84 | margin-right: 10px; 85 | padding-right:8px; 86 | } 87 | 88 | .library .library__content .fa-plus{ 89 | margin: 24px 10px; 90 | } 91 | 92 | .section-playlist{ 93 | display:flex; 94 | align-items: flex-start; 95 | justify-content: space-between; 96 | gap:20px; 97 | background-color: #242424; 98 | color:#b3b3b3; 99 | font-weight: 600; 100 | font-size: 14px; 101 | margin: 8px 0; 102 | padding:16px 20px; 103 | border-radius:10px; 104 | } 105 | 106 | .section-playlist .section-playlist__content{ 107 | display:flex; 108 | flex-direction: column; 109 | } 110 | 111 | .section-playlist__content .text{ 112 | padding-bottom:14px; 113 | color:#FFF; 114 | } 115 | 116 | .section-playlist__content .title{ 117 | font-weight: 700; 118 | } 119 | 120 | .section-playlist__content .subtitle{ 121 | font-weight: 500; 122 | font-size: 12px; 123 | } 124 | 125 | .section-playlist__content .section-playlist__button{ 126 | display: flex; 127 | justify-content: center; 128 | background-color: #FFF; 129 | color:#000; 130 | border-radius: 20px; 131 | font-size: 12px; 132 | font-weight: 700; 133 | text-decoration:none; 134 | text-transform: none; 135 | padding:10px; 136 | margin-top: 12px; 137 | border:0; 138 | width: 113px; 139 | } 140 | 141 | .sidebar .cookies{ 142 | margin:25px 20px; 143 | } 144 | 145 | .sidebar .cookies a{ 146 | color:#b3b3b3; 147 | font-weight: 500; 148 | font-size:10px; 149 | text-decoration: none; 150 | } 151 | 152 | .sidebar .cookies a:hover{ 153 | text-decoration: underline; 154 | } 155 | 156 | .languages .languages__button{ 157 | align-items: center; 158 | background-color: transparent; 159 | border: 1px solid #878787; 160 | color:#FFF; 161 | font-weight: bold; 162 | cursor:pointer; 163 | width: 170px; 164 | margin:8px; 165 | padding:8px; 166 | border-radius:20px; 167 | } 168 | 169 | .disclaimer-premium { 170 | position: fixed; 171 | bottom: 0; 172 | left: 0; 173 | right: 0; 174 | background: linear-gradient(to right, #ae2896, #509bf5); 175 | padding: 15px 40px; 176 | display: flex; 177 | justify-content: space-between; 178 | } 179 | .disclaimer-premium .text { 180 | flex-shrink: 0; 181 | } 182 | .disclaimer-premium .disclaimer-premium__title { 183 | color: #ffffff; 184 | text-transform: uppercase; 185 | font-weight: 400; 186 | font-size: 12px; 187 | margin-bottom: 10px; 188 | } 189 | 190 | .disclaimer-premium .disclaimer-premium__subtitle { 191 | color: #ffffff; 192 | font-size: 14px; 193 | font-weight: 500; 194 | } 195 | 196 | .disclaimer-premium button { 197 | background-color: #ffffff; 198 | color: #000000; 199 | font-size: 16px; 200 | font-weight: bold; 201 | padding: 14px 30px; 202 | border: 0px; 203 | border-radius: 40px; 204 | cursor: pointer; 205 | flex-shrink: 0; 206 | } 207 | -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-03/src/styles/vars.css: -------------------------------------------------------------------------------- 1 | :root{ 2 | /* FONT */ 3 | --font-dm-sans:"DM Sans", sans-serif; 4 | 5 | /* COLORS */ 6 | --bg-icon:#131313; 7 | --bg-arrow-color:rgba(0,0,0,7) 8 | } -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-04/api-artists/artists.json: -------------------------------------------------------------------------------- 1 | { 2 | "artists": [ 3 | { 4 | "id": 1, 5 | "name": "Foo Fighters", 6 | "genre": "Rock", 7 | "urlImg": "https://i.scdn.co/image/ab67616100005174c884df599abc793c116cdf15" 8 | }, 9 | { 10 | "id": 2, 11 | "name": "Michael Jackson", 12 | "genre": "Pop", 13 | "urlImg": "https://i.scdn.co/image/ab676161000051740e08ea2c4d6789fbf5cbe0aa" 14 | }, 15 | { 16 | "id": 3, 17 | "name": "Emicida", 18 | "genre": "Hip Hop", 19 | "urlImg": "https://i.scdn.co/image/ab67616100005174908b4b4bc90e1518b68b4068" 20 | }, 21 | { 22 | "id": 4, 23 | "name": "Chitãozinho e Xororó", 24 | "genre": "Sertanejo", 25 | "urlImg": "https://i.scdn.co/image/ab676161000051744606c59411c57f7b49588be4" 26 | }, 27 | { 28 | "id": 5, 29 | "name": "Mc Coringa", 30 | "genre": "Funk", 31 | "urlImg": "https://i.scdn.co/image/ab67616d00001e02fe8f6dd361ad0f12b88c7f56" 32 | }, 33 | { 34 | "id": 6, 35 | "name": "Arlindo Cruz", 36 | "genre": "Samba", 37 | "urlImg": "https://i.scdn.co/image/ab67616100005174181873f93056642d7b340839" 38 | }, 39 | { 40 | "id": 7, 41 | "name": "Caetano Veloso", 42 | "genre": "MPB", 43 | "urlImg": "https://i.scdn.co/image/ab67616100005174e98de50f36cf1aa4bf047757" 44 | } 45 | ] 46 | } -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Spotify Imersão 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 17 | 19 | 20 | 21 | 22 | 23 |
24 | 45 |
46 |
47 | 51 | 52 |
53 |
54 |
55 | Crie sua primeira playlist 56 | É fácil, vamos te ajudar. 57 | 60 |
61 |
62 |
63 | Cookies 64 |
65 |
66 | 70 |
71 |
72 |
73 |
74 |
75 | 94 | 95 | 96 |
97 | 230 | 248 | 249 |
250 |
251 |
252 | 264 | 265 | 266 | 267 | -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-04/script.js: -------------------------------------------------------------------------------- 1 | const searchInput = document.getElementById('search-input'); 2 | const resultArtist = document.getElementById("result-artist"); 3 | const resultPlaylist = document.getElementById('result-playlists'); 4 | 5 | function requestApi(searchTerm) { 6 | const url = `http://localhost:3000/artists?name_like=${searchTerm}` 7 | fetch(url) 8 | .then((response) => response.json()) 9 | .then((result) => displayResults(result)) 10 | } 11 | 12 | function displayResults(result) { 13 | resultPlaylist.classList.add("hidden") 14 | const artistName = document.getElementById('artist-name'); 15 | const artistImage = document.getElementById('artist-img'); 16 | 17 | result.forEach(element => { 18 | artistName.innerText = element.name; 19 | artistImage.src = element.urlImg; 20 | }); 21 | 22 | resultArtist.classList.remove('hidden'); 23 | } 24 | 25 | document.addEventListener('input', function () { 26 | const searchTerm = searchInput.value.toLowerCase(); 27 | if (searchTerm === '') { 28 | resultPlaylist.classList.add('hidden'); 29 | resultArtist.classList.remove('hidden'); 30 | return 31 | } 32 | 33 | requestApi(searchTerm); 34 | }) 35 | -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-04/src/assets/icons/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-04/src/assets/icons/favicon.png -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-04/src/assets/icons/logo-spotify.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-04/src/assets/icons/logo-spotify.png -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-04/src/assets/icons/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-04/src/assets/icons/search.png -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-04/src/assets/icons/small-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-04/src/assets/icons/small-left.png -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-04/src/assets/icons/small-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-04/src/assets/icons/small-right.png -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-04/src/assets/playlist/1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-04/src/assets/playlist/1.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-04/src/assets/playlist/10.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-04/src/assets/playlist/10.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-04/src/assets/playlist/11.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-04/src/assets/playlist/11.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-04/src/assets/playlist/12.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-04/src/assets/playlist/12.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-04/src/assets/playlist/13.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-04/src/assets/playlist/13.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-04/src/assets/playlist/14.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-04/src/assets/playlist/14.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-04/src/assets/playlist/15.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-04/src/assets/playlist/15.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-04/src/assets/playlist/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-04/src/assets/playlist/2.png -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-04/src/assets/playlist/3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-04/src/assets/playlist/3.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-04/src/assets/playlist/4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-04/src/assets/playlist/4.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-04/src/assets/playlist/5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-04/src/assets/playlist/5.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-04/src/assets/playlist/6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-04/src/assets/playlist/6.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-04/src/assets/playlist/7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-04/src/assets/playlist/7.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-04/src/assets/playlist/8.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-04/src/assets/playlist/8.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-04/src/assets/playlist/9.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-04/src/assets/playlist/9.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-04/src/styles/main-content.css: -------------------------------------------------------------------------------- 1 | /* HEADER */ 2 | 3 | .main-container{ 4 | max-width: 80vw; 5 | height: 100vh; 6 | margin-left: 320px; 7 | margin-right: 56px; 8 | } 9 | 10 | .header__navigation { 11 | display: flex; 12 | justify-content: space-between; 13 | align-items: center; 14 | padding: 16px; 15 | margin: 10px; 16 | border-radius: 8px; 17 | background-color: #121212; 18 | padding: 12px; 19 | } 20 | 21 | .header__navigation .navigation { 22 | display: flex; 23 | justify-content: space-around; 24 | align-items: center; 25 | } 26 | 27 | .header__navigation .navigation .arrow-left { 28 | margin-right: 1.25rem; 29 | } 30 | 31 | .arrow-left, 32 | .arrow-right { 33 | display: flex; 34 | align-items: center; 35 | justify-content: center; 36 | width: 32px; 37 | height: 32px; 38 | background: var(--bg-icon); 39 | background-color:var(--bg-arrow-color); 40 | border-radius: 50%; 41 | border: none; 42 | cursor: pointer; 43 | } 44 | 45 | .header__login { 46 | display: flex; 47 | align-items: center; 48 | } 49 | 50 | .header__search { 51 | display: flex; 52 | align-items: center; 53 | width: 364px; 54 | height: 48px; 55 | margin-left: 8px; 56 | background-color: #242424; 57 | border-radius: 500px; 58 | border: 1px solid transparent; 59 | } 60 | 61 | .header__search img { 62 | width: 16px; 63 | height: 16px; 64 | margin-left: 10px; 65 | } 66 | 67 | .header__search input { 68 | background: transparent; 69 | border: none; 70 | padding: 0px 100px 0 12px; 71 | color: #fff; 72 | text-overflow: ellipsis; 73 | overflow:hidden; 74 | white-space: nowrap; 75 | outline: none; 76 | } 77 | 78 | .header__login .subscribe { 79 | color: #a7a7a7; 80 | font-size: 16px; 81 | font-weight: 700; 82 | background-color: transparent; 83 | margin-right: 32px; 84 | } 85 | 86 | .header__login .login { 87 | width: 100px; 88 | height: 48px; 89 | color: #000; 90 | font-size: 16px; 91 | font-weight: 700; 92 | border-radius: 40px; 93 | } 94 | 95 | /* PLAYLIST */ 96 | .playlist-container { 97 | height: 68vh; 98 | padding-top: 16px; 99 | margin: 10px; 100 | border-radius: 10px; 101 | background-color: #121212; 102 | } 103 | 104 | .playlist { 105 | margin: 24px; 106 | } 107 | 108 | .playlist #greeting { 109 | color: #fff; 110 | font-size: 32px; 111 | font-weight: 700; 112 | margin-bottom: 48px; 113 | } 114 | 115 | .playlist .session { 116 | color: #fff; 117 | font-size: 24px; 118 | font-weight: 700; 119 | } 120 | 121 | /* SCROLL */ 122 | .offer__scroll-container { 123 | max-height: 43vh; 124 | margin: 24px; 125 | overflow-y: auto; 126 | } 127 | 128 | .offer__scroll-container::-webkit-scrollbar { 129 | width: 1px; 130 | } 131 | 132 | .offer__scroll-container::-webkit-scrollbar-thumb { 133 | background-color: transparent; 134 | } 135 | /* FIM SCROLL */ 136 | 137 | .offer__list-item { 138 | display: grid; 139 | justify-items: center; 140 | grid-template-columns: 1fr 1fr 1fr 1fr 1fr; 141 | grid-gap: 16px; 142 | gap: 16px; 143 | margin-bottom: 16px; 144 | 145 | /* CODIGO COM JS CALCULANDO OS CARDS POR COLUNA */ 146 | display: grid; 147 | gap: 16px; 148 | grid-gap: 32px; 149 | margin: 0 auto; 150 | } 151 | 152 | .cards { 153 | position: relative; 154 | width: 220px; 155 | height: 200px; 156 | overflow: hidden; 157 | border-radius: 8px; 158 | } 159 | 160 | .cards span { 161 | padding: 16px; 162 | position: absolute; 163 | color: #fff; 164 | font-size: 24px; 165 | font-weight: 700; 166 | } 167 | 168 | /* COLOR CARDS */ 169 | .card1 { 170 | background-color: rgb(0, 100, 80); 171 | } 172 | .card2 { 173 | background-color: rgb(132, 0, 231); 174 | } 175 | .card3 { 176 | background: rgb(30, 50, 100); 177 | } 178 | .card4 { 179 | background: rgb(140, 25, 50); 180 | } 181 | .card5 { 182 | background: rgb(232, 17, 91); 183 | } 184 | .card6 { 185 | background: rgb(83, 122, 161); 186 | } 187 | .card7 { 188 | background: rgb(142, 102, 172); 189 | } 190 | .card8 { 191 | background: rgb(20, 138, 8); 192 | } 193 | .card9 { 194 | background: rgb(30, 50, 100); 195 | } 196 | .card10 { 197 | background: rgb(233, 20, 41); 198 | } 199 | .card11 { 200 | background: rgb(80, 55, 80); 201 | } 202 | .card12 { 203 | background: rgb(216, 64, 0); 204 | } 205 | .card13 { 206 | background: rgb(186, 93, 7); 207 | } 208 | .card14 { 209 | background: rgb(0, 30, 80); 210 | } 211 | .card15 { 212 | background: rgb(60, 30, 80); 213 | } 214 | /* FIM COLOR CARDS */ 215 | 216 | .offer__list-item img { 217 | position: absolute; 218 | right: 0; 219 | bottom: 0; 220 | height: auto; 221 | width: 107px; 222 | transform: rotate(25deg) translate(18%, -2%); 223 | } 224 | 225 | /* CARD ARTISTA */ 226 | 227 | .artist { 228 | --column-count: 5; 229 | --grid-gap: 24px; 230 | --min-container-width: 372px; 231 | } 232 | 233 | .hidden { 234 | display: none; 235 | } 236 | 237 | .grid-container { 238 | grid-gap:24px; 239 | display: grid; 240 | grid-template-columns: repeat(5, minmax(0, 1fr)); 241 | min-width: 767px; 242 | } 243 | 244 | .artist-card { 245 | background: #181818; 246 | border-radius: 8px; 247 | -ms-flex: 1; 248 | flex: 1; 249 | isolation: isolate; 250 | padding: 16px; 251 | position: relative; 252 | transition: background-color 0.3s ease; 253 | width: 100%; 254 | } 255 | 256 | .artist-card:hover { 257 | background-color: #252525; 258 | } 259 | 260 | .card-img { 261 | padding-bottom: 100%; 262 | position: relative; 263 | width: 100%; 264 | margin-bottom: 16px; 265 | } 266 | 267 | .artist-img { 268 | height: 100%; 269 | left: 0; 270 | position: absolute; 271 | top: 0; 272 | width: 100%; 273 | border-radius: 50%; 274 | } 275 | 276 | .card-text { 277 | display: flex; 278 | flex-direction: column; 279 | color: #fff; 280 | overflow: hidden; 281 | text-overflow: ellipsis; 282 | white-space: nowrap; 283 | min-height: 62px; 284 | } 285 | 286 | .card-text a { 287 | display: inline-block; 288 | max-width: 100%; 289 | vertical-align: middle; 290 | } 291 | 292 | .artist-name { 293 | box-sizing: border-box; 294 | margin-block: 0px; 295 | font-size: 16px; 296 | font-weight: 700; 297 | padding-block-end: 8px; 298 | } 299 | 300 | .artist-categorie { 301 | color: #6a6a6a; 302 | font-weight: 400; 303 | font-size: 0.875rem; 304 | } 305 | 306 | .play { 307 | position: relative; 308 | } 309 | 310 | .play .fa-play { 311 | position: absolute; 312 | right: 10px; 313 | top: 120px; 314 | padding: 18px; 315 | background-color: #1db954; 316 | border-radius: 100%; 317 | font-size: 14px; 318 | opacity: 0; 319 | transition: all ease 0.4s; 320 | } 321 | 322 | .artist-card:hover .play .fa-play { 323 | opacity: 1; 324 | transform: translateY(-20px); 325 | } 326 | 327 | .play .fa-play:hover { 328 | padding: 20px; 329 | cursor: pointer; 330 | } 331 | 332 | #result-artist { 333 | padding: 20px 40px; 334 | } 335 | /* FIM CARD ARTISTA */ -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-04/src/styles/media-queries.css: -------------------------------------------------------------------------------- 1 | @media screen and (max-width: 1015px) { 2 | .offer__list-item { 3 | grid-template-columns: 1fr 1fr; 4 | } 5 | } -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-04/src/styles/reset.css: -------------------------------------------------------------------------------- 1 | html, 2 | body, 3 | div, 4 | span, 5 | applet, 6 | object, 7 | iframe, 8 | h1, 9 | h2, 10 | h3, 11 | h4, 12 | h5, 13 | h6, 14 | p, 15 | blockquote, 16 | pre, 17 | a, 18 | abbr, 19 | acronym, 20 | address, 21 | big, 22 | cite, 23 | code, 24 | del, 25 | dfn, 26 | em, 27 | img, 28 | ins, 29 | kbd, 30 | q, 31 | s, 32 | samp, 33 | small, 34 | strike, 35 | strong, 36 | sub, 37 | sup, 38 | tt, 39 | var, 40 | b, 41 | u, 42 | i, 43 | center, 44 | dl, 45 | dt, 46 | dd, 47 | ol, 48 | ul, 49 | li, 50 | fieldset, 51 | form, 52 | label, 53 | legend, 54 | table, 55 | caption, 56 | tbody, 57 | tfoot, 58 | thead, 59 | tr, 60 | th, 61 | td, 62 | article, 63 | aside, 64 | canvas, 65 | details, 66 | embed, 67 | figure, 68 | figcaption, 69 | footer, 70 | header, 71 | hgroup, 72 | menu, 73 | nav, 74 | output, 75 | ruby, 76 | section, 77 | summary, 78 | time, 79 | mark, 80 | audio, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | vertical-align: baseline; 87 | } 88 | 89 | /* HTML5 display-role reset for older browsers */ 90 | article, 91 | aside, 92 | details, 93 | figcaption, 94 | figure, 95 | footer, 96 | header, 97 | hgroup, 98 | menu, 99 | nav, 100 | section { 101 | display: block; 102 | } 103 | 104 | body { 105 | line-height: 1; 106 | background: #000; 107 | font-family: var(--font-dm-sans); 108 | } 109 | 110 | ol, 111 | ul { 112 | list-style: none; 113 | } 114 | 115 | blockquote, 116 | q { 117 | quotes: none; 118 | } 119 | 120 | blockquote:before, 121 | blockquote:after, 122 | q:before, 123 | q:after { 124 | content: ""; 125 | content: none; 126 | } 127 | 128 | table { 129 | border-collapse: collapse; 130 | border-spacing: 0; 131 | } 132 | 133 | button { 134 | border: none; 135 | cursor: pointer; 136 | } -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-04/src/styles/sidebar-footer.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: #000; 3 | font-family: var(--font-dm-sans); 4 | } 5 | 6 | .sidebar{ 7 | position:fixed; 8 | top:0; 9 | left:0; 10 | bottom:0; 11 | padding:12px; 12 | width:300px; 13 | } 14 | 15 | .sidebar__navigation{ 16 | background-color: #121212; 17 | border-radius:8px; 18 | padding:16px 0 0 16px; 19 | } 20 | 21 | .logo{ 22 | background: #121212; 23 | display:flex; 24 | border-radius:8px ; 25 | padding:16px 0 0 16px; 26 | } 27 | 28 | .sidebar__navigation .logo img{ 29 | width:80px; 30 | } 31 | 32 | .sidebar nav ul{ 33 | margin-top: 20px; 34 | padding:0 20px 10px 20px; 35 | } 36 | 37 | .sidebar ul li{ 38 | padding: 10px 0; 39 | } 40 | 41 | .sidebar nav ul li a{ 42 | color: #b3b3b3; 43 | text-decoration: none; 44 | font-weight: 600; 45 | font-size: 14px; 46 | } 47 | 48 | .library{ 49 | background-color:#121212; 50 | border-radius:8px; 51 | display:flex; 52 | justify-content: space-between; 53 | flex-direction: column; 54 | padding:4px 8px; 55 | color:#b3b3b3; 56 | font-weight: 600; 57 | font-size:14px; 58 | margin-top: 10px; 59 | } 60 | 61 | .library .library__content{ 62 | display:flex; 63 | justify-content: space-between; 64 | } 65 | 66 | .library .library__button{ 67 | display:flex; 68 | margin-right: 10px; 69 | color:#b3b3b3; 70 | background-color: transparent; 71 | border:0px; 72 | font-size: 14px; 73 | font-weight: 700; 74 | text-align: center; 75 | text-decoration: none; 76 | text-transform: none; 77 | padding:20px 10px; 78 | } 79 | 80 | .library .library__button .fa{ 81 | font-size:20px; 82 | font-weight: 300; 83 | color:#b3b3b3; 84 | margin-right: 10px; 85 | padding-right:8px; 86 | } 87 | 88 | .library .library__content .fa-plus{ 89 | margin: 24px 10px; 90 | } 91 | 92 | .section-playlist{ 93 | display:flex; 94 | align-items: flex-start; 95 | justify-content: space-between; 96 | gap:20px; 97 | background-color: #242424; 98 | color:#b3b3b3; 99 | font-weight: 600; 100 | font-size: 14px; 101 | margin: 8px 0; 102 | padding:16px 20px; 103 | border-radius:10px; 104 | } 105 | 106 | .section-playlist .section-playlist__content{ 107 | display:flex; 108 | flex-direction: column; 109 | } 110 | 111 | .section-playlist__content .text{ 112 | padding-bottom:14px; 113 | color:#FFF; 114 | } 115 | 116 | .section-playlist__content .title{ 117 | font-weight: 700; 118 | } 119 | 120 | .section-playlist__content .subtitle{ 121 | font-weight: 500; 122 | font-size: 12px; 123 | } 124 | 125 | .section-playlist__content .section-playlist__button{ 126 | display: flex; 127 | justify-content: center; 128 | background-color: #FFF; 129 | color:#000; 130 | border-radius: 20px; 131 | font-size: 12px; 132 | font-weight: 700; 133 | text-decoration:none; 134 | text-transform: none; 135 | padding:10px; 136 | margin-top: 12px; 137 | border:0; 138 | width: 113px; 139 | } 140 | 141 | .sidebar .cookies{ 142 | margin:25px 20px; 143 | } 144 | 145 | .sidebar .cookies a{ 146 | color:#b3b3b3; 147 | font-weight: 500; 148 | font-size:10px; 149 | text-decoration: none; 150 | } 151 | 152 | .sidebar .cookies a:hover{ 153 | text-decoration: underline; 154 | } 155 | 156 | .languages .languages__button{ 157 | align-items: center; 158 | background-color: transparent; 159 | border: 1px solid #878787; 160 | color:#FFF; 161 | font-weight: bold; 162 | cursor:pointer; 163 | width: 170px; 164 | margin:8px; 165 | padding:8px; 166 | border-radius:20px; 167 | } 168 | 169 | .disclaimer-premium { 170 | position: fixed; 171 | bottom: 0; 172 | left: 0; 173 | right: 0; 174 | background: linear-gradient(to right, #ae2896, #509bf5); 175 | padding: 15px 40px; 176 | display: flex; 177 | justify-content: space-between; 178 | } 179 | .disclaimer-premium .text { 180 | flex-shrink: 0; 181 | } 182 | .disclaimer-premium .disclaimer-premium__title { 183 | color: #ffffff; 184 | text-transform: uppercase; 185 | font-weight: 400; 186 | font-size: 12px; 187 | margin-bottom: 10px; 188 | } 189 | 190 | .disclaimer-premium .disclaimer-premium__subtitle { 191 | color: #ffffff; 192 | font-size: 14px; 193 | font-weight: 500; 194 | } 195 | 196 | .disclaimer-premium button { 197 | background-color: #ffffff; 198 | color: #000000; 199 | font-size: 16px; 200 | font-weight: bold; 201 | padding: 14px 30px; 202 | border: 0px; 203 | border-radius: 40px; 204 | cursor: pointer; 205 | flex-shrink: 0; 206 | } 207 | -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-04/src/styles/vars.css: -------------------------------------------------------------------------------- 1 | :root{ 2 | /* FONT */ 3 | --font-dm-sans:"DM Sans", sans-serif; 4 | 5 | /* COLORS */ 6 | --bg-icon:#131313; 7 | --bg-arrow-color:rgba(0,0,0,7) 8 | } -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 13 | 14 | The page will reload when you make changes.\ 15 | You may also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 35 | 36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. 39 | 40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `npm run build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "spotify-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@fortawesome/fontawesome-svg-core": "^6.5.1", 7 | "@fortawesome/free-solid-svg-icons": "^6.5.1", 8 | "@fortawesome/react-fontawesome": "^0.2.0", 9 | "@testing-library/jest-dom": "^5.17.0", 10 | "@testing-library/react": "^13.4.0", 11 | "@testing-library/user-event": "^13.5.0", 12 | "react": "^18.2.0", 13 | "react-dom": "^18.2.0", 14 | "react-scripts": "5.0.1", 15 | "web-vitals": "^2.1.4" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "react-scripts build", 20 | "test": "react-scripts test", 21 | "eject": "react-scripts eject" 22 | }, 23 | "eslintConfig": { 24 | "extends": [ 25 | "react-app", 26 | "react-app/jest" 27 | ] 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-05/public/favicon.ico -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | Spotify React 14 | 15 | 16 | 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/src/App.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: #000; 3 | } -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/src/App.js: -------------------------------------------------------------------------------- 1 | import './App.css'; 2 | import Header from '../src/componentes/Header/Header'; 3 | import Sidebar from './componentes/Sidebar/Sidebar'; 4 | import Footer from './componentes/Footer/Footer'; 5 | import Main from './componentes/Main/Main'; 6 | 7 | function App() { 8 | return ( 9 |
10 | 11 |
12 |
13 |
15 | ); 16 | } 17 | 18 | export default App; 19 | -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/src/api-artists/artists.json: -------------------------------------------------------------------------------- 1 | { 2 | "artists": [ 3 | { 4 | "id": 1, 5 | "name": "Foo Fighters", 6 | "genre": "Rock", 7 | "urlImg": "https://i.scdn.co/image/ab67616100005174c884df599abc793c116cdf15" 8 | }, 9 | { 10 | "id": 2, 11 | "name": "Michael Jackson", 12 | "genre": "Pop", 13 | "urlImg": "https://i.scdn.co/image/ab676161000051740e08ea2c4d6789fbf5cbe0aa" 14 | }, 15 | { 16 | "id": 3, 17 | "name": "Emicida", 18 | "genre": "Hip Hop", 19 | "urlImg": "https://i.scdn.co/image/ab67616100005174908b4b4bc90e1518b68b4068" 20 | }, 21 | { 22 | "id": 4, 23 | "name": "Chitãozinho e Xororó", 24 | "genre": "Sertanejo", 25 | "urlImg": "https://i.scdn.co/image/ab676161000051744606c59411c57f7b49588be4" 26 | }, 27 | { 28 | "id": 5, 29 | "name": "Mc Coringa", 30 | "genre": "Funk", 31 | "urlImg": "https://i.scdn.co/image/ab67616d00001e02fe8f6dd361ad0f12b88c7f56" 32 | }, 33 | { 34 | "id": 6, 35 | "name": "Arlindo Cruz", 36 | "genre": "Samba", 37 | "urlImg": "https://i.scdn.co/image/ab67616100005174181873f93056642d7b340839" 38 | }, 39 | { 40 | "id": 7, 41 | "name": "Caetano Veloso", 42 | "genre": "MPB", 43 | "urlImg": "https://i.scdn.co/image/ab67616100005174e98de50f36cf1aa4bf047757" 44 | } 45 | ] 46 | } -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/src/assets/icons/logo-spotify.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-05/src/assets/icons/logo-spotify.png -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/src/assets/icons/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-05/src/assets/icons/search.png -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/src/assets/icons/small-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-05/src/assets/icons/small-left.png -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/src/assets/icons/small-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-05/src/assets/icons/small-right.png -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/src/assets/playlist/1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-05/src/assets/playlist/1.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/src/assets/playlist/10.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-05/src/assets/playlist/10.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/src/assets/playlist/11.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-05/src/assets/playlist/11.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/src/assets/playlist/12.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-05/src/assets/playlist/12.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/src/assets/playlist/13.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-05/src/assets/playlist/13.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/src/assets/playlist/14.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-05/src/assets/playlist/14.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/src/assets/playlist/15.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-05/src/assets/playlist/15.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/src/assets/playlist/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-05/src/assets/playlist/2.png -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/src/assets/playlist/3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-05/src/assets/playlist/3.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/src/assets/playlist/4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-05/src/assets/playlist/4.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/src/assets/playlist/5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-05/src/assets/playlist/5.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/src/assets/playlist/6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-05/src/assets/playlist/6.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/src/assets/playlist/7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-05/src/assets/playlist/7.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/src/assets/playlist/8.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-05/src/assets/playlist/8.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/src/assets/playlist/9.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoHarder/Imersao_Frontend_1/2e7b2a3214d387a0dc28d1045d700dba5c633010/spotify-imersao-alura-aula-05/src/assets/playlist/9.jpeg -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/src/componentes/Footer/Footer.css: -------------------------------------------------------------------------------- 1 | .disclaimer-premium { 2 | position: fixed; 3 | bottom: 0; 4 | left: 0; 5 | right: 0; 6 | background: linear-gradient(to right, #ae2896, #509bf5); 7 | padding: 0 40px; 8 | display: flex; 9 | justify-content: space-between; 10 | align-items: center; 11 | } 12 | 13 | .disclaimer-premium .disclaimer-premium__title { 14 | color: #ffffff; 15 | text-transform: uppercase; 16 | font-weight: 400; 17 | font-size: 16px; 18 | margin-bottom: 10px; 19 | } 20 | 21 | .disclaimer-premium .disclaimer-premium__subtitle { 22 | color: #ffffff; 23 | font-size: 16px; 24 | font-weight: 500; 25 | } 26 | 27 | .disclaimer-premium button { 28 | background-color: #ffffff; 29 | color: #000000; 30 | font-size: 16px; 31 | font-weight: bold; 32 | padding: 14px 30px; 33 | border: 0px; 34 | border-radius: 40px; 35 | cursor: pointer; 36 | } 37 | -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/src/componentes/Footer/Footer.js: -------------------------------------------------------------------------------- 1 | import './Footer.css'; 2 | 3 | const Footer = () => { 4 | return ( 5 | 17 | ) 18 | }; 19 | 20 | export default Footer; -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/src/componentes/Header/Header.css: -------------------------------------------------------------------------------- 1 | .header__navigation { 2 | display: flex; 3 | justify-content: space-between; 4 | align-items: center; 5 | padding: 16px; 6 | margin: 15px; 7 | border-radius: 8px; 8 | background-color: #121212; 9 | padding: 12px; 10 | max-width: 80vw; 11 | margin-left: 330px; 12 | margin-right: 15px; 13 | } 14 | 15 | .header__navigation .navigation { 16 | display: flex; 17 | justify-content: space-around; 18 | align-items: center; 19 | } 20 | 21 | .header__navigation .navigation .arrow-left { 22 | margin-right: 1.25rem; 23 | } 24 | 25 | .arrow-left, 26 | .arrow-right { 27 | display: flex; 28 | align-items: center; 29 | justify-content: center; 30 | width: 32px; 31 | height: 32px; 32 | background: #131313; 33 | background-color:var(--bg-arrow-color); 34 | border-radius: 50%; 35 | border: none; 36 | cursor: pointer; 37 | } 38 | 39 | .header__login { 40 | display: flex; 41 | align-items: center; 42 | } 43 | 44 | .header__search { 45 | display: flex; 46 | align-items: center; 47 | width: 364px; 48 | height: 48px; 49 | margin-left: 8px; 50 | background-color: #242424; 51 | border-radius: 500px; 52 | border: 1px solid transparent; 53 | } 54 | 55 | .header__search img { 56 | width: 16px; 57 | height: 16px; 58 | margin-left: 10px; 59 | } 60 | 61 | .header__search input { 62 | background: transparent; 63 | border: none; 64 | padding: 0px 100px 0 12px; 65 | color: #fff; 66 | text-overflow: ellipsis; 67 | overflow:hidden; 68 | white-space: nowrap; 69 | outline: none; 70 | } 71 | 72 | .header__login .subscribe { 73 | color: #a7a7a7; 74 | font-size: 16px; 75 | font-weight: 700; 76 | background-color: transparent; 77 | margin-right: 32px; 78 | border:none; 79 | } 80 | 81 | .header__login .login { 82 | width: 100px; 83 | height: 48px; 84 | color: #000; 85 | font-size: 16px; 86 | font-weight: 700; 87 | border-radius: 40px; 88 | border:none; 89 | } 90 | 91 | .header__search:hover { 92 | border: 1px solid #fff; 93 | } 94 | 95 | .header__login .subscribe:hover { 96 | transform: scale(1.04); 97 | color: #fff; 98 | } 99 | 100 | .header__login .login:hover { 101 | transform: scale(1.04); 102 | } -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/src/componentes/Header/Header.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Header.css'; 3 | import smallRight from '../../assets/icons/small-right.png'; 4 | import smallLeft from '../../assets/icons/small-left.png'; 5 | import search from '../../assets/icons/search.png'; 6 | 7 | const Header = () => { 8 | return ( 9 | 34 | ) 35 | }; 36 | 37 | export default Header; 38 | -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/src/componentes/Main/Main.css: -------------------------------------------------------------------------------- 1 | .playlist-container { 2 | height: 68vh; 3 | padding-top: 16px; 4 | margin: 10px; 5 | border-radius: 10px; 6 | background-color: #121212; 7 | max-width: 80vw; 8 | margin-left: 330px; 9 | margin-right: 15px; 10 | } 11 | 12 | .playlist { 13 | margin: 24px; 14 | } 15 | 16 | .playlist #greeting { 17 | color: #fff; 18 | font-size: 32px; 19 | font-weight: 700; 20 | margin-bottom: 48px; 21 | } 22 | 23 | .playlist .session { 24 | color: #fff; 25 | font-size: 24px; 26 | font-weight: 700; 27 | } 28 | 29 | /* SCROLL */ 30 | .offer__scroll-container { 31 | max-height: 43vh; 32 | margin: 24px; 33 | overflow-y: auto; 34 | } 35 | 36 | .offer__scroll-container::-webkit-scrollbar { 37 | width: 1px; 38 | } 39 | 40 | .offer__scroll-container::-webkit-scrollbar-thumb { 41 | background-color: transparent; 42 | } 43 | /* FIM SCROLL */ 44 | 45 | .offer__list-item { 46 | display: grid; 47 | justify-items: center; 48 | grid-template-columns: 1fr 1fr 1fr 1fr 1fr; 49 | grid-gap: 16px; 50 | gap: 16px; 51 | margin-bottom: 16px; 52 | 53 | /* CODIGO COM JS CALCULANDO OS CARDS POR COLUNA */ 54 | display: grid; 55 | gap: 16px; 56 | grid-gap: 32px; 57 | margin: 0 auto; 58 | } 59 | 60 | .cards { 61 | position: relative; 62 | width: 220px; 63 | height: 200px; 64 | overflow: hidden; 65 | border-radius: 8px; 66 | } 67 | 68 | .cards span { 69 | padding: 16px; 70 | position: absolute; 71 | color: #fff; 72 | font-size: 24px; 73 | font-weight: 700; 74 | } 75 | 76 | /* COLOR CARDS */ 77 | .card1 { 78 | background-color: rgb(0, 100, 80); 79 | } 80 | .card2 { 81 | background-color: rgb(132, 0, 231); 82 | } 83 | .card3 { 84 | background: rgb(30, 50, 100); 85 | } 86 | .card4 { 87 | background: rgb(140, 25, 50); 88 | } 89 | .card5 { 90 | background: rgb(232, 17, 91); 91 | } 92 | .card6 { 93 | background: rgb(83, 122, 161); 94 | } 95 | .card7 { 96 | background: rgb(142, 102, 172); 97 | } 98 | .card8 { 99 | background: rgb(20, 138, 8); 100 | } 101 | .card9 { 102 | background: rgb(30, 50, 100); 103 | } 104 | .card10 { 105 | background: rgb(233, 20, 41); 106 | } 107 | .card11 { 108 | background: rgb(80, 55, 80); 109 | } 110 | .card12 { 111 | background: rgb(216, 64, 0); 112 | } 113 | .card13 { 114 | background: rgb(186, 93, 7); 115 | } 116 | .card14 { 117 | background: rgb(0, 30, 80); 118 | } 119 | .card15 { 120 | background: rgb(60, 30, 80); 121 | } 122 | /* FIM COLOR CARDS */ 123 | 124 | .offer__list-item img { 125 | position: absolute; 126 | right: 0; 127 | bottom: 0; 128 | height: auto; 129 | width: 107px; 130 | transform: rotate(25deg) translate(18%, -2%); 131 | } 132 | 133 | /* CARD ARTISTA */ 134 | 135 | .artist { 136 | --column-count: 5; 137 | --grid-gap: 24px; 138 | --min-container-width: 372px; 139 | } 140 | 141 | .hidden { 142 | display: none; 143 | } 144 | 145 | .grid-container { 146 | grid-gap:24px; 147 | display: grid; 148 | grid-template-columns: repeat(5, minmax(0, 1fr)); 149 | min-width: 767px; 150 | } 151 | 152 | .artist-card { 153 | background: #181818; 154 | border-radius: 8px; 155 | -ms-flex: 1; 156 | flex: 1; 157 | isolation: isolate; 158 | padding: 16px; 159 | position: relative; 160 | transition: background-color 0.3s ease; 161 | width: 100%; 162 | } 163 | 164 | .artist-card:hover { 165 | background-color: #252525; 166 | } 167 | 168 | .card-img { 169 | padding-bottom: 100%; 170 | position: relative; 171 | width: 100%; 172 | margin-bottom: 16px; 173 | } 174 | 175 | .artist-img { 176 | height: 100%; 177 | left: 0; 178 | position: absolute; 179 | top: 0; 180 | width: 100%; 181 | border-radius: 50%; 182 | } 183 | 184 | .card-text { 185 | display: flex; 186 | flex-direction: column; 187 | color: #fff; 188 | overflow: hidden; 189 | text-overflow: ellipsis; 190 | white-space: nowrap; 191 | min-height: 62px; 192 | } 193 | 194 | .card-text a { 195 | display: inline-block; 196 | max-width: 100%; 197 | vertical-align: middle; 198 | } 199 | 200 | .artist-name { 201 | box-sizing: border-box; 202 | margin-block: 0px; 203 | font-size: 16px; 204 | font-weight: 700; 205 | padding-block-end: 8px; 206 | } 207 | 208 | .artist-categorie { 209 | color: #6a6a6a; 210 | font-weight: 400; 211 | font-size: 0.875rem; 212 | } 213 | 214 | .play { 215 | position: relative; 216 | } 217 | 218 | .play .fa-play { 219 | position: absolute; 220 | right: 10px; 221 | top: 120px; 222 | padding: 18px; 223 | background-color: #1db954; 224 | border-radius: 100%; 225 | font-size: 14px; 226 | opacity: 0; 227 | transition: all ease 0.4s; 228 | } 229 | 230 | .artist-card:hover .play .fa-play { 231 | opacity: 1; 232 | transform: translateY(-20px); 233 | } 234 | 235 | .play .fa-play:hover { 236 | padding: 20px; 237 | cursor: pointer; 238 | } 239 | 240 | #result-artist { 241 | padding: 20px 40px; 242 | } 243 | /* FIM CARD ARTISTA */ -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/src/componentes/Main/Main.js: -------------------------------------------------------------------------------- 1 | import './Main.css'; 2 | 3 | import Playlist1 from '../../assets/playlist/1.jpeg'; 4 | import Playlist2 from '../../assets/playlist/2.png'; 5 | import Playlist3 from '../../assets/playlist/3.jpeg'; 6 | import Playlist4 from '../../assets/playlist/4.jpeg'; 7 | import Playlist5 from '../../assets/playlist/5.jpeg'; 8 | import Playlist6 from '../../assets/playlist/6.jpeg'; 9 | import Playlist7 from '../../assets/playlist/7.jpeg'; 10 | import Playlist8 from '../../assets/playlist/8.jpeg'; 11 | import Playlist9 from '../../assets/playlist/9.jpeg'; 12 | import Playlist10 from '../../assets/playlist/10.jpeg'; 13 | import Playlist11 from '../../assets/playlist/11.jpeg'; 14 | import Playlist12 from '../../assets/playlist/12.jpeg'; 15 | import Playlist13 from '../../assets/playlist/13.jpeg'; 16 | import Playlist14 from '../../assets/playlist/14.jpeg'; 17 | import Playlist15 from '../../assets/playlist/15.jpeg'; 18 | 19 | const Main = () => { 20 | return ( 21 |
22 | 124 |
125 |
126 |
127 |
128 | 129 |
130 | 131 |
132 |
133 | 139 |
140 |
141 |
142 |
143 | ) 144 | }; 145 | 146 | export default Main; -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/src/componentes/Sidebar/Sidebar.css: -------------------------------------------------------------------------------- 1 | .sidebar{ 2 | position:fixed; 3 | top:0; 4 | left:0; 5 | bottom:0; 6 | padding:12px; 7 | width:300px; 8 | } 9 | 10 | .sidebar__navigation{ 11 | background-color: #121212; 12 | border-radius:8px; 13 | padding:16px 0 0 16px; 14 | } 15 | 16 | .logo{ 17 | background: #121212; 18 | display:flex; 19 | border-radius:8px ; 20 | padding:16px 0 0 16px; 21 | } 22 | 23 | .sidebar__navigation .logo img{ 24 | width:80px; 25 | } 26 | 27 | .sidebar nav ul{ 28 | margin-top: 20px; 29 | padding:0 20px 10px 20px; 30 | } 31 | 32 | .sidebar ul li{ 33 | padding: 10px 0; 34 | list-style: none; 35 | } 36 | 37 | .sidebar nav ul li a{ 38 | color: #b3b3b3; 39 | text-decoration: none; 40 | font-weight: 600; 41 | font-size: 14px; 42 | } 43 | 44 | .sidebar nav ul li a span{ 45 | margin-right: 10px; 46 | } 47 | 48 | .library{ 49 | background-color:#121212; 50 | border-radius:8px; 51 | display:flex; 52 | justify-content: space-between; 53 | flex-direction: column; 54 | padding:4px 8px; 55 | color:#b3b3b3; 56 | font-weight: 600; 57 | font-size:14px; 58 | margin-top: 10px; 59 | } 60 | 61 | .library .library__content{ 62 | display:flex; 63 | justify-content: space-between; 64 | } 65 | 66 | .library .library__button{ 67 | display:flex; 68 | margin-right: 10px; 69 | color:#b3b3b3; 70 | background-color: transparent; 71 | border:0px; 72 | font-size: 14px; 73 | font-weight: 700; 74 | text-align: center; 75 | text-decoration: none; 76 | text-transform: none; 77 | padding:20px 10px; 78 | } 79 | 80 | .library .library__button .fa{ 81 | font-size:20px; 82 | font-weight: 300; 83 | color:#b3b3b3; 84 | margin-right: 10px; 85 | padding-right:8px; 86 | } 87 | 88 | .library .library__content .fa-plus{ 89 | margin: 24px 10px; 90 | } 91 | 92 | .section-playlist{ 93 | display:flex; 94 | align-items: flex-start; 95 | justify-content: space-between; 96 | gap:20px; 97 | background-color: #242424; 98 | color:#b3b3b3; 99 | font-weight: 600; 100 | font-size: 14px; 101 | margin: 8px 0; 102 | padding:16px 20px; 103 | border-radius:10px; 104 | } 105 | 106 | .section-playlist .section-playlist__content{ 107 | display:flex; 108 | flex-direction: column; 109 | } 110 | 111 | .section-playlist__content .text{ 112 | padding-bottom:14px; 113 | color:#FFF; 114 | } 115 | 116 | .section-playlist__content .title{ 117 | font-weight: 700; 118 | } 119 | 120 | .section-playlist__content .subtitle{ 121 | font-weight: 500; 122 | font-size: 12px; 123 | } 124 | 125 | .section-playlist__content .section-playlist__button{ 126 | display: flex; 127 | justify-content: center; 128 | background-color: #FFF; 129 | color:#000; 130 | border-radius: 20px; 131 | font-size: 12px; 132 | font-weight: 700; 133 | text-decoration:none; 134 | text-transform: none; 135 | padding:10px; 136 | margin-top: 12px; 137 | border:0; 138 | width: 113px; 139 | } 140 | 141 | .sidebar .cookies{ 142 | margin:25px 20px; 143 | } 144 | 145 | .sidebar .cookies a{ 146 | color:#b3b3b3; 147 | font-weight: 500; 148 | font-size:10px; 149 | text-decoration: none; 150 | } 151 | 152 | .sidebar .cookies a:hover{ 153 | text-decoration: underline; 154 | } 155 | 156 | .languages .languages__button{ 157 | align-items: center; 158 | background-color: transparent; 159 | border: 1px solid #878787; 160 | color:#FFF; 161 | font-weight: bold; 162 | cursor:pointer; 163 | width: 180px; 164 | margin:8px; 165 | padding:8px; 166 | border-radius:20px; 167 | } 168 | 169 | .languages .languages__button span{ 170 | margin-right: 10px; 171 | } 172 | -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/src/componentes/Sidebar/Sidebar.js: -------------------------------------------------------------------------------- 1 | import './Sidebar.css'; 2 | import logoSpotify from '../../assets/icons/logo-spotify.png'; 3 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; 4 | import { faHome, faSearch, faGlobe } from '@fortawesome/free-solid-svg-icons'; 5 | 6 | const Sidebar = () => { 7 | return ( 8 |
9 | 30 |
31 |
32 | 36 | 37 |
38 |
39 |
40 | Crie sua primeira playlist 41 | É fácil, vamos te ajudar. 42 | 45 |
46 |
47 |
48 | Cookies 49 |
50 |
51 | 55 |
56 |
57 |
58 | ) 59 | }; 60 | 61 | export default Sidebar; -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /spotify-imersao-alura-aula-05/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | --------------------------------------------------------------------------------