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

Szeri

@Szeri32360 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • FAQ Accordion - Gulp, SASS/SCSS, Accessibility

    #accessibility#animation#sass/scss#gulp

    Szeri•60
    Submitted over 1 year ago

    1 comment
  • JS, JSON, Sass/Scss, Mobile-first, RWD - Result Summary Component

    #sass/scss#accessibility

    Szeri•60
    Submitted over 1 year ago

    0 comments
  • Sass/Scss

    #sass/scss

    Szeri•60
    Submitted over 1 year ago

    1 comment
  • HTML, BEM, CSS custom properties&pseudo-classes, Flexbox, Mobile-first

    #bem

    Szeri•60
    Submitted over 1 year ago

    1 comment

Latest comments

  • P
    Joe Kotvas•140
    @joekotvas
    Submitted over 1 year ago

    30-Minute Challenge Blog Preview Card

    1
    Szeri•60
    @Szeri323
    Posted over 1 year ago

    Hi @joekotvas,

    Congratulations!

    I like your solution and the challenge that you made for yourself. Keep it going!

  • VanshikaSabharwal•10
    @VanshikaSabharwal
    Submitted over 1 year ago

    qr-code-component

    #accessibility
    2
    Szeri•60
    @Szeri323
    Posted over 1 year ago

    Hi @VanshikaSabharwal,

    Good job, I like your solution!

    If you are wondering what you can improve in your solution:

    you could add padding on paragraps, it will look much better.

    The second thing is to center the card in the middle of the page adding min-height:100vh on the body and use for example display:flex and center it with justify-content: center and align-items : center or use display:grid and center it with place-items:center.

    I hope that it will will help.

    Happy New Year! 🥳

  • Mohit Soni•20
    @mohit-sonii
    Submitted over 1 year ago

    HTML and CSS

    1
    Szeri•60
    @Szeri323
    Posted over 1 year ago

    Hi @mohit-sonii,

    Nice work! I thought that I would offer you some advice.

    If you want to center your card, use display: flex along with justify-content: center and align-items: center on the body tag, and make sure it's at least 100vh. For example, set min-height: 100vh.

    You can use a CSS selector with the hover pseudo-class like this: h2:hover. It makes the heading change color when you hover over it:

    h2 {
        font-weight: 700;
    }
    h2:hover {
        color: [your-color-here];
    }
    

    And some advice for optimization: You don't need to import all weights of fonts; you can choose the 2 that you use most.

    I hope this helps you.

  • Justine•20
    @Justine-5
    Submitted over 1 year ago

    responsive nft component using flexbox and position absolute

    1
    Szeri•60
    @Szeri323
    Posted over 1 year ago

    Hi @Justine-5,

    Nice solution and good job!

    In response to your question, it's considered good practice to specify which properties you want to include in the transition. By default, the transition affects all properties.

    You can use something like this:

    transition: 150ms ease-in-out opacity;
    

    I hope this has been helpful.

    Happy New Year!

    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

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