Skip to content

Latest commit

 

History

History

typemaster-pre-launch-landing-page

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 
 
 

Typemaster pre-launch landing page

Solution : Live Site URL

This is a solution to the Typemaster pre-launch landing page challenge on Frontend Mentor.

Design preview for the Typemaster pre-launch landing page coding challenge

The challenge

Your challenge is to build out this landing page and get it looking as close to the design as possible.

You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.

Your users should be able to:

  • View the optimal layout depending on their device's screen size
  • See hover states for interactive elements

Built with

  • HTML
  • CSS
  • CSS Flexbox
  • CSS Grid

Experience, Challenges and Learning

Positioning images responsively is a struggle. An image can look good for most screen sizes but then there's one obscure screen size where the image positioning just doesn't work and changing it would affect most other screen sizes so the same thing happened with me in this challenge I was not able to line all my images and that background pattern to be satisfactory to my liking for all screen sizes. For now I tried and did the best I could but this needs to be fixed sooner or later by learning more about background images and its available properties.


Pending tasks
  • The background images and patterns do not work properly in responsive mode.
  • Live solution screenshot(s)
  • Submit to frontendmentor and add Solution submitted at Frontend Mentor - Submission link