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

john

@johnhaab90 points

Hi there! I'm a learning front-end developer, you can find me on Twitter at @johnlhaab.

Latest solutions

  • Advice generator -- HTML & CSS & JS & API.


    john•90
    Submitted over 2 years ago

    4 comments
  • Ping single coming soon page -- HTML & CSS & JS.


    john•90
    Submitted over 2 years ago

    0 comments
  • My completion of the 3-column preview card component -- HTML & CSS.


    john•90
    Submitted over 2 years ago

    2 comments
  • My completion of the Order summary Challenge -- HTML & CSS.


    john•90
    Submitted over 2 years ago

    0 comments
  • My completion of the NFT preview card component -- HTML & CSS.


    john•90
    Submitted over 2 years ago

    2 comments
  • My completion of the QR Code Challenge -- HTML & CSS.


    john•90
    Submitted over 2 years ago

    0 comments

Latest comments

  • P
    Cloud Custodian•80
    @joeterlecki
    Submitted over 2 years ago

    NFT Preview Component | HTM & CSS Responsive Design

    3
    john•90
    @johnhaab
    Posted over 2 years ago

    Good job on completing this challenge, it looks great!

    As for your issue from looking at the inspect element, your parent div to the img has a total height of 309px, and your img has a total height of around 303. Try and locate the error by researching, removing styles and tweaking the styles.

    I managed to fix your issue by changing "height: 100%" to "height: 98%" inside your ".card-header:hover::before" class.

    Nonetheless great job.

  • Abelardo Gomez Rodriguez•30
    @abelgmz
    Submitted over 2 years ago

    Responsive product preview card using flexbox and sass

    #sass/scss
    4
    john•90
    @johnhaab
    Posted over 2 years ago

    I agree with srayala42 and, Zeyad Mohamed.

    Use google fonts, its amazing also use Font Awesome. Font Awesome is the easy way to get great icons for free and they're SVG! (look up on Youtube to get them setup)

  • john•90
    @johnhaab
    Submitted over 2 years ago

    Advice generator -- HTML & CSS & JS & API.

    4
    john•90
    @johnhaab
    Posted over 2 years ago

    LOOKS FINE ON WEBSITE, LOCALHOST, MY PHONE BUT NOT THIS LOL WHAT

  • john•90
    @johnhaab
    Submitted over 2 years ago

    My completion of the 3-column preview card component -- HTML & CSS.

    2
    john•90
    @johnhaab
    Posted over 2 years ago

    not sure why it looks like that in the preview it looks fine on the website its hosted on?

  • Lucas Bailo•100
    @lucasbailo
    Submitted over 2 years ago

    Flex box

    3
    john•90
    @johnhaab
    Posted over 2 years ago

    I removed the <div class="attribution"> in mine as it caused issues.

    And to center the content better you should add min-height:100vh; to the body. And reduce the width value of main_container.

    I am new so take what I say with a grain of salt but it worked well for me on this. <3

    Marked as helpful

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

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