Este projeto é um exercício prático focado na criação de layouts responsivos utilizando Flexbox no CSS. A estrutura da página foi construída com as tags HTML aprendidas no Módulo 1 da Trilha de Engenharia, com o objetivo de demonstrar o domínio de conceitos essenciais de desenvolvimento web.
HTML: Para a estrutura e marcação da página. As seguintes tags semânticas foram usadas para organizar o conteúdo:
-
header: Estrutura o cabeçalho do site.
-
nav: Contém a navegação principal.
-
section: Define seções de conteúdo.
-
div: Cria divisões para organização de elementos.
-
figure: Envolve imagens e suas legendas.
-
h1, h2: Utilizados para títulos e subtítulos.
CSS: Para estilização e, principalmente, a criação de um layout flexível e adaptável com Flexbox.
Layout Responsivo com Flexbox: O principal objetivo foi dominar o uso do Flexbox para criar um layout que se adapta a diferentes tamanhos de tela, garantindo uma ótima experiência de visualização em dispositivos móveis e desktops.
Navegação Fixa e Suave: O cabeçalho da página permanece fixo no topo da tela durante a rolagem (position: sticky), e a navegação entre as seções é feita de forma suave (scroll-behavior: smooth), melhorando a usabilidade.
Organização e Semântica: O projeto segue as melhores práticas de escrita de código, utilizando as tags HTML mais adequadas para cada tipo de conteúdo, tornando o código mais legível e acessível.
Para visualizar o projeto, basta abrir o arquivo index.html em qualquer navegador web. Nenhuma dependência externa é necessária para a execução.