📘 Instruções do Projeto: Landing Page Fusca 1979

Este projeto simula o relançamento do lendário Fusca 1979, integrando HTML, CSS e JavaScript. Os arquivos devem ser separados e publicados online.

Faltam
Carregando...
Para entregar este projeto!

📁 Estrutura de Arquivos

index.html – Página principal
style.css – Estilos visuais
script.js – Contador regressivo
fusca.png – Imagem do veículo

📄 Textos obrigatórios para uso no projeto

Texto 1 – Sobre o Fusca

O Fusca é muito mais que um carro. É uma memória afetiva sobre rodas, um símbolo da cultura automotiva brasileira. Em 1979, ele já era um fenômeno — agora, volta como ícone retrô que atravessa gerações com charme e simplicidade.

Texto 2 – Características principais do Fusca

Robustez, economia e mecânica confiável são marcas registradas do Fusca. Ele foi feito para durar, com peças simples, fácil manutenção e um motor que faz história. Compacto por fora, espaçoso por dentro — um verdadeiro parceiro para todas as ocasiões.

Texto 3 – Fusca: parecido com um avião?

Se você já ouviu o ronco do motor do Fusca, sabe: ele lembra o som de um avião antigo. Isso não é coincidência — o motor boxer refrigerado a ar tem herança aeronáutica. Seu desempenho todo-terreno e estabilidade em qualquer tipo de solo fazem dele quase um jato sobre o asfalto.

Texto 4 – Ficha Técnica (Fusca 1979)

Motor: 1.3 Boxer 4 cilindros, refrigerado a ar
Potência: 46 cv
Velocidade Máxima: 125 km/h
Câmbio: Manual de 4 marchas
Consumo médio: até 12 km/l
Tração: Traseira
Peso: 800 kg

📸 Galeria Oficial do Projeto

Imagens obrigatórias do projeto

Video Oficial do Projeto

Logo Oficial do Projeto

🧪 Instruções Técnicas

Utilize os textos acima dentro da index.html com as tags <section>, <p> e <ul>.
Adicione a imagem do fusca e o contador regressivo no topo da página.
Utilize as imagens obrigatórias.
Estilize com CSS externo (arquivo style.css).
Use script.js para controlar o tempo até 08/08/2025.

Código JavaScript para contar o tempo:


function atualizarContador() {
  const dataLancamento = new Date("2025-08-08T00:00:00");
  const agora = new Date();
  const diferenca = dataLancamento - agora;

  if (diferenca <= 0) {
    document.getElementById("contador").innerText = "LANÇADO!";
    return;
  }

  const dias = Math.floor(diferenca / (1000 * 60 * 60 * 24));
  const horas = Math.floor((diferenca / (1000 * 60 * 60)) % 24);
  const minutos = Math.floor((diferenca / (1000 * 60)) % 60);
  const segundos = Math.floor((diferenca / 1000) % 60);

  document.getElementById("contador").innerText =
    `${dias}d ${horas}h ${minutos}m ${segundos}s`;
}

setInterval(atualizarContador, 1000);
atualizarContador();

Sugestão de CSS


/* Estilo sugerido para todas as imagens do projeto */
.imagens {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: transform 0.3s ease-in-out;
}

.imagens:hover {
  transform: scale(1.02);
}

.legenda {
  font-size: 0.9em;
  color: #666;
  text-align: center;
  margin-top: -10px;
}

Observação: Você deve criar uma tag <div id="contador" class="contador">Carregando...</div> para que o contador funcione.

📤 Publicação

Suba o projeto completo em uma plataforma como GitHub Pages ou Vercel. Marque seu repositório com as tags:

fusca1979
formadores2025b
landingpage

📋 O que será avaliado neste projeto

Confira abaixo os critérios e pontos que compõem sua nota final:

Critério	Pontos	Descrição
1. Estrutura HTML organizada	2.0	Uso correto de tags semânticas, divisões claras em seções e uso adequado do `alt`, `section`, `header`, `footer`.
2. CSS externo bem aplicado	2.0	Estilo visual limpo, responsivo, com boa organização e aplicação do CSS em arquivo separado.
3. Funcionalidade do contador regressivo	2.0	Contador funcional em JavaScript com lógica correta, exibindo dias, horas, minutos e segundos.
4. Inclusão das 4 imagens obrigatórias	1.0	Imagens devem estar presentes e identificáveis no carrossel ou seção visual. Use o video tambem
5. Uso dos 4 textos fornecidos	1.0	Todos os textos sobre o Fusca inseridos corretamente.
6. Criatividade e refinamento	2.0	Personalização visual, uso opcional de fontes, cores, organização extra, animações ou responsividade aprimorada.

Nota final: até 10 pontos. A entrega no prazo e o envio correto pelo GitHub/Vercel também fazem parte da avaliação.

✅ Entrega

Entregue o link da sua landing page para o professor conforme orientação na sala.