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

Flexbox, CSS Grid for the layout.

@asfand687

Desktop design screenshot for the Sunnyside agency landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


  1. I would like to know about what is the best practice for making the navbar for the mobile screens, how can we add some transition effects on them when they appear on the screen.
  2. What is the best practice for using the pictures? Should we use them as background or we should just render them using img tags?
  3. How have you used the svgs? with the img tags or have you used the inline-svgs? Whats the best practice to use the svgs in our projects?

Community feedback

darshii 525

@darshii98

Posted

  1. Set visibility to hidden below a certain screen length, preferably at tablet size(768), then you can make the container of the nav-links flex, with flex direction column, make position absolute, and give some padding to the links, to make it look like a list. To add transition effect either you can use transform translate or you can make the height of the container zero and when menu burger icon is clicked, set the height to unset or original and use transition to animate it.

  2. Sometimes its better to use directly images, but in case of the design and photography section of your site, you can use image as background.

  3. Svgs I have used in the sass itself and used filter property to change the color. (for icons I have used ion-icons, but you can also use the provided ones and change their color using filter when hovering)

Marked as helpful

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