Code Monkey home page Code Monkey logo

checkpoint-fei-iii's Introduction

Checkpoint III - Front-End

Olá! Este é o repositório que contém os arquivos do Projeto Streamy criado para o Checkpoint III do módulo de Front-End do Certified Tech Developer, na Digital House.

Github Pages

link: https://tpvale.github.io/checkpoint-fei-III/index.html

Requisitos do projeto

Esse projeto apesar de ter um tema que será definido pelo grupo (até 3 integrantes), deverá cumprir algumas exigências.

1. REQUISITOS GERAIS:

  1. Todo o site deve estar responsivo.
  2. O site deve ser feito com Bootstrap.
  3. O site deve ter hover e transições.
  4. O site deve ter rolagem suave (scroll behavior - smooth).
  5. O title deve variar de acordo com a página atual. Ex: Em um cenário hipotético de filmes, na página do filme peter pan ficaria: DH Flix | Peter Pan.
  6. Todas as páginas devem ter o mesmo header e footer.

2. HEADER:

  1. Header deve conter 4 itens além da logo (Home, itens, login e sobre nós). Cada item deve linkar com uma parte do site ou uma página externa.
  2. O header deverá sempre estar no topo da página.

3. BANNER:

  1. A home deverá ter um banner e este deve ter o efeito parallax, (pesquise por background-attachment).
  2. O banner tem de ter um botão e uma breve descrição do site.
  3. O banner vai ocupar toda área da viewport (VH) do usuário.

4. LISTAGEM DE ITENS:

  1. A home terá uma listagem de itens.
  2. O link do header para os itens, devem levar para essa seção da página.
  3. A listagem dos itens tem de ter um scale no hover, mas se quiser fazer outra animação, também pode.
  4. Mínimo de itens para listagem é 6.
  5. Os itens devem ter: título, foto, descrição e um botão que leva para a página de detalhe deste item.

5. FOOTER

  1. No footer deve haver informações sobre a equipe e sobre contato. Bem como ano de desenvolvimento do trabalho.

6. PÁGINA DE DETALHE:

  1. Seu site tem de ter uma página de detalhes para cada item listado onde haverá uma explicação sobre o mesmo. No exemplo dos filmes, a página de um filme teria sua sinopse, link para o trailer e ficha técnica.

7. PÁGINA OU MODAL DE LOGIN:

  1. Formulário de login deverá ter uma logo, um campo de user e um campo de senha e um botão de submit.

Membros do Grupo

  1. Matheus Rayol
  2. Tiago Vale
  3. Rafael Soares

Conteúdo externo utilizado

  1. Pacote de ícones FontAwesome;
  2. Família de fontes Mont Trial da FontFabric;
  3. Script em JS para alteração de links anchor ativos, encontrado no Stackoverflow.

checkpoint-fei-iii's People

Contributors

matheusrayol avatar tpvale avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.