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

pablodev | Meet Landing Page

P
pablodev 430

@Pabloodev

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?

What´s up guys? 🤗

I faced the challenge of changing the background-image, I had never gone this far as I'm still a junior, but it was a pleasure to make it work after many attempts!

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

As I said, I had some challenges with the background image, but I also had some problems with my lines of code, it had a lot of redundant effects but I tried to reduce it as much as possible afterwards.

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

I would like feedback on how my lines of code are, if there is anything I can improve, in terms of how my solution looks on the website as well, maybe there is something I haven't seen and what I am doing with my footer, cause this is wrong💚

Community feedback

P

@medic-code

Posted

Nice HTML structure, I completely forgot about the different assets for different screen sizes so when i saw the picture tags it made me think of something i hadn't done.

The CSS looks well structured, efficient use of CSS, by comparison I had so many different margins in the different media queries, so great to compare where i could've been more efficient. I felt the design itself was so inconsistent in terms of spacing, just gave up trying to be systematic.

For the footer overlay you could do a absolute positioned overlay using ::before and slighty reduced opacity and using z-index.

Some minor UI aspects

A comment is the hero images are not overflowing, i couldn't get this to work either on my solution but just if you weren't aware of that in the design!

The desktop hero images are slightly different in terms of height, so you could apply a specific margin for both hero images.

Marked as helpful

0

P
pablodev 430

@Pabloodev

Posted

@medic-code bro, first of all, thank you very much for your comment

I really needed guidance because I didn't know where to go when I had already finished everything and didn't know which CSS lines to use anymore

Thank you very much for the compliment on my lines of code! One thing that helps me a lot is always trying to make it as meaningful as possible, I want my lines to actually express what they are styling but I often fail in this mission because I don't have the knowledge I need lol

Anyway, thanks for helping me with the footer, I was lost with that lol, I'll try to take a look at your code to see how you handled it

Thank you very much Mr Smith

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