This is a template of a sign-in web form designed using HTML, and CSS. The bootstrap styles, icons, fonts, and images are imported to the form with their URLs. The form is given a font-family of 'Numans', sans-serif whereas the card has the styles of height as 370px, margin-top as auto, margin-bottom as auto; width as 400px, and background-color as rgba(0,0,0,0.5) !important. The social media icons are given the styles of font-size as 60px, margin-left as 10px, and color as #FFC312. In a hover event, the color of social media icons becomes white and the cursor becomes pointer to get the hand cursor effect. The login button has an initial style set of color as black, background-color as #FFC312, and width as 100px which also turns into the background color white, in a hover event. The links are given a margin-left style of 4px and the color white.

This is an example of a sign-up form designed with HTML and CSS. The input type ‘text' has been used for the text fields. Placeholders have been used to display a hint of the expected output in input fields. ‘Select' element has been used in Phone number and Job type fields to select options from a dropdown list. The "font-awesome" style sheet has been imported and used the list element with the class value of fa fa-envelope. The class divider text has the styles of position as relative, text-align as center, margin-top as 15px, and margin-bottom as 15px. The span has the styles of padding as 7px, font size as 12px, position as relative, and z-index as 2. The styles will be appended to the text fields after the load with the styles of content as empty, a position as absolute, width as 100%, border-bottom as 1px solid #ddd, top as 55%, left as 0 and z-index as 1. Source: https://bootsnipp.com/snippets/z8699

This is a form where users can either log in through regular user name and password or via social media accounts. The media queries have been used to implement the responsive styles to the HTML based on the screen of the user. The button hovers effects are added to the HTML by the use of the hover class in CSS styles and adding the background color on the mouse hover. The style element focus has been used to apply the styles based on the clicked element. The background colors have been set by the use of the CSS style background. Google font has been imported by adding its URL and the @import class in CSS to display text. On a mouse hover event, the href style will be set to opacity - 0.8, color - #ff5400 and text-decoration – none

Another classic example to create the footer section of a website with only CSS and HTML. Img element in HTML has been used to display the given image. CSS styles have been used to apply the mouse hover effects for the elements. Background element is used to change the color of the elements whereas transition element is used to apply the effect of “ease in”. The complete footer section is set to have the background color value of #272272, a medium blue. Border bottom style is used with the use of the value of 1px dotted #e4e9f0 to create the dotted line in the footer and its color set to light green.

This is another example of the design of the footer section with the use of pure CSS. The font awesome icons are used to display the icons as well as LI icons. The mouse hover event is implemented by using the hover event. The footer section is set to have a background color of a shade of dark gray with #222 and its border to a shade of light brown of #b78c33. CSS style of text transform has been used with its value as uppercase to convert the text to uppercase as well as the border-radius value of 50% to make the social media icons circular.