InfoAjuda

Escola Infoajuda => Desafios => Tópico iniciado por: wandersondantas em Setembro 04, 2017, 11:37:11 am

Título: Desafio - Case da vida real
Enviado por: wandersondantas em Setembro 04, 2017, 11:37:11 am
O desafio será criar uma página para uma agência chamada Webpaint, a empresa nos enviou o layout com as seguintes especificações:

O site deverá ser criado utilizando o Bootstrap (Versão 3 ou 4);

Especificações gerais para todas as páginas:
A fonte utilizada no site é uma webfont gratuita do google da família "Lato" - https://fonts.google.com/specimen/Lato (Esse é o nosso primeiro desafio, integrar essa fonte ao nosso site);
Todas as imagens necessárias para o desenvolvimento encontram-se na pasta “images”;
A área da Logo e menu tem um fundo de cor: #262626;
Menu, fonte em negrito, tamanho 13px, todas as letras maiúsculas em tom de cinza (#d9d9d9), quando o mouse passar por cima do link, mudar a cor para vermelho (#ff6760). A página que o usuário estiver acessando, o link deverá ficar marcado no mesmo tom de vermelho;
Cada página tem um arquivo em Jpg para verificar se está ficando de acordo com o layout desejado;
O conteúdo central da página possui um tamanho fixo de 1110px e deverá ser centralizado;
O Rodapé das páginas serão todos iguais e estão divididos em duas partes:
Contato rápido: Possui um título que deverá ter o tamanho de 30px, negrito e na cor #e0e0e0; o subtítulo, tamanho 20px, letra fina (light) e cor #bebebe; Endereço e telefone tamanho 14px, letra normal e cor #bebebe; Toda seção com fundo na cor #313131;
Os links de redes sociais deverão ser abertos em uma nova aba;
Copyright: tamanho 14px, letra normal e cor #bebebe; Fundo da seção: #2c2c2c;

Página Inicial (“Home”):
Primeira seção possui um título de tamanho 60px e cor #d9d9d9 e apenas o nome da empresa em negrito; um subtítulo de tamanho 40px com a mesma cor do título, com letra fina e um detalhe em itálico; e um botão linkado para a página do portfólio tamanho da letra 14px em negrito e cor branca, fundo na cor #ff6760 com bordas arredondadas; Para o fundo dessa seção deverá ser escolhida uma imagem e coloca-la em escala de cinza;
Segunda seção - serviços, temos um ícone, um título de tamanho 18px em negrito e na cor #616161; e uma descrição de tamanho 14px e na mesma cor do título; O fundo dessa seção é #f8f8f8;
Terceira seção - portfolio, temos um título de tamanho 30px, em negrito e na cor #616161; um subtítulo de tamanho 20px, letra fina e mesma cor do título; as imagens que compõem o portfolio deverão ter um efeito de, ao passar o mouse, a imagem fica com uma opacidade de 40 - 50% e aparecerá o título da imagem centralizada no tamanho 25px, negrito e totalmente preto.

Página “Portfólio”
Área do título com o tamanho 60px, negrito e na cor #d9d9d9; O fundo da seção deverá ser uma imagem em escala de cinza que represente a página;
As imagens tem a mesma especificação da página inicial

Página “About”
Área do título com o tamanho 60px, negrito e na cor #d9d9d9; O fundo da seção deverá ser uma imagem em escala de cinza que represente a página;
Texto no tamanho 20px e na cor #616161;
Área de serviços igual a página inicial;

Página “Contact”
Área do título com o tamanho 60px, negrito e na cor #d9d9d9; O fundo da seção deverá ser uma imagem em escala de cinza que represente a página;
Os campos do formulário deverão ter altura de 50px com borda de 3px na cor #ea6660; O texto no tamanho 20 px, em negrito e na mesma cor da borda do campo; e bordas arredondadas;
O botão deverá ter a fonte no tamanho 14px, em negrito e na cor branca; Fundo na cor #ea6660 e com bordas arredondadas;

Finalizando o desafio:
Ao finalizar, seu projeto deverá ser colocado em um servidor web gratuito - http://000webhostapp.com/

Prazo de entrega: 18/09/2017

Link de acesso as imagens do projeto: https://drive.google.com/drive/folders/0BwnjKw1yTCnWT0ZNNnh4aGZOWkU?usp=sharing (https://drive.google.com/drive/folders/0BwnjKw1yTCnWT0ZNNnh4aGZOWkU?usp=sharing)