Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
7
Comments
4

Jo

@joana-trotsEarth110 points

Hi! I'm Junior Frontend Developer with a good sense of beauty 😍 Learning React and UI/UX and always ready for challenges 🤘💪

Latest solutions

  • NFT Preview Card


    Jo•110
    Submitted almost 3 years ago

    0 comments
  • Responsive landing page with Grid, Flex and SASS (+ Vanilla JS)

    #sass/scss#accessibility

    Jo•110
    Submitted almost 3 years ago

    0 comments
  • Coming soon page with Form validation and SASS

    #sass/scss

    Jo•110
    Submitted almost 3 years ago

    0 comments
  • Interactive rating component solution with SASS


    Jo•110
    Submitted almost 3 years ago

    1 comment
  • Product preview card component with CSS Flexbox, using SASS


    Jo•110
    Submitted almost 3 years ago

    0 comments
  • Article preview component solution | CSS vs JS


    Jo•110
    Submitted almost 3 years ago

    0 comments
View more solutions

Latest comments

  • Kinga•150
    @K-Muzslay
    Submitted almost 3 years ago

    Frontend-Mentor-NFT-preview-card-component solution with Flexbox

    1
    Jo•110
    @joana-trots
    Posted almost 3 years ago

    Hi, nice job! You can try to use opacity property for the overlay element instead of z-index, then you can add transition property for a smooth effect 😉 If you have any difficulties, you can find this solution on my account :) Keep it up 👍

  • ilyasazer•100
    @ilyasazer
    Submitted almost 3 years ago

    NFT preview card component

    2
    Jo•110
    @joana-trots
    Posted almost 3 years ago

    Good work! I see you’re having trouble centering <main> element, try to add Flex Box properties for body { height: 100vh; display: flex; justify-content: center; margin: 0; padding: 0; }, so for <main> block you don’t have to use margin-top property, and it’s beautifully centered!👌 You can also use Flex Box properties to place elements inside 'container' block (without using position: absolute). You can learn about flexboxes here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ or anywhere else 😊 Hope it was helpful! 🤘

    Marked as helpful
  • Michael•150
    @ristoranteQF
    Submitted almost 3 years ago

    Responsive page using flexbox

    2
    Jo•110
    @joana-trots
    Posted almost 3 years ago

    Nice work! I see small design inconsistencies in the fonts, try this styles: body {font-family: "Montserrat", sans-serif;} and h1, .prices {font-family: "Fraunces", serif;}, and also font-weight:1500 is not working (900 is a max 😁). And you can put another image for small screen (it's in the archive). Hope it was helpful, keep it up! 👍

    Marked as helpful
  • Felipe•10
    @felipec583
    Submitted almost 3 years ago

    QR code component

    2
    Jo•110
    @joana-trots
    Posted almost 3 years ago

    Nice work! Just noticed small fixes you can do: "--h-font" and "--p-font" are the same, so you can delete one. And if you use variables for font-family, then you can do it for colors too ;) Also instead of "padding: 10px 15px 15px 15px;" you can use "padding: 10px 15px 15px;" (top, left&right, bottom). Good job, keep it up 👍

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

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