হাতে ধরে PSD2HTML পূর্ণাঙ্গ কোর্স [পর্ব-০৫] :: সিএসএস দিয়ে কন্টেন্ট স্টাইলিং

গত কোর্সে আমরা যা শিখেছি

গত পর্বে আমরা সিএসএস এর সাহায্যে বেসিক বডি স্টাইলিং, সিএসএস রিসেট ও সিএসএস দিয়ে হেডার স্টাইল করা শিখেছি।

:arrow: গত কোর্সের টিউন দেখুন এখানেঃ https://www.techtunes.io/web-design/tune-id/260869

:arrow: গত কোর্সের টিউটোরিয়াল দেখুন এখানেঃ http://www.youtube.com/watch?v=Ii5yindf4GE

আজকের কোর্স এ যা শিখবেন

:arrow: সিএসএস দিয়ে কন্টেন্ট স্টাইল করা

আজকে আমরা সিএসএস এর সাহায্যে আমাদের পেজ এর কন্টেন্ট অংশটিকে স্টাইল করবো। কন্টেন্ট অংশে ইমেজ গুলোকে সঠিক সাইজ এ এড করা, ইমেজ গুলোর পজিশন ঠিক করা, ফন্ট সাইজ ঠিক করা ইত্যাদি করতে হবে।

ভিডিও কোর্স

Youtube Link: https://www.youtube.com/watch?v=k8rItjQvlmY

কন্টেন্ট স্টাইলিং

আমরা পিএসডি ফাইলটি দেখে দেখে কন্টেন্ট সেকশনটি ডিজাইন করবো। পিএসডি ফাইল থেকে ফন্ট সাইজ, কালার ইত্যাদি নিয়ে আমরা ডিজাইন করবো। ভিডিও দেখে স্টাইল করা শিখে নিন, নিচে কোড গুলো শেয়ার করা হলো।

কন্টেন্ট স্টাইলিং এ প্রথমেই আমরা মিডেল সেকশন টিকে স্টাইল করবো। নিচে এর কোড টুকু দেয়া হলো।

মিডেল সেকশন কোডঃ

/*-------------------------
			Slider
-------------------------*/
.slider {
	background:#81e4ed;
	padding-top:20px;
}

/*-------------------------
			Middle
-------------------------*/
.middle {
	background:#e8ebf1;
	padding:60px 0 50px 0;
	overflow:hidden;
	border-bottom:1px solid rgba(0,0,0,.2);
}
.span3 {
	width:240px;
	margin-right:10px;
	float:left;
}
.span3:last-child {
	margin-right:0;
}
.span3 h2 {
	text-transform:uppercase;
	font-size:15px;
	font-weight:bold;
	line-height:40px;
}
.span3 img {
	float:left;
	margin-right:20px;
	margin-left:15px;
}
.span3 p {
	margin-top:20px;
}

এরপর বটম সেকশনটি স্টাইল করবো।

বটম সেকশন কোডঃ

/*-------------------------
			Bottom
-------------------------*/
.bottom {
	background:#fff;
}
.latest {
	padding-top:20px;
}
.latest img {
	margin-right:36px;
}
.latest img:last-of-type {
	margin-right:0;
}
.latest img:first-child, .testimonial img:first-child, .clients img:first-child {
	float:left;
	margin-right:15px;
}
.latest h2, .testimonial h2, .clients h2 {
	text-transform:uppercase;
	font-weight:bold;
	font-size:15px;
	line-height:25px;
}
.testimonial h2, .clients h2 {
	margin-bottom:20px;
}
.latest hr {
	margin:20px auto;
}
.testimonial {
	width:500px;
	float:left;
	margin-right:20px;
}
.testimonial p {
	font-size:14px;
	color:#363636;
	line-height:1.5em;
}

ডাউনলোড বাটনটিকে স্টাইল করে নেইঃ

ডাউনলোড বাটন কোডঃ

/*-------------------------
			Download
-------------------------*/
.download {
	padding:30px;
	background:#e8fcfe;
	border:1px solid #81e4ed;
	overflow:hidden;
	margin-top:40px;
}
.download button {
	width:240px;
	height:60px;
	padding:15px;
	font-size:18px;
	font-weight:bold;
	text-transform:uppercase;
	line-height:25px;
	outline:none;
	border:1px solid #2aacc8;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	-webkit-box-shadow: 0px 2px 5px rgba(0,0,0,.3);
	-moz-box-shadow: 0px 2px 5px rgba(0,0,0,.3);
	box-shadow: 0px 2px 5px rgba(0,0,0,.3);

	background: #80e3ed; /* Old browsers */
	background: -moz-linear-gradient(top,  #80e3ed 0%, #94f7ff 1%, #80e3ec 2%, #73dbe7 49%, #5bcbdc 88%, #2aacc8 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#80e3ed), color-stop(1%,#94f7ff), color-stop(2%,#80e3ec), color-stop(49%,#73dbe7), color-stop(88%,#5bcbdc), color-stop(100%,#2aacc8)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #80e3ed 0%,#94f7ff 1%,#80e3ec 2%,#73dbe7 49%,#5bcbdc 88%,#2aacc8 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #80e3ed 0%,#94f7ff 1%,#80e3ec 2%,#73dbe7 49%,#5bcbdc 88%,#2aacc8 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #80e3ed 0%,#94f7ff 1%,#80e3ec 2%,#73dbe7 49%,#5bcbdc 88%,#2aacc8 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #80e3ed 0%,#94f7ff 1%,#80e3ec 2%,#73dbe7 49%,#5bcbdc 88%,#2aacc8 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80e3ed', endColorstr='#2aacc8',GradientType=0 ); /* IE6-9 */
}
.download p {
	font-size:16px;
	color:#363636;
	width:610px;
	float:left;
	margin-right:80px;
	line-height:1.5em;
}
.download button img {
	margin-right:25px;
}

৪র্থ কোর্স থেকে কিছু প্রশ্নের উত্তর

:arrow: হেডার এ লোগো হিসেবে ইমেজ ব্যবহার করা হলেও এইচটিএমএল এ টেক্সট ব্যবহার করা হয়েছে কেন? আর লোগো ইমেজ টি সরাসরি এইচটিএমএল এ ব্যবহার না করে সিএসএস দিয়ে করা হয়েছে কেন?

এটি হচ্ছে স্টেন্ডার্ড স্টাইল। এছাড়াও এতে সার্চ ইঞ্জিন অপটিমাইজেশন এর কিছু সুবিধা রয়েছে। তাই এভাবে করা হয়।

৫ম কোর্সের উপসংহার

কন্টেন্ট অংশটিকে সিএসএস দিয়ে স্টাইল করে দেখিয়েছি। ডাউনলোড বাটন স্টাইল করা, আইকন ব্যবহার করা, টেক্সট পজিশন সাইজ ঠিক করা ইত্যাদি দেখিয়েছি। আশা করছি সহজ এবং সুন্দর ভাবেই আপনাদের বোঝাতে পেরেছি। কোন প্রকার সমস্যা থাকলে বা কোন প্রশ্ন থাকলে টিউমেন্ট করে ফেলুন এক্ষুনি... আর আমাকে পার্সোনালি নক করতেঃ https://www.facebook.com/r4k18ul

আগামী কোর্সের জন্য হোম টাস্ক

কন্টেন্ট অংশটি সিএসএস এর সাহায্যে নিজে নিজে স্টাইল করুন। এবং সম্পুর্ন প্রোজেক্ট এর ফোল্ডারটি জিপ করে নিচের ঠিকানায় সাবমিট করুন। এই হোমটাস্ক গুলোর মার্কিং হবে এবং মার্ক এর উপর ভিত্তি করে সার্টিফিকেট দেয়া হবে। তাই নিয়মিত হোমটাস্ক সাবমিট করতে ভুলবেন না।

:arrow: প্রোজেক্ট ফাইল জমা দেয়ার লিঙ্কঃ http://techtun.es/1iEFv5n

চুপ করে না থেকে প্রাসঙ্গিক প্রশ্ন করুন, করুন গঠনমূলক প্রশ্ন, তাহলেই শিখতে পারবেন

প্রশ্ন না করলে কখনোই শেখা যায় না। আজকে যেসব বিষয় টিউনে তুলে ধরা হয়েছে সেসব বিষয়ের উপর প্রাসঙ্গিক ও গঠনমূলক প্রশ্ন করুন। আমি সবার প্রশ্নের উত্তর দিবো ইনশাল্লাহ। যেকোনো বিষয়ে সামান্য খটকা লাগলে বা সমস্যা মনে হলে প্রশ্ন করুন। মনে করবেন না যে আপনার প্রশ্ন পড়ে অন্যরা হাসবে, বরংচ আপনার প্রশ্ন থেকে আপনার মত নতুন আরো দশ জন বিষয়টি শিখতে পারবে এবং বিষয়টি সম্পর্কে জানতে পারবে। খুটে খুটে সমস্যা বের করুন, প্রশ্ন করুন। যে জত বেশি প্রশ্ন করবে সে তত বেশি শিখতে পারবে এবং সফল হতে পারবে।

আগামী কোর্সে যা শিখবেন

আগামী পর্বে আমরা আমাদের এইচটিএমএল পেজটির কন্টেন্ট অংশটিকে স্টাইল করবো। কন্টেন্ট অংশে ইমেজ যোগ করা। তা সঠিক সাইজ এ পেজ এ ব্যবহার করা ইত্যাদি বিষয় গুলো আগামী পর্বে দেখানো হবে। অর্থাৎ আগামী পর্বও সিএসএস নিয়ে। সিএসএস দিয়ে পেজ এর আরেকটি অংশ স্টাইল করবো।

হাতে ধরে PSD2HTML পূর্ণাঙ্গ কোর্স এ আপনি ভর্তি হয়েছেন তো?

হাতে ধরে PSD2HTML পুর্নাঙ্গ চেইন কোর্স এ আপনি ভর্তি হয়েছেন তো? না হলে ভর্তি হয়ে যান বিশাল কমিউনিটির এই চেইন কোর্স এ এবং নিজেকে ঝালাই করে নিন PSD2HTML এ!

প্রায় ৩০০০ টিউজিটর ও টিউমেন্টর ভর্তি হয়েছেন বাংলাদেশের এই প্রথম ও সবচেয়ে বড় অনলাইন PSD2HTML পুর্নাঙ্গ কোর্স এ। আপনি বাদ থাকবেন কেন?

কোর্স এ ভর্তি হতে এই টিউনটি দেখুনঃ

টেকটিউনস এ চালু হচ্ছে!! “হাতে ধরে PSD2HTML পূর্ণাঙ্গ চেইন কোর্স”!! সম্পূর্ণ ফ্রি করুন PSD2HTML এর পূর্ণাঙ্গ কোর্স! সফল ও সঠিক ভাবে কোর্স সম্পন্নকারীরা পাবেন টেকটিউনস ভেরিফাইড সার্টিফিকেট!


কম্পিউটার লাভার () রাকিবুল হাসান।

:arrow: ইমেইলে পেয়ে যান আমার সকল টিউনের আপডেট! ক্লিক করুন এবং ইমেইল দিয়ে ভেরিফাই করুনঃ টেকটিউনস » কম্পিউটার লাভার

   

Level 0

আমি কম্পিউটার লাভার। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 13 বছর 2 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 101 টি টিউন ও 1258 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 20 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

Also known as "Raiku Saiko". React.js & Javascript Developer. Former Wordpress Developer, Front-end Designer. Technology Addicted.


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

Level 0

ধন্যবাদ, অনেকদিন অপেক্ষার পর টিঊন টি পেয়ে ভালই লাগছে। ভেবেছিলাম রাকিবুল ভাই টিউন করা ছেড়েই দিয়েছেন। তারপর ও ধন্যবাদ। আশারাখি হোম টাস্ক ঠিক সময় মত জমা দেয়ার চেষ্টা করবো।

Level 0

onek din por post palam ………..

এতদিন তো সব ভুলে গেলাম ! আবার প্রাকটিস করতে হবে @ অ—-নে——-ক দিন পর টিউন পাইলাম @ ধন্যবাদ

project joma dear link e course porbo 5 er option ekhono dea hoi nai.

ঠিক কইছেন হোছাইন বাইয়া…। লাভার বাইয়া মনে হয় এত দিন খুব ব্যাস্ত ছিলেন…। এ……ত দিন পর ফিরে আশার জন্য ওয়েল কাম…

corse porbo 5 option nei

আচ্ছা , এটা কোন বছর শেষ হবে ?

dhonnobad

সুপার ধন্যবাদ নতুন পর্বের জন্য…। 🙂

Level 0

Atodin Apekha Chilam. Kabe Aibo. Thank U for comeing back Again.

Level 0

রাকিবুল ভাই, help me……..সমস্যা হচ্ছে,firefox browser এ index.html open করলে full page open হচ্ছে না, scroll bar দেখা যাচ্ছে না। সম্ভবত style.css এর সমস্যা। তাই আমার project file টি zip করে link টা দিলাম সময় পেলে অবশ্যই দেখবেন। https://www.dropbox.com/s/hsgvn10diugs9qr/Project.zip

আর কত দিন পরে শেষ হবে আপনার িউন

“রাত পোহাবার কত দেরী পাঞ্জেরী”
ভাই আর কত রাত পার হলে আপনার ষষ্ঠ টিউনটি পাবো?

Level 0

@orchid এর মত আমার ও একই সমস্যা . লাভার ভাই কি সমধান দিবেন ?

Level 0

style.css এ body{overflow:auto} করলে সমধান হয়.

প্রিয় টিউনার,

আপনাকে এই চেইনটি চলমান করার জন্য অনুরোধ করা গেল। দয়া করে আপনার চেইন টিউনটি নতুন পর্ব যুক্ত করুন এবং নিয়মিত আপডেট করুন। ধন্যবাদ।

+কম্পিউটার লাভার,আপনি কি Footer অংশটার টিউটোরিয়াল টা দিয়েছিলেন?? 🙂 🙂

vai psd file ta ki deya jabe? kivabe psd file ta pabo?