Close

CSS Accordion

This is an accordion layout with hover effects and animations, designed using HTML, CSS, and Bootstrap framework 4. The fonts are imported to the code with its URL, whereas media quarries are used to increase the responsiveness of the form. The background of the form is given the color of #1c1c1c. The accordion is given the styles of background as #8A6552, color as #FFFFFF, font-family as 'Sunflower', sans-serif, and padding-bottom as 2rem. The accordion is given six similar child items and a different last item. The accordion items have the styles of padding as 1rem 2rem, margin as 0 auto, and max-width as 30rem, whereas the last item has the styles of background as #462521, text-align as center, and border-radius as .5rem. The title of each item is given the font-size as 1.5rem. The heart icon has the styles of color as #CA2E55, font-size as 3rem, and transition as all .3s cubic-bezier(.8,.16,.42,.89). The child elements take a transform effect of scaleX(2) translateX(-1px) in a hover event, whereas the heart icon in the last child takes the font-size of 6rem, and transform of scale(2). The title of the first six child elements also takes a transform effect of scaleX(.5) translateX(-50%), in a hover event. Source: https://codepen.io/sfi0zy/pen/KeMZEb

Post Comment or Questions

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

Your email address will not be published.