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

Pod landing page [harder than I thought!][html/css form validation]

Tanguy 140

@OignonFugace

Desktop design screenshot for the Pod request access landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi everyone :)

I am amazed at how varied all these challenges can be, hence pretty much always making us work on different and new things. On completing this challenge I would specifically like to thank Frontend Mentor for the endless opportunity to practice, train and get better.

More context on the github repo.

My questions are:

  • On the subject of modifying the color of svg elements without having to copy paste the whole svg code into html markup in order to access the fill property with css, that I find cumbersome : do you have any resources on the subject that could enlighten me.
  • Also, I did get through quickly on the matter of styling the background image on mobile view and did not quite matched the expected design with my use of background-blend-mode property. Any advice on that part?

Thanks!

Community feedback

filecc 470

@filecc

Posted

Ehy, hi and congratulations for completing this challenge!

It looks really great! My suggestion for the SVG color, via css are:

  • this codepen that need a color input in HEX and can produce a filter property for you, so you don’t need to insert the SVG in you html, you can simply import as an image and then target it in you cas with the property the codepen gave you.

Hope it helps!!

Cheers Fil :)

0
P
visualdennis 8,375

@visualdenniss

Posted

Your submission looks great! Almost identical to the solution screenshot!

To answer your first question:

  • Open the SVG in a code editor
  • Add or rewrite the attribute of fill of every path to fill="currentColor"
  • Now, that svg will take the color of your font color, so you can do something like:

svg { color : "red"; }

Hope this was helpful!

0

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