Você está na página 1de 8

Documentação página São Paulo

Nomes: Gabriel Rezende Nº: 10


Lucas Henrique Nº: 24

Nesta parte do código está presente os links com o Bootstrap para fontes, estilos, etc.
Está inserido também o título da guia

Aqui temos a construção da navbar para facilitar a navegação do usuário. Junto à links
que redirecionam após serem clicados através dos ids da seção escolhida:
A tag header é responsável por gerar a capa, a tela que o usuário enxerga assim que
acessa o site. Está presente na mesma a imagem de fundo, uma frase de boas-vindas
com a fonte fornecida pela class “intro-lead-in”, uma frase para aguçar a curiosidade
do leitor com o estilo do texto fornecido pela class “intro-heading text-uppercase”.
Abaixo do texto criado, foi inserido um botão, estilizado pela class “btn btn-primary
btn-xl text-uppercase js-scroll-trigger”, a qual redireciona o utilizador para a seção
lugares:

Nesta parte está a apresentação da seção lugares. O estilo dos textos e


posicionamentos dos elementos estão sendo definidos por “class” e “div”:
Ainda dentro da seção, essa parte do código contém alguns dos principais pontos
turísticos de São Paulo. Cada “card” representa um, com a descrição: thumbnail, nome
do lugar e uma característica do mesmo. Estão presentes classes responsáveis pela
composição dos cards, distribuição dos elementos visuais. Classes como: portfolio-
hover, fas fa-plus fa-3x, são responsáveis pela animação visual, que ocorre quando é
posicionado o cursor em cima da imagem. Isso se repete em todos os “cards” apenas
mudando informações como título e descrição:
Criação da aba com mais detalhes do ponto turístico. É definido o tamanho da aba,
título, descrição, imagem, posicionamento dos itens, botões para fechar. Isso se repete
em todos os outros pontos turísticos, com alterações no título e descrição:
Foi aberta uma nova seção, onde fica a parte de produtores. Foi adicionado o título,
novamente estilizado por sua respectiva class e disposto na tela do usuário de acordo
com as definições estabelecidas dentro das classes das divs:
Construção da imagem do produtor, estabelecendo forma e tamanho. Botão com o
ícone da rede social que redireciona o usuário. Isso se repete com a outra imagem:

Rodapé pré-estabelecido pela class “footer”. Class “copyright” dá estilo ao texto:


Links do bootstrap para o uso do js no código.

Você também pode gostar