Submitted 12 months ago

INSURE LANDING PAGE 🎯 [ ACCESSIBLE - BEM - VANILLA CSS3 - ES6 ]

#accessibility#bem#lighthouse

Abdul Khalid 🚀• 72,100

@0xabdulkhalid

Preview site View code

This is a solution for...

Insure landing page

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

👾 Hello, Frontend Mentor Community,

This is my solution for the Insure Landing Page.

Scored 99% on Google Pagespeed Insights! 🤩
Added custom outline for interactive elements like buttons, a to ensure better accessible solution ✅
Used inclusive-menu-button script by Heydon to craft accessible hamburger menu and i modified as per my usage as well 🔍
There are some edge cases for this script, if you're willing to read then head to this solution's thought section 💁‍♂️
Minified the css files to improve site performance 🚀
Used Prettier code formatter to ensure unified code format ⚙️
Layout was built responsive via mobile first workflow approach 📲
Had a lots of fun while building this challenge ! 🤠
Feel free to leave any feedback and help me to improve my solution 💡

👨‍🔬 Follow me in my journey to finish all junior challenges to explore solutions with custom features and tweaks

Ill be happy to hear any feedback and advice !

Community feedback

Bradley Sicnao• 100

@bradley630

Posted 12 months ago

Do you have any tools that you use to make the website look the same as the design? I've been confuse why my website changes font sizes and other css property when I deploy my website in github. I hope you can answer my question

Abdul Khalid 🚀• 72,100

@0xabdulkhalid

Posted 12 months ago

Yeah sure @bradley630. There'a an extension named Pixel perfect which is used to place the design image as an overlay on top the site, it can be available on chrome web store

Hope this helps!

Zihad Hossion• 340

@zihad-hossion

Posted 12 months ago

navbar animation is problem for responsive . you can use grid.

Abdul Khalid 🚀• 72,100

@0xabdulkhalid

Posted 12 months ago

Can you provide more insights regarding the issues @zihadhossion, so that i can resolve the issue as soon as possible

Jazakhallah Brother!

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