How To Add A Color To A Footer In Html

Responsive Footer Blueprint makes whatsoever website much more than perfect and beautiful. The footer section plays a big role in user satisfaction and the structure of the website.

In this article, I am going to show you how to create a Responsive Footer Design using only HTML and CSS.

In the concurrently, I have shared with you one more type offooter design tutorial using Bootstrap. Withal, in this case, I did not use any bootstrap, only CSS and HTML are used here.

Simple Responsive Footer Design using HTML and CSS

There are many types of footer sections, some just basic information, and some social icons. In some cases, there are links, posts, images, and information. If y'all want to brand footers for news, magazines, or other types of sites, and so you can see another design fabricated by me.

The design that I have shown in this tutorial is very simple and piece of cake. Volition be very suitable for different types of personal websites or business websites. It is a very elementary and elementary design with a heading, some basic clarification, social media icons, and a footer credit option.

Responsive Footer Design with HTML CSS

To create a CSS Responsive Footer Pattern yous need to have a basic idea most HTML and CSS. I take explained each step in total detail. Before sharing this tutorial, permit me say something about this design (footer HTML CSS).

Offset I created a section at the bottom of the webpage whose background colour I used black. Get-go of all, I take used a heading or title in the section. So I gave some bones descriptions. Below the description, I have added 5 social icons.

At the finish of information technology all, I created a footer carte bar that has some menu items and a copyright section. The copyright section helps to give credit to the website and the menu items aid to add links to some of import pages.

Step 1: Pattern the web page to create a footer section

To create this footer design I first designed the webpage using CSS lawmaking. groundwork helped to add a background color to the web folio. I take used font family unit here which has helped to make up one's mind the front end of the text used here.

margin: 0;

padding: 0;

box-sizing: border-box;

}

body{

groundwork: #fcfcfc;

font-family unit: sans-serif;

}

Step 2:Basic structure of Responsive Footer Design

I have taken the assist of HTML and CSS below to create the basic structure of this section. I take created an expanse using HTML footer tags. And then I designed it with the help of CSS code. Hither background color I used black and gave tiptop machine.

The peak will help to depend on the amount of content in the height of this photo pattern. You may be wondering how I put this section at the bottom of the webpage. To put information technology at the bottom of the web page, I used the value of bottom, top, correct, nothing, and position: absolute.

footer{

position: absolute;

bottom: 0;

left: 0;

correct: 0;

background: #111;

height: car;

width: 100vw;

padding-top: 40px;

colour: #fff;

}

Basic structure of Responsive Footer Design

Step 3: Add all the information in HTML Footer Pattern

In this div below, I have added buttons for complete information such equally headings, descriptions, and social media.

</div>

.footer-content{

brandish: flex;

align-items: heart;

justify-content: center;

flex-direction: column;

text-align: center;

}

1. Created a heading

Using this HTML and CSS beneath I have created a heading in the footer design. Font-size: 2.1rem has been used to increase the text size of this heading.

<h3>Foolish Programmer</h3>

.footer-content h3{

font-size: 2.1rem;

font-weight: 500;

text-transform: capitalize;

line-height: 3rem;

}

Add all the information in HTML Footer Design

two. Added a description

Now I take added a description in the footer design using the post-obit codes. Text font-size: 14px and color white used.

<p>Foolish Programmer --- source code.</p>

.footer-content p{

max-width: 500px;

margin: 10px machine;

line-elevation: 28px;

font-size: 14px;

color: #cacdd2;

}

Added a description

3. create some social icons

In this footer department HTML CSS I accept added 5 social media icons. The post-obit HTML and CSS codes have been used to create these social icons.

</ul>

.socials{

listing-style: none;

display: flex;

align-items: center;

justify-content: heart;

margin: 1rem 0 3rem 0;

}

.socials li{

margin: 0 10px;

}

.socials a{

text-ornamentation: none;

colour: #fff;

edge: i.1px solid white;

padding: 5px;

border-radius: 50%;

}

.socials a i{

font-size: ane.1rem;

width: 20px;

transition: color .4s ease;

}

.socials a:hover i{

color: aqua;

}

Responsive Footer Design using HTML and CSS

Step iv: Create a copyright section in Responsive Footer Design

The post-obit codes accept been used to create a copyright section within this design. If you lot look at the demo higher up, you lot will understand that at that place is a copyright section where at that place is a copyright link and some bones bill of fare items.

</div>

.footer-lesser{

background: #000;

width: 100vw;

padding: 20px;

padding-lesser: 40px;

text-align: center;

}

Create a copyright section in Responsive Footer Design

.footer-lesser p{

float: left;

font-size: 14px;

word-spacing: 2px;

text-transform: capitalize;

}

.footer-bottom p a{

color:#44bae8;

font-size: 16px;

text-decoration: none;

}

.footer-bottom bridge{

text-transform: uppercase;

opacity: .iv;

font-weight: 200;

}

Simple Responsive Footer Design

Step five: Create a footer carte du jour bar

Now I accept created a carte du jour bar in this Responsive Footer section. I took the help of basic HTML and CSS to create it. Commencement I added the menu items with the help of HTML. Then with the help of CSS, I have designed the items in a beautiful fashion.

<li><a href="">Almost</a></li>

<li><a href="">Contact</a></li>

</ul>

</div>

.footer-card{

float: correct;

}

.footer-menu ul{

brandish: flex;

}

.footer-carte ul li{

padding-right: 10px;

display: block;

}

.footer-bill of fare ul li a{

color: #cfd2d6;

text-decoration: none;

}

.footer-carte ul li a:hover{

color: #27bcda;

}

Create a footer menu bar

Step 6:Make the footer design responsive using CSS

At present is the time to make this CSS footer pattern fully responsive. Hither I have used @media to make it responsive. We just demand to alter some basics to get in responsive. Kickoff I gave a maximum width using @media which means the post-obit codes will work for any display size.

@media (max-width:500px) {

.footer-card ul{

display: flex;

margin-peak: 10px;

margin-bottom: 20px;

}

Make the footer design responsive using CSS

Promise you lot learned from this tutorial how I designed this responsive footer using HTML and CSS. If you want to know better then you tin can encounter my already made bootstrap footer pattern. If there is whatsoever problem, y'all can definitely let me know by commenting.