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

Meet Landing Page w/ Scrolling Fade In! 📜

Fraser Watt 1,790

@fraserwat

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


Experimented with a scrolling fade in. Ideally in a real-world application of this I guess you'd have it with a longer page (doesn't feel right on larger screens) but I'm pleased with how it turned out.

Any adjustments v much appreciated! 👍

Community feedback

@MarlonPassos-git

Posted

Very cool scrool animations, is there a way to do this only with css? some suggestions:

  • You could have organized your content in the <header> <main> <footer> tags it would have been much more legive.

  • I would remove the width: 100% of the image__container as it has on some screen sizes it is inconsistent, see https://prnt.sc/1vmt6xk

  • "What is it?" it should be an <a> tag as it will take the user to another page and this makes more semantic sense

1

Fraser Watt 1,790

@fraserwat

Posted

@MarlonPassos-git thanks, this is all really helpful - didn't catch the image__container issues!

1

@MarlonPassos-git

Posted

@fraserwat DE 624px there is 585px of width the distance of the column between the images is bigger than the distance of the GAP, however if you have the width:100% they are just with the right gap and centered. See the links

BEFORE: https://prnt.sc/1vmt6xk

THEN: https://prnt.sc/1vp52lv

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