Responsive page of a single product using only css, html and js

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted over 2 years ago

  👾Oi Gabriel, tudo bem? Parabéns para sua solução!

  Achei bem legal a animação que você colocou no texto do PERFUME, ficou bacana!

  Tenho algumas dicas pra você:

  1.Tenta sempre usar as fontes do desafio, você consegue isso checando os arquivos styleguide.md lá vai ter todas indicações. No caso desse desafio as fontes são Montserrat e Fraunces.

  Aqui o import delas:

  font-family: 'Fraunces', serif;

  font-family: 'Montserrat', sans-serif;

  CSS @Import:

  @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],700&family=Montserrat:wght@500;600;700&display=swap');

  2.Outro ponto é a imagem, ela está achatando quando o container redimensiona, a melhor coisa que você pode fazer e colocá-la dentro de uma div e determinar max-width: 100%; pra img e depois dizer o tamanho da div, desse jeito a imagem vai respeitar o tamanho da div e nao si mesma, como você definiu o tamanho da img com vh ela achatou. Olha o exemplo abaixo de como funcionaria!

  .img-box {
  max-width: 450px;}
  
  img {
      display: block;
  max-width: 100%;}
  

  Espero ter ajudado e continue no foco irmão.

  Marked as helpful

  1

  ---

  

  Gabriel Silva•20

  @BielTsilvaPosted over 2 years ago

  @correlucas com certeza ajudou Man, sobre as fontes, eu comentei na descrição que esqueci de olhar os styles, fui fazendo por mim, foi legal pq pude ir comparando as coisas e vendo como elas se encaixavam, a parte ruim é que ficou bem diferente, sobre a imagem, uma dica e tanto, no geral farei as alterações muito obrigado pela atenção.

  1

  

  Lucas 👾•104,400

  @correlucasPosted over 2 years ago

  @BielTsilva Tranquilo irmão, precisando de ajuda só comentar que eu olho seu código.

  1

  

  Gabriel Silva•20

  @BielTsilvaPosted over 2 years ago

  @correlucas meu html tá bem ruim né?

  0

  

  Lucas 👾•104,400

  @correlucasPosted over 2 years ago

  @BielTsilva Se bem que não mano, do seu código eu só excluiria o <header> e ao invés de usar uma <div> eu usaria <main> pra pegar todo os conteúdos.

  Se você quiser dar uma olhada na minha solucao pra ver como fiz o html: https://www.frontendmentor.io/challenges/product-preview-card-component-GO7UmttRfa/hub/product-preview-card-vanilla-css-and-custom-hover-state-on-hero-85A1JsueD1

  Ta ai o link

  1

  

  Gabriel Silva•20

  @BielTsilvaPosted over 2 years ago

  @correlucas beleza, vou olhar e fazer as correções quando chegar em casa ..

  0

  

  Gabriel Silva•20

  @BielTsilvaPosted over 2 years ago

  @correlucas eu tinha esquecido de marcar foi mal ;-;

  0

  

  Lucas 👾•104,400

  @correlucasPosted over 2 years ago

  @BielTsilva tranquilo, depois fala se funcionou as modificações, mas no geral a estrutura ta cert 👏

  0

  

  Gabriel Silva•20

  @BielTsilvaPosted over 2 years ago

  @correlucas vaaaaleu Man

  0

  

  Gabriel Silva•20

  @BielTsilvaPosted over 2 years ago

  @correlucas até funcionou, mas no meu @media deu uma quebrada, eu vou ver como vc aplicou no seu código, responsividade na prática é um pouco tenso no começo ;--;

  0