Skip to content
Submitted almost 4 years ago

Insure LP using flexbox

Chloe•240
@cguttweb
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Insure landing page
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

I used mobile-first which works well I think but the main issue I've had with desktop versions is the different patterns and how to position them? I used background images on mobile, however in desktop view should I perhaps use absolute positioning instead?

Community feedback

  • isimeri•250
    @isimeriPosted almost 4 years ago

    Hello there. You are right, in some cases you can use those wavy patterns as background-image and forget about them, but in the case of the pattern that goes over the blue and the white background, you'd probably want to use absolute positioning. There is another interesting issue i found. By default, your nav has the .show-hide class, and if you reduce the width of your screen, to reach the mobile layout and press the hamburger button to close the nav menu, then increase the screen width to go back to the desktop layout, there is no nav menu and no button to make it appear. I'd actually create another nav menu, specifically designed for the mobile layout and just keep it display: none in the desktop layout, so there won't be any worries regarding the nav being there when switching between the mobile/desktop layouts. Also, your links and buttons don't have any hover states and the top logo looks a little distorted in the mobile layout, but those are minor issues. You have done a majestic job, mostly. Keep it up!

    Marked as helpful
    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