Home Web Design CSS HTML CSS Footer With Responsive Design | Fixed Bottom Footer

HTML CSS Footer With Responsive Design | Fixed Bottom Footer

May 17, 2019

119950

How to create a responsive footer with HTML & CSS? Solution: HTML CSS Footer With Responsive Design – Fixed Bottom Footer.

Footer on any website is compulsory. The HTML’s latest version HTML5 introduced the separate <footer> tag for the footer. Until a few years ago, all most footers on mostly website with less height for giving copyright info. But, nowadays there is a trend, all website have a big footer section with more info and social accounts links.

Now everyone adds important page links like about, contact, services, blog add on footer section. Address & contact information also are now footer’s part. You can see one better than one footer design when you surf multiple websites. I noticed a thing, person and graphics related websites had amazing footer design. Mostly they are made with libraries like bootstrap etc.

Now question is, Can we create a footer with only HTML CSS? Yes, you can do it after seeing this post and understand this program. So, today I am sharing an HTML CSS Footer With Responsive Design. If you want to create a fixed bottom footer, then this program also will help you. I don’t use JavaScript or any library for creating this program, this is in pure CSS & HTML.

If you thinking now how this program will look in reality, then there is a preview for you given below.

Preview Of Fixed Bottom Footer

See this video preview for getting an idea of how this program actually is.

https://webdevtrick.com/wp-content/uploads/fixed-responsive-bottom-footer.mp4?_=1

Now you can see this program visually. If you like this then get the source code of this program.

HTML CSS Footer With Responsive Design Source Code

Before sharing source code, I want to say little bit about this program. This footer program is in pure HTML CSS with responsive design. I did not used JS or any library, But I used font-awesome for icons & a google font. This is a very basic concept, A beginner also understands this easily. In this program, I had mostly used CSS display (get info) property. This is a responsive design also, For creating this responsive footer I used @media property.

For creating this program you have to create just 2 files. One for HTML & one for CSS. Follow the steps for creating this without any error.

footer.html

Create an HTML file named ‘footer.html‘ and put these codes given here below.

<!DOCTYPE html>
<!-- code by webdevtrick ( https://webdevtrick.com ) -->
<html>
<head>

	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keywords" content="footer, address, phone, icons" />

	<title>Footer With Address And Phones</title>
	
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
    <link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="style.css">

</head>

	<body>
		<div class="main"> FOOTER DESIGN IN HTML CSS</div>
		<footer class="footer-distributed">

			<div class="footer-left">

				<h3>WebDev<span>Trick</span></h3>

				<p class="footer-links">
					<a href="#">Home</a>
					·
					<a href="#">Blog</a>
					·
					<a href="#">Pricing</a>
					·
					<a href="#">About</a>
					·
					<a href="#">Faq</a>
					·
					<a href="#">Contact</a>
				</p>

				<p class="footer-company-name">webdevtrick &copy; 2019</p>
			</div>

			<div class="footer-center">

				<div>
					<i class="fa fa-map-marker"></i>
					<p><span>21 Revolution Street</span> Delhi, India</p>
				</div>

				<div>
					<i class="fa fa-phone"></i>
					<p>+1 555 123456</p>
				</div>

				<div>
					<i class="fa fa-envelope"></i>
					<p><a href="mailto:support@company.com">contact@webdevtrick.com</a></p>
				</div>

			</div>

			<div class="footer-right">

				<p class="footer-company-about">
					<span>About the company</span>
					Web Dev Trick is a blog for web designers, graphic designers, web developers &amp; SEO Learner.
				</p>

				<div class="footer-icons">

					<a href="#"><i class="fa fa-facebook"></i></a>
					<a href="#"><i class="fa fa-twitter"></i></a>
					<a href="#"><i class="fa fa-linkedin"></i></a>
					<a href="#"><i class="fa fa-github"></i></a>

				</div>

			</div>

		</footer>

	</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Footer With Address And Phones</title>

</head>

<body>

<div class="main"> FOOTER DESIGN IN HTML CSS</div>

<h3>WebDev<span>Trick</span></h3>

<a href="#">Pricing</a>

<a href="#">About</a>

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

</p>

</div>

<div>

<p><span>21 Revolution Street</span> Delhi, India</p>

</div>

<div>

</div>

<div>

<p><a href="mailto:support@company.com">contact@webdevtrick.com</a></p>

</div>

<span>About the company</span>

Web Dev Trick is a blog for web designers, graphic designers, web developers & SEO Learner.

</p>

</div>

</footer>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

/** code by webdevtrick ( https://webdevtrick.com ) **/
body {
	margin: 0;
	padding: 0;
}
.main {
	max-height: 550px;;
	background-color: #292c2f;
	color: white;
	font-size: 38pt;
	text-align: center;
	line-height: 550px;
}
footer{
	position: fixed;
	bottom: 0;
}
.footer-distributed{
	background-color: #292c2f;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
	box-sizing: border-box;
	width: 100%;
	text-align: left;
	font: bold 16px sans-serif;

	padding: 55px 50px;
	margin-top: 80px;
}

.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
	display: inline-block;
	vertical-align: top;
}

.footer-distributed .footer-left{
	width: 40%;
}

.footer-distributed h3{
	color:  #ffffff;
	font: normal 36px 'Cookie', cursive;
	margin: 0;
}

.footer-distributed h3 span{
	color:  #5383d3;
}


.footer-distributed .footer-links{
	color:  #ffffff;
	margin: 20px 0 12px;
	padding: 0;
}

.footer-distributed .footer-links a{
	display:inline-block;
	line-height: 1.8;
	text-decoration: none;
	color:  inherit;
}

.footer-distributed .footer-company-name{
	color:  #8f9296;
	font-size: 14px;
	font-weight: normal;
	margin: 0;
}


.footer-distributed .footer-center{
	width: 35%;
}

.footer-distributed .footer-center i{
	background-color:  #33383b;
	color: #ffffff;
	font-size: 25px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	text-align: center;
	line-height: 42px;
	margin: 10px 15px;
	vertical-align: middle;
}

.footer-distributed .footer-center i.fa-envelope{
	font-size: 17px;
	line-height: 38px;
}

.footer-distributed .footer-center p{
	display: inline-block;
	color: #ffffff;
	vertical-align: middle;
	margin:0;
}

.footer-distributed .footer-center p span{
	display:block;
	font-weight: normal;
	font-size:14px;
	line-height:2;
}

.footer-distributed .footer-center p a{
	color:  #5383d3;
	text-decoration: none;;
}

.footer-distributed .footer-right{
	width: 20%;
}

.footer-distributed .footer-company-about{
	line-height: 20px;
	color:  #92999f;
	font-size: 13px;
	font-weight: normal;
	margin: 0;
}

.footer-distributed .footer-company-about span{
	display: block;
	color:  #ffffff;
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 20px;
}

.footer-distributed .footer-icons{
	margin-top: 25px;
}

.footer-distributed .footer-icons a{
	display: inline-block;
	width: 35px;
	height: 35px;
	cursor: pointer;
	background-color:  #33383b;
	border-radius: 2px;

	font-size: 20px;
	color: #ffffff;
	text-align: center;
	line-height: 35px;

	margin-right: 3px;
	margin-bottom: 5px;
}


@media (max-width: 880px) {

	.footer-distributed{
		font: bold 14px sans-serif;
	
	}

	.footer-distributed .footer-left,
	.footer-distributed .footer-center,
	.footer-distributed .footer-right{
		display: block;
		width: 100%;
		margin-bottom: 40px;
		text-align: center;
	}

	.footer-distributed .footer-center i{
		margin-left: 0;
	}
	.main {
		line-height: normal;
		font-size: auto;
	}

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

/** code by webdevtrick ( https://webdevtrick.com ) **/

body {

margin: 0;

padding: 0;

}

.main {

max-height: 550px;;

background-color: #292c2f;

color: white;

font-size: 38pt;

text-align: center;

line-height: 550px;

}

footer{

position: fixed;

bottom: 0;

}

.footer-distributed{

background-color: #292c2f;

box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);

box-sizing: border-box;

width: 100%;

text-align: left;

font: bold 16px sans-serif;

padding: 55px 50px;

margin-top: 80px;

}

.footer-distributed .footer-left,

.footer-distributed .footer-center,

.footer-distributed .footer-right{

display: inline-block;

vertical-align: top;

}

.footer-distributed .footer-left{

width: 40%;

}

.footer-distributed h3{

color: #ffffff;

font: normal 36px 'Cookie', cursive;

margin: 0;

}

.footer-distributed h3 span{

color: #5383d3;

}

.footer-distributed .footer-links{

color: #ffffff;

margin: 20px 0 12px;

padding: 0;

}

.footer-distributed .footer-links a{

display:inline-block;

line-height: 1.8;

text-decoration: none;

color: inherit;

}

.footer-distributed .footer-company-name{

color: #8f9296;

font-size: 14px;

font-weight: normal;

margin: 0;

}

.footer-distributed .footer-center{

width: 35%;

}

.footer-distributed .footer-center i{

background-color: #33383b;

color: #ffffff;

font-size: 25px;

width: 38px;

height: 38px;

border-radius: 50%;

text-align: center;

line-height: 42px;

margin: 10px 15px;

vertical-align: middle;

}

.footer-distributed .footer-center i.fa-envelope{

font-size: 17px;

line-height: 38px;

}

.footer-distributed .footer-center p{

display: inline-block;

color: #ffffff;

vertical-align: middle;

margin:0;

}

.footer-distributed .footer-center p span{

display:block;

font-weight: normal;

font-size:14px;

line-height:2;

}

.footer-distributed .footer-center p a{

color: #5383d3;

text-decoration: none;;

}

.footer-distributed .footer-right{

width: 20%;

}

.footer-distributed .footer-company-about{

line-height: 20px;

color: #92999f;

font-size: 13px;

font-weight: normal;

margin: 0;

}

.footer-distributed .footer-company-about span{

display: block;

color: #ffffff;

font-size: 14px;

font-weight: bold;

margin-bottom: 20px;

}

.footer-distributed .footer-icons{

margin-top: 25px;

}

.footer-distributed .footer-icons a{

display: inline-block;

width: 35px;

height: 35px;

cursor: pointer;

background-color: #33383b;

border-radius: 2px;

font-size: 20px;

color: #ffffff;

text-align: center;

line-height: 35px;

margin-right: 3px;

margin-bottom: 5px;

}

@media (max-width: 880px) {

.footer-distributed{

font: bold 14px sans-serif;

}

.footer-distributed .footer-left,

.footer-distributed .footer-center,

.footer-distributed .footer-right{

display: block;

width: 100%;

margin-bottom: 40px;

text-align: center;

}

.footer-distributed .footer-center i{

margin-left: 0;

}

.main {

line-height: normal;

font-size: auto;

}

That’s It. Now you have successfully created an HTML CSS Footer With Responsive Design or Fixed Bottom Footer. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.