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

Hachi

@hachi-ops155 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

  • 3-column-preview-card-component


    Hachi•155
    Submitted about 4 years ago

    0 comments
  • stats-preview-card-component using flexbox


    Hachi•155
    Submitted about 4 years ago

    0 comments
  • FAQ-accordion_card


    Hachi•155
    Submitted about 4 years ago

    2 comments
  • four-card-feature-section with Flexbox


    Hachi•155
    Submitted over 4 years ago

    2 comments
  • Huddle-landing-page with Flexbox


    Hachi•155
    Submitted over 4 years ago

    1 comment
  • social-proof-section Frontend Mentor challenge


    Hachi•155
    Submitted over 4 years ago

    3 comments
View more solutions

Latest comments

  • Vjekoslav•485
    @Vj3ko
    Submitted over 4 years ago

    Single grid mobile first using grid

    2
    Hachi•155
    @hachi-ops
    Posted over 4 years ago

    Responsiveness works perfect, well done. I would suggest to make paragraphs font size on your mobile design same size for all of your divs. Also, you forgot to add hover state to the button (see README.md file for this project).

  • Alex•310
    @AlexGanderton
    Submitted over 4 years ago

    Social Proof Component

    1
    Hachi•155
    @hachi-ops
    Posted over 4 years ago

    It's very good and the only thing I would point out is the layout just at above 900px. You get two rows of stars instead of one so it may be a good idea to add another media query at different breaking point and fine tune the alignment. I too completed this challenge today and was getting the same layout with stars not aligned in one line at roughly same 900px resolution so I added min-width and had to tweak margins and paddings to align everything. Try adding min-width to the divs with stars and see if it helps the layout when changing screen size. You may want to look up my solution although I added some extra breaking point with completely different layout between 600 and 992px which wasn't actually part of the design.

  • Mark Sainsbury•45
    @Sa1ners
    Submitted over 4 years ago

    Profile Card Component Challenge

    7
    Hachi•155
    @hachi-ops
    Posted over 4 years ago

    Just checked: quotes between brackets aren't necessary: url('...') or url(...) doesn't matter. I didn't have them in my solution and it loaded pictures anyway but it is considered a good practice to include them.

  • Mark Sainsbury•45
    @Sa1ners
    Submitted over 4 years ago

    Profile Card Component Challenge

    7
    Hachi•155
    @hachi-ops
    Posted over 4 years ago

    Yes you can have two images separated by commas:

    background-image: url('...') , url('..');

  • Mark Sainsbury•45
    @Sa1ners
    Submitted over 4 years ago

    Profile Card Component Challenge

    7
    Hachi•155
    @hachi-ops
    Posted over 4 years ago

    Hello Mark, You are missing double quotes in your index.html in line 36 (but I don't think this is the reason why it displays incorrectly :)

    Actually the design is there if you scroll down. It shows the card exactly in the middle of the page:) Vercel should update git hub changes automatically but maybe if you try to login to Vercel again and see what happens.

  • Hachi•155
    @hachi-ops
    Submitted over 4 years ago

    social-proof-section Frontend Mentor challenge

    3
    Hachi•155
    @hachi-ops
    Posted over 4 years ago

    Thank you for a prompt feedback!

    I have just cleared HTML issue.

    As for the sizes: I really have difficulty assessing sizes of the elements as I am viewing designs in Microsoft Paint and switching to grid view (it shows me 1440px). Then I am just counting the lines (1 line=10px). I might be doing it the hard way though, but I don't know any other way.

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

Beta Member

This badge is a shoutout to the early members of our community. They've been around since the early days, putting up with (and reporting!) bugs and adjusting to big UX overhauls!

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

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