Este projeto é uma réplica da página inicial do Discord, criada a partir do design original disponível no Figma oficial do desafio. O objetivo foi reproduzir fielmente o layout, tipografia, cores e imagens da página, aplicando conceitos de responsividade para diferentes tamanhos de tela, do desktop ao mobile.
Replica o design original do Discord com atenção aos detalhes visuais. Desenvolvido com HTML5 e CSS3, utilizando Flexbox para layout e media queries para responsividade. Utiliza as fontes ‘Luckiest Guy’ e ‘Open Sans’ importadas via Google Fonts, conforme especificado no design. A página se adapta a diversas resoluções, mantendo usabilidade e legibilidade. Código organizado para facilitar manutenção e possíveis melhorias futuras.
- HTML5: Para estrutura semântica e organização do conteúdo.
- CSS3: Para estilização visual, layout com Flexbox e media queries para responsividade.
- Google Fonts: Para importar as fontes específicas do projeto.
/ (raiz)
├── assets/ # Imagens e recursos usados na página
├── index.html # Estrutura da página
└── style.css # Estilos e responsividade
-
Clone o repositório:
git clone https://github.com/seu-usuario/discord-clone-css.git -
Entre na pasta do projeto:
cd discord-clone-css -
Abra o arquivo
index.htmlno navegador de sua preferência.
Este projeto é uma réplica visual fiel baseada no design do Figma, com foco em layout e aparência. A responsividade está implementada para vários tamanhos de tela, garantindo boa experiência em desktops, tablets e smartphones. Embora a responsividade funcione adequadamente, há espaço para ajustes finos em futuras versões. O código foi escrito pensando em organização e clareza, facilitando alterações e manutenção.
Design original no Figma: Desafio Responsividade - Discord Clone
Autora: Fernanda Linhares