Skip to content
Submitted 7 months ago

Meet Landing Page

Kamran Kiani•1,280
@kaamiik
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Meet landing page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

.

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

Grid layout was challenging for me. Also combine background color and background-image was challenging

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

  • My grid layout is ok? how can I improve it?

  • Please give me feedback about my code and leave me a comment.

Community feedback

  • Ralph•190
    @RalphPastel972Posted 5 months ago

    Hi Kamran,

    Congratulations! It looks really good.

    I am a bit embarrassed because I do not know Sass and Scss and therefore I cannot comment on your CSS code ;-(

    That being said, there are 2 design difficulties that you skipped and I think you will learn a lot by trying to face them:

    • The "image-hero" images are always cut on the left or right side of the banner. And that is the case for all screen sizes (desktop, tablet and mobile).
    • The 4 images are either in square form (for mobile size) or in line (for tablet and mobile sizes) and of course the square or the line auto resizes responsively. The flex solution you used is not the best because in some screen size you will have 3 images on the 1st row and the last one on a 2nd row.

    Fixing the 2 points above will be challenges that might teach you a lot.

    Good luck!

    0
    Kamran Kiani•1,280
    @kaamiikPosted 5 months ago

    Thanks Ralph. Yes I realized that flex is not a good solution for this challenge. Actually for the time I submitted this challenge I was not very good at Grid. Definitely I will change this to grid in future. @RalphPastel972

    0
    Ralph•190
    @RalphPastel972Posted 5 months ago

    @kaamiik Actually, I think you can do it with both. I did this challenge with a mix of both. The first point above, I fixed with flex. The second one with grid.

    You van have a look to my not-perfect solution:

    Good luck and have a great day.

    1

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