TatianePirico / ifsp-front-list-3

Esse projeto se trata de uma galeria de fotos construída utilizando somente HTML e estilizada com Flexbox

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

IFSP Lista de Exercícios frontend

Sumário

Sobre

Objetivo: Criar três documentos HTML distintos:

  • galeria_fotos.html: Exibe 9 fotos em uma grade similar ao modelo.
  • cards.html: Exibe 6 cards com fotos e informações, todos com a mesma altura.
  • navbar.html: Exibe uma barra de navegação com links e campo de busca.

Requisitos:

  • Tamanhos e larguras: Definir por conta própria para similaridade com os modelos.
  • Seletor de classe: Utilizar em todas as tags.
  • Imagens: Gerar com Lorem Picsum.

Detalhes:

  1. galeria_fotos.html: 9 fotos em grade 3x3. Imagens de tamanhos variados. Posicionamento similar ao modelo.
  2. cards.html: 6 cards com foto, título e descrição. Altura uniforme para todos os cards. Layout similar ao modelo.
  3. navbar.html: Barra de navegação horizontal. Links para "Home", "Sobre" e "Contato" à esquerda. Campo de busca à direita.

Estrutura

|-- cards.html
|-- navbar.html
|-- photo_gallery.html
|-- README.md
|-- style.css
  • cards.html: Arquivo que exibe cards com foto e descrição;
  • navbar.html: Arquivo que exibe barra de navegação;
  • photo_gallery.html: Arquivo que exibe galeria de fotos;
  • style.css: Arquivo de estilização;

Execução

Para iniciar o projeto basta clicar no arquivo desejado.

  • cards.html - para abrir tela de cards;
  • navbar.html - para abrir tela com barra de navegação lateral;
  • photo_gallery.html - para abrir tela com galeria de fotos;

Contato

About

Esse projeto se trata de uma galeria de fotos construída utilizando somente HTML e estilizada com Flexbox


Languages

Language:HTML 70.7%Language:CSS 29.3%