Folder list with checkbox and transform effect
This is an example of a folder list with a checkbox and transform effect, designed using HTML, CSS, and Bootstrap framework 4. The folder icons are imported to the code by the URLs. The body of the form is given a background color as #4527A0. The list items are given a style set of margin-top as 10px, background color as #5E35B1, cursor style as pointer to get the hand cursor effect in hover, and transition as all 0.3s ease-in-out. The list items take a transform effect of scaleX(1.1) in a hover event, to change the scale of the folder items. The opacity of the checkbox is set as 0, which changes to 1 in a hover event. The checkbox is given a border style of 1px solid #10a3f9, border-radius as 3px, and background color as white, which changes to border as solid #007bff, border width as 0 2px 2px 0, and takes a transform effect of rotate(45deg), in a checked event.