Ir para conteúdo

Recriando o site do Insta


Caiçara

Postagens Recomendadas

Fala rapaziada, por algum motivo desconhecido estou remodelando todo o site do InstaMC, talvez para treinar, talvez apenas por diversão, pois estou me divertindo muito, mas independente do motivo estou fazendo.

 

Link das imagens do site: https://imgur.com/a/RYN4WRN

 

Caso queiram comparar com o site oficial: https://www.instamc.com.br/

 

Vlw tmj!!!

 

obs: Ainda não acabei e esta bem longe disso!

Link para o comentário
Compartilhar em outros sites

Legal sua ideia mano. Tenho alguns pontos interessantes que seria legal você dar uma mechida.

Primeiro, Seu background poderia ter um pouco mais de qualidade, quando você for "tirar a foto", tente fazer isso numa resolução que se encaixe bem com o site.

Outra coisa, não sei se você está fazendo css/html puros mas creio que esse menu seja reciclado do site original. Sendo assim, se você for reciclar código do site original, use de cara o bootstrap para fazer esse layout e não perca tempo usando html e css puros. Por que? O site original tem bootstrap embutido e muito javascript  para fazer efeitos visuais(só não estou certo se estão usando jquery), o bootstrap vai te ajudar a deixar o site responsivo para se adaptar automaticamente a resoluções diferentes. Com isso, você vai poder obter esse tipo de resultado:

41SqWx5.png

(site do insta em resolução para celulares)

 

  Você também pode optar por não usar o bootstrap, E então você poderia usar FlexBox no seu css para redimensionar seus elementos e dependendo da resolução do dispositivo do usuario. O problema é que você precisaria escrever cada vez mais código a medida que sua aplicação for crescendo, tendo que declarar algo semelhante a isso para cada elemento redimensionado: 

7XQeyiK.png

(flexbos no css puro em um site que eu desenvolvi)

Link para o comentário
Compartilhar em outros sites

Legal sua ideia mano. Tenho alguns pontos interessantes que seria legal você dar uma mechida.

Primeiro, Seu background poderia ter um pouco mais de qualidade, quando você for "tirar a foto", tente fazer isso numa resolução que se encaixe bem com o site.

Outra coisa, não sei se você está fazendo css/html puros mas creio que esse menu seja reciclado do site original. Sendo assim, se você for reciclar código do site original, use de cara o bootstrap para fazer esse layout e não perca tempo usando html e css puros. Por que? O site original tem bootstrap embutido e muito javascript  para fazer efeitos visuais(só não estou certo se estão usando jquery), o bootstrap vai te ajudar a deixar o site responsivo para se adaptar automaticamente a resoluções diferentes. Com isso, você vai poder obter esse tipo de resultado:

41SqWx5.png

(site do insta em resolução para celulares)

 

  Você também pode optar por não usar o bootstrap, E então você poderia usar FlexBox no seu css para redimensionar seus elementos e dependendo da resolução do dispositivo do usuario. O problema é que você precisaria escrever cada vez mais código a medida que sua aplicação for crescendo, tendo que declarar algo semelhante a isso para cada elemento redimensionado: 

7XQeyiK.png

(flexbos no css puro em um site que eu desenvolvi)

Eu basicamente ainda só entendo de html e css, então é puro e cru, ainda pretendo me aprofundar mais, estou usando o insta mesmo pq consigo feedbacks do que o povo ta achando. Mas depois que terminar isso aqui tudo em html/css vou ir mexendo nele e implementando outras coisas que for aprendendo com javascript e bootstrap

Link para o comentário
Compartilhar em outros sites

  • 3 meses depois...
Visitante
Este tópico está impedido de receber novos posts.
  • Quem Está Navegando   0 membros estão online

    Nenhum usuário registrado visualizando esta página.

×
×
  • Criar Novo...