হ্যালো ভিউয়ারস, আশা করি ভালো আছেন। Notesaid24 ওয়েবসাইটে আপনাকে স্বাগতম। আজকে আপনাদের মাঝে শেয়ার করবো; কিভাবে ওয়েবসাইটের মধ্যে Footer সেকশন HTML এবং CSS এর মাধ্যমে ডিজাইন করা যায় ।
How to
প্রজেক্ট ধারণাঃ
- নামঃ Design Footer Section in HTML and CSS with Icons
- ভাষাঃ HTML & CSS
- লাইসেন্সঃ ফ্রি
- রেস্পনসিভঃ না
- অথরঃ Notesaid24
প্রজেক্ট করতে যা জানা প্রয়োজনঃ
- বেসিক HTML
- বেসিক CSS
- Margin & Padding (মার্জিন & প্যাডিং )
- Position (পজিশন)
- Absolute
- Relative
- Font Awesome Icon (এই প্রোজেক্ট এ Font Awesome এর 4.7.0 ভার্সন ব্যবহার করা হয়েছে )
- Form Input নিয়ে সামান্য ধারনা থাকলে হবে।
- Display Flex
- Display Grid
- Google Fonts ব্যবহার করার ধারনা।
- লোকাল ইমেজ ব্যবহার করার ধারনা।
আশা করি এসব জানা থাকলে এই প্রোজেক্ট করতে কোন সমস্যা নেই, তবে না জানা থাকলেও সমস্যা নেই প্রোজেক্ট করার সাথে সাথে ধারনা হয়ে যাবে। চলুন শুরু করা যাক……………
Footer সেকশন ডিজাইন করার জন্য, প্রথমে আপনাকে দুটি ফাইল তৈরি করতে হবে। একটি হলো index.html আর অন্যটি হলো style.css ( নামের ব্যপারে কোন বাধ্যবাধকতা নেই তবে ডট নোটেশনের পর .html এবং .css এগুলো ঠিক রাখতে হবে) । নিন্মে index.html এবং style.css ফাইল দেওয়া হয়েছে। অথবা সোর্স কোড ডাইনলোড করে ব্যবহার করতে পারেন।
প্রথমত, আপনি একটা HTML ফাইল (index.html) তৈরি করে নিন, নিচের ব্লকে দেওয়া কোডটি Copy করে আপনার এইচটিএমএল (HTML) ফাইলে Paste করে নিন। মনে রাখবেন (.html) এক্সটেনশন যেন ঠিক থাকে।
HTML কোড ব্লকঃ
<body>
<main>
<footer>
<div class="outerfooter">
<div class="innerFooter">
<div class="footerItem">
<div class="imgBox">
<img src="./image/logo.png" alt="" />
<p>Notesaid24</p>
</div>
<p class="siteInfo">3630, Chandpur</p>
<p class="siteInfo">Chittagong, Bangladesh</p>
<p class="siteInfo">admin@notesaid24.com</p>
<div class="sclBox">
<ul>
<li>
<a href="#"><i class="fa fa-facebook"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-twitter"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-linkedin"></i></a>
</li>
</ul>
</div>
</div>
<div class="footerItem">
<h1>Explore</h1>
<ul>
<li><a href="#">Our Product</a></li>
<li><a href="#">New Collection</a></li>
<li><a href="#">Today Arrival</a></li>
<li><a href="#">Best Premium</a></li>
</ul>
</div>
<div class="footerItem">
<h1>Know More</h1>
<ul>
<li><a href="#">Our Outlet</a></li>
<li><a href="#">Best Selling</a></li>
<li><a href="#">Manage Product</a></li>
<li><a href="#">Review</a></li>
</ul>
</div>
<div class="footerItem">
<h1>About</h1>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Vision</a></li>
<li><a href="#">Disclaimer</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</footer>
</main>
</body>
দ্বিতীয়ত, আপনি একটা CSS ফাইল (style.css) তৈরি করে নিন, নিচের ব্লকে দেওয়া কোডটি Copy করে আপনার সিএসএস (CSS) ফাইলে Paste করে নিন। মনে রাখবেন (.css) এক্সটেনশন যেন ঠিক থাকে।
CSS কোড ব্লকঃ
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap");
body {
max-width: 920px;
width: 96%;
margin: 0 auto;
padding: 0;
box-sizing: border-box;
color: #363636;
font-family: "Poppins", sans-serif;
}
.outerfooter {
box-shadow: 0 0 10px #acacac;
padding: 20px;
margin-top: 50px;
}
.innerFooter {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
}
.footerItem .imgBox {
display: flex;
align-items: center;
}
.footerItem .imgBox img {
width: 30px;
height: 30px;
border-radius: 100%;
}
.footerItem .imgBox p {
font-size: 20px;
font-weight: 700;
margin-left: 5px;
}
.footerItem .siteInfo {
margin-top: 0;
margin-bottom: 2px;
font-size: 15px;
}
.sclBox ul {
display: block;
list-style: none;
padding: 0;
}
.sclBox ul li {
display: inline-block;
margin-right: 10px;
}
.sclBox ul li a i {
width: 28px;
height: 22px;
border: 1px solid #c3c3c3;
border-radius: 100px;
padding-top: 6px;
text-align: center;
transition: all 0.3s ease-in-out;
background-color: #ffffff;
cursor: pointer;
}
.sclBox ul li a {
color: #363636;
text-decoration: none;
}
.sclBox ul li i.fa-facebook {
color: #3a5693;
}
.sclBox ul li i.fa-twitter {
color: #00a7e6;
}
.sclBox ul li i.fa-linkedin {
color: #0270ad;
}
.sclBox ul li i.fa-facebook:hover {
background: #3a5693;
color: #ffffff;
}
.sclBox ul li i.fa-twitter:hover {
background: #00a7e6;
color: #ffffff;
}
.sclBox ul li i.fa-linkedin:hover {
background: #0270ad;
color: #ffffff;
}
.footerItem h1 {
font-size: 22px;
font-weight: 700;
font-variant: small-caps;
}
.footerItem ul {
display: block;
padding: 0;
list-style: none;
}
.footerItem ul li {
margin-bottom: 5px;
}
.footerItem ul li a {
text-decoration: none;
color: #363636;
transition: 0.5s ease-in-out;
cursor: pointer;
}
.footerItem ul li a:hover,
.innerInfo ul li a:hover {
color: #e04b36;
}
আশা করি আপনি কোড টি সফলভাবে রান করাতে পেরেছেন। প্রোজেক্ট টি কেমন লেগেছে অবশ্যই কমেন্ট করে জানাবেন, আর যদি কোন ভূল হয়ে থাকে তাহলে ক্ষমা সুন্দর দৃষ্টিতে দেখবেন এবং কোথায় ভূল হয়েছে কমেন্ট করে জানাবেন। আর আপনাদের কেমন ধরনের প্রোজেক্ট লাগবে তাও জানাবেন , ইনশাআল্লাহ তা দেওয়ার চেষ্টা করবো। আর ওয়েবসাইটটি বন্ধুদের মাঝে শেয়ার করবেন। আজকের মতই এখানেই বিদায় নিলাম, ইনশাআল্লাহ দেখা হবে অন্য কোন প্রোজেক্ট এ। ভালো থাকবেন সুস্থ থাকবেন। আল্লাহ হাফেয।
