Submitted over 3 years ago

POD Request access landing page

Tereza• 605

@sirriah

Preview site View code

This is a solution for...

Pod request access landing page

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi, this is my upload of POD Request access landing page challenge. I want to ask some questions:

How to effectively place podcast logos? Directly with SVG tag or IMG tag? I tried to insert SVG directly into HTML, but I could not change the fill property, and logos overflowed the wrapping div.
When should I use "margin" and when "padding"? I know difference between them and how it works, but sometimes we can get the same result even if we use different settings of margin and padding. Are there some rules?

Thank you for your feedback! 👋👩‍🦰

Community feedback

Adarsh Pratap• 5,515

@adarshcodes

Posted over 3 years ago

Hi👋 @sirriah, You did amazing work on this challenge👏.

For the logo, I would recommend you to use img tag for the svg's as I always do this way and it works out great.
Let me simply put, Padding is used for spacing the content inside a box, and Margin is outside the box. For more details visit here.
Design: I really like it, it's pixel perfect and looks really nice and the validation is working fine.
Responsiveness: It's working smoothly and nicely.
Issues: No issues aroused. Nice! Keep it up👍. Happy Coding

Tereza• 605

@sirriah

Posted over 3 years ago

@adarshcodes Thank you for your comment. I thought that it is better to insert svg directly into the code.(?) You can change colour via CSS, animate it etc. The code does not look so pretty, but it reduce load time. Happy Coding! :)

Adarsh Pratap• 5,515

@adarshcodes

Posted over 3 years ago

@sirriah Yes, definitely you can animate and change the style of the SVG's but for the design and ease perspective I used it using img tag.

Please log in to post a comment

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