@correlucas
Posted
👾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
@BielTsilva
Posted
@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.
@correlucas
Posted
@BielTsilva Tranquilo irmão, precisando de ajuda só comentar que eu olho seu código.
@BielTsilva
Posted
@correlucas meu html tá bem ruim né?
@correlucas
Posted
@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
@BielTsilva
Posted
@correlucas beleza, vou olhar e fazer as correções quando chegar em casa ..
@BielTsilva
Posted
@correlucas eu tinha esquecido de marcar foi mal ;-;
@correlucas
Posted
@BielTsilva tranquilo, depois fala se funcionou as modificações, mas no geral a estrutura ta cert 👏
@BielTsilva
Posted
@correlucas vaaaaleu Man
@BielTsilva
Posted
@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 ;--;
