Responsive Footer Design using CSS Flexbox

byCodingFlicks -September 02, 2020

1

Responsive Footer Design using CSS Flexbox

The footer section is an essential segment of any website design process. We need to consider our website footer as a resource for the visitors. A couple of years back, designers used to design a website footer by giving simple copyright info at the end of any site. Now the trend has changed recently, and developers use a big footer section above the copyright info and include some more information and some social media links of the website so that the visitor knows even better than before about the company. That information or links help the visitor solve their problem and give them the proper guidance they need. We are going to design a responsive footer using HTML and CSS flexbox layout modules.

In this responsive footer design with the CSS Flexbox project, we will have two columns. The first column will have a company logo and some random text as info for the company. The second column will have some social media links to the company. Inside the second column, we will see three different columns. In the first and second columns we will put some links for the visitor to get some vital info about the company, and last, not the least is the ''legal'' column where we will provide a privacy policy, contract, and terms of use of the company. In the bottom part of the footer, we will provide the copyright text mentioning the name of the company.

Video Tutorial:

First, we will start with HTML markup. We took a header tag at first, and inside that, We provided a paragraph tag with the text "content." We are designing the footer part for this project, so with the text "content'', We tried to mean all the website content above the footer section. After that, We took a footer tag with a class name ''footer,'' In the footer, we divided the contents into three different segments. There will be a logo and some introductory info text for the company. The next part will provide essential links to the website. Finally, in the last piece, we will write the company's copyright text in the footer bottom.

You may also like:

In the CSS part, we will first give a box-sizing property to all the elements using the universal selector so that the aspects of the project get padding in their width and height. We used Poppins as a primary font family for the program. I used the display flex property to align the footer elements and used standard CSS to give the footer background and style all the other features. To make the footer responsive, we used CSS media queries to change the mobile device's looks. There will be five different parts in the footer top part and a footer bottom part in a single column in the bottom, for the desktop view. But on the mobile view, each of those will align one after another.

Responsive Footer Design using CSS Flexbox [ Source Code ]:

For the production of this snippet, we have to generate two different files. The Initial one is the HTML File, and the other one is the CSS file. You need to copy the HTML And CSS code given below. After that, paste them to the appropriate files and save them. After that, run the project in your browser and modify it according to your needs. You can download the source code from the download button below.

HTML:

  <!DOCTYPE html>
<html lang="en">
<!-- codingflicks.com -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Footer Design using CSS Flexbox</title>
	<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <header>
		<p>content</p>
	</header>
	<footer class="footer">
		<div class="side-one">
			<h1><img alt="" src="logo.png"></h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam atque recusandae in sit sunt molestiae aliquid fugit. Mollitia eaque tempore iure sit nobis? Vitae nemo, optio maiores numquam quis recusandae.</p>           
		</div>
		<ul class="side-two">
			<li>
				<h2>Social</h2>
				<ul class="box">
					<li><a href="#">Facebook</a></li>
					<li><a href="#">Twitter</a></li>
					<li><a href="#">Pinterest</a></li>
					<li><a href="#">Dribbble</a></li>
				</ul>
			</li>
			<li class="features">
				<h2>Information</h2>
				<ul class="box h-box">
					<li><a href="#">Blog</a></li>
					<li><a href="#">Pricing</a></li>
					<li><a href="#">Sales</a></li>
					<li><a href="#">Tickets</a></li>
					<li><a href="#">Certifications</a></li>
					<li><a href="#">Customer Service</a></li>
				</ul>
			</li>
			<li>
				<h2>Legal</h2>
				<ul class="box">
					<li><a href="#">Privacy Policy</a></li>
					<li><a href="#">Terms of Use</a></li>
					<li><a href="#">Contract</a></li>
				</ul>
			</li>
		</ul>
		<div class="copyright">
			<p>All rights reserved by ©CompanyName 2035</p>
		</div>
	</footer>


</body>
</html>

CSS:

  *, *:before, *:after {
	box-sizing: border-box;
}
body {
	font-family: "Poppins", sans-serif;
	margin: 0;
	display: grid;
	font-size: 14px;
}
header p {
	padding: 50px;
	text-align: center;
	color: #bebebe;
	text-transform: uppercase;
	font-size: 65px;
	font-weight: 700;
}
.footer {
	display: flex;
	flex-flow: row wrap;
	padding: 50px;
	color: #fff;
	background: linear-gradient(to right,#23074d, #cc5333);
}
.footer>* {
	flex: 1 100%;
}
.side-one {
	margin-right: 1.25em;
	margin-bottom: 2em;
}
h2 {
	font-weight: 400;
	font-size: 15px;
}
.footer ul {
	list-style: none;
	padding-left: 0;
}
.footer li {
	line-height: 2em;
}
.footer a {
	text-decoration: none;
}
.side-two {
	display: flex;
	flex-flow: row wrap;
}
.side-two>* {
	flex: 1 50%;
	margin-right: 1.25em;
}
.box a {
	color: #999;
}
.h-box {
	column-count: 2;
	column-gap: 1.25em;
}
.copyright {
	text-align: center;
	color: #999;
	padding-top: 50px;
}
.side-one p {
	padding-right: 20%;
	color: #999;
}
@media screen and (min-width: 600px) {	
    .side-two>* {
		flex: 1;
	}
	.features {
		flex-grow: 2;
	}
	.side-one {
		flex: 1 0px;
	}
	.side-two {
		flex: 2 0px;
	}
}

@media (max-width: 600px){
    header p {
        font-size: 40px;
    }
    .footer {
        padding: 40px;
    }
}

That's the end of this tutorial. I hope you liked this responsive footer design with CSS Flexbox Flexible Box Layout. If you want more snippets, you can click the load more button on our homepage and scroll down the page. Please follow this blog on our Twitter and Facebook Groups to stay updated for future posts. Thanks for visiting our website.

DOWNLOAD CODE

1 Comments

Please do not enter any spam link in the comment box.

Samith Fernando30 April 2022 at 13:14

Great. Well done. And also I have to mention we can get a huge knowledge about web developing from https://w3schoolweb.com/ .This site covers vast area in Web Developing
ReplyDelete
Replies

Add comment