manage landing page challenge

Community feedback

• 

  Luca•130

  @LucaJahnenPosted 4 months ago

  Hello Azzy dvyastia kesuma,

  you submitted a great solution. I had a look at your design and your code and want to help you. Please consider this feedback.

  Setting right dimensions for background patterns: Consider changing only the width or the height value because that leave the aspect ratio untouched. Furthermore, you may change its position. In this case I would suggest to set position: absolute so it does not change your layout.

  Changing svg fill: When referencing a svg using an img tag you cannot change its fill. You have to include the svg code in your file so you can change it like this:

  <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" fill="blue" id="circle" />
  </svg>
  

  const circle = document.getElementById("circle")
  circle.setAttribute(fill, "green")
  

  If you're using React you can assign a variable and reference it in your svg like this:

  const SVG = () => {
    const [fill, setFill] = useState("blue")
    return (
      <>
        <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
          <circle cx="50" cy="50" r="40" fill={fill} id="circle" />
        </svg>
        <button onClick={() => setFill("green")}>Change fill</button>
      </>
    )
  }
  

  Achieving pixel perfect design: There are some browser extensions that allow you to stack the design file on top of your viewport so you can compare both of them, e. g. this chrome extension called PerfectPixel

  Please mark this feedback as helpful if it was and let me know if you have additional questions.

  Kind Regards

  Luca

  Marked as helpful

  0

  ---

  

  Azzy dvyastia kesuma•1,345

  @azzykesumaPosted 4 months ago

  @LucaJahnen hey thanks for the feedback regarding the change of fill for svg, i realized that i cannot simply import the source since it will become a source for an img tag, instead i make them into an individual component, and set the fill programatically using states, just like your feedback, but still, it's kinda a hassle lol

  0