প্রথমে বুটস্ট্র্যাপ দিয়ে প্রজেক্ট কনফিগার করার পর আমাদের যে কাজ করতে হবে :
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