Hello, nice try! But there many stuff to improve!
-
You should stop using % and vh/vw to often. Just stick with px for precice sizes and rem for relative sizes. For fonts you can also use pt if you want, but it depends on the developer.
-
Stop giving precice sizes to elements. Like don't force stuff to have fixed size. It is bad for responsive design. Work with rems and layout tools like flex or grid.
-
You should use more flex tools. I saw that you are setting stuff as flex, but then you are not using any alignment tools of flex.
Example: instead of using this margin: 16vh auto; use { display: flex; align-items: center; justify-content: center; } That will position everything inside the main tag in the middle of the screen.
- You are using background-image for the image on the left. Which isn't that bad. I am not a fun of it. Don't rely on it to much. You could solve this challenge with just a img tag.
That are few stuff i could find for now. Ich hope i could help you. Let me know if i could. If you have any questions then feel free to ask them :).
Best Regards Q-bert.
Marked as helpful
