This is an example of the footer section of a website with pure CSS. CSS style has been used with the background element to apply a background color to the footer section. The background color is set to a dark shade of gray with the value of #1c1c1c and the font color to white with #fff. A href element is used to mount the mobile number where the prefix tel: is appended to link the number to a mobile application on the user device. Likewise, the prefix mailto: has been used to link it with an email id and redirect to an email application on click.

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 an example of the implementation of the footer section on websites with pure CSS. The image element has been used to display the image on the footer section. The font awesome style sheet has been used to apply the icons and font styles to the text .The CSS styles has been used to apply the colors for the text using span and a href. The CSS element of color is used to apply different colors to the text as well as the media query string to apply responsive style for the footer. The background of the footer section has the value of #292c2f which is a dark blue color whereas the display style value has been set for an inline-block to display the href elements in a single horizontal line.

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.

This is an example of the implementation of a top navigation bar and a footer section for a website with CSS and HTML. Bootstrap library and bootstrap style sheets have been imported to the code with the use of its grid view elements to separate and organize the displaying sections. All the icons that are displayed in the example are used with the integration of the font awesome icons. The basic styles such as background color, buttons, and labels have been used with pure CSS implementation. The background color of the top bar is set as black and in order to place the social media icons in a row, the display style is set as inline-block, font color as white and the font size as 25px.

This is a simple example for the footer section of a website with pure CSS and HTML. The bootstrap style sheets are imported to the code and used with its grid view elements to separate and organize the displaying sections. The concept of Lists has been used with UL and LI components. The font awesome style sheet is used to display the icons. UL element has been used with the child elements of LI to display the unordered list. Background color has been set to a shade of maroon with rgb (71, 32, 29).

This is an example from right to left list which can be used in a list, navigation bar, footer and to display the items. Design from right to left makes sure your website follows the same design. The list items are placed in container-fluid giving it appropriate responsive behavior, The CSS is simple and keeps the list simple along with it, providing the hovering property to the links. Check out the responsive behavior, which gives an appropriate look to this design while it is viewed in smaller screens.

This is one of the best footer examples for the websites reading right to left. Divided into 3 columns, extreme right displays the company information, followed by the contact details on the company, and extreme left is the contact information along with appropriate social media. Check out the extra add-ons at the bottom link copyright information. If you are planning for this kind of footer then have a look at CSS which provides the style of right to left for all the components of the footer. This is even responsive and is great when it displays itself on smaller screens. If you are planning to use this make sure your website is also right-aligned and is normally read from right to left.