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

Responsive Meet Landing Page

P

@ePaulo

Desktop design screenshot for the Meet landing page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

My plan was to add code in stages... 1) html-only, 2) general css, 3) mobile css, 4) tablet css, and 5) desktop css... helped reduce the "ripple effect" of making code changes that might adversely affect previous work. In hindsight, it might have helped to considered (early rather than later) the need for inner "containers" to group some related UI design blocks. Note that I did make a few subtle changes to the design, such as changing the font color for the button hover effect.

What challenges did you encounter, and how did you overcome them?

Find specific css code within "Mobile Design", "Tablet Design" and "Desktop Design" became more time consuming as the number of css lines increased... so I added comments to both html and css files to clearly indicate what the sections were for each of the mobile, tablet and desktop css styling.

What specific areas of your project would you like help with?

The one thing I could not figure out what how to control (remove?) the opacity on the second divider (that partially covered the last section) and, similarly, how to control the opacity of the button in the last section.

Community feedback

J4NBI 250

@J4NBI

Posted

Well done :) responsively good!

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