Skip to content
Submitted almost 3 years ago

Responsive fruits with SCSS architecture

Thomas Hogben•150
@BananaTechs
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Agency landing page
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

I attempted some semblance of SCSS architecture, let me know how I did! Also, I had a couple of specific difficulties.

  • A white line appears after some of the divs that I can't get rid of :(
  • The only way I found to change the colour of the .svg images was to use them as a mask for a coloured div. But for some reason, this only works when an actual https url is used for the mask, instead of a normal file path. Is there a better way to do this?

Any help at all is appreciated. Thanks! ^_^

Community feedback

  • Michael B•210
    @MrBeamerPosted almost 3 years ago

    Hey, for the svg, there is a css property called "filter" and put the svg in an image tag instead of the css file, you could try it with that approach :)

    Marked as helpful
    1
    Thomas Hogben•150
    @BananaTechsPosted almost 3 years ago

    @MrBeamer Hey Michael, sorry for the late reply, thanks a lot! Do you know if there's a way to use filter to change an svg to a specific color, or is it just trial and error?

    0
    Michael B•210
    @MrBeamerPosted almost 3 years ago

    @BananaTechs yes there is! Just google svg filter generator and you should find everything what you need.

    Marked as helpful
    1
    Thomas Hogben•150
    @BananaTechsPosted almost 3 years ago

    @MrBeamer I see, thank you!

    0

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