manage landing page challenge

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