Skip to content
Submitted over 2 years ago

Responsive landing page {mobile x desktop ver.}

Kirsten ✨•460
@ofthewildfire
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Ping single column coming soon page
  • HTML
  • CSS
  • JS
1newbie

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
    @Atim360Posted over 2 years ago

    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
    Kirsten ✨•460
    @ofthewildfirePosted about 2 years ago

    @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

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