Skip to content
Submitted 10 months ago

Typemaster Landing Page

P
Øystein Håberg•13,260
@Islandstone89
A solution to the Typemaster pre-launch 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'm proud of figuring out all the complexities, layout-wise. I'm also happy that I used container queries in practice! I used it on the "mechanical wireless keyboard" section, where I changed the flex-direction from column to row when its wrapper equals 500px or more.

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

The layout was a bit challenging, with some of the images reaching either the left or right edge. This meant that I had to write a lot of rules for the padding on elements. I also had to google how to create the dark orange overlay on one of the images.

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

I'm always open for feedback :)

Code

Please log in to post a comment

Log in

Community feedback

  • raya•2,870
    @rayaatta

    Hey there👋.

    The only thing I think needs updating is the pre-order link. Elements that behave as buttons but are built using other tags such as span, div, a or others, should include a role attribute that equals to button just to improve on accessibility. Other than that impressive solution✌️.

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