Skip to content
Submitted 10 months ago

Meet landing page using Vue

accessibility, sass/scss, vue, typescript
P
Micha Huhn•200
@MichaHuhn
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?

I was able to change the layout on the different views (mobile, tablet, and desktop). I am especially proud of the hero section, because the elements are arranged differently on desktop which was tricky.

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

On desktop and tablet, the text-content element inside the hero section is exactly 448.3px wide in the Figma mockup. That's really confusing to me. It took me really long to find a solution on how to structure the hero layout on desktop. I decided to create the following grid layout:

grid-template-columns: 1fr auto 1fr;

The width of the center column is set to 28rem (448px). The hero images are placed in the left and right column and are moved by an offset with transform: translateX();

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

I would like help with the hero section on desktop. It was really challenging to find a solution.

  • Why is the text-content element inside the hero section exactly 448.3px wide. What element/constraint is the width based on?
  • How did you create the hero section on desktop, do you have any tips?
Code

Please log in to post a comment

Log in

Community feedback

  • P
    MAGENE Sem Joel•320
    @Jomagene

    Hi MichaHuhn,

    Great job on the meet-landing-page! Your design looks fantastic. I noticed a few areas where you might simplify things:

    • Grid Layout: I see you've used grid-template-columns: 1fr auto 1fr with transform: translateX(); for positioning. In my experience, Flexbox can simplify this kind of alignment, making it easier to center and adjust elements naturally. For example, I used that fixed width as a max-width of the text-content beside the two images: left and right. All content are justified space-between which gives a more flexible layout. To handle responsiveness, a flex-direction column is sufficient to have the work done.

    • Layout Complexity: While your grid-based layout works, it might be more flexible and maintainable with a Flexbox. This could reduce the need for transformations.

    Overall, your work is impressive! A few small adjustments could make your design even stronger. Have you tried experimenting with Flexbox for layouts like this? I'd love to hear your thoughts.

    Best,
    Jomagene

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