Simple Footer Section Design in HTML and CSS

হ্যালো ভিউয়ারস, আশা করি ভালো আছেন। Notesaid24 ওয়েবসাইটে আপনাকে স্বাগতম। আজকে আপনাদের মাঝে শেয়ার করবো; কিভাবে ওয়েবসাইটের মধ্যে Footer সেকশন ...

হ্যালো ভিউয়ারস, আশা করি ভালো আছেন। Notesaid24 ওয়েবসাইটে আপনাকে স্বাগতম। আজকে আপনাদের মাঝে শেয়ার করবো; কিভাবে ওয়েবসাইটের মধ্যে Footer সেকশন HTML এবং CSS এর মাধ্যমে ডিজাইন করা যায়

Simple Footer Section Design in HTML and CSS



How to Simple Footer Section Design in HTML and CSS

প্রজেক্ট ধারণাঃ

  • নামঃ 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 ফাইল দেওয়া হয়েছে। অথবা সোর্স কোড ডাইনলোড করে ব্যবহার করতে পারেন।


Source Code


প্রথমত, আপনি একটা 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;
}


আশা করি আপনি কোড টি সফলভাবে রান করাতে পেরেছেন প্রোজেক্ট টি কেমন লেগেছে অবশ্যই  কমেন্ট করে জানাবেন, আর যদি কোন ভূল হয়ে থাকে তাহলে ক্ষমা সুন্দর দৃষ্টিতে দেখবেন এবং কোথায় ভূল হয়েছে কমেন্ট করে জানাবেন। আর আপনাদের কেমন ধরনের প্রোজেক্ট লাগবে তাও জানাবেন , ইনশাআল্লাহ তা দেওয়ার চেষ্টা করবো। আর ওয়েবসাইটটি বন্ধুদের মাঝে শেয়ার করবেন। আজকের মতই এখানেই বিদায় নিলাম, ইনশাআল্লাহ  দেখা হবে অন্য কোন প্রোজেক্ট এ। ভালো থাকবেন সুস্থ থাকবেন। আল্লাহ হাফেয।

COMMENTS

Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content