{"id":19817640,"url":"https://github.com/raizertechdev/project_flixmaster","last_synced_at":"2026-01-25T13:31:39.048Z","repository":{"id":234572994,"uuid":"789165278","full_name":"RaizerTechDev/Project_FlixMaster","owner":"RaizerTechDev","description":"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 =\u003e HTML, CSS e Java Script !!!","archived":false,"fork":false,"pushed_at":"2024-10-29T02:21:46.000Z","size":34269,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-01T11:36:31.525Z","etag":null,"topics":["css3","git","github","html5","javascript"],"latest_commit_sha":null,"homepage":"https://raizertechdev-streaming.netlify.app/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RaizerTechDev.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-04-19T20:44:20.000Z","updated_at":"2024-10-29T02:21:50.000Z","dependencies_parsed_at":"2025-05-01T11:41:25.239Z","dependency_job_id":null,"html_url":"https://github.com/RaizerTechDev/Project_FlixMaster","commit_stats":null,"previous_names":["rafarz76dev/project_flixmaster","raizertechdev/project_flixmaster"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/RaizerTechDev/Project_FlixMaster","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaizerTechDev%2FProject_FlixMaster","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaizerTechDev%2FProject_FlixMaster/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaizerTechDev%2FProject_FlixMaster/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaizerTechDev%2FProject_FlixMaster/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RaizerTechDev","download_url":"https://codeload.github.com/RaizerTechDev/Project_FlixMaster/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaizerTechDev%2FProject_FlixMaster/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28753432,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-25T10:25:12.305Z","status":"ssl_error","status_checked_at":"2026-01-25T10:25:11.933Z","response_time":113,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css3","git","github","html5","javascript"],"created_at":"2024-11-12T10:13:12.874Z","updated_at":"2026-01-25T13:31:39.029Z","avatar_url":"https://github.com/RaizerTechDev.png","language":"HTML","readme":"# Project-FlixMaster!!!\n\n\u003cbr\u003e\n\n \u003cdiv align=\"center\"\u003e\n\u003cimg src=\"https://media.giphy.com/media/9TFBxN300KpCUI6sBD/giphy.gif\" align=\"center\" height=\"45\" width=\"45\"\u003e\n\n[ ( Clique aqui e desfrute de grandes filmes e séries agora mesmo: `FlixMaster!!!`) ](https://raizertechdev-streaming.netlify.app/)\n\n\u003cbr\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \n\u003cimg src= \"https://media.giphy.com/media/3zSF3Gnr7cxMbi6WoP/giphy.gif\" align=\"center\" height=\"55\" width=\"55\"\u003e [Demonstração-FlixMaster] \u003cimg src= \"https://media.giphy.com/media/E5DzZsofmgxc9wjbhX/giphy.gif\" align=\"center\" height=\"35\" width=\"35\"\u003e\n\n\u003cimg height=\"480em\" src=\"./assets//images/apresentacao-readme-flixMaster.gif\"  align=\"center\"\u003e\n\n---\n\n\u003cdiv align=\"left\"\u003e\n\n### 📌 Objetivo\n\n- 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.\n\n### 📌Estrutura do Projeto:\n\n```\nProject-FlixMaster/\n│\n├── .vscode/                           // Pasta do VSCode\n│   └── settings.json                  #  Configurações do VSCode para definir a porta em que o servidor local será executado\n│\n├── assets/                            // Pasta Recurso do projeto (assets)\n│   ├── images/                        // Pasta Imagens\n│   │         │\n│   │         ├── filmes/             // Pasta para Arquivos imagens de filmes\n│   │         │   └── filme1.jpg      # Imagem do filme 1\n│   │         │   └── filme2.jpg      # Imagem do filme 2\n│   │         │   └── ...             # Outras imagens de filmes\n│   │         │   └── filme6.jpg      # Imagem do filme 6\n│   │         │\n│   │         ├── series/             // Pasta Arquivos para imagens de series\n│   │         │   └── serie1.png      # Imagem da série 1\n│   │         │   └── serie2.png      # Imagem da série 2\n│   │         │   └── ...             # Outras imagens de séries\n│   │         │   └── serie6.png      # Imagem da série 6\n│   │\n│   │\n│   │\n│   ├── js/                           // Pasta  JavaScript\n│   │    └── filme.js                 # Arquivo JS para filmes\n│   │    └── serie.js                 # Arquivo JavaScript para séries\n│   │\n│   ├── styles/                       // Pasta  CSS\n│   │   └─── header-footer.css        # Estilos para cabeçalho e rodapé\n│   │   └─── media-query.css          # Estilos para media queries\n│   │   └─── sections.css             # Estilos para seções\n│\n│\n├── index.html                        # Arquivo HTML principal\n│\n├── LICENSE                           # Licença do projeto\n│\n└── README.md                         # Documentação do projeto\n```\n\n### 📌 Aqui está uma pequena documentação do Projeto: Conceitos Aplicados👇\n\n▪ No HTML criamos (nav, sections e footer):\n\n🚀Copy code\n\n```\n    \u003c!-- Header Nav --\u003e\n    \u003cheader\u003e\n        \u003cdiv class=\"logo\"\u003eFlixMaster \u003c/div\u003e\n        \u003cnav id=\"menu\"\u003e\n            \u003cul\u003e\n                \u003cli\u003e\u003ca href=\"#home\"\u003eInício\u003c/a\u003e\u003c/li\u003e\n                \u003cli\u003e\u003ca href=\"#series\"\u003eSéries\u003c/a\u003e\u003c/li\u003e\n                \u003cli\u003e\u003ca href=\"#filmes\"\u003eFilmes\u003c/a\u003e\u003c/li\u003e\n                \u003cli\u003e\u003ca href=\"#contact\"\u003e\u003ci class=\"fa fa-phone-square fa-lg\" aria-hidden=\"true\"\u003e\u003c/i\u003e\u003c/a\u003e\n            \u003c/ul\u003e\n        \u003c/nav\u003e\n    \u003c/header\u003e\n```\n\n```\n\u003c!-- Serie Section --\u003e\n        \u003csection id=\"series\" class=\"carousel-section\"\u003e\n            \u003ch2 carousel-section__title\u003eSéries\u003c/h2\u003e\n            \u003c!-- Carrossel de séries --\u003e\n            \u003cdiv class=\"carousel-container carousel-container--series\"\u003e\n                \u003cdiv class=\"serie\"\u003e\n                    \u003ca href=\"https://www.netflix.com/watch/81481482?trackId=200257859\" target=\"_blank\" title=\"Entrevias\"\n                        class=\"methodology__project--link\"\u003e\n                        \u003cdiv class=\"project-link--large\"\u003eVIEW\u003c/div\u003e\n                        \u003cimg src=\"./assets/images/series/serie01.png\" alt=\"Serie 1\"\u003e\n                    \u003c/a\u003e\n                    \u003ch3\u003eEntrevias\u003c/h3\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"serie\"\u003e\n                    \u003ca href=\"https://www.netflix.com/watch/81307578?trackId=255824129\u0026tctx=0%2C0%2C49181233-a1c7-40c1-ac19-f4971416788b-6438686%2C49181233-a1c7-40c1-ac19-f4971416788b-6438686%7C2%2C%2C%2C%2C%2C%2CVideo%3A81002370%2CdetailsPagePlayButton\"\n                        target=\"_blank\" title=\"CobraKay\" class=\"methodology__project--link\"\u003e\n                        \u003cdiv class=\"project-link--large\"\u003eVIEW\u003c/div\u003e\n                        \u003cimg src=\"./assets/images/series/serie02.png\" alt=\"Serie 2\"\u003e\n                    \u003c/a\u003e\n                    \u003ch3\u003eCobraKay\u003c/h3\u003e\n                \u003c/div\u003e\n                 \u003c/div\u003e\n            \u003cbutton class=\"prev-btn prev-btn--series\"\u003e\u0026lt;\u003c/button\u003e\n            \u003cbutton class=\"prev-btn next-btn--series\"\u003e\u0026gt;\u003c/button\u003e\n        \u003c/section\u003e\n```\n\n▪ No CSS criamos (header-footer, sections e media-query):\n\n🚀Copy code\n\n```\n/* Estilos para a navegação */\nheader {\n  position: fixed; /* Define o posicionamento fixo */\n  top: 0; /* Fixa o cabeçalho no topo */\n  width: 100%; /* Define a largura total */\n  background-color: #111;\n  color: #fff;\n  padding: 20px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  z-index: 1000; /* Ajusta a ordem de sobreposição */\n}\n\nnav ul {\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n  display: flex; /* Altera o display para flexbox */\n  justify-content: space-between; /* Distribui os itens uniformemente */\n}\n```\n\n```\n/* Estilos para o rodapé */\nfooter {\n  background-color: #343a40;\n  color: #fff;\n  padding: 50px 0;\n  text-align: center;\n}\n\n.social-icon {\n  display: inline-block;\n  margin: 0 10px;\n  font-size: 24px;\n  color: #ee90cd;\n  transition: color 0.3s ease;\n}\n```\n\n```\n/* Estilo para as seções (Serie e Filme) */\n.serie {\n  position: relative; /* Define a posição relativa para que o z-index funcione */\n  flex: 0 0 auto;\n  width: 200px; /* Largura do item do carrossel */\n  margin: 0 auto; /* Centraliza os itens horizontalmente */\n  /* Outros estilos para cada item do carrossel */\n  margin-top: 20px;\n  text-align: center;\n}\n\n.filme {\n  flex: 0 0 auto;\n  width: 200px; /* Largura do item do carrossel */\n  margin: 0 auto; /* Centraliza os itens horizontalmente */\n  /* Outros estilos para cada item do carrossel */\n  margin-top: 20px;\n  text-align: center;\n}\n```\n\n```\n/* Estilos específicos para dispositivos menores */\n    .serie {\n      flex: 0 0 calc(50% - 20px); /* Define a largura de cada item do carrossel (ajuste conforme necessário) */\n      margin: 0 auto; /* Centraliza os itens horizontalmente */\n      text-align: center; /* Alinha o texto ao centro */      \n    }\n\n    .filme {\n      flex: 0 0 calc(50% - 20px); /* Define a largura de cada item do carrossel (ajuste conforme necessário) */\n      margin: 0 auto; /* Centraliza os itens horizontalmente */\n      text-align: center; /* Alinha o texto ao centro */      \n    }\n```\n\n▪ 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.:\n\n🚀Copy code\n\n```\n   // Função para mover o carrossel de filmes para a esquerda\n    function moveCarouselLeftFilmes() {\n        carouselPositionFilmes += filmeWidth;\n        if (carouselPositionFilmes \u003e 0) {\n            carouselPositionFilmes = 0;\n        }\n        carouselContainerFilmes.style.transform = `translateX(${carouselPositionFilmes}px)`;\n    }\n\n    // Função para mover o carrossel de filmes para a direita\n    function moveCarouselRightFilmes() {\n        const maxWidthFilmes = -((carouselContainerFilmes.children.length - 3) * filmeWidth);\n        carouselPositionFilmes -= filmeWidth;\n        if (carouselPositionFilmes \u003c maxWidthFilmes) {\n            carouselPositionFilmes = maxWidthFilmes;\n        }\n        carouselContainerFilmes.style.transform = `translateX(${carouselPositionFilmes}px)`;\n    }\n```\n\n```\n        // Função para mover o carrossel de series para a esquerda\n    function moveCarouselLeftSeries() {\n        carouselPositionSeries += serieWidth;\n        if (carouselPositionSeries \u003e 0) {\n            carouselPositionSeries = 0;\n        }\n        carouselContainerSeries.style.transform = `translateX(${carouselPositionSeries}px)`;\n    }\n\n    // Função para mover o carrossel de series  para a direita\n    function moveCarouselRightSeries() {\n        const maxWidthSeries = -((carouselContainerSeries.children.length - 3) * serieWidth);\n        carouselPositionSeries -= serieWidth;\n        if (carouselPositionSeries \u003c maxWidthSeries) {\n            carouselPositionSeries = maxWidthSeries;\n        }\n        carouselContainerSeries.style.transform = `translateX(${carouselPositionSeries}px)`;\n    }\n```\n\n### 📌 Garantindo responsividade total para uniformidade visual em todas as telas.\n\n---\n\n## Tecnologias\n\n\u003cimg src=\"https://media.giphy.com/media/iT138SodaACo9LImgi/giphy.gif\" align=\"center\" height=\"75\" width=\"75\"\u003e Tecnologias utilizadas no projeto:\n\n- HTML5 (Linguagem de marcação utilizada para a construção das páginas web).\n\n- CSS3 (Mecanismo para adicionar estilos a uma página web).\n\n- 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).\n\n- Git (Sistema de controle de versões).\n\n- Github (Plataforma para hospedagem de código-fonte).\n\n- Visual Studio Code (Editor de código-fonte).\n\n- Navegador web (Interação com documentos HTML).\n\n---\n\n\u003cimg src=\"https://media.giphy.com/media/SS8CV2rQdlYNLtBCiF/giphy.gif\" align=\"center\" height=\"35\" width=\"45\"\u003e Ferramenta utilizada no projeto:\n\n- [VsCode](https://code.visualstudio.com/download) (v1.80.1)\n\n---\n\n## Licença\n\n- Esse projeto está sob a licença MIT.\n\n---\n\n\u003cimg src=\"https://media.giphy.com/media/ImmvDZ2c9xPR8gDvHV/giphy.gif\" align=\"center\" height=\"25\" width=\"25\"\u003e Autor\n\n\u003cp\u003e\n    \u003cimg align=left margin=10 width=80 src=\"https://avatars.githubusercontent.com/u/87991807?v=4\"/\u003e\n    \u003cp\u003e\u0026nbsp\u0026nbsp\u0026nbspRafaRaizer-Dev\u003cbr\u003e\n    \u0026nbsp\u0026nbsp\u0026nbsp\u003ca href=\"https://api.whatsapp.com/send/?phone=47999327137\"\u003eWhatsapp\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\u003ca href=\"https://www.linkedin.com/in/rafael-raizer//\"\u003eLinkedIn\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\u003ca href=\"https://github.com/RaizerTechDev\"\u003eGitHub\u003c/a\u003e|\u0026nbsp;\u003ca href=\"https://public.tableau.com/app/profile/rafael.raizer\"\u003eTableau\u003c/a\u003e|\u0026nbsp;\u003ca href=\"https://raizertechdev-portfolio.netlify.app/\"\u003ePortfólio\u003c/a\u003e\u0026nbsp;\u003c/p\u003e\n\u003c/p\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraizertechdev%2Fproject_flixmaster","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fraizertechdev%2Fproject_flixmaster","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraizertechdev%2Fproject_flixmaster/lists"}