Submitted about 4 years ago

Fylo Responsive Landing Page with CSS Grid

Bethany• 855

@whimsicurl-creations

Preview site View code

This is a solution for...

Fylo landing page with two column layout

HTML
CSS

2junior

View challenge

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

@adarshcodes

Posted about 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.

Bethany• 855

@whimsicurl-creations

Posted about 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!

Adarsh Pratap• 5,515

@adarshcodes

Posted about 4 years ago

@whimsicurl-creations Great👍

Please log in to post a comment

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