Início da página institucional apresenta ferramentas essenciais
Uma nova página institucional foi lançada, oferecendo um menu inferior com ferramentas de navegação focadas em informações essenciais. A estrutura da página é centrada na acessibilidade e usabilidade, adaptando-se a diferentes tamanhos de tela para garantir uma experiência otimizada em desktops e dispositivos móveis.
O design da página prioriza a organização visual, utilizando um contêiner flexível que centraliza os elementos principais. Os itens dentro desse contêiner são dispostos em uma linha horizontal em telas maiores, com um espaçamento uniforme entre eles. Essa disposição facilita a identificação e o acesso rápido às diferentes seções da página.
Em telas menores, como smartphones e tablets, a estrutura se adapta para uma organização vertical. Os itens são empilhados um abaixo do outro, alinhados ao centro, garantindo que a navegação permaneça intuitiva mesmo em espaços reduzidos. Essa adaptabilidade é crucial para alcançar um público amplo, independentemente do dispositivo utilizado.
O menu inferior é composto por botões que direcionam os usuários para seções específicas. Um dos botões apresenta a imagem “Botão About the Court” e outro, um “Botão History com ícone de escrita”. Ao clicar nesses botões, os usuários são levados a páginas que fornecem informações detalhadas sobre esses tópicos.
A escolha de imagens como elementos de navegação sugere uma abordagem visualmente atraente, que busca engajar os usuários de forma mais efetiva. A utilização de ícones, como o da escrita no botão “History”, reforça a identificação do conteúdo associado e facilita a compreensão da função de cada botão.
A página utiliza propriedades de estilo CSS para controlar o layout e a aparência dos elementos. A propriedade display: flex é fundamental para a criação de um contêiner flexível, que permite o alinhamento e a distribuição dos itens de forma eficiente. A propriedade justify-content: center centraliza os itens horizontalmente, enquanto gap: 10px adiciona um espaçamento entre eles.
A propriedade flex-wrap: wrap garante que os itens se movam para a próxima linha quando não houver espaço suficiente na tela, evitando que sejam cortados ou sobrepostos. A media query @media (max-width: 800px) define estilos específicos para telas menores, alterando a direção do contêiner para vertical e alinhando os itens ao centro.
Os botões são estilizados com padding: 0px, border: none e background-color: transparent, o que significa que eles não possuem preenchimento interno, borda ou cor de fundo. Isso permite que as imagens dentro dos botões se destaquem, sem interferências visuais.
