https://github.com/raizertechdev/project_flixmaster
Desenvolvi um projeto essencial para meus estudos e futuros trabalhos: uma plataforma de séries e filmes em alta, onde os usuários vão estar interagindo com o carrossel, selecionando o conteúdo desejado. Nesse projeto foram aplicadas as principais techs => HTML, CSS e Java Script !!!
https://github.com/raizertechdev/project_flixmaster
css3 git github html5 javascript
Last synced: 8 months ago
JSON representation
Desenvolvi um projeto essencial para meus estudos e futuros trabalhos: uma plataforma de séries e filmes em alta, onde os usuários vão estar interagindo com o carrossel, selecionando o conteúdo desejado. Nesse projeto foram aplicadas as principais techs => HTML, CSS e Java Script !!!
- Host: GitHub
- URL: https://github.com/raizertechdev/project_flixmaster
- Owner: RaizerTechDev
- License: mit
- Created: 2024-04-19T20:44:20.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-10-29T02:21:46.000Z (about 1 year ago)
- Last Synced: 2024-10-29T03:22:25.402Z (about 1 year ago)
- Topics: css3, git, github, html5, javascript
- Language: HTML
- Homepage: https://raizertechdev-streaming.netlify.app/
- Size: 32.7 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Project-FlixMaster!!!
[ ( Clique aqui e desfrute de grandes filmes e séries agora mesmo: `FlixMaster!!!`) ](https://raizertechdev-streaming.netlify.app/)
[Demonstração-FlixMaster] 
---
### 📌 Objetivo
- Desenvolvi um projeto essencial para meus estudos e futuros trabalhos: uma plataforma de séries e filmes em alta. Os usuários podem interagir com o carrossel, selecionando o conteúdo desejado. Utilizei a estrutura padrão `` Arquitetura/Organização de Pastas` para gerenciar eficientemente os arquivos. Com HTML, CSS e JavaScript, implementei essa solução, consolidando meus conhecimentos e me preparando para desafios futuros com confiança.
### 📌Estrutura do Projeto:
```
Project-FlixMaster/
│
├── .vscode/ // Pasta do VSCode
│ └── settings.json # Configurações do VSCode para definir a porta em que o servidor local será executado
│
├── assets/ // Pasta Recurso do projeto (assets)
│ ├── images/ // Pasta Imagens
│ │ │
│ │ ├── filmes/ // Pasta para Arquivos imagens de filmes
│ │ │ └── filme1.jpg # Imagem do filme 1
│ │ │ └── filme2.jpg # Imagem do filme 2
│ │ │ └── ... # Outras imagens de filmes
│ │ │ └── filme6.jpg # Imagem do filme 6
│ │ │
│ │ ├── series/ // Pasta Arquivos para imagens de series
│ │ │ └── serie1.png # Imagem da série 1
│ │ │ └── serie2.png # Imagem da série 2
│ │ │ └── ... # Outras imagens de séries
│ │ │ └── serie6.png # Imagem da série 6
│ │
│ │
│ │
│ ├── js/ // Pasta JavaScript
│ │ └── filme.js # Arquivo JS para filmes
│ │ └── serie.js # Arquivo JavaScript para séries
│ │
│ ├── styles/ // Pasta CSS
│ │ └─── header-footer.css # Estilos para cabeçalho e rodapé
│ │ └─── media-query.css # Estilos para media queries
│ │ └─── sections.css # Estilos para seções
│
│
├── index.html # Arquivo HTML principal
│
├── LICENSE # Licença do projeto
│
└── README.md # Documentação do projeto
```
### 📌 Aqui está uma pequena documentação do Projeto: Conceitos Aplicados👇
▪ No HTML criamos (nav, sections e footer):
🚀Copy code
```
FlixMaster
```
```
Séries
<
>
```
▪ No CSS criamos (header-footer, sections e media-query):
🚀Copy code
```
/* Estilos para a navegação */
header {
position: fixed; /* Define o posicionamento fixo */
top: 0; /* Fixa o cabeçalho no topo */
width: 100%; /* Define a largura total */
background-color: #111;
color: #fff;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000; /* Ajusta a ordem de sobreposição */
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex; /* Altera o display para flexbox */
justify-content: space-between; /* Distribui os itens uniformemente */
}
```
```
/* Estilos para o rodapé */
footer {
background-color: #343a40;
color: #fff;
padding: 50px 0;
text-align: center;
}
.social-icon {
display: inline-block;
margin: 0 10px;
font-size: 24px;
color: #ee90cd;
transition: color 0.3s ease;
}
```
```
/* Estilo para as seções (Serie e Filme) */
.serie {
position: relative; /* Define a posição relativa para que o z-index funcione */
flex: 0 0 auto;
width: 200px; /* Largura do item do carrossel */
margin: 0 auto; /* Centraliza os itens horizontalmente */
/* Outros estilos para cada item do carrossel */
margin-top: 20px;
text-align: center;
}
.filme {
flex: 0 0 auto;
width: 200px; /* Largura do item do carrossel */
margin: 0 auto; /* Centraliza os itens horizontalmente */
/* Outros estilos para cada item do carrossel */
margin-top: 20px;
text-align: center;
}
```
```
/* Estilos específicos para dispositivos menores */
.serie {
flex: 0 0 calc(50% - 20px); /* Define a largura de cada item do carrossel (ajuste conforme necessário) */
margin: 0 auto; /* Centraliza os itens horizontalmente */
text-align: center; /* Alinha o texto ao centro */
}
.filme {
flex: 0 0 calc(50% - 20px); /* Define a largura de cada item do carrossel (ajuste conforme necessário) */
margin: 0 auto; /* Centraliza os itens horizontalmente */
text-align: center; /* Alinha o texto ao centro */
}
```
▪ O JavaScript foi empregado para construir a lógica fundamental do carrossel, assegurando seu funcionamento adequado em conjunto com os arquivos filme.js e serie.js.:
🚀Copy code
```
// Função para mover o carrossel de filmes para a esquerda
function moveCarouselLeftFilmes() {
carouselPositionFilmes += filmeWidth;
if (carouselPositionFilmes > 0) {
carouselPositionFilmes = 0;
}
carouselContainerFilmes.style.transform = `translateX(${carouselPositionFilmes}px)`;
}
// Função para mover o carrossel de filmes para a direita
function moveCarouselRightFilmes() {
const maxWidthFilmes = -((carouselContainerFilmes.children.length - 3) * filmeWidth);
carouselPositionFilmes -= filmeWidth;
if (carouselPositionFilmes < maxWidthFilmes) {
carouselPositionFilmes = maxWidthFilmes;
}
carouselContainerFilmes.style.transform = `translateX(${carouselPositionFilmes}px)`;
}
```
```
// Função para mover o carrossel de series para a esquerda
function moveCarouselLeftSeries() {
carouselPositionSeries += serieWidth;
if (carouselPositionSeries > 0) {
carouselPositionSeries = 0;
}
carouselContainerSeries.style.transform = `translateX(${carouselPositionSeries}px)`;
}
// Função para mover o carrossel de series para a direita
function moveCarouselRightSeries() {
const maxWidthSeries = -((carouselContainerSeries.children.length - 3) * serieWidth);
carouselPositionSeries -= serieWidth;
if (carouselPositionSeries < maxWidthSeries) {
carouselPositionSeries = maxWidthSeries;
}
carouselContainerSeries.style.transform = `translateX(${carouselPositionSeries}px)`;
}
```
### 📌 Garantindo responsividade total para uniformidade visual em todas as telas.
---
## Tecnologias
Tecnologias utilizadas no projeto:
- HTML5 (Linguagem de marcação utilizada para a construção das páginas web).
- CSS3 (Mecanismo para adicionar estilos a uma página web).
- JavaScript (Linguagem de programação de alto nível, que pode ser interpretada ou compilada just-in-time (JIT) para execução em um ambiente específico).
- Git (Sistema de controle de versões).
- Github (Plataforma para hospedagem de código-fonte).
- Visual Studio Code (Editor de código-fonte).
- Navegador web (Interação com documentos HTML).
---
Ferramenta utilizada no projeto:
- [VsCode](https://code.visualstudio.com/download) (v1.80.1)
---
## Licença
- Esse projeto está sob a licença MIT.
---
Autor
   RafaRaizer-Dev
   Whatsapp | LinkedIn | GitHub| Tableau| Portfólio
