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. Source:https://bbbootstrap.com/snippets/bootstrap-folder-list-checkbox-and-transform-effect-16091735

This is an example of a message card with an animated button, designed using HTML, CSS, and Bootstrap framework 4. The badge of the card is imported to the code with its URL. The form is given a background color as #eee, whereas the background color of the card is set as primary, in HTML. The message card is given a width of 350px. The Total text line is displayed with the styles of font color as #d0c9c9, font-size as 13px, and margin-top as 6px. The 'Fix it now' button is given the styles of margin-top as 30px, margin-bottom as 30px, width as 150px, background as #28a745, color as #fff, and transition as all 0.5s. In a hover event, the button changes its background color to #1e7e34, font color to #fff, and takes a transform effect of scale(1.1) to change the scale of the button to create the animation. Source: https://bbbootstrap.com/snippets/bootstrap-card-animated-button-33448129

This is an example of a points table with animations for the top four, designed using CSS, HTML, and Bootstrap framework 4. The points table consists of nine data cells, specified for nine football teams. The form is given a font family style of 'Oswald', sans-serif. The background color of the table is set as #9e9e9e, whereas the font color is set to white. The table is given a text-align style as center to centralize the information. The header title of the form is displayed using a font-size of 8vw. The flag is given a width and a height of 10vw, and 6vw, respectively. The name of the football team is displayed using a font size of 4vw. The top four data cells of the table are given a background color of RGB(0, 255, 0, 0.5). The top four teams are given the animation styles of animation-duration as 2s, animation-timing-function as ease-in-out, and animation-iteration-count as infinite to make the animation continuous. Source: https://bbbootstrap.com/snippets/premier-football-league-points-table-2019-37260130

This is an example of a user profile with animation, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. Media quarries have been used to increase the responsiveness of the form whereas the imported to the code with their URLs. JavaScript functions have been used to implement the fade-in animation. The body of the form is given the styles of background-color as black and font-family as 'Roboto', sans-serif. The card container is given a linear gradient color as (to bottom, #e53935, #3949ab), and font color as white. The name title is given the styles of width as 90%, background-color as RGB(255, 255, 255, 0.2), font-size as 3vw, font color as black, animation-name: first, animation-duration as 1s, and animation-fill-mode as forwards. The bio details are displayed using a font-size of 1.2vw, whereas the stats are displayed with the styles of background-color as #e53935, font color as gold, height as 3vw, animation-name: fourth, animation-duration as 1s, animation-fill-mode as forwards, and animation-delay as 2s. Source: https://bbbootstrap.com/snippets/player-profile-using-animation-40230486

This is a news card template with hover animations, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. The fonts, CSS styles, images, and icons are imported to the code using their URLs. JavaScript functions have been used to implement the filling effect of the heart icon, on a click event. The font family style for the form is given as 'Roboto', sans-serif and the body of the form is given a background color as #F2F2F2. The card container is given a width of 350px, and a height of 500px. It takes a box shadow effect of 0 0 45px gray, in a hover event. The header title of the form is given a font-size as 17px. The subtitle of the card is given a font-size as 27px, whereas the 2nd subtitle is given a font-size as 23px, and font color as #E74C3C. The cursor style is given as pointer to get the hand cursor effect. In a hover event, the image and the content section changes its size to 200px, while the image takes an animation of move1 0.5s ease both. Source: https://bbbootstrap.com/snippets/news-card-animation-28849510

This is an example of a testimonials template with hover animations, designed using HTML, CSS, and Bootstrap framework 4. CSS styles and images are imported to the code with the URLs. The testimonial cards take a rotate animation in a hover event. The body of the form is given a background color of #E9EAEA.The header of the form is given the styles of color as black, and text-shadow as 2px 2px 2px violet. The testimonial cards are given the styles of as 24%, height as 550px, border-radius as 10px, background-color as white, display as inline-block, margin-left as 15px, and box-shadow as 15px 8px 15px brown. The profile images are given a border-radius value as 50% to get the circle shape. The profile names are given a font-size as 20px, font-weight as bold, and font color as darkblue. The location is displayed in the font color of darkorange, whereas the content is given a font-size as 18px, and font color as darkslategrey. In a hover event, the background color of the cards turns to aquamarine, while the cards take a transform effect of rotate(-10deg), to imply the rotate animation. The animation duration is set to 3s. Source: https://bbbootstrap.com/snippets/awesome-testimonial-template-43488673