Skip to content
Submitted over 4 years ago

Fylo Responsive Landing Page with CSS Grid

Bethany•855
@whimsicurl-creations
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Fylo landing page with two column layout
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

This is my first time tackling a responsive layout purely with CSS Grid (I've worked with flexbox longer, so I wanted to exercise the new skills I've learned). I know the design isn't pixel-perfect, but I think it scales well and I added hover states for the buttons and links.

I would appreciate any resources on better styling the font awesome icons for the social links. While my design is functional, it feels a bit clunky and I imagine there is a more concise way to add the circle border. Thanks in advance!

Community feedback

  • Adarsh Pratap•5,515
    @adarshcodesPosted over 4 years ago

    Hey! @Bethany, you did a great job on this project(using CSS-Grid 😍, I'll give you a shoutout when I'll practice my Grid-layout skills🙂), It looks fine and also the responsiveness is nice👍. Just a minor suggestion, you can solve the Accessibility issues.

    2
    Bethany•855
    @whimsicurl-creationsPosted over 4 years ago

    @adarshcodes Thank you for taking a look and for your comments. I was able to address the accessibility issues with the inputs, but I needed to look into ways to include screen reader text that wasn't visible for the social icons. I've updated my code and no more accessibility issues. Hooray!

    1
    Adarsh Pratap•5,515
    @adarshcodesPosted over 4 years ago

    @whimsicurl-creations Great👍

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord