Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Home Inicial] Frontend - Ajustar alinhamentos da Home em formato Desktop #39

Open
5 tasks
JohnnyKamigashima opened this issue Jun 15, 2023 · 3 comments
Open
5 tasks
Labels
Frontend Home 🐞 Bug Something isn't working

Comments

@JohnnyKamigashima
Copy link

Fizemos a implementação da página e ficou boa, porém alguns elementos ficaram muito distantes e em alguns locais o espaço no centro da página ficou muito vazio.

Para resolver vamos criar um bloco/div central que ocupe 6/8 da largura da página em formato desktop e alinhar os elementos dentro dele.

O teste de visualização atual foi feito baseado em uma janela de 1920 x 1080 px.
Seguir anotação da screenshot para referência (foram marcadas de forma rascunhada).
O grid já está dividindo a tela em 8 colunas.

Image

Critérios de aceitação

  • Deve manter o o design original
  • Deve ser responsivo (posicionamento relativo)
  • Deixar uma margem superior no cabeçalho para que nenhum elemento dele esteja grudado no canto da página.
  • Subir bloco verde Compartilhe sua experiência para não ficar espaço vazio muito grande
  • Mover logo Techrate do rodapé para esquerda para manter uma margem balanceada em relação ao texto de copyright
@luizpbello luizpbello added 🐞 Bug Something isn't working Home Frontend labels Jun 15, 2023
@JohnnyKamigashima
Copy link
Author

Acredito que está ok o que vocês acham @GabiStein1 , @rafatomaz , @julia-fbarreto ?

Image

Image

Image

Image

@julia-fbarreto
Copy link

@JohnnyKamigashima cheguei a comentar com o Luiz hoje no whatsapp, algumas dimensões do mobile a borda do texto "Em breve: Empresas em destaque" ficou um pouquinho cortado e o texto "Sobre nós" com o texto um pouco colado na margem alguns modelos e dimensões usados:

  • Android Samsung Galaxy S20 (dimensão: 360x800):
    Samsung Galaxy S20_360-800

  • IOS iPhone 12 PRO (dimensão: 390x844):
    iPhone 12 PRO_390-844

  • IOS iPhone 12 PRO MAX (dimensão: 428x926) - já nessa dimensão ficou perfeito!:
    iPhone 12 PRO MAX_428-926


No tablet, algumas dimensões não apareceu as imagens na lateral conforme o protótipo, modelos e dimensões usados:

  • Galaxy Tablet S7 (dimensão: 800x1280):
    Galaxy Tablet S7_800-1280

  • iPad Mini (dimensão: 768x1024):
    iPad Mini_768-1024

  • iPad PRO 11 (dimensão: 834x1194) - já nessa dimensão ficou perfeito!:
    iPad PRO 11_834-1194(v2)

@JohnnyKamigashima
Copy link
Author

Faremos mais um estudo reduzindo a página desktop para um tamanho mais Laptop em outra issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Frontend Home 🐞 Bug Something isn't working
Projects
Status: 🏆 Pronto
Development

No branches or pull requests

3 participants