Loading repository data…
alsgy2001 / repository
Uma landing page moderna e fiel ao estilo Netflix, com design escuro característico, seções de features, FAQ interativo e formulários de assinatura. Desenvolvida com HTML, CSS e JavaScript puro, esta página replica a experiência visual da Netflix.
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
Uma landing page moderna e fiel ao estilo Netflix, com design escuro característico, seções de features, FAQ interativo e formulários de assinatura. Desenvolvida com HTML, CSS e JavaScript puro, esta página replica a experiência visual da Netflix.
Clone ou Baixe o Repositório
git clone <repository-url>
cd netflix-landing-page
Abra a Aplicação
index.html no seu navegador# Usando Python 3
python -m http.server 8000
# Usando Node.js (com http-server)
npx http-server
# Usando PHP
php -S localhost:8000
http://localhost:8000 no seu navegadornetflix-landing-page/
│
├── index.html # Estrutura HTML completa
├── styles.css # Estilização no estilo Netflix
├── script.js # Funcionalidades interativas
└── README.md # Documentação do projeto
Navegar pela Página
Interagir com FAQ
Preencher Formulário
Alterar Idioma
Header
Hero Section
Features
FAQ
Edite as variáveis CSS em styles.css:
:root {
--netflix-red: #E50914; /* Vermelho do Netflix */
--netflix-red-dark: #B20710; /* Vermelho escuro */
--netflix-black: #000000; /* Preto */
--netflix-dark: #141414; /* Cinza escuro */
/* ... mais variáveis */
}
Atualize os textos diretamente no index.html:
<h1 class="hero-title">Seu título personalizado</h1>
<p class="hero-subtitle">Sua descrição personalizada</p>
Adicione novos itens FAQ em index.html:
<div class="faq-item">
<button class="faq-question">
<span>Sua pergunta aqui?</span>
<svg class="faq-icon">...</svg>
</button>
<div class="faq-answer">
<p>Sua resposta aqui.</p>
</div>
</div>
Modifique o grid em styles.css:
.feature-content {
grid-template-columns: 1fr 1fr;
gap: 4rem;
/* Ajuste conforme necessário */
}
Header
Hero
Features
FAQ
faqItems.forEach(item => {
const question = item.querySelector('.faq-question');
question.addEventListener('click', () => {
// Toggle active class
item.classList.toggle('active');
});
});
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
// Show error
}
Para integrar com uma API real:
async function submitEmail(email) {
const response = await fetch('/api/signup', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ email })
});
const data = await response.json();
// Handle response
}
Para adicionar múltiplos idiomas:
const translations = {
pt: {
heroTitle: 'Filmes, séries e muito mais. Sem limites.',
// ... mais traduções
},
en: {
heroTitle: 'Unlimited movies, TV shows, and more.',
// ... mais traduções
}
};
function changeLanguage(lang) {
// Update all text content
}
Para adicionar vídeo de fundo no hero:
<video class="hero-video" autoplay muted loop>
<source src="hero-video.mp4" type="video/mp4">
</video>
Este projeto é open source e está disponível sob a MIT License.
Nota: Este é um projeto educacional/demonstrativo. Netflix é uma marca registrada. Este projeto não é afiliado ou endossado pela Netflix.
Contribuições são bem-vindas! Sinta-se à vontade para:
Para perguntas, sugestões ou suporte, abra uma issue no repositório.
Feito com ❤️ para aprendizado e demonstração
Esta é uma landing page educacional inspirada no Netflix. Para assinaturas reais, visite netflix.com
Selected from shared topics, language and repository description—not editorial ratings.
digitalinnovationone /
Primeiro desafio da Trilha de CSS: construindo uma landing page do curso com HTML e CSS.
51/100 healthThiagoSantosBatista /
Landing Page para uma clínica fictícia de cuidados de animais domésticos.
47/100 healthdaniel-oliv3 /
Website de uma loja de sapatos desenvolvido com HTML, CSS, SASS e JavaScript
daniel-oliv3 /
Construindo uma Landing Page com HTML, CSS e JavaScript
51/100 healthsamaracaldas /
Uma landing page feita com HTML, CSS e JavaScript para uma sorveteria ficticia
51/100 healthbetoblid /
uma pagina de um blog conhecida como landing page com designer responsivo uso de Html, Css e Javascript.
41/100 health