This is a simple example of a News Letter component with pure CSS and HTML. The CSS element “background” has been used to display the background image with the color of linear-gradient; (rgba(0,0,0,0.7),rgba(0,0,0,0.6)),url('https://pbs.twimg.com/media/DWH8pTQW4AAdp4F.jpg').The background image is centered with the center style element. Initially the typing space for the email address won’t be visible to the user as it is set to a 0 width. The mouse hover element has been used to display the input text field by setting the width on the mouse hover event whereas the focus event has been used to make the type space appear automatically. The color of the button “subscribe” is set as green and the font color as whitesmoke.
This is an example of a classic footer section of a website with pure CSS. The HTML element strong has been used to make the text Bold. The element of UL and child element of its LI have been used to display the list. CSS styles have been implemented to display the background shapes and the element “after” to apply the styles when the elements are loaded. The img tag has been used to display the image in the footer. The h3 element is set to have a font size of 18px, font-weight of 400.
This is a sample design for the footer section of a website with a search bar. To apply the icons and the font styles to the text, the font-awesome style sheet has been imported. Creating the search bar has been done by using “form” tag and the input type text element to display the text field and the button element for the search button. CSS style of border-top has been used to display the line on top of the search bar. The font style of the footer section is set as “Raleway sans-serif” and the values of input type text element to have a height of 45px, the width of 40%, padding-left of 20px and the color as #333.
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.