This is an example of a grid view container with images and hover effects, designed using CSS, HTML, and Bootstrap framework 4. The container consists of three cards. The images are imported to the code with their URLs. The header title of the form is displayed using a font-size of 1.6667em. The body of the form is given the styles of font as 75%/150% "Lato", Arial, Helvetica, sans-serif, background-color as #fff, and font color as #838383. The content of the cards is displayed using the styles of font-size as 1.0833em, line-height as 1.6666, and margin-bottom as 15px. The price section of each card is displayed using a font color of #7db921, a font-size of 1.6667em, and a text-transform style is given as uppercase to automatically convert the text to uppercase. The 'Book' button is given the styles of display as inline-block, background as #d9d9d9, font-size as 0.8333em, line-height as 1.8333em, and text-align as center, which takes a background color of #98ce44, in a hover event.
This is an example of a music library container with hover effects, designed using CSS, HTML, and Bootstrap framework 4. The artist's image is imported to the form with its URL, whereas media quarries have been used to increase the responsiveness of the form. The form is given a font-family style as 'Rubik', sans-serif. The background of the form is given a linear-gradient color as (#006064, #c5e1a5). The artist's name is displayed using a font size of 7vh, and the font color of white. The play button is given the styles of background-color as green, font color as white, width as 80px, and border-radius as 25px, which takes the background color of #a5d6a7, in a hover event. Each table row consists of a song number, song name, artist name, and song duration, which turns its background color to green, in a hover event.
This is an example of MCQ question and answers form with hover effects, designed using CSS, HTML, and Bootstrap framework 4. The background of the form is given as #616161. The form consists of four danger type buttons, which are used as MCQ answer blocks. The buttons are given the styles of padding as 18px 60px, white-space as normal. Transform as scale(1.0), and transition-duration as .3s. In a hover event, each button takes a text-shadow effect of 0 3px 2px rgba(0, 0, 0, 0.4), and a transform effect of scale(1.1). Each label is given a glyphicon to mark the correct answer by selecting the relevant radio button. Each button block is given its own animation time, to implement the transforming animations in a hover event. The answer blocks are set to increase their scale, to be expanded from the rest, in a hover event.