সুপ্রিয় টেকটিউন ভাইয়েরা, ধারাবাহিক টিউটোরিয়াল Basic HTML,CSS, JQuery তৃতীয় পর্বে আপনাদের সালাম ও শুভেচ্ছা ।  তো চলুন শুরু করা যাক আমাদের আজেকের পর্বের টিউটোরিয়াল তার আগে আপনাদের কাছে থাকা গত পর্বের সোর্স কোড এবং ডিজাইন টি ওপেন করে নিন । Source code ডাউনলোড করতে পারবেন আমার ওয়েবসাইট এর এই লিঙ্ক থেকে ।

গত পর্বে আমরা আমাদের ডিজাইন এর হেডার সেকশন এর জন্য কোড করেছিলাম । আজকে আমরা আমাদের ডিজাইনের Banner Section এবং Promo section এর জন্য coding টা করে ফেলব।

এবার style.css ফাইল এর coding হবে এরকম :

.banner{}
.promo_area{}

.promo{
 width:300px;
 height:300px;
 float:left;
 margin-right:25px;
 border:2px solid;
}
.promo-last{
  width:300px;
  height:300px;
  float:left;
  border:2px solid;
}

এবং index.html ফাইল এর coding হবে এরকম

<div class="banner">
<img src="images/banner.jpg"></img>
</div>
<div class="promo_area">
<div class="promo">
first promo text
</div>
<div class="promo">
second promo text
</div>
<div class="promo-last">
third promo text
</div>
</div>


এবার আসুন আমরা আমদের কোডের ব্যাখ্যা জেনে নিই ঃ ওয়েবসাইট এর banner section  এ সরাসরি  960 x 222 সাইজের ইমেজ ব্যাবহার করার জন্য আমাদের style.css এ কোন কোড সেট করার প্রয়োজন হয় নাই । আর ইমেজ সেট করার এইচটিএমএল কোড হলো  <img src="images/banner.jpg"></img>

promo এবং promo-last যেহুতু পাশাপাশি বসবে এ জন্য Float:left property ব্যাবহার করা হয়েছে । আর প্রথম দুই promo এর ডান পাশে margin ব্যাবহার করার জন্য আমরা margin-right:25px; ব্যাবহার করেছি কিন্তু promo-last তে ডান পাশে কোন margin ব্যাবহার না করায় এর জন্য আলাদা class তৈরি করে margin-right ব্যাবহার করি নাই ।

সবশেষে আমি জানি শুধু কোড দেখে এবং শর্ট ব্যাখ্যা পড়ে নতুনদের জন্য পুরো ডিজাইন টা বুঝা বেশ মুশকিল তাই source code এবং video tutorial শেয়ার করলাম।

Source code এবং video tutorial ডাউনলোড করতে পারবেন আমার ওয়েবসাইট এর এই লিঙ্ক থেকে ।

আজ এ পর্যন্তই আগামী পর্বের টিউটোরিয়াল দেখার আমন্তন জানিয়ে এখানেই শেষ করছি । আল্লাহ হাফেয ।