This is an example of a card layout with team profile details, designed using HTML, CSS, and Bootstrap framework 4. The images, fonts, CSS and Bootstrap styles are imported to the code with their URLs. The profile image is given the styles of width as 100%, transform as scale(1, 1), and transition as .5s. The images take a transform effect of scale(1.1, 1.1), to change the scale of the image, in a hover event. The name of the user profile is given a style set of font-size as 18px, text-transform as uppercase to automatically convert each letter of the word to uppercase, font-weight as 700, color as #333333, and transition as .5s. The designation text is given the styles of text-transform as uppercase, font-size as 14px, and font color as #797e82. In a hover event, the background color of the text section turns to #6f0ac8, whereas the font color of the text turns to #fff. The social media icons are given a background color as #6f0ac8, with the opacity set as 0, and the visibility set as hidden to hide when not active. In a hover event on the image, the opacity of the social media icons becomes 1 and the visibility turns to visible.
This is an example of a loading bar animation, designed using HTML, CSS, Bootstrap framework 4. The body of the form is given the styles of display as flex, justify-content as center, align-items as center, height as 100vh, and background as #ECEFFC. The implementation of the loading feature has been done by giving different animations and styles into four bars. The loading container is given the styles of position as relative, width as 45px, height as 45px, and a transform value as rotate(75deg). An individual bar is given an animation of 1.5s cubic-bezier(0.645, 0.045, 0.355, 1) infinite. The first child element is given a background color of #0984e3, and an animation style of slide-bottom-top, whereas the second child element has the background color of #d63031, and animation style of slide-left-right. The third and fourth ones are given the background colors and animation styles of #fdcb6e, #00b894, slide-top-bottom, and slide-right-left, respectively.
This is an example of a web form with radio buttons with hopping animations, designed using HTML, CSS, and Bootstrap framework 4. The body of the form is given a style set of background color as #f1f1f1, font color as #171717, display as flex, font as 1em Ubuntu, sans-serif, height as 100vh, line-height as 1.5, and padding as 1.5em 0. The animation timing, duration, and colors are predefined as $wormDur: 0.4s, $radioDur: 0.2s, $timing1: cubic-bezier(0.45,0.05,0.55,0.95), $timing2: cubic-bezier(0.5,0,0.5,2), and $shadowColor: rgba(0,0,0,0.2). The label of the radio button is given the styles of $shadowColor as rgba(0,0,0,0.2), cursor style as pointer to get the hand cursor effect in a hover event, font-weight as bold, text-shadow as 0 0.1em 0.1em $shadowColor, transition as color $radioDur $timing1, and margin-bottom as 1.5em. The radio button and the labels take the color of #2762f3 in the active mode. Media queries have been used to increase the responsiveness of the form.