Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found

Submitted

css and javascipt

@NadaFarook

Desktop design screenshot for the Ping single column coming soon page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I tried my best to complete the challenge but failed miserably, but i successed half.I need constructive feedback,Please help anyone if you know.Anyone please help me if you know.

Community feedback

Ivan 245

@PeresvetIvan

Posted

Hello, Nada. I join the above sayed by rfilenko, and I can also add that you set the relative height for all box elements in the grid container (grid-template-rows property), and all the heights are calculated relative to the largest block - in your case, this is an image. But the problem is that the image changes size, so the height of all the " box " elements will also change, which is why everything slides when you change width of the browser window. Set a fixed image width, for example in px, or delete the grid-template-rows property for the grid container, and manually set internal margins (padding and margin) for all elements. Also you have problem with icons, set to them fixed width and their size will not change. And wrap icons in links ('a' tags), and add property "cursor: pointer" to button and social icons. Good luck)

1
Roman Filenko 3,335

@rfilenko

Posted

Good work, but there is a room for improvement, fix some issues I see here:

  • use semantic html tags;
  • why almost all elements are in header?
  • better sections naming(use proper tags);
  • links for socila icons;
  • hover states;

Try to fix those first. Good luck:)

1

Please log in to post a comment

Log in with GitHub
Discord logo

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