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

Juan Zapien

@1Zapien95 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

  • Testimonials grid using grid-template-areas


    Juan Zapien•95
    Submitted over 3 years ago

    0 comments
  • Responsive pricing grid using Grid layout


    Juan Zapien•95
    Submitted almost 4 years ago

    1 comment
  • Responsive landing page using flex


    Juan Zapien•95
    Submitted almost 4 years ago

    2 comments
  • Order Summary using FlexBox and testing out Bem


    Juan Zapien•95
    Submitted almost 4 years ago

    0 comments
  • FlexBox - FAQ accordion


    Juan Zapien•95
    Submitted almost 4 years ago

    1 comment
  • Responsive calculator using flex


    Juan Zapien•95
    Submitted almost 4 years ago

    0 comments

Latest comments

  • Dardou•60
    @Dardou
    Submitted almost 4 years ago

    Solution to this using grid and flexboxes

    1
    Juan Zapien•95
    @1Zapien
    Posted almost 4 years ago

    Hello @Dardou for the hero section you just have to play with the sizing. Right now the section is to short so in order to fit the image it stretches it horizontally. Maybe try

    min-height: 35rem;

  • Kiran•160
    @K-Mannnn
    Submitted almost 4 years ago

    Fylo Dark Theme Landing Page

    1
    Juan Zapien•95
    @1Zapien
    Posted almost 4 years ago

    Hello Kiran, since you are working on accessibility you should add aria labels to your media links.

    For example: <a href="" aria-label="Twitter"><i class="fab fa-twitter"></i></a>

    This will add a label/context to your link which will be used by screen readers.

    You can look into Aria here. Just use them when there are no semantic tags in HTML though.

    Mozilla

    Google web

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