├── assets └── images │ ├── bg.jpg │ ├── logo.png │ ├── favicon.ico │ ├── filmes.png │ └── inicio.png ├── script.js ├── index.html ├── README.md ├── src └── pages │ └── filmes │ ├── index.html │ ├── script.js │ └── style.css ├── style.css └── dados.js /assets/images/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/agleicesousa/imersao-alura/HEAD/assets/images/bg.jpg -------------------------------------------------------------------------------- /assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/agleicesousa/imersao-alura/HEAD/assets/images/logo.png -------------------------------------------------------------------------------- /assets/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/agleicesousa/imersao-alura/HEAD/assets/images/favicon.ico -------------------------------------------------------------------------------- /assets/images/filmes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/agleicesousa/imersao-alura/HEAD/assets/images/filmes.png -------------------------------------------------------------------------------- /assets/images/inicio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/agleicesousa/imersao-alura/HEAD/assets/images/inicio.png -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | // Script para inserir o ano atual no rodapé 2 | document.addEventListener('DOMContentLoaded', () => { 3 | document.getElementById('year').textContent = new Date().getFullYear(); 4 | }); 5 | 6 | // Script para mostrar alertas personalizados 7 | const alertButtons = document.querySelectorAll('.alertButton'); 8 | const authButtons = document.querySelectorAll('.auth-buttons button'); 9 | const searchButton = document.getElementById('newsletterButton'); 10 | const allButtons = [...alertButtons, ...authButtons, searchButton]; 11 | 12 | allButtons.forEach(button => { 13 | button.addEventListener('click', function () { 14 | const message = this.getAttribute('data-message'); 15 | alert(message); 16 | }); 17 | }); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | CinemaFlix 11 | 12 | 13 | 14 | 15 |

16 |

17 |

18 |

CinemaFlix

19 |

20 | 26 |

27 | 28 | 29 |

30 |

31 | 32 |

33 |

34 |

Maratonas Sem Fim, Emoções Inigualáveis!

35 |

Entre no universo do entretenimento sem limites e viva aventuras incríveis.

36 |

Inscreva-se agora e seja o primeiro a receber novidades e surpresas exclusivas no seu e-mail!

37 |

38 | 39 | 40 |

41 |

42 |

43 | 44 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CinemaFlix 2 | 3 | Bem-vindo ao CinemaFlix, um projeto desenvolvido durante a Imersão DEV da Alura com Gemini. O CinemaFlix é uma plataforma de streaming fictícia que permite aos usuários explorar e descobrir filmes, séries, animes e documentários. 4 | 5 | ## 🚀 Funcionalidades 6 | 7 | - **Interface de Usuário Atraente**: Design intuitivo e responsivo com uma página inicial cativante. 8 | - **Sistema de Pesquisa e Filtro**: Permite a busca e filtragem de conteúdo por gênero. 9 | - **Exibição Dinâmica de Conteúdo**: Visualização de filmes e séries em uma grade interativa. 10 | 11 | ## 🛠 Tecnologias Utilizadas 12 | 13 | - **HTML**: Estrutura da página. 14 | - **CSS**: Estilização e layout. 15 | - **JavaScript**: Funcionalidade dinâmica e interação com o usuário. 16 | - **Font Awesome**: Ícones sociais e outros ícones gráficos. 17 | 18 | ## 📁 Estrutura do Projeto 19 | 20 | ```bash 21 | /project-root 22 | │ 23 | ├── assets 24 | │ └── images 25 | │ └── # Imagens utilizadas no projeto. 26 | │ 27 | ├── src 28 | │ └── pages 29 | │ └── filmes 30 | │ ├── index.html 31 | │ │ └── # Página de streaming com funcionalidades de busca e filtro. 32 | │ │ 33 | │ ├── script.js 34 | │ │ └── # Script para funcionalidades dinâmicas da página de streaming. 35 | │ │ 36 | │ └── style.css 37 | │ └── # Arquivo de estilos para a página com a lista Filmes. 38 | │ 39 | ├── index.html 40 | │ └── # Página inicial da plataforma CinemaFlix. 41 | │ 42 | ├── style.css 43 | │ └── # Arquivo de estilos para a página inicial da plataforma. 44 | │ 45 | ├── script.js 46 | │ └── # Script para funcionalidades dinâmicas da página inicial. 47 | | 48 | ├── dados.js 49 | │ └── # Dados dos filmes armazenados em um array JavaScript. 50 | ``` 51 | 52 | ## 📑 Comentários no Código 53 | 54 | Os arquivos de estilo e script incluem comentários que explicam as principais seções e funcionalidades do código, facilitando a compreensão e manutenção do projeto. 55 | 56 | ## 💻 Como Rodar o Projeto 57 | 58 | 1. Clone o repositório: 59 | 60 | ```bash 61 | git clone https://github.com/agleicesousa/imersao-alura.git 62 | ``` 63 | 64 | 2. Navegue até o diretório do projeto: 65 | 66 | ```bash 67 | cd imersao-alura 68 | ``` 69 | 70 | 3. Abra o arquivo `index.html` em seu navegador para visualizar a página inicial. 71 | 72 | ## 📸 Capturas de Tela 73 | 74 | Aqui estão algumas capturas de tela do projeto: 75 | 76 | ![Página Inicial](assets/images/inicio.png) 77 | ![Página de Streaming](assets/images/filmes.png) 78 | 79 | ## 📧 Contato 80 | 81 | Se você tiver alguma dúvida ou feedback, sinta-se à vontade para me contatar: 82 | 83 | - Email: agleicesousa98@gmail.com 84 | - LinkedIn: [Agleice Sousa](https://www.linkedin.com/in/agleice-sousa) 85 | 86 | ## 🎓 Agradecimentos 87 | 88 | Um agradecimento especial à equipe da Alura e ao Gemini pela excelente orientação durante a imersão. Foi uma experiência incrível! 89 | 90 | ## 🔗 Links Úteis 91 | 92 | - [Imersão DEV da Alura](https://www.alura.com.br/imersao-dev-google-gemini) 93 | -------------------------------------------------------------------------------- /src/pages/filmes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | CinemaFlix 12 | 13 | 14 | 15 |

16 | 17 |

18 |

19 |

CinemaFlix

20 |

21 | 27 |

28 | 29 | 30 |

31 |

32 | 33 |

34 | 35 |

36 |

37 | 38 | 39 | 43 |

44 |

45 |

46 |

47 | 48 |

49 |

50 | 51 | 86 | 87 | 88 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /src/pages/filmes/script.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', () => { 2 | // Seleciona os elementos da página 3 | const searchButton = document.getElementById('search-button'); // Botão de busca 4 | const searchInput = document.getElementById('search-input'); // Campo de input da busca 5 | const moviesSection = document.querySelector('.movie-grid'); // Seção onde os filmes serão exibidos 6 | const genreFilter = document.getElementById('genre-filter'); // Filtro de gênero 7 | const noResultsMessage = document.getElementById('no-results-message'); // Mensagem de sem resultados 8 | 9 | let filteredFilms = filmes; // Inicializa a variável com a lista de filmes 10 | 11 | // Cria um card para exibir as informações de um filme 12 | function createMovieCard(film) { 13 | const movieCard = document.createElement('div'); 14 | movieCard.className = 'movie-card'; 15 | movieCard.innerHTML = ` 16 |

17 |

18 |

${film.nome}

19 |

${film.ano} - ${film.avaliacao} / 10

20 |

21 | `; 22 | return movieCard; 23 | } 24 | 25 | // Exibe os filmes na seção de grid e gerencia a mensagem de sem resultados 26 | function displayMovies(films) { 27 | moviesSection.innerHTML = ''; // Limpa a seção de filmes 28 | if (films.length > 0) { 29 | films.forEach(film => { 30 | const movieCard = createMovieCard(film); 31 | moviesSection.appendChild(movieCard); 32 | }); 33 | noResultsMessage.style.display = 'none'; // Esconde a mensagem de sem resultados 34 | } else { 35 | noResultsMessage.style.display = 'block'; // Mostra a mensagem de sem resultados 36 | noResultsMessage.textContent = 'Nenhum resultado encontrado'; // Define o texto da mensagem 37 | } 38 | } 39 | 40 | // Filtra filmes com base na busca do usuário 41 | function searchMovies(query) { 42 | const lowerQuery = query.toLowerCase(); // Converte a busca para letras minúsculas 43 | filteredFilms = filmes.filter(film => 44 | film.nome.toLowerCase().includes(lowerQuery) // Filtra os filmes pelo nome 45 | ); 46 | displayMovies(filteredFilms); // Exibe os filmes filtrados 47 | } 48 | 49 | // Evento de clique no botão de busca 50 | searchButton.addEventListener('click', () => { 51 | const query = searchInput.value; // Obtém o valor do campo de busca 52 | searchMovies(query); // Executa a busca 53 | }); 54 | 55 | // Evento de pressionar Enter no campo de busca 56 | searchInput.addEventListener('keypress', (e) => { 57 | if (e.key === 'Enter') { 58 | searchButton.click(); // Simula um clique no botão de busca 59 | } 60 | }); 61 | 62 | // Filtra filmes por gênero 63 | function filterByGenre(genre) { 64 | if (genre === 'all') { 65 | filteredFilms = filmes; // Exibe todos os filmes se "Todos" for selecionado 66 | } else { 67 | filteredFilms = filmes.filter(film => film.categorias.includes(genre)); // Filtra por categoria 68 | } 69 | displayMovies(filteredFilms); // Exibe os filmes filtrados 70 | } 71 | 72 | // Preenche o filtro de gêneros com as categorias disponíveis 73 | function populateGenreFilter(films) { 74 | const genres = new Set(); // Usa um Set para garantir que não haja categorias duplicadas 75 | films.forEach(film => { 76 | film.categorias.forEach(category => genres.add(category)); // Adiciona as categorias ao Set 77 | }); 78 | genres.forEach(genre => { 79 | const option = document.createElement('option'); 80 | option.value = genre; 81 | option.textContent = genre.charAt(0).toUpperCase() + genre.slice(1); // Capitaliza o gênero 82 | genreFilter.appendChild(option); // Adiciona a opção ao filtro 83 | }); 84 | 85 | // Adiciona evento ao filtro para filtrar filmes quando o usuário seleciona uma categoria 86 | genreFilter.addEventListener('change', (e) => { 87 | filterByGenre(e.target.value); 88 | }); 89 | 90 | // Adiciona uma opção "Todos" no início da lista de gêneros 91 | const allOption = document.createElement('option'); 92 | allOption.value = 'all'; 93 | allOption.textContent = 'Todos'; 94 | genreFilter.insertBefore(allOption, genreFilter.firstChild); // Coloca a opção "Todos" como a primeira 95 | } 96 | 97 | // Script para inserir o ano atual no rodapé 98 | document.getElementById('year').textContent = new Date().getFullYear(); 99 | 100 | // Adiciona eventos de clique para botões com data-message 101 | const alertButtons = document.querySelectorAll('[data-message]'); // Seleciona botões com data-message 102 | const authButtons = document.querySelectorAll('.auth-buttons button'); // Seleciona botões de autenticação 103 | const allButtons = [...alertButtons, ...authButtons, document.getElementById('search-button'), document.getElementById('newsletterButton')]; 104 | 105 | allButtons.forEach(button => { 106 | button.addEventListener('click', function () { 107 | const message = this.getAttribute('data-message'); 108 | if (message) { // Verifica se a mensagem existe 109 | alert(message); // Exibe a mensagem de alerta 110 | } 111 | }); 112 | }); 113 | 114 | // Inicializa o filtro de gêneros 115 | populateGenreFilter(filmes); 116 | 117 | // Exibe todos os filmes ao carregar a página 118 | displayMovies(filmes); 119 | }); -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* Importa as fontes do Google Fonts */ 2 | @import url('https://fonts.googleapis.com/css2?family=Martel+Sans:wght@600&family=Poppins:wght@300;400;700&display=swap'); 3 | 4 | /* Remove margens e espaçamentos padrão e define fonte e comportamento de rolagem suave */ 5 | * { 6 | padding: 0; 7 | margin: 0; 8 | box-sizing: border-box; 9 | font-family: 'Poppins', sans-serif; 10 | scroll-behavior: smooth; 11 | } 12 | 13 | /* Estilo do corpo da página */ 14 | body { 15 | background-color: #121212; 16 | color: white; 17 | line-height: 1.6; 18 | overflow-x: hidden; 19 | display: flex; 20 | flex-direction: column; 21 | min-height: 100vh; 22 | } 23 | 24 | /* Estilo do cabeçalho fixo na parte superior da página */ 25 | header { 26 | position: fixed; 27 | top: 0; 28 | left: 0; 29 | width: 100%; 30 | background-color: rgba(0, 0, 0, 0.9); 31 | padding: 15px 30px; 32 | display: flex; 33 | justify-content: space-between; 34 | align-items: center; 35 | z-index: 1000; 36 | border-bottom: 1px solid #333; 37 | height: 80px; 38 | } 39 | 40 | /* Container do logo e nome, com transição e comportamento ao passar o cursor */ 41 | header .logo-container { 42 | display: flex; 43 | align-items: center; 44 | gap: 5px; 45 | transition: filter 0.3s; 46 | cursor: pointer; 47 | } 48 | 49 | /* Estilo da imagem do logo */ 50 | header .logo-container img { 51 | width: 100px; 52 | } 53 | 54 | /* Estilo do título no logo */ 55 | header .logo-container h1 { 56 | font-size: 24px; 57 | font-weight: 600; 58 | margin-bottom: 0; 59 | color: #e0e0e0; 60 | } 61 | 62 | /* Navegação centralizada no cabeçalho */ 63 | header nav { 64 | flex-grow: 1; 65 | display: flex; 66 | justify-content: center; 67 | } 68 | 69 | /* Links de navegação com animação ao passar o mouse */ 70 | header nav a { 71 | color: #e0e0e0; 72 | text-decoration: none; 73 | margin: 0 20px; 74 | font-size: 16px; 75 | font-weight: 500; 76 | transition: color 0.3s, border-bottom 0.3s; 77 | padding-bottom: 8px; 78 | } 79 | 80 | /* Estilo para link ativo */ 81 | header nav a.active { 82 | color: #e50914; 83 | border-bottom: 2px solid #e50914; 84 | } 85 | 86 | /* Alteração da cor ao passar o mouse sobre o link */ 87 | header nav a:hover { 88 | color: #fff; 89 | } 90 | 91 | /* Botões de autenticação (login/cadastro) */ 92 | header .auth-buttons { 93 | display: flex; 94 | gap: 15px; 95 | } 96 | 97 | /* Estilo dos botões de login/cadastro */ 98 | header .auth-buttons .btn { 99 | font-size: 14px; 100 | padding: 10px 20px; 101 | border-radius: 30px; 102 | border: none; 103 | cursor: pointer; 104 | } 105 | 106 | /* Botão branco */ 107 | header .auth-buttons .btn-white { 108 | background-color: #fff; 109 | color: #000; 110 | } 111 | 112 | /* Botão vermelho */ 113 | header .auth-buttons .btn-red { 114 | background-color: #e50914; 115 | color: #fff; 116 | } 117 | 118 | /* Estilo principal da seção central */ 119 | .main { 120 | flex: 1; 121 | display: flex; 122 | justify-content: center; 123 | align-items: center; 124 | padding: 70px 20px 20px; 125 | background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("assets/images/bg.jpg"); 126 | background-position: center; 127 | background-size: cover; 128 | background-repeat: no-repeat; 129 | } 130 | 131 | /* Centralização da hero section */ 132 | .hero { 133 | text-align: center; 134 | } 135 | 136 | /* Estilo do título principal na hero */ 137 | .hero h1 { 138 | font-family: 'Poppins', sans-serif; 139 | font-weight: 700; 140 | font-size: 44px; 141 | line-height: 1.2; 142 | margin-bottom: 15px; 143 | color: #f5f5f5; 144 | text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8); 145 | } 146 | 147 | /* Estilo dos parágrafos na hero */ 148 | .hero p { 149 | font-size: 18px; 150 | margin-bottom: 15px; 151 | color: #e0e0e0; 152 | line-height: 1.4; 153 | } 154 | 155 | /* Estilo dos botões na hero */ 156 | .hero-buttons { 157 | display: flex; 158 | align-items: center; 159 | justify-content: center; 160 | gap: 15px; 161 | flex-wrap: wrap; 162 | margin-top: 20px; 163 | } 164 | 165 | /* Estilo básico dos botões */ 166 | .btn { 167 | padding: 10px 25px; 168 | font-weight: 500; 169 | color: white; 170 | background-color: rgba(255, 255, 255, 0.1); 171 | border-radius: 30px; 172 | border: 2px solid white; 173 | cursor: pointer; 174 | transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease; 175 | font-size: 14px; 176 | display: inline-flex; 177 | align-items: center; 178 | justify-content: center; 179 | } 180 | 181 | /* Estilo do botão vermelho */ 182 | .btn-red { 183 | background-color: #e50914; 184 | color: white; 185 | padding: 12px 30px; 186 | font-size: 16px; 187 | border-radius: 30px; 188 | font-weight: 600; 189 | border: none; 190 | } 191 | 192 | /* Animação ao passar o mouse no botão vermelho */ 193 | .btn-red:hover { 194 | background-color: #b20710; 195 | transform: scale(1.05); 196 | } 197 | 198 | /* Estilo dos inputs na seção principal */ 199 | .main input { 200 | padding: 10px 18px; 201 | color: white; 202 | font-size: 16px; 203 | border-radius: 30px; 204 | background-color: rgba(255, 255, 255, 0.2); 205 | border: 2px solid rgba(255, 255, 255, 0.2); 206 | transition: border-color 0.3s ease; 207 | max-width: 300px; 208 | outline: none; 209 | } 210 | 211 | /* Placeholder dos inputs */ 212 | .main input::placeholder { 213 | color: rgba(255, 255, 255, 0.7); 214 | } 215 | 216 | /* Alteração da borda ao focar no input */ 217 | .main input:focus { 218 | border-color: white; 219 | } 220 | 221 | /* Estilo da grade de filmes */ 222 | .movie-grid { 223 | display: flex; 224 | flex-wrap: wrap; 225 | justify-content: center; 226 | gap: 30px; 227 | margin-top: 20px; 228 | } 229 | 230 | /* Estilo dos cartões de filmes */ 231 | .movie-card { 232 | position: relative; 233 | width: 220px; 234 | color: #e0e0e0; 235 | overflow: hidden; 236 | border-radius: 8px; 237 | transition: transform 0.3s; 238 | cursor: pointer; 239 | } 240 | 241 | /* Estilo das imagens dos filmes */ 242 | .movie-card img { 243 | width: 100%; 244 | height: 320px; 245 | object-fit: cover; 246 | border-radius: 8px; 247 | transition: opacity 0.3s; 248 | } 249 | 250 | /* Animação ao passar o mouse sobre a imagem */ 251 | .movie-card:hover img { 252 | opacity: 0.7; 253 | } 254 | 255 | /* Informações do filme */ 256 | .movie-card .info { 257 | text-align: center; 258 | padding: 10px; 259 | } 260 | 261 | /* Título do filme */ 262 | .movie-card h3 { 263 | font-size: 18px; 264 | margin: 10px 0; 265 | } 266 | 267 | /* Avaliação do filme */ 268 | .movie-card p { 269 | font-size: 16px; 270 | } 271 | 272 | /* Mensagem de resultados não encontrados */ 273 | #no-results-message { 274 | font-size: 18px; 275 | font-weight: 600; 276 | margin-top: 20px; 277 | } 278 | 279 | /* Estilo do rodapé */ 280 | footer { 281 | background-color: rgba(0, 0, 0, 0.9); 282 | color: #e0e0e0; 283 | text-align: center; 284 | padding: 10px; 285 | position: relative; 286 | width: 100%; 287 | margin-top: auto; 288 | } 289 | 290 | /* Estilo dos parágrafos no rodapé */ 291 | footer p { 292 | margin: 0; 293 | } 294 | 295 | /* Estilo dos links no rodapé */ 296 | footer a { 297 | color: #e0e0e0; 298 | text-decoration: none; 299 | transition: color 0.3s; 300 | } -------------------------------------------------------------------------------- /dados.js: -------------------------------------------------------------------------------- 1 | let filmes = [ 2 | { 3 | nome: "A Rede Social", 4 | ano: 2010, 5 | categorias: ["Drama", "Biografia"], 6 | avaliacao: 7.7, 7 | capa: "https://br.web.img3.acsta.net/medias/nmedia/18/87/32/90/19874370.jpg", 8 | }, 9 | { 10 | nome: "O Senhor dos Anéis: A Sociedade do Anel", 11 | ano: 2001, 12 | categorias: ["Aventura", "Fantasia"], 13 | avaliacao: 8.8, 14 | capa: "https://harpercollins.com.br/cdn/shop/products/9786555113631_79a81e4f-07c1-4aa8-ba58-b44033442bbf.jpg?v=1686061056", 15 | }, 16 | { 17 | nome: "A Origem", 18 | ano: 2010, 19 | categorias: ["Ação", "Sci-Fi"], 20 | avaliacao: 8.8, 21 | capa: "https://upload.wikimedia.org/wikipedia/pt/8/84/AOrigemPoster.jpg", 22 | }, 23 | { 24 | nome: "Pulp Fiction: Tempo de Violência", 25 | ano: 1994, 26 | categorias: ["Crime", "Drama"], 27 | avaliacao: 8.9, 28 | capa: "https://m.media-amazon.com/images/I/61I5eZI9HJL._AC_UF894,1000_QL80_.jpg", 29 | }, 30 | { 31 | nome: "O Poderoso Chefão", 32 | ano: 1972, 33 | categorias: ["Crime", "Drama"], 34 | avaliacao: 9.2, 35 | capa: "https://www.europanet.com.br/upload/id_produto/107___/107366g.jpg", 36 | }, 37 | { 38 | nome: "O Cavaleiro das Trevas", 39 | ano: 2008, 40 | categorias: ["Ação", "Crime"], 41 | avaliacao: 9.0, 42 | capa: "https://upload.wikimedia.org/wikipedia/pt/thumb/d/d1/The_Dark_Knight.jpg/250px-The_Dark_Knight.jpg", 43 | }, 44 | { 45 | nome: "Forrest Gump: O Contador de Histórias", 46 | ano: 1994, 47 | categorias: ["Drama", "Romance"], 48 | avaliacao: 8.8, 49 | capa: "https://m.media-amazon.com/images/S/pv-target-images/c13db7cab337d48fbac3715065ef255862e2c7e5fc25d6a262a0cf7c35c29d20.jpg", 50 | }, 51 | { 52 | nome: "Clube da Luta", 53 | ano: 1999, 54 | categorias: ["Drama"], 55 | avaliacao: 8.8, 56 | capa: "https://br.web.img3.acsta.net/medias/nmedia/18/90/95/96/20122166.jpg", 57 | }, 58 | { 59 | nome: "O Silêncio dos Inocentes", 60 | ano: 1991, 61 | categorias: ["Crime", "Drama"], 62 | avaliacao: 8.6, 63 | capa: "https://upload.wikimedia.org/wikipedia/pt/0/0a/Silence_of_the_lambs.png", 64 | }, 65 | { 66 | nome: "Gladiador", 67 | ano: 2000, 68 | categorias: ["Ação", "Aventura"], 69 | avaliacao: 8.5, 70 | capa: "https://upload.wikimedia.org/wikipedia/pt/4/44/GladiadorPoster.jpg", 71 | }, 72 | { 73 | nome: "A Vida é Bela", 74 | ano: 1997, 75 | categorias: ["Drama", "Comédia"], 76 | avaliacao: 8.6, 77 | capa: "https://upload.wikimedia.org/wikipedia/pt/a/af/La_vita_%C3%A8_bella.jpg", 78 | }, 79 | { 80 | nome: "O Exorcista", 81 | ano: 1973, 82 | categorias: ["Horror"], 83 | avaliacao: 8.0, 84 | capa: "https://upload.wikimedia.org/wikipedia/pt/thumb/a/a6/The_Exorcist_1973.jpg/225px-The_Exorcist_1973.jpg", 85 | }, 86 | { 87 | nome: "Cães de Aluguel", 88 | ano: 1992, 89 | categorias: ["Crime", "Drama"], 90 | avaliacao: 8.3, 91 | capa: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSAUTDqfqUQptpcAoJ8qjApAQnvtWLuOBA7OA&s", 92 | }, 93 | { 94 | nome: "Matrix", 95 | ano: 1999, 96 | categorias: ["Ação", "Sci-Fi"], 97 | avaliacao: 8.7, 98 | capa: "https://img.elo7.com.br/product/zoom/26799EE/big-poster-filme-matrix-lo01-tamanho-90x60-cm-poster.jpg", 99 | }, 100 | { 101 | nome: "Jurassic Park", 102 | ano: 1993, 103 | categorias: ["Aventura", "Sci-Fi"], 104 | avaliacao: 8.1, 105 | capa: "https://i.pinimg.com/originals/5e/3b/9e/5e3b9ed50212e01eba8499cd479b2451.jpg", 106 | }, 107 | { 108 | nome: "Star Wars: Episódio IV - Uma Nova Esperança", 109 | ano: 1977, 110 | categorias: ["Aventura", "Fantasia"], 111 | avaliacao: 8.6, 112 | capa: "https://m.media-amazon.com/images/I/91JdH5gPo4L._AC_UF1000,1000_QL80_.jpg", 113 | }, 114 | { 115 | nome: "O Labirinto do Fauno", 116 | ano: 2006, 117 | categorias: ["Fantasia", "Drama"], 118 | avaliacao: 8.2, 119 | capa: "https://br.web.img2.acsta.net/medias/nmedia/18/87/14/49/19872468.jpg", 120 | }, 121 | { 122 | nome: "O Grande Lebowski", 123 | ano: 1998, 124 | categorias: ["Comédia", "Crime"], 125 | avaliacao: 8.1, 126 | capa: "https://upload.wikimedia.org/wikipedia/pt/thumb/0/0c/The_Big_Lebowski.jpg/250px-The_Big_Lebowski.jpg", 127 | }, 128 | { 129 | nome: "A Forma da Água", 130 | ano: 2017, 131 | categorias: ["Fantasia", "Romance"], 132 | avaliacao: 7.3, 133 | capa: "https://br.web.img2.acsta.net/pictures/17/11/28/18/40/3044833.jpg", 134 | }, 135 | { 136 | nome: "Os Infiltrados", 137 | ano: 2006, 138 | categorias: ["Crime", "Drama"], 139 | avaliacao: 8.5, 140 | capa: "https://br.web.img3.acsta.net/medias/nmedia/18/90/18/94/20085052.jpg", 141 | }, 142 | { 143 | nome: "O Lobo de Wall Street", 144 | ano: 2013, 145 | categorias: ["Comédia", "Drama"], 146 | avaliacao: 8.2, 147 | capa: "https://br.web.img2.acsta.net/pictures/13/12/30/18/11/111145.jpg", 148 | }, 149 | { 150 | nome: "Parasita", 151 | ano: 2019, 152 | categorias: ["Drama", "Comédia"], 153 | avaliacao: 8.6, 154 | capa: "https://br.web.img2.acsta.net/pictures/19/10/04/19/58/1046648.jpg", 155 | }, 156 | { 157 | nome: "Coringa", 158 | ano: 2019, 159 | categorias: ["Crime", "Drama"], 160 | avaliacao: 8.4, 161 | capa: "https://upload.wikimedia.org/wikipedia/pt/6/63/Joker_%282019%29.jpg" 162 | }, 163 | { 164 | nome: "O Diabo Veste Prada", 165 | ano: 2006, 166 | categorias: ["Comédia", "Drama"], 167 | avaliacao: 6.9, 168 | capa: "https://upload.wikimedia.org/wikipedia/pt/e/e8/The_Devil_Wears_Prada_-_filme.jpg", 169 | }, 170 | { 171 | nome: "O Jogo da Imitação", 172 | ano: 2014, 173 | categorias: ["Biografia", "Drama"], 174 | avaliacao: 8.0, 175 | capa: "https://gagueira.org.br/images/imagens-releases/o-jogo-da-imitacao-alan-turing.jpeg", 176 | }, 177 | { 178 | nome: "A Bela e a Fera", 179 | ano: 1991, 180 | categorias: ["Animação", "Fantasia"], 181 | avaliacao: 8.0, 182 | capa: "https://i.pinimg.com/736x/e3/c9/6e/e3c96e80d2798a3d4d6d34d161b33a01.jpg", 183 | }, 184 | { 185 | nome: "A Viagem de Chihiro", 186 | ano: 2001, 187 | categorias: ["Animação", "Fantasia"], 188 | avaliacao: 8.6, 189 | capa: "https://www.cinemadebuteco.com.br/wp-content/uploads/2012/10/a-viagem-de-chihiro-poster.jpeg", 190 | }, 191 | { 192 | nome: "A Fantástica Fábrica de Chocolates", 193 | ano: 1971, 194 | categorias: ["Aventura", "Familia"], 195 | avaliacao: 7.8, 196 | capa: "https://images.justwatch.com/poster/187992897/s718/a-fantastica-fabrica-de-chocolate-1971.jpg", 197 | }, 198 | { 199 | nome: "O Grande Hotel Budapeste", 200 | ano: 2014, 201 | categorias: ["Comédia", "Crime"], 202 | avaliacao: 8.1, 203 | capa: "https://upload.wikimedia.org/wikipedia/pt/1/1f/O_Grande_Hotel_Budapeste_poster_no_Brasil_wk.png", 204 | }, 205 | { 206 | nome: "O Iluminado", 207 | ano: 1980, 208 | categorias: ["Horror", "Drama"], 209 | avaliacao: 8.4, 210 | capa: "https://br.web.img3.acsta.net/pictures/14/10/10/19/21/152595.jpg", 211 | }, 212 | { 213 | nome: "Django Livre", 214 | ano: 2012, 215 | categorias: ["Ação", "Drama"], 216 | avaliacao: 8.4, 217 | capa: "https://br.web.img2.acsta.net/r_1280_720/medias/nmedia/18/90/07/53/20311243.jpg", 218 | }, 219 | { 220 | nome: "O Menino que Descobriu o Vento", 221 | ano: 2019, 222 | categorias: ["Drama", "Família"], 223 | avaliacao: 7.6, 224 | capa: "https://br.web.img3.acsta.net/pictures/19/01/30/09/40/0392469.jpg", 225 | }, 226 | { 227 | nome: "It: A Coisa", 228 | ano: 2017, 229 | categorias: ["Horror", "Fantasia"], 230 | avaliacao: 6.7, 231 | capa: "https://br.web.img3.acsta.net/pictures/17/03/30/22/44/345288.jpg", 232 | }, 233 | { 234 | nome: "Missão: Impossível - Fallout", 235 | ano: 2018, 236 | categorias: ["Ação", "Aventura"], 237 | avaliacao: 7.7, 238 | capa: "https://one-cinema.s3.sa-east-1.amazonaws.com/filmes/mission-impossible-fallout/10062020/342/capa-mission-impossible-fallout.jpg", 239 | }, 240 | { 241 | nome: "No País das Maravilhas", 242 | ano: 1951, 243 | categorias: ["Animação", "Fantasia"], 244 | avaliacao: 7.4, 245 | capa: "https://br.web.img2.acsta.net/pictures/14/02/27/19/01/345052.jpg", 246 | } 247 | ] 248 | 249 | console.log(filmes); 250 | -------------------------------------------------------------------------------- /src/pages/filmes/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Martel+Sans:wght@600&family=Poppins:wght@300;400;700&display=swap'); 2 | 3 | /* Reset básico para remover margens e espaçamentos padrão */ 4 | * { 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | } 9 | 10 | /* Estilos gerais do corpo */ 11 | body { 12 | font-family: 'Roboto', sans-serif; 13 | color: #e0e0e0; 14 | background-color: #000; 15 | } 16 | 17 | /* Estilos do cabeçalho fixo */ 18 | header { 19 | position: fixed; 20 | top: 0; 21 | left: 0; 22 | width: 100%; 23 | background-color: rgba(0, 0, 0, 0.9); 24 | padding: 15px 30px; 25 | display: flex; 26 | justify-content: space-between; 27 | align-items: center; 28 | z-index: 1000; 29 | border-bottom: 1px solid #333; 30 | height: 80px; 31 | } 32 | 33 | /* Container para o logo no cabeçalho */ 34 | header .logo-container { 35 | display: flex; 36 | align-items: center; 37 | gap: 5px; 38 | transition: filter 0.3s; 39 | cursor: pointer; 40 | } 41 | 42 | /* Estilo do logo */ 43 | header .logo-container img { 44 | width: 100px; 45 | } 46 | 47 | /* Estilos do link de logo */ 48 | header .logo-container a { 49 | color: #e0e0e0; 50 | text-decoration: none; 51 | } 52 | 53 | /* Título no cabeçalho */ 54 | header .logo-container h1 { 55 | font-size: 24px; 56 | font-weight: 600; 57 | margin-bottom: 0; 58 | color: #e0e0e0; 59 | } 60 | 61 | /* Estilos para a barra de navegação */ 62 | header nav { 63 | flex-grow: 1; 64 | display: flex; 65 | justify-content: center; 66 | } 67 | 68 | /* Links de navegação */ 69 | header nav a { 70 | color: #e0e0e0; 71 | text-decoration: none; 72 | margin: 0 20px; 73 | font-size: 16px; 74 | font-weight: 500; 75 | transition: color 0.3s, border-bottom 0.3s; 76 | padding-bottom: 8px; 77 | } 78 | 79 | /* Link ativo com borda vermelha */ 80 | header nav a.active { 81 | color: #e50914; 82 | border-bottom: 2px solid #e50914; 83 | } 84 | 85 | /* Efeito hover nos links de navegação */ 86 | header nav a:hover { 87 | color: #fff; 88 | } 89 | 90 | /* Botões de autenticação no cabeçalho */ 91 | header .auth-buttons { 92 | display: flex; 93 | gap: 15px; 94 | } 95 | 96 | /* Estilos gerais para botões */ 97 | header .auth-buttons .btn { 98 | font-size: 14px; 99 | padding: 10px 20px; 100 | border-radius: 30px; 101 | border: none; 102 | cursor: pointer; 103 | } 104 | 105 | /* Botão branco */ 106 | header .auth-buttons .btn-white { 107 | background-color: #fff; 108 | color: #000; 109 | } 110 | 111 | /* Botão vermelho */ 112 | header .auth-buttons .btn-red { 113 | background-color: #e50914; 114 | color: #fff; 115 | } 116 | 117 | /* Estilos gerais do main */ 118 | main { 119 | padding: 100px 30px 30px; 120 | background-color: #111; 121 | } 122 | 123 | /* Estilo do herói (seção principal) */ 124 | .hero { 125 | text-align: center; 126 | margin-bottom: 30px; 127 | } 128 | 129 | /* Título principal do herói */ 130 | .hero h1 { 131 | font-size: 32px; 132 | color: #fff; 133 | margin-bottom: 20px; 134 | } 135 | 136 | /* Container de botões e inputs */ 137 | .hero-buttons { 138 | display: flex; 139 | align-items: center; 140 | justify-content: center; 141 | gap: 20px; 142 | flex-wrap: wrap; 143 | } 144 | 145 | /* Estilo do campo de input de busca */ 146 | #search-input { 147 | padding: 12px 18px; 148 | border-radius: 30px; 149 | border: 2px solid rgba(255, 255, 255, 0.2); 150 | background-color: rgba(255, 255, 255, 0.2); 151 | color: white; 152 | width: 300px; 153 | } 154 | 155 | /* Estilo do botão de busca */ 156 | #search-button { 157 | padding: 12px 18px; 158 | border-radius: 30px; 159 | } 160 | 161 | /* Estilo do seletor de gêneros */ 162 | #genre-filter { 163 | padding: 12px 18px; 164 | font-size: 16px; 165 | border-radius: 30px; 166 | border: 2px solid rgba(255, 255, 255, 0.2); 167 | background-color: rgba(255, 255, 255, 0.2); 168 | color: white; 169 | appearance: none; 170 | cursor: pointer; 171 | } 172 | 173 | /* Estilo das opções no filtro de gêneros */ 174 | #genre-filter option { 175 | background-color: #333; 176 | color: white; 177 | } 178 | 179 | /* Estilo da grade de filmes */ 180 | .movie-grid { 181 | display: flex; 182 | flex-wrap: wrap; 183 | justify-content: center; 184 | gap: 30px; 185 | } 186 | 187 | /* Estilos dos cartões de filme */ 188 | .movie-card { 189 | position: relative; 190 | width: 220px; 191 | color: #e0e0e0; 192 | overflow: hidden; 193 | border-radius: 8px; 194 | transition: transform 0.3s; 195 | cursor: pointer; 196 | } 197 | 198 | /* Estilo das imagens dos filmes */ 199 | .movie-card img { 200 | width: 100%; 201 | height: 320px; 202 | object-fit: cover; 203 | border-radius: 8px; 204 | transition: opacity 0.3s; 205 | } 206 | 207 | /* Efeito hover nas imagens */ 208 | .movie-card:hover img { 209 | opacity: 0.7; 210 | } 211 | 212 | /* Estilo das informações dos filmes */ 213 | .movie-card .info { 214 | text-align: center; 215 | padding: 10px; 216 | } 217 | 218 | /* Título do filme */ 219 | .movie-card h3 { 220 | font-size: 18px; 221 | margin: 10px 0; 222 | } 223 | 224 | /* Informações adicionais do filme */ 225 | .movie-card p { 226 | font-size: 16px; 227 | } 228 | 229 | /* Estilo do botão de "assistir" que aparece no hover */ 230 | .movie-card:hover .watch-button { 231 | display: block; 232 | } 233 | 234 | /* Botão de assistir dentro dos cartões */ 235 | .watch-button { 236 | position: absolute; 237 | bottom: 15px; 238 | left: 50%; 239 | transform: translateX(-50%); 240 | background: rgba(0, 0, 0, 0.8); 241 | color: white; 242 | padding: 10px 15px; 243 | border-radius: 20px; 244 | display: none; 245 | font-size: 16px; 246 | } 247 | 248 | /* Estilo para a mensagem de nenhum resultado encontrado */ 249 | .no-results-message { 250 | color: #e50914; 251 | font-size: 18px; 252 | text-align: center; 253 | margin-top: 20px; 254 | display: none; /* Inicialmente escondido */ 255 | } 256 | 257 | /* Estilos do rodapé */ 258 | footer { 259 | background-color: rgba(0, 0, 0, 0.9); 260 | color: #e0e0e0; 261 | align-items: center; 262 | /* display: flex; */ 263 | justify-content: center; 264 | /* border-top: 1px solid #333; */ 265 | margin-top: 10px; 266 | text-align: center; 267 | } 268 | 269 | /* Estilos do conteúdo do rodapé */ 270 | .footer-content { 271 | display: flex; 272 | justify-content: space-between; 273 | align-items: flex-start; 274 | flex-wrap: wrap; 275 | gap: 40px; 276 | max-width: 1200px; 277 | margin: 0 auto; 278 | } 279 | 280 | /* Logo no rodapé */ 281 | .footer-logo { 282 | flex: 1; 283 | min-width: 220px; 284 | text-align: center; 285 | } 286 | 287 | /* Estilo da imagem de logo no rodapé */ 288 | .footer-logo img { 289 | width: 150px; 290 | margin-bottom: 20px; 291 | } 292 | 293 | /* Seções de navegação e contato no rodapé */ 294 | .footer-nav, .footer-contact, .footer-social { 295 | flex: 1; 296 | min-width: 220px; 297 | text-align: left; 298 | } 299 | 300 | /* Estilos dos títulos das seções no rodapé */ 301 | .footer-nav h3, .footer-contact h3, .footer-social h3 { 302 | font-size: 20px; 303 | margin-bottom: 15px; 304 | color: #e50914; 305 | } 306 | 307 | /* Links de navegação e contato no rodapé */ 308 | .footer-nav a, .footer-contact a { 309 | display: block; 310 | color: #e0e0e0; 311 | text-decoration: none; 312 | margin-bottom: 12px; 313 | font-size: 16px; 314 | transition: color 0.3s; 315 | } 316 | 317 | /* Efeito hover nos links do rodapé */ 318 | .footer-nav a:hover, .footer-contact a:hover { 319 | color: #fff; 320 | } 321 | 322 | /* Seção de redes sociais no rodapé */ 323 | .footer-social { 324 | text-align: center; 325 | } 326 | 327 | /* Estilo para o título da seção de redes sociais no rodapé */ 328 | .footer-social h3 { 329 | margin-bottom: 15px; 330 | } 331 | 332 | /* Estilo para os links de redes sociais */ 333 | .footer-social a { 334 | color: #e0e0e0; 335 | font-size: 28px; 336 | margin: 0 20px; 337 | transition: color 0.3s; 338 | } 339 | 340 | /* Efeito hover nos links de redes sociais */ 341 | .footer-social a:hover { 342 | color: #e50914; 343 | } 344 | 345 | /* Estilo da newsletter */ 346 | .newsletter { 347 | flex: 1; 348 | min-width: 220px; 349 | display: flex; 350 | flex-direction: column; 351 | align-items: center; 352 | gap: 15px; 353 | max-width: 350px; 354 | margin: 0 auto; 355 | } 356 | 357 | /* Input de newsletter */ 358 | .newsletter input { 359 | padding: 12px; 360 | border-radius: 30px; 361 | border: 2px solid rgba(255, 255, 255, 0.2); 362 | background-color: rgba(255, 255, 255, 0.2); 363 | color: white; 364 | width: 100%; 365 | max-width: 350px; 366 | } 367 | 368 | /* Botão da newsletter */ 369 | .newsletter button { 370 | padding: 12px; 371 | border-radius: 30px; 372 | width: 100%; 373 | max-width: 350px; 374 | } 375 | 376 | /* Texto inferior do rodapé */ 377 | .footer-bottom { 378 | margin-top: 30px; 379 | font-size: 16px; 380 | color: #888; 381 | } 382 | 383 | /* Links no texto inferior do rodapé */ 384 | .footer-bottom a { 385 | color: #888; 386 | text-decoration: none; 387 | transition: color 0.3s; 388 | } --------------------------------------------------------------------------------