Realizado

Criação de uma página flexbox de acordo com as premissas informadas

Publicado em 08 de Setembro de 2020 dias na Design e Multimedia

Sobre este projeto

Aberto

Boa tarde,

Segue o PDF com o layout que deve ser colocado no lugar do conteúdo que temos hoje na tela de Como Participar (versão desk e mobile).

Em anexo estão as imagens em svg que está no arquivo, o restante são todos componentes em html mesmo. Os demais ícones estão no fontawesome que já está disponível no site.

Segue a lista de cores:
image.png

A fonte da página toda é a Catamaran que já está inclusa.

--------------------------------
Observações técnicas
1) A tela deve ser responsiva no breakpoint de 768px (no bootstrap, é o 'sm')
2) A imagem dos produtos pode usar o link: https://www.msd-saude-animal.com.br/images/cattle/borgal.png
3) Cada seção da página está bem definida e deve ocupar a altura total da tela
4) Os botões no inferior devem servir para navegação entre as seções (pra cima: seção anterior, para baixo: próxima seção)

Se eu esqueci alguma imagem, só avisar.
Atenciosamente,
===================================================================

Premissas de trabalho necessárias:

Na primeira tela acredito que dê para fazer o seguinte:

3 elementos principais
- Cabeçalho (flutuante: position absolute)
- Primeira linha (contendo o quadro de cada venda dos produtos + componente de imagem de vitória)
- Segunda linha (contem o componente de imagem de dúvida + componente de clique e entenda)

Sobre o cabeçalho,
div:position absolute
--- div:position relative
-------div do triangulo com position absolute
-------div do texto centralizada no pai dela

Sobre a primeira linha,
div:display flex
---div com o conteúdo do quadro tendo um flex: 2
---div com o componente da imagem tendo um flex: 3 e position relative
-------imagem
-------div com position absolute e o texto Você é uma peça fundamental...

Sobre a segunda linha
div:display: flex
---div com o componente da imagem tendo um flex: 1 e position relative
-------imagem
-------div com position absolute e o texto Mas como funciona?
---div com position relative
------div com o texto clique e entenda
------div com position absolute circular com o ícone no meio

Categoria Design e Multimedia
Subcategoria Web Design
Do que você precisa? Alteração média
Isso é um projeto ou uma posição de trabalho? Um projeto
Disponibilidade requerida Conforme necessário

Prazo de Entrega: Não estabelecido

Habilidades necessárias

Outro projetos publicados por E. F.