Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
14
Comments
4
Cris Augusto
@Cristhyam-Augusto

All comments

  • Larissa•10
    @larisn
    Submitted over 2 years ago

    Product preview card, mobile first

    #accessibility
    1
    Cris Augusto•160
    @Cristhyam-Augusto
    Posted over 2 years ago

    Ola Larissa, tudo bem? Parabéns por concluir o desafio, a solução ficou realmente bem parecida. 🎉🎉 Se você me permite, gostaria de pontuar algumas melhorias para essa solução:

    • Ao inves de utilizar display block, absolute, relative e outros para posicionar os elementos da maneira que deseja, você pode utilizar display:flex e alinhar os elementos de forma flexivel dentro de uma box que vai se ajustar dependendo do tamanho da tela.

    More Info for FlexBox

    • Ademais, notei que você utiliza margem para gerar espaço entre os elementos, você pode substituir esse tipo e atividade pela propriedade gap, juntamente com o display flex.

    More info for Gap

    • Para centralizar o seu container principal no meio da tela, você pode utilizar as seguintes propriedades:
    body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
    } 
    
    • Por fim, caso você se interesse em aprender mais sobre padrões de projeto no css, recomendo a leitura sobre ITCSS, SMACSS ou/e BEM.

    Parabéns novamente pela solução, qualquer dúvida pode me chamar. Caso meus comentários tenham sido útels, não esqueça de marcar como útil. Happy Coding! 😊

  • rockdoginafog•710
    @rockdoginafog
    Submitted over 2 years ago

    Social Proof Section (slightly different)

    1
    Cris Augusto•160
    @Cristhyam-Augusto
    Posted over 2 years ago

    Congratulations for the work and for the interest in modifying the layout to make it more beautiful. 👏👏

    Keep coding, happy coding. 💪

  • Jessé Caldas•10
    @JcCaldas
    Submitted over 2 years ago

    Interactive rating component using CSS and JS

    2
    Cris Augusto•160
    @Cristhyam-Augusto
    Posted over 2 years ago

    Hello @JcCaldas, how are you? Congratulations for the work, it turned out very well. I noticed that you used a javascript function to change the color of items when hovering the mouse (mouseover), however, you can do this with just css

    .item:hover {
      background color: hsl(25, 97%, 53%);
      color: hsl(0, 0%, 100%);
    }
    

    The same goes for the submit button. I hope the feedback was helpful, please don't hesitate to MARKED AS HELPFUL, thanks. Happing coding.

    Marked as helpful
  • furkan 🧑🏻‍🎨•30
    @furkankucukkiris
    Submitted over 2 years ago

    Html/Css/Js used and it was a good example for learning DOM

    3
    Cris Augusto•160
    @Cristhyam-Augusto
    Posted over 2 years ago

    Hi Furka how are you?? Congratulations on the design, it was really identical. I did a project like this yesterday, and I got some feedback that might be useful for you too: I noticed that I can send a review even without filling in the value, so you can change the code as below to avoid this.

      rate.addEventListener("click", () => {
        rate.style.backgroundColor = "grey";
        rate.style.color = "white";
        rating.innerHTML = rate.innerHTML;
        submitButton.addEventListener("click", () => {
          mainContainer.style.display = "none";
          thanksContainer.style.display = "flex";
        });
      });
    }); 
    

    I also noticed that in the html you used ID and class references for the LI, but I don't think that's necessary, because you used only classes in css. In general I think that's it, congratulations on the work, it was really good.

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub