Profile Contacts Layout
This is an example of a profile contacts layout, designed using HTML, CSS, and Bootstrap framework 4. The font styles and images 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 social media icons, in an orderly manner. The body of the form is given a background color of #DCDCDC. The social media icons are given the styles of border-radius as 50% to get the circle shape, color as rgba(121, 121, 121, .8), height as 30px, line-height as 27px, border as 2px solid rgba(121, 121, 121, .5), text-align as center, and width as 30px. The icons take the styles of color as #797979, and border as 2px solid #797979, in a hover event. The image thumbnail has the styles of background-color as #fff, border as 1px solid #dee2e6, and border-radius as .25rem. The 'Message Now' button is created as a primary type button in HTML.