Close

Faq for a website

This is an example of a FAQ web form with collapsible sections, designed using HTML and CSS. Variables are used to define values to avoid using values again and again in different places. The font family has been defined as 'Open Sans', sans-serif and been added to the code with its URL. The colors that are defined as variables are primary: #4f56c0, white: #FFFFFF, light: #F4F4F4, black: #333333, grey: #C4C4C4, and ghost: rgba(0,0,0,.0). The transitions that are defined as variables are $time: 200ms, $ease: cubic-bezier(0.165, 0.84, 0.44, 1), $smooth: cubic-bezier(0.175, 0.885, 0.32, 1.275), and $transition: $ease, $time. The section title is given the styles of color as $color, font-size as 4rem, font-weight as bold, text-align as center, text-transform as uppercase to convert the text to uppercase automatically, and padding as 3rem 0. The collapsible card initially has the styles of border: .1rem solid map-get ($colors, grey), border-radius: .4rem, overflow: hidden, and margin: 0 0 1.5rem whereas the button is given the styles of color: map-get ($colors, white), font-size: 2rem, width: 100%, and padding: 1rem 0. Source: https://codepen.io/luiquecruz/pen/LYPjWbg

Post Comment or Questions

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

Your email address will not be published. Required fields are marked *

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