Close

Sticky notes with hover effect

This is an example of a collection of sticky notes with hover effects, designed using CSS, HTML, and Bootstrap framework 4. The body of the form is given the styles of font-family as Arial,sans-serif, font-size as100%, margin as 3em, background as #666, and color as #fff. The title of the sticky notes has been displayed using the styles of font-size as140%, font-weight as bold, and padding-bottom as10px, whereas the subtitle is displayed using a font-size of 180%. The concept of Lists has been used with UL and LI components. UL element has been used with the child elements of LI to display the child elements of the sticky notes, in an orderly manner. The sticky notes are given a box-shadow style of 5px 5px 7px rgba(33,33,33,.7). The notes are given three different background colors as #f6ff7a, #f26b6b, and #6bbcf2. The notes take a rotate animation of different values on hover, to create the scale-up animation. Source: https://mdbootstrap.com/snippets/jquery/jakubowczarek/893358#css-tab-view

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Several Related Snippets

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.