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
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive landing page {mobile x desktop ver.}

@ofthewildfire

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


Used positioning (absolute etc.) still learning about those though. Mainly picked it to see if I could put what I have been studying via JS into practice and glad to say I have.

As for CSS - I had been told using rem would be better and I did use it for a bit of the project, but it was done over the course of several days, so my method changed and I forgot, will refactor with time.

Any critique and tips appreciated.

Community feedback

Théo 120

@Atim360

Posted

Hi, about the icons you can change the SVG's color with a css property. However it's only if you use SVG elements. Instead of using a <img> element with the src of the SVG, you have to copy and paste the <svg> element.

.iconsContainer svg { fill: blue; }

.iconsContainer:hover { background-color: blue; }

.iconContainer:hover svg { fill: white; }

Animated images using SVG images are really powerful, so I advice you to follow a SVG tutorial in order to learn the basics of SVG's handling. You can find a lot of tutorials on Youtube. Keep it up!

Marked as helpful

1

@ofthewildfire

Posted

@Atim360 thank you so much for that information, I have yet to learn about them in my current path, so as you suggest I will branch out and look into this and follow some tuts, learn some thing, thank you again, v helpful. :)

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