Projeto Página de erro

Este projeto consiste na criação de uma página de erro 404 responsiva, utilizando apenas HTML e TailwindCSS. A página exibirá uma mensagem amigável para usuários que acessarem uma URL inexistente, além de oferecer links para navegação.

Project preview

Quem nunca encontrou uma página 404, não é mesmo? Esse mini projeto consiste em criar uma página de erro 404 projetada para oferecer uma experiência visual amigável ao usuário quando ele acessa uma URL inexistente no site da CodeSpace.

🔨 Requisitos

Requisito 1:

Criar a navegação (navbar) e incluir uma barra de navegação no topo com links para home, sobre nós, suporte e fale Conosco.

Requisito 2:

Adicionar a ilustração e posicionar uma imagem ou ilustração que represente o erro.

Requisito 3:

Exibir a mensagem de erro

Criar um texto claro informando que a página não foi encontrada

Garantir que o texto tenha um design bem alinhado e legível.

Requisito 4:

Criar botões de navegação

Adicionar um botão para retornar à página inicial

Adicionar um botão para acessar a central de ajuda.

Requisito 5:

Criar um rodapé com o link do site e incluir ícones para redes sociais (Whatsapp, Facebook, LinkedIn).

👀 Dicas:

  • Experimente usar flexbox ou grid para alinhar os elementos corretamente.

🔨 Desafio extra para quem quer ir além

  • Ajustar o layout para que funcione bem em telas pequenas, médias e grandes.

🎨 Design Sugerido

Temos uma sugestão de design no Figma. Entretanto, fique à vontade para montar a aplicação conforme a sua criatividade.

Figma

🔗 Link do design

👉🏽 Sobre esse mini-projeto

O que você irá praticar:

HTML

Estruturação semântica de páginas. Melhores práticas para acessibilidade.

TailwindCSS

Utilização de classes utilitárias para estilização rápida. Criação de layouts responsivos.

Pré-requisitos

Conhecimento básico de HTML e TailwindCSS.


Junte-se a outras 15 pessoas que estão fazendo esse mini projeto.

Avatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuário