Footer With Columns
This is an example of a simple footer layout with columns, designed using HTML, CSS, and Bootstrap framework 4. The CSS styles and Bootstrap styles are imported to the code with their URLs. 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 footer items in an orderly manner. The form is given the styles of background-color as #fff, and font color as #4b4c4d. The column titles are given the styles of margin-bottom as 12px, font-weight as bold, and font-size as 16px, whereas the column list items are given the styles of line-height as 1.6, and font-size as 14px. The list items take the opacity value of 1, in a hover event. Media quarries are used to increase the responsiveness of the form. The social media icons are given the styles of font-size as 24px, width and height as 24px, line-height as 40px, display as inline-block, text-align as center, border-radius as 50% to get the circle shape, border as 1px solid #ccc, margin-left as 10px, margin-top as 22px, and opacity as 0.75. The social media icons change their opacity to 0.9, in a hover event.