বন্ধুরা আজকে আমি দেখাবো কিভাবে শুধুমাত্র HTML এবং Css ব্যবহার করে সুন্দর একটা Navigation Bar ডিজাইন করবেন। এই Navigation Bar টা আপনি ইচ্ছা করলে আপনার ওয়েবসাইটে ব্যবহার করতে পারবেন। তছাড়া যদি HTML,Css সম্পর্কে জানা থাকে তাহলে আপনি নিজেই এটাকে আরো কাস্টমাইজ করে নিতে পারবেন। তাহলে চলুন শুরু করা যাক। তবে এর আগে ডমো দেখে নিন।
বন্ধুরা এখানে ভিডিও দেওয়া যায়না তাই নিচের লিংক থেকে ডেমো দেখে নিন মাত্র ১০ সেকেন্ড।
Demo Here
আশা করি ভালো লেগেছে। এখন আপনি শুধু নিচে থেকে কোড গুলো কপি করে আপনার সাইটে প্রয়োজন মত জায়গায় বসান আর কোডের ভিতরে লিংক গুলো বসিয়ে নিবেন তাহলেই হবে। লিংক এর a=# এরকম দেওয়া আছে…

Code

• 
  
  CHARTS
  
• 
  
  HTML 5
  
• 
  
  CODE
  
• 
  
  BLOG
  
• 
  

Stylish Bcrumb Design With HTML and CSS

By Admin – 16 July, 2019

Css

body {
padding: 100px 100px;
background-color: #fff;
font-family: ‘Quicksand’, sans-serif;
}

ul.Bcrumb {
display: inline-block;
list-style: none;
}
ul.Bcrumb li {
float: right;
padding: 5px;
background-color: #212121;
border-radius: 50px;
position: relative;
margin-left: -50px;
transition: all 0.2s;
margin-top: 3px;
}
ul.Bcrumb li a {
overflow: hidden;
border-radius: 50px;
transition: all 0.2s;
text-decoration: none;
height: 50px;
width: 50px;
background-color: #ff4b4b;
text-align: center;
min-width: 50px;
display: block;
line-height: 50px;
padding-left: 52px;
padding-right: 33.33333px;
color: #fff;
font-size: 18px;
font-weight: 900;
}
ul.Bcrumb li a i {
display: inline-block;
}
ul.Bcrumb li a .text {
display: none;
opacity: 0;

}
ul.Bcrumb li a:hover {
width: 200px;
background-color: #e60023;
}
ul.Bcrumb li a:hover .text {
display: inline-block;
opacity: 1;
}
ul.Bcrumb li:last-child a {
padding: 0;
}
ul.Bcrumb li:last-child:hover {
padding: 3px;
margin-top: 0;
}
ul.Bcrumb li:last-child:hover a {
width: 60px;
height: 60px;
line-height: 60px;
}
span i {
margin-left: 5px;
display: inline-block;
}
span i:nth-child(1) {
color: #4267b2;
}
span i:nth-child(2) {
color: #1da1f2;
}

এখান থেকে কোড যদি কপি না হয় তবে নিচের লিংক থেকে কপি করুন।
Code এখানে

ভালো লাগলে একটা লাইক দিবেন। কোন সমস্যা হলে কমেন্ট করে জানাবেন