Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
9
Comments
2

Murilo Moraes Cabral

@murilomcabralBrasil130 points

Em construção...

Latest solutions

  • Stats preview card component with FLEXBOX


    Murilo Moraes Cabral•130
    Submitted about 2 years ago

    0 comments
  • Interactive Rating Component + simple SVG animation


    Murilo Moraes Cabral•130
    Submitted about 2 years ago

    2 comments
  • 3 column preview card component solution WITH GRID


    Murilo Moraes Cabral•130
    Submitted about 2 years ago

    0 comments
  • Order Summary Component - My 6th challenge done


    Murilo Moraes Cabral•130
    Submitted about 2 years ago

    0 comments
  • NFT preview card with device transition animation (scale only)


    Murilo Moraes Cabral•130
    Submitted about 2 years ago

    0 comments
  • Profile card component solution


    Murilo Moraes Cabral•130
    Submitted about 2 years ago

    0 comments
View more solutions

Latest comments

  • Jarlei Sassi•170
    @jarleisassi
    Submitted about 2 years ago

    Stats preview card component

    2
    Murilo Moraes Cabral•130
    @murilomcabral
    Posted about 2 years ago

    Hey, Jarlei Sassi! I'm still learning, don't even work with this yet, but I hope one day, soon, I'll be able to start my career. 🥳

    What I've notice, at first, was the reset settings that you made using many selectors. What I do and maybe could be better in that case, is to use a selector like this:

    *, ::before, ::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    

    The * selector here, is used to select all elements at once.

    💡 You can see more about selectors in W3Schools - CSS Selector Reference and more about combinators in W3Schools - CSS Combinators.

    About the image, you can use it in a img element inside a picture one. You can make the picture with a background-color of soft violet and for the img use mix-blend-mode with value multiply. That well you also can adjust the image opacity so it can better match the original design.

    About picture in W3Schools - HTML <picture> Tag.

    mix-blend-mode: multiply;
    

    Again, I'm still learning! I hope this can help with something. 😃

    Marked as helpful
  • Luan•10
    @Luan-LopS
    Submitted about 2 years ago

    Pagina responsiva, com html e css

    2
    Murilo Moraes Cabral•130
    @murilomcabral
    Posted about 2 years ago

    Opa! Eu não sou especialista, também estou aprendendo, ainda bem no início inclusive... rsrs

    Com o que sei hoje, talvez buscaria usar algo como uma tag <section> separando os dois lados, "Your result" de "Summary", talvez alguma outra tag também no meio. Isso acaba facilitando na leitura do código depois.

    Minha dica seria: procure estudar sobre html semântico! Muito importante para SEO!

    Sei que não foi sua pergunta, mas talvez também seria mais interessante usar o valor dentro de span sozinho, deixando o espaço adicional junto ao " / 100". Isso facilita um pouco depois quando implementar interação com javascript por exemplo.

    Minha recomendação: <p class="total"><span>80</span> / 100</p>

    Marked as helpful
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

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