Skip to content
Submitted 3 months ago

Responsive Landing Page using TalwindCSS for Grid

tailwind-css, vite, react
P
Mirko Zlatunic•250
@mirkozlatunic
A solution to the Meet landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

That i was able to use the the tailwind styling to create the image background as well as the transition from mobile to desktop. What i need to do better is the refactoring of the code. I think i still need to a better job by cleaeing up the code in one component.

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

The background picture as well as the hero picture. I was able to setup all the correct code without the picture but than i needed to overlap the text over a picture in the footer.

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

The hero section pictures to have the styled the same way as the solution.

Code
Loading...

Please log in to post a comment

Log in

Community feedback

  • P
    Amine•130
    @amine-can-code

    Project Feedback

    Overview

    You did a great job on this project! It's evident that you have an advanced understanding, especially noticeable in the hero section where you used a combination between CSS Grid and Flexbox. I opted for Flexbox only in my project and encountered some complications, so your clean and clever approach was particularly impressive.

    Specific Observations

    Hero Section

    • Responsive Issues: In Google Chrome's DevTools responsive mode, the images on the left and right appear to be cut off on larger screens. Could you take a look at that?
    • Overflow Usage: You managed to use overflow: hidden effectively, which perfectly matched the original design.

    Download Button

    • Hover Effect Issue: There's a small issue with the hover effect over the text in version 1.3 on the download button. The effect causes the text to blend into the background, making it seem like it disappears, which might not be the intended interaction.
    • Footer Button Consistency: The hover effect on the footer's download button doesn't present a problem, although it might not be necessary, but it's something to consider for consistency.

    Layout Issues

    • Horizontal Scrollbar: Additionally, I encountered an issue with a horizontal scrollbar appearing on my 16-inch screen laptop. This seems to persist across different browsers, suggesting it might be a consistent problem with the layout or certain CSS properties causing overflow.
      • Possible Cause: I suspect that the footer might be contributing to this issue, but I'm not entirely sure.
      • Recommendation: Checking the widths and overflow properties of your containers, especially the footer, could help identify and resolve this issue.

    Conclusion

    Overall, your work is outstanding, and my comments are not meant as criticism but rather as points for fine-tuning. Reviewing your solution inspired me to revisit my own project to enhance it further. I've learned some valuable tricks and ideas from your code, which really help. This is why I'm taking the time to give detailed feedback—focusing on minor aspects that might have gone unnoticed can significantly refine a project.

    Remember, no one is perfect, but striving for perfection is what makes each of us unique. Keep up the excellent work!

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