Galeria de imagens

Este mini projeto consiste em criar uma galeria de fotos utilizando apenas HTML, CSS e JavaScript, baseado no layout da página apresentada. A galeria terá uma barra de navegação lateral e um botão para carregar mais imagens. O objetivo é criar uma interface limpa e funcional, com foco na exibição das fotos.

🤓 Antes de começar

Certifique-se de ter as imagens que deseja exibir na galeria. A estrutura básica do projeto envolverá três arquivos principais:

• index.html para a estrutura da página.
• styles.css para a estilização.
• script.js para o comportamento dinâmico.

🔨 Requisitos

Para todas as páginas

• Crie uma barra lateral que contenha um menu com home, fotos, bio, e contato.
• Garanta que a barra de navegação lateral contenha links para diferentes seções da página (Home, Fotos, Bio, Contato) e estilize-a de forma a ficar fixa na lateral da página.
• Abaixo da barra lateral, crie um footer para conter as redes sociais.

Página Home

• Crie uma seção que contenha uma imagem de fundo e ao centro com o texto Boas vindas ao meu portfólio;
• Acrescente um botão abaixo da descrição, com o texto ver mais para levar para a página de fotos.

Página Fotos

• Ao lado da barra lateral, adicione a galeria de imagens;
• Adicione um botão Ver mais que, ao ser clicado, carrega mais imagens na galeria utilizando JavaScript.

Página Bio

• Faça uma seção que contenha uma imagem de fundo e ao centro um texto de descrição;
• Insira um botão abaixo da descrição para levar para a página de fotos.

Página Contato

• Crie uma seção que contenha uma imagem de fundo e ao centro, adicione email e telefone para contato;

👀 Dicas:

• Utilize CSS Grid ou Flexbox para organizar as imagens.
• No JavaScript, utilize appendChild() para carregar dinamicamente mais imagens ao clicar no botão.

🔨 Desafio extra para quem quer ir além

• Crie a parte responsiva do site.
• Crie um efeito de zoom nas fotos ao passar o mouse por cima utilizando apenas CSS (hover).
• Adicione uma funcionalidade de modal em JavaScript que permita ampliar a imagem ao clicar nela, exibindo-a em uma sobreposição.

🎨 Design Sugerido

Siga o layout da galeria apresentado na imagem, mas fique à vontade para usar sua criatividade na disposição das imagens e na estilização. 🔗 Link do design

👉🏽 Sobre esse mini-projeto

O que você irá praticar:

HTML

• Criação de uma estrutura semântica de página.
• Uso de elementos como <nav> e <section> para organizar o conteúdo.

CSS

• Criação de layouts responsivos com Grid ou Flexbox.
• Aplicação de estilizações dinâmicas com pseudo-classes como hover.
• Utilização de media queries para adaptar o design.

JavaScript

• Manipulação do DOM para adicionar ou remover elementos da galeria.
• Uso de eventos para adicionar interatividade (como carregar mais imagens ao clicar no botão).