This is an example of a Like, Comment, and Share section, designed using HTML, CSS, and Bootstrap framework 4. The profile images are imported to the code with the URL, and defined as rounded-circle in HTML. The body of the form is given a background color as #eee. The dateline is given a font-size as 11px, whereas the font-size of the comment text is defined as 12px. The Like, Comment and Share texts are also given a font-size as 12px. The name title is given a background color as #007bff. The cursor style for the form is set as pointer to get the hand cursor effect in a hover event. The Like, Comment and Share text turns to blue color, in a hover event. Two primary type buttons are also included in the form to post the comment and cancel the comment.
This is an example of an input boxes layout, designed using HTML, CSS, and Bootstrap framework 4. The values and colors are predefined as variables. The body of the form is given the styles of font-family as "Lato", sans-serif, and font-size as 16px. The section header is given the styles of text-transform as uppercase to automatically convert the text to uppercase, font-weight as bold, color as #9FAAB7, font-size as 16px/1.4, and margin-bottom as 1.4. The input fields are given the styles of border as 1px solid #C0CCDA, margin-bottom as 16px, and border-radius as 4px. The input fields take a border-color of #270D7C, in a checked event. The input text is given the styles of opacity as 1, font-size as 8px* 1.4, background-color as white, color as #9FAAB7, padding as 4px/2 4px, and margin as -58px 0 0 8px*1.4.