রেস্পন্সিভ টেব কিভাবে করবেন?
ভিন্ন ভিন্ন ওয়েবসাইটে ভিন্ন ভিন্ন কাজে টেব ব্যবহার করা হয়। যেমন আমার এই ওয়েবসাইটের ভিডিও টিউটোরিয়াল পেজে এবং কোড এডিটর পেজে টেব ব্যবহার করেছি। টেব মূলত একটি সিঙ্গল পেজ ওয়েবসাইটের জন্য বেশি ব্যবহৃত হয়। যেমন ব্যাক্তিগত কোন ওয়েবসাইট, অথবা টুরিষ্টদেরকে একটি দেশ সম্পর্কে কিছুটা আইডিয়া দেওয়ার জন্য এরকম টেব ব্যবহার করা হয়। টেব অনেক ভাবেই করা যায়। জাভাস্ক্রিপ্ট, জেকিউরি ইত্যাদী দিয়ে ভাল মতে করা গেলেও আমি এই টেব খানি সম্পূর্ণ সিএসএস দিয়ে করেছি। এটি শতভাগ রেস্পন্সিভ এবং অল্প কোডের এই টেব'টি আশা করি আপনাদের ভাল লাগবে। বিস্তারিত জানতে ভিডিও টিউটোরিয়াল'টি দেখুন।
বিস্তারিত ভিডিও সহ দেখুন
কোড উদাহরণ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pure CSS Responsive Tabs</title>
<style>
.tabs_container{
display: flex;
flex-wrap: wrap;
}
.tabs_container label {
display: block;
padding:10px;
margin-right:1px;
cursor: pointer;
border-radius:4px;
transition: ease 0.3s;
box-shadow:0px 2px 5px #ccc;
}
.tabs_container .tab_content{
order:1;
flex-grow: 1;
width: 100%;
display: none;
padding: 10px;
box-shadow:0px 3px 8px #333;
}
.tabs_container input[type="radio"] {
display: none;
}
.tabs_container input[type="radio"]:hover + label {
background: #f0f0f0;
}
.tabs_container input[type="radio"]:checked + label {
background: #ccc;
}
.tabs_container input[type="radio"]:checked + label + .tab_content {
display: block;
}
.tab_content h2{
margin:5px 0 0 10px;
font-size:4vw;
color:#454545;
}
.tab_content p{
padding:10px;
padding-top:0;
text-align:justify;
color:#787878;
}
.tab_content img{
border:2px solid #ccc;
border-radius:4px;
}
</style>
</head>
<body>
<div class="tabs_container">
<input type="radio" name="tabs" id="first_tab" checked="checked">
<label for="first_tab">Dhaka</label>
<div class="tab_content">
<img style="width:48%;" src="images/dhaka1.jpeg" alt="Bangladesh Capital City Dhaka 1">
<img style="width:48%;float:right;" src="images/dhaka2.jpg" alt="Bangladesh Capital City Dhaka 2">
<h2>Bangladesh Capital City Dhaka</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<input type="radio" name="tabs" id="second_tab">
<label for="second_tab">Chittagong</label>
<div class="tab_content">
<img style="width:48%;" src="images/chittagong1.jpg" alt="The Beautiful Chittagong 1">
<img style="width:48%;float:right;" src="images/chittagong2.jpg" alt="The Beautiful Chittagong 2">
<h2>The Beautiful Chittagong City</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<input type="radio" name="tabs" id="Third_tab">
<label for="Third_tab">Cox's Bazar</label>
<div class="tab_content">
<img style="width:48%;" src="images/coxbazar1.png" alt="Natural Beauty Of Cox's Bazar 1">
<img style="width:48%;float:right;" src="images/coxbazar2.jpg" alt="Natural Beauty Of Cox's Bazar 2">
<h2>Natural Beauty Of Cox's Bazar </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>
Keep Your Ads Here...
ঐতিহাসিক কালার থিওরি
বিস্তারিত দেখুন এইচটিএমএল আইকন
বিস্তারিত দেখুন ওয়েবের যত ফন্টস
বিস্তারিত দেখুন সিএসএস এনিমেশন
বিস্তারিত দেখুন হরেক রকম মেনু
বিস্তারিত দেখুন রকমারি বাটন
বিস্তারিত দেখুন