কীভাবে এইচটিএমএল এবং সিএসএস ব্যবহার করে রঙিন স্টাইলিশ কার্ড  তৈরি করা যায় ?


কালার ফুল স্টাইলিশ কাড তৈরি করা শিখব ।
প্রায় জিজ্ঞাসিত প্রশ্ন:

কীভাবে সিএসএস এবং এইচটিএমএল তৈরি করে বিশেষ ধরনের রঙিন স্টাইলিশ কার্ড তৈরি করা যায় ?


হ্যা , আজকে আমারা আমাদের বিশেষ প্রয়োজনীয় সেই রঙিন স্টাইলিশ কার্ড তৈরি করা শিখব । এবং সবশেষে সোর্স কোড দিয়ে দিবো এবং কিছু কাস্টমাইজেশন করা শিখব ।



সিএসএস, এইচটিএমএল শুধুমাত্র ব্যবহার করে কিন্তু জাভা স্ক্রিপ্ট ব্যবহার না করে আমরা আজকে রঙিন স্টাইলিশ কার্ড তৈরি করা শিখব । এমন একটি টিউটোরিয়াল নিয়ে হাজির হয়েছি ।

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

🍃
Source Code:




১. এইচটিএমএল অংশ তৈরি


      <div class="card">Stylish Card</div>

আমরা যেগুলো কার্ডের মাধ্যমে রাখব। সেগুলো আমাদের div ট্যাগের মধ্যে রাখতে হবে । অর্থাৎ যদি আপনি একটি ফটো যুক্ত করতে চান তাহলে আপনাকে  নিচের উদাহরণ অনুসরণ করে এইচটিএমএল তৈরি করতে হবে ।
উদাহরণস্বরূপ : আপনি একটি ফটো যুক্ত করতে চাইলে !
সমাধান :
     <div class="card">

<img src="ফটো এড্রেস" height="50" width="50" style="position:center;margin-top:5px;"/>

</div>

একইভাবে আপনি টেক্সট, ভিডিও, ইত্যাদি যুক্ত করতে পারেন ।  এখন আপনি কার্ডের বাহিরে কিছু যুক্ত করতে চাইলে : আপনাকে </div> এর পর যুক্ত করতে হবে যেমন :
<div class="card">

<img src="ফটো এড্রেস" height="50" width="50" style="position:center;margin-top:5px;"/>

</div>

<jubayer><author text="author"> This is created by</author><animation onclick="https://www.facebook.com/css.jubayer"> Sheikh Jubayer</animation></jubayer>


বিশেষ দ্রষ্টব্য : এখানে বেশি কিছু কাস্টমাইজেশন করা লাগবে না, আর যদি আপনার প্রয়োজন হয় তাহলে আপনি নিজে অনেক কিছু যুক্ত করতে পারেন । কোনো সমস্যা হলে আমাকে জানাতে পারেন ।


 ২. সিএসএস অংশ তৈরি :


এখানে সিএসএস শুধুমাত্র কাস্টমাইজেশন নিয়ে কথা বলবো । এখানে কন্টেন্ট সংক্ষিপ্ত করার জন্য শুধু মাত্র যেগুলো কাস্টমাইজেশন করা আবশ্যক তাই আমরা কাস্টমাইজেশন করা শিখব ।

সিএসএস কাস্টমাইজেশন ১:



body { background:linear-gradient(200deg,hotpink,gold,greenyellow,skyblue,white);}

এখানে আপনার পছন্দ অনুযায়ী রং নির্বাচন করতে পারেন । আমি আমার এখানে শেখানোর সুবিধার জন্য রাং নির্বাচন করেছি ।



বিশেষ দ্রষ্টব্য : আপনি চাইলে এখানে পটভূমি রং নাও ব্যবহার করতে পারেন । কোনো সমস্যা হবে না । অবশ্যই প্রত্যেক রং নির্বাচন করে কমা দিয়ে লিখতে হবে এবং প্রথম বন্ধনী র ভিতরে রাখতে হবে ।

সিএসএস কাস্টমাইজেশন ২ :

card {
background:linear-gradient(290deg,hotpink,gold,greenyellow,skyblue,grey);}


এখানে আপনাকে আপনার স্টাইলিশ কার্ড কে রঙিন করার জন্য রং নির্বাচন করতে হবে ।


   

রেজাল্ট বা ফলাফল :



Stylish Card
This is created by Sheikh Jubayer শেষ কথা:
আপনি যদি কাজটি সঠিক ভাবে সম্পূর্ণ করতে পারেন । তাহলে এই সোর্স কোড ব্যবহার করে আপনি সহজেই যেকোনো রঙিন স্টাইলিশ কার্ড তৈরি করতে পারবেন ।  সিএসএস এবং এইচটিএমএল তৈরি করে বিশেষ ধরনের রঙিন স্টাইলিশ কার্ড তৈরি করা আপনার কাছে এখন নিশ্চয়ই খুব সহজ কিছু । কমেন্ট বক্স এ মতামত জানাতে ভুলবেন না ।


বিশেষ দ্রষ্টব্য :
সোর্স কোড এ কোনোরকম ভুল বা ত্রুটি নেই ।কারণ পরীক্ষা করা হয়েছে এবং তা আপনারা উপরে ফলাফল হিসেবে দেখছেন । তারপরও যদি কোনো সমস্যা হয় তাহলে আমাকে জানাতে পারেন ।



My Talk:

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



🍃











    My Talk:

    Thank you for reading this blog.
    Hi, Assalamualaikum! I am Sheikh Jubayer. I want to say something. Actually I have written this article or content or blog with a lot of difficulty, thinking and taking a lot of time. However, there may be some spelling or sentence mistakes. I hope you will see the apology in a good light. Hope you benefited. However, if there is any problem, leave a comment. I will try to answer your question properly. Thank you!