Close

Bootstrap Accordion Layout

This is an example of a web form with an accordion feature, designed using HTML, CSS, React JavaScript, and Bootstrap framework 4. React JavaScript functions have been used to implement the accordion functions, whereas the fonts are imported to the code with its URL. The body of the form is given a style set of font-family as 'quicksand', font-weight as lighter, and a linear gradient background as rgba(92,129,202,1). The accordion is given the styles of box-shadow as 0px 13px 23px -13px rgba(0,0,0,0.5), width as 420px, background-color as transparent, margin as auto, and margin-top as 50px. The title has a style set of height and width as 30px, and 400px, background-color as rgba(0,0,0, .4), color as #ffddcc, text-transform as uppercase to automatically convert the text to uppercase, letter-spacing as 1px, line-height as 2, transition as all .2s ease-in, and cursor style as pointer to get the hand cursor effect in a hover event. In a hover event, the background color of the accordion turns to rgba(0,0,0, .5), whereas in the active mode, it turns to rgba(0, 0, 0, .55). Source: https://codepen.io/matthewvincent/pen/EKKeyX

Post Comment or Questions

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

Your email address will not be published.

Several Related Snippets

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