CSS e design responsivo

15/01/2019

27

Bom dia!

Preciso apresentar um trabalho na faculdade que pede para criar um layout responsivo com CSS com os requisitos abaixo, mas não consigo chegar exatamente no que pede no projeto. Pode me dar um help, por favor?

PARTE 1 -Diagrame uma página principal "index.html" levando em conta as seguintes especificações:

Cabeçalho: esta seção deve conter a informação do site, deve ser estruturado conforme as seguintes orientações:

Estabeleça a cor de fundo como #5b7989.
Adicione o Nome do site "Meus primeiros passos com a Fotografia", localizado ao lado esquerdo com a cor branca, a letra deve ter uma sombra de 2px de cor #02010a.
Aplique bordas arredondadas superiores a 10px.
Á direita do cabeçalho desenvolva um menu para a versão desktop com links para as três páginas: Início, Paisagens e Retratos. A página em que está navegando deve ter estilo sem sublinhado neste menu.

Imagem Principal: nesta seção você deve colocar uma imagem de sua preferência, considerando o seguinte:

A imagem deve estar centralizada.
A cor de fundo deve ser #82c3a6

Imagens Secundárias: nesta seção você deve utilizar duas imagens de sua preferência, uma à direita e outra à esquerda. Leve em consideração o seguinte:

Esta seção deve ter duas colunas usando flex para o desktop e uma coluna para móvel.
Aplique a cor de fundo como #d5c75f e uma borda de 1px.
Cada coluna deve ter uma imagem centralizada e conter os respectivos links, sendo a imagem da esquerda um link para a página "Paisagens" e a da direita para a página "Retratos".
Na imagem da esquerda, "Paisagem" aplique um efeito de rotação de 10 graus quando o ponteiro do mouse estiver sobre ela e agregue a cor de sombra #82c3a6 e borda de 2px,
Na imagem da direita "Retratos" aplique um efeito de trasladação de 5px para cima e 20px à direita quando o ponteiro do mouse estiver sobre ela e agregue a cor de sombra #82c3a6 e borda de 2px.

Rodapé: nesta seção você deve incluir informação de contato, termos, redes sociais, e direitos. Tenha em mente as seguintes considerações:

Aplique borda arredondada de 10px nos cantos inferiores.
O rodapé deve ter quatro colunas no desktop e uma coluna no móvel.
Aplique a color de fundo #C6d5c5.
A coluna de contato deve conter um email, um endereço físico e um número de telefone.
Na coluna de termos acrescente uma frase curta referente às políticas.
Na coluna de Redes Sociais, adicione três redes de sua preferência com ícone/imagem e link fictício para o perfil na rede social.
Na coluna de Direitos agregue o seu nome, sobrenome, o símbolo de CopyRight e o ano atual.

PARTE 2 - Diagrame as páginas "paisagens.html" e "retratos.html" tendo em conta as seguintes especificações:

Cabeçalho:Siga as mesmas instruções da página “index.html” para o cabeçalho, mas lembre-se de modificar o título da página para “Começando com as Paisagens” (para página de paisagens) e “Começando com os Retratos” (para a página de retratos) e atualize as mudanças de estilo do nome da página a atual no menu:

Galeria: Inclua uma seção de galeria de imagens, selecione ao menos seis imagens de sua preferência sobre paisagens e retratos de acordo com a página. A galeria deve ser mostrada em três colunas para desktop e em uma para móvel. Siga as seguintes considerações para os efeitos das imagens:

Para a imagem 1, aplique o efeito blur de 10px.
Para as imagens 2,4,6 (pares) aplique a escala de cinza a 100%.
Para a imagem 3, aplique o efeito sépia de 90%.

Rodapé: esta seção deve seguir exatamente os mesmos parâmetros que você aplicou na página principal “index.html”.

Considerações Gerais
Estabeleça a cor de fundo da página como preto #02010a.
Cada imagem de ter um efeito de sombra de 2px com a cor #02010a.
Crie um div chamado conteúdo que esteja centralizado e que tenha no máximo 900px de largura para o desktop e ocupará 100% para dispositivos móveis.
Utilize media queries para o site adaptar-se a dois tamanhos: Desktop com largura de 900px ou mais e para Móvel (com menos de 900px).
As imagens devem ser responsivas.
Responder

Posts

23/01/2019

Ricardo Viena

Olá Danilo, tudo bem?

Vi que esse trabalho pede algumas definições exatas de como devem ser as páginas pedidas.

Mas antes de qualquer coisa, queria saber algo, você sabe usar HTML e CSS?
Responder

23/01/2019

Danilo Duarte

Boa tarde Ricardo!

Tudo bem e vc?

Estou pegando o jeito, nessa parte de efeitos, media queries e design responsivo ainda tenho um pouco de dificuldade, mas devagar chego la.

Pedi um help porque tenho pouco tempo pra entregar esse trabalho e não vou conseguir sozinho, até porque atualmente trabalho em outra área.
Responder

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários. Para saber mais sobre o uso de cookies,
consulte nossa política de privacidade. Ao continuar navegando em nosso site, você concorda com a nossa política.

Aceitar