Meet landing page using Vue

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?