Skip to content
OverviewSolutions
3
Comments
5

Bruno Pinho

@pinhobSão Paulo, Brazil80 points

I like to make cool things on the web. Currently, I work as a FullStack Developer at Vivo Telefônica Brazil. Feel free to see my challenges and give any feedback. I'll appreciate it!

I’m currently learning...

Svelte

Latest solutions

Latest comments

  • Bruno Pinho•80
    @pinhob

    Hi, Gustavo! Great work finishing the challenge! 🚀

    I have a few suggestions for you of things that I found helpful doing my solution for this challenge:

    • I like your approach to the hover effect in the NFT image, but try to use width: 100% in the .imgNFT class. This will make your image responsible and also the same size as the ::before and ::after elements.

    • You can remove the height of the <main> component, or use min-height: 60vh instead of height: 60vh. This way, the element will grow to fit all the children's content. You can see more about the min-height property here, it's really helpful in some cases.

    • Take a look at the BEM methodology to name classes. It's a great way to choose how to name our classes, in my opinion! (If you want a really good video in Portuguese, watch this one)

    I hope you find theses tips helpful.

    Congrats again for the challenge and happy coding! 🤓

  • Bruno Pinho•80
    @pinhob

    Hey, Nirmal! Very cool solution! Congrats!

    I also learned a lot doing this challenge. 🤓

    Two suggestions I have, if you want to try to add more elements to your solution:

    • If you want to do the white border in the author avatar, like in the original design, you can use this code in the img style:
      border: 1px solid var(--color-primary);
  border-radius: 50%;
    • If you want to do the hover effect in the NFT image, you can solve it using the pseudo-elements ::before or ::after in your image container. If you want to have an idea, I found this codepen helpful to have a grasp of how to do it. For the eye icon being centered, I used flexbox inside my ::after selector.

    And congrats again for the project. Good coding! 🚀

  • Bruno Pinho•80
    @pinhob

    Hey, Gerald! Cool solution for the challenge so far! 🙂

    The hover gradient and icon were tricky for me too - I spend a lot of time trying to find a solution and need to see how other people did at the end to create my own.

    But one way to solve it is using the pseudo-elements ::before or ::after in your image container. If you want to have an idea, I found this codepen helpful to have a grasp of how to do it. Outside the gradient part, for the icon being centered, I used flexbox.

    I'm not 100% sure that my solution is the best approach, but if you want to check it out, you can see my code here. I highlighted the important part for you.

    And good coding for you, man! 🚀

    Marked as helpful
  • Bruno Pinho•80
    @pinhob

    Fala, Cauan! Muito legal ver outro brasileiro por aqui!

    Vou escrever em português pra facilitar pra gente, então, beleza? 😅

    Seu projeto tá bem legal, mas tenho algumas sugestões:

    • Uma dica que dou é pesquisar sobre a metodologia BEM para nomes de classes e aplicar em seu projeto.

    Ajuda bastante na hora de nomear as classes de forma mais clara e é um padrão bastante utilizado com CSS puro. Esse vídeo aqui é bem legal e fala mais sobre o BEM.

    • Outra dica é usar rem para os valores de tamanho de fonte do seu projeto.

    As classes como .small e .left tão usando pixels e por isso elas não se adaptam ao tamanho de fonte escolhido pelo usuário. Usando rem sua aplicação ficaria mais acessível e evitaria isso - se quiser fazer o teste, vai nas configurações do seu navegador e muda o tamanho da fonte. Vai ver que o título muda de acordo mas que os parágrafos não.

    A diferença do rem pros pixels é que ele considera esse tamanho de fonte definido pelo usuário para calcular o tamanho da fonte.

    Se não quiser ficar fazendo a conversão de pixels para rem de cabeça, você pode usar a função calc() e deixar o CSS fazer por você, usando a fórmula tamanho que quer / 16 * 1 rem. O valor de 16 é em relação aos 16pxs que costumam ser o tamanho padrão de fonte dos navegadores. Exemplo:

    .small {
  font-size: clamp(12 / 16 * 1rem) // 0.75rem
}
    • E por último, vi que você já atualizou a questão do tamanho do card. Se quiser que suas mudanças se reflitam no print aqui da plataforma, você pode pedir generate a new screenshot dentro do painel da sua solução.

    No mais, parabéns pelo projeto. E bons códigos por aí! 🚀

  • Bruno Pinho•80
    @pinhob

    Hey, arjuyyy! Congrats. Great work! 🎉

    And flexbox is awesome! Time after time saves my day too! 🤓

    If you want a really good article to learn more about this, I really recommend this one.

    If you want to save a (very) few lines you can put the attributes at the end in just one declaration, like:

    .name:hover, h2:hover {
    color:hsl(178, 100%, 50%);
}

    The same for all the cursor: pointer declarations. But, well, this is just a question of preference.

    Anyway, great job. Good coding! 🚀

    Marked as helpful