How To Create a Responsive Footer Using HTML And CSS
May 10, 2026
Welcome Back
दोस्तों हमेशा के तरह इस बार भी आपका बहुत बहुत स्वागत है हमारे इस ब्लॉग पोस्ट पर, जैसा की मैंने पिछले पोस्ट में मैंने आपको बताया की HTML और CSS का उपयोग करके एक Responsive Navbar कैसे बनाते है? इसी प्रकार आज के इस पोस्ट में मैंने आपको यह जानकारी दी है की आप HTML और CSS के माध्यम से एक Responsive Footer कैसे बनाते है ? और सबसे पहले मैं आपको यह जानकारी दूंगा की Responsive का मतलब क्या होता है और हर वेबसाइट को Responsive क्यों बनाते है ?
Responsive क्या होता है ?
Responsive का मतलब होता है की आपके डिवाइस के अनुसार आपके वेबसाइट को दिखाना यानि की यदि आप इस वेबसाइट को अपने PC में देख रहे तो यह बड़ा दिख रहा होगा और जैसे ही आप इसे अपने मोबाइल पर देखेंगे तो आपके डिवाइस के अनुसार यह Auto Adjust हो जाता है इससे सबसे बड़ा फायदा यह होता है की आपका वेबसाइट को सभी डिवाइस में बिना की परेशानी को देख सकते है, तो चलिए अब मैं आपको यह जानकारी देता हूँ की आप एक Responsive Footer Bar कैसे डिजाईन करते है.
Responsive Footer Bar कैसे डिजाईन करते है ?
तो दोस्तों जैसा की आपने जाना की Responsive क्या होता है तो चलिए अब मैं आपको यह जानकारी देता हूँ की एक Responsive Footer Bar कैसे बनाते है, यहाँ पर मैंने Responsive Footer Bar को बनाने के लिए आपको एक दम असान बना दिया है, क्योकि मैंने एक बहुत ही अच्छा और खुबसूरत Footer Bar का HTML and CSS Code निचे Emmed किया है, बस आपको Copy Paste करना है और आपका Responsive Footer Bar बन कर तैयार हो जाएगी,
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Responsive Footer</title>
<!-- Font Awesome CDN -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css'>
</head>
<body>
<!-- Footer Start -->
<footer>
<div class='footer-container'>
<!-- Logo & About -->
<div class='footer-box'>
<h2>ODPOINT</h2>
<p>
Learn HTML, CSS, JavaScript and Web Development
with easy tutorials and practical examples.
</p>
<!-- Social Media -->
<div class='social-icons'>
<a href='#'>
<i class='fab fa-facebook-f'></i>
</a>
<a href='#'>
<i class='fab fa-instagram'></i>
</a>
<a href='#'>
<i class='fab fa-youtube'></i>
</a>
<a href='#'>
<i class='fab fa-linkedin-in'></i>
</a>
</div>
</div>
<!-- Quick Links -->
<div class='footer-box'>
<h3>Quick Links</h3>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Tools</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>About</a></li>
</ul>
</div>
<!-- Contact -->
<div class='footer-box'>
<h3>Contact</h3>
<p>Email: info@odpoint.in</p>
<p>Phone: +91 7060886203</p>
<p>India</p>
</div>
</div>
<!-- Bottom Footer -->
<div class='footer-bottom'>
<p>© 2026 ODPOINT. All Rights Reserved.</p>
</div>
</footer>
</body>
</html>*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}
body{
background:#f5f5f5;
}
/* Footer */
footer{
background:#23272b;
color:white;
margin-top:50px;
}
.footer-container{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:30px;
padding:40px 20px;
}
.footer-box{
flex:1;
min-width:220px;
}
.footer-box h2,
.footer-box h3{
margin-bottom:15px;
}
.footer-box p{
line-height:1.8;
font-size:15px;
}
/* Social Icons */
.social-icons{
margin-top:15px;
}
.social-icons a{
display:inline-block;
width:40px;
height:40px;
line-height:40px;
text-align:center;
background:white;
color:#0d6efd;
border-radius:50%;
margin-right:10px;
transition:0.3s;
font-size:18px;
}
.social-icons a:hover{
background:#ffd700;
color:black;
}
.footer-box ul{
list-style:none;
}
.footer-box ul li{
margin-bottom:10px;
}
.footer-box ul li a{
color:white;
text-decoration:none;
transition:0.3s;
}
.footer-box ul li a:hover{
color:#ffd700;
}
.footer-bottom{
text-align:center;
padding:15px;
border-top:1px solid rgba(255,255,255,0.2);
font-size:14px;
}
/* Responsive Footer */
@media (max-width:768px){
.footer-container{
flex-direction:column;
text-align:center;
}
.social-icons{
justify-content:center;
}
}Footer Bar बनाना क्यों जरुरी होता है ?
आप जब भी किसी वेबसाइट को देखते है तो हर वेबसाइट पर page के निचे आपको एक footer का section दिखाई देता है, जिसमे वेबसाइट के बारें में जानकरी होती है, जैसे की About, Important Page का लिंक, Social Medial Link और Contact us का भी page होता है, इससे फायदा यह होता है की वेबसाइट के बारे में सभी प्रकार की जानकारी और महत्वपूर्ण लिंक एक ही जगह देखने को मिल जाते है, जिससे की यूजर को वेबसाइट के बारे में जानकारी प्राप्त करना और वेबसाइट को सभी रूप से उपयोग करना असान हो जाता है.
आपने अभी तक जितनी भी internet पर वेबसाइट देखा होगा तो आपने वेबसाइट के लिए
Sonu Sahani
Authorइस आर्टिकल को पब्लिश करने का हमारा एक मात्र उद्देश्य है की आपको यह जानकारी देना की आप बिना कोडिंग किये सिर्फ मेरे द्वारा दी गयी कोड को कॉपी पेस्ट करके कैसे एक Responsive Footer बना सकते है.