Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Insure Landing Page

P
Emmilie Estabilloā€¢ 5,540

@emestabillo

Desktop design screenshot for the Insure landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


This is my first time using inline svgs. I initially retained the fill property and discovered that hovering on spaces within the icon will not show its hover state. Only workaround I saw was to target the svg tag on the css file and declare initial and hover states for its fill property. Is this the standard?

Not sure what's going on with the screenshot...the live version doesn't show three lines of text in the CTA section in any screen width. I haven't coded in a while and I'd appreciate any comments for improvements or anything I've missed. Thank you!

EDIT: Took a new screenshot as updates to the platform were just pushed šŸŽ‰ Thanks Matt!

Community feedback

Mark Mitchellā€¢ 1,820

@markup-mitchell

Posted

Hi Emmilie,

Inline SVGs can be targeted and styled with CSS just like HTML elements so you shouldn't think of the way you've done it as a workaround!

Leaving properties like fill in the SVG will override the CSS in the same way as an inline style will override CSS, so yes, that's the way to do it. You might want to make the SVG width and height 100% and define those properties in the CSS class as well, just so you're not hard-coding those values into the markup.

3

P
Emmilie Estabilloā€¢ 5,540

@emestabillo

Posted

@markup-mitchell Exactly the kind of answer I was looking for šŸ™Œ Thanks so much!

0
P
Matt Studdertā€¢ 13,611

@mattstuddert

Posted

Awesome work on this challenge, Em! Seems like your questions have already been answered, so I'll just say you've done a really good job! šŸŽ‰

Great that the new screenshot is a more accurate representation of your solution. Feels great to have that update live on the site!

1

P
Emmilie Estabilloā€¢ 5,540

@emestabillo

Posted

@mattstuddert Thanks Matt! And thanks for all the awesome new features on the platform šŸ™Œ

0
P
ApplePieGiraffeā€¢ 30,545

@ApplePieGiraffe

Posted

Wow, amazing work, Emmilie Estabillo! šŸ‘

I really like your solution! šŸ‘

Happy coding! šŸ˜

1

P
Emmilie Estabilloā€¢ 5,540

@emestabillo

Posted

@ApplePieGiraffe Thank you! Looking forward to yours šŸ™‚

0
Dark-Loverā€¢ 735

@Dark-Lover

Posted

hey,great job ;) . im working on the same challenge. the only issue that i didnt like in ur work is when u scroll while showing the nav-menu on mobile. i think u can fix that in just few lines, maybe a navbar position fixed.. something like that. good job ;)

1

P
Emmilie Estabilloā€¢ 5,540

@emestabillo

Posted

@Dark-Lover Will look into it. Thanks for the feedback!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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