All solutions

The hover effect where it shows a linear gradient border on the checkbox was a challenge. It worked on an isolated codepen that i did, but then on the final project i realized that a negative z-index does work when it is in a model box. BTW i used ::before on input tag, so i had to remove it all together. Any suggestions on how to achieve it. Also this is my first time trying the drag and drop to reorder so any suggestions to make my code better is gladly welcome.

After deploying the site to github pages i had troubles with image path, but i fixed that after a while, thank God. please feel free to scrutinize my work and give feedback where necessary. Thank you.