বুটস্ট্র্যাপ দিয়ে কিভাবে ওয়েবপেজ ডিজাইন করবো :

প্রথমে বুটস্ট্র্যাপ দিয়ে প্রজেক্ট কনফিগার করার পর আমাদের যে কাজ করতে হবে :

Body : প্রথমে বডির জন্য কালার ও ফন্ট ঠিক করে নিতে হবে :

body{
    background-color: #fff !important;
    font-family: 'Hind Siliguri', sans-serif;
}
ন্যাভিগেশন :
খুব সুন্দর একটি ন্যাভিগেশন নেবো
<nav class="navbar fixed-top navbar-expand-lg navbar-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="http://olee.com"><img class="nav-logo" src="http://olee.com/images/navlogo.svg"/></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
            <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link nav-font" href="http://olee.com">হোম</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link nav-font" href="http://olee.com/blog">ব্লগ</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link nav-font" href="http://olee.com/courses">কোর্স সমূহ</a>
                </li>
            </ul>

        </div>
    </div>
</nav>
.btn{
    border-radius: 0% !important;
}
.btn:focus{
    box-shadow: none;
}
.nav-logo{
    width:100px;
    height:40px;
}
.nav-font{
    font-size: 18px;
    color: #090910!important;
    font-weight: 400;
}
.nav-font:hover{
    color: #FE0A52!important;
}
.navbar{
    background-color: white !important;
    box-shadow: 0 0 4px 0 rgba(240, 240, 240,1);

}

স্মোথ স্ক্রল এর জন্য ন্যাভিগেশন এর পরের অংশকে পরেল্লেক্স ইফেক্ট এর মধ্যে রাখবো।

<style>
.parallax {
  /* The image used */
  background-image: url("img_parallax.jpg");

  /* Set a specific height */
  height: 500px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>

<!-- Container element -->
<div class="parallax"></div>

Footer

.footer-section{
    position:relative;
    display:flex;
    flex-direction:column;
    min-width:0;
    word-wrap:break-word;
    background-color:#fff;
    background-clip:border-box;
    border:none;
    border-radius: 0% !important;
    box-shadow: 0 0 4px 0 rgba(240, 240, 240,1)
}
.footer-link {
    text-decoration: none;
    color:  #090910!important;
    font-size:16px;
    font-weight:400;
}
.footer-link:hover {
    text-decoration: none;
    color: #FE0A52!important;
}
/* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if needed */
@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
}

নতুন একটি সেকশন তৈরী করা :

  <div class="container section-margin">
<div class="row ">
    <h6 class="title-text text-center"> ব্লগ পড়ুন <a href="" class="btn btn-sm normal-btn-outline">সবগুলি দেখুন </a></h6>
    <h6 class="des-text text-center mb-4 ">নতুন কিছু জানুন, ভালো লাগলে শেয়ার করুন </h6>
এখানে কনটেন্ট থাকবে 
 </div>
        </div>
.section-margin{
    margin-bottom: 50px;
    margin-top: 50px;
}
.des-text{
    color: #636363!important;
    font-size:14.5px;
    font-weight:300;
}
.title-text{
    color:  #FE0A52 !important;
    font-size:24px;
    font-weight:400;
}

Footer Copyright Area :

<div class="container-fluid custom-bg text-white m-0 text-center p-3">
    <p class="rights-text my-2 ">সর্বস্বত্ব রাব্বিল হাসান দ্বারা সংরক্ষিত; ২০১৯-২০২০ </p>
</div>
.custom-bg{
    background-color: #FE0A52!important;
}

Material Design Input link


Published by

Unknown's avatar

Nusrat Faria

I Am A Web Developer And A Android Developer. This Is My Personal Blog So Noted My Work For Helping People .

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.