হ্যালো ভিউয়ারস, আশা করি ভালো আছেন। Codingsrc24 ওয়েবসাইটে আপনাকে স্বাগতম। আজকে আপনাদের মাঝে শেয়ার করবো; কিভাবে Pricing টেবিল HTML এবং CSS এর মাধ্যমে ডিজাইন করা যায় ।
How To Design Pricing Tables in HTML And CSS
প্রোজেক্ট ধারণাঃ
- নামঃ Design Pricing Table in HTML And CSS
- ভাষাঃ HTML & CSS
- লাইসেন্সঃ ফ্রি
- রেস্পনসিভঃ না
- অথরঃ Codingsrc24
প্রোজেক্ট করতে যা জানা প্রয়োজনঃ
- বেসিক HTML
- বেসিক CSS
- Margin &
Padding ( মার্জিন & প্যাডিং ) - Display Flex
- Display Grid
আশা করি এসব জানা থাকলে এই প্রোজেক্ট করতে কোন সমস্যা নেই, তবে না জানা থাকলেও সমস্যা নেই প্রোজেক্ট করার সাথে সাথে ধারনা হয়ে যাবে। চলুন শুরু করা যাক……………
Pricing Table ডিজাইন করার জন্য, প্রথমে আপনাকে দুটি ফাইল তৈরি করতে হবে। একটি হলো index.html আর অন্যটি হলো style.css ( নামের ব্যপারে কোন বাধ্যবাধকতা নেই তবে ডট নোটেশনের পর .html এবং .css এগুলো ঠিক রাখতে হবে) । নিন্মে index.html এবং style.css ফাইল দেওয়া হয়েছে।
প্রথমত, আপনি একটা HTML ফাইল (index.html) তৈরি করে নিন, নিচের ব্লকে দেওয়া কোডটি Copy করে আপনার এইচটিএমএল (HTML) ফাইলে Paste করে নিন। মনে রাখবেন (.html) এক্সটেনশন যেন ঠিক থাকে।
HTML কোড ব্লকঃ
<body>
<div class="container">
<h1 class="headerTitle">Pricing Table</h1>
<div class="innerPricing">
<div class="pricingContainer">
<h1 class="pricingTitleOne">Basic</h1>
<div class="innerPricingContainer">
<h1 class="IPCTitle">$15/<span>month</span></h1>
<ul>
<li>1 Website</li>
<li>Standard Performance</li>
<li>50 GB SSD Storage</li>
<li>Weekly Backups</li>
<li>1 Email Account</li>
<li>Free SSL</li>
<li>Unlimited Bandwidth</li>
<li>Free Domain ($11.99 value)</li>
<li>Dedicated IP Address</li>
<li>Free CDN</li>
</ul>
</div>
<button class="IPCBtnOne"><a href="#">Add to Cart</a></button>
</div>
<div class="pricingContainer">
<h1 class="pricingTitleTwo">Standard</h1>
<div class="innerPricingContainer">
<h1 class="IPCTitle">$25/<span>month</span></h1>
<ul>
<li>1 Website</li>
<li>Standard Performance</li>
<li>50 GB SSD Storage</li>
<li>Weekly Backups</li>
<li>1 Email Account</li>
<li>Free SSL</li>
<li>Unlimited Bandwidth</li>
<li>Free Domain ($11.99 value)</li>
<li>Dedicated IP Address</li>
<li>Free CDN</li>
</ul>
</div>
<button class="IPCBtnTwo"><a href="#">Add to Cart</a></button>
</div>
<div class="pricingContainer">
<h1 class="pricingTitleThree">Premium</h1>
<div class="innerPricingContainer">
<h1 class="IPCTitle">$35/<span>month</span></h1>
<ul>
<li>1 Website</li>
<li>Standard Performance</li>
<li>50 GB SSD Storage</li>
<li>Weekly Backups</li>
<li>1 Email Account</li>
<li>Free SSL</li>
<li>Unlimited Bandwidth</li>
<li>Free Domain ($11.99 value)</li>
<li>Dedicated IP Address</li>
<li>Free CDN</li>
</ul>
</div>
<button class="IPCBtnThree"><a href="#">Add to Cart</a></button>
</div>
</div>
</div>
</body>
দ্বিতীয়ত, আপনি একটা CSS ফাইল (style.css) তৈরি করে নিন, নিচের ব্লকে দেওয়া কোডটি Copy করে আপনার সিএসএস (CSS) ফাইলে Paste করে নিন। মনে রাখবেন (.css) এক্সটেনশন যেন ঠিক থাকে।
CSS কোড ব্লকঃ
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 96%;
max-width: 920px;
color: #363636;
margin: 0 auto;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.headerTitle {
font-size: 36px;
font-variant: small-caps;
margin-bottom: 25px;
}
.innerPricing {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.pricingContainer {
box-shadow: 0 0 10px #747474;
}
.pricingTitleOne,
.pricingTitleTwo,
.pricingTitleThree {
color: #fff;
text-align: center;
font-size: 26px;
padding: 8px;
}
.pricingTitleOne,
.IPCBtnOne {
background-color: #ff6347;
}
.pricingTitleTwo,
.IPCBtnTwo {
background-color: #0084ff;
}
.pricingTitleThree,
.IPCBtnThree {
background-color: #fc6500;
}
.innerPricingContainer {
padding-left: 25px;
padding-right: 25px;
padding-bottom: 25px;
padding-top: 10px;
}
.IPCTitle {
text-align: center;
font-size: 24px;
margin-bottom: 10px;
}
.IPCTitle span {
color: #a1a1a1;
}
.innerPricingContainer ul {
padding: 0;
}
.innerPricingContainer ul li {
list-style: none;
margin-bottom: 10px;
font-size: 18px;
cursor: pointer;
transition: 0.5s ease-in-out;
}
.innerPricingContainer ul li:hover {
transform: scale(1.055);
color: #ff6347;
}
.IPCBtnOne,
.IPCBtnTwo,
.IPCBtnThree {
margin: 0 auto;
width: 100%;
height: 40px;
border: none;
}
.IPCBtnOne a,
.IPCBtnTwo a,
.IPCBtnThree a {
text-decoration: none;
color: #fff;
font-size: 16px;
cursor: pointer;
}
আশা করি আপনি কোড টি সফলভাবে রান করাতে পেরেছেন। প্রোজেক্ট টি কেমন লেগেছে অবশ্যই কমেন্ট করে জানাবেন, আর যদি কোন ভূল হয়ে থাকে তাহলে ক্ষমা সুন্দর দৃষ্টিতে দেখবেন এবং কোথায় ভূল হয়েছে কমেন্ট করে জানাবেন। আর আপনাদের কেমন ধরনের প্রোজেক্ট লাগবে তাও জানাবেন , ইনশাআল্লাহ তা দেওয়ার চেষ্টা করবো। আর ওয়েবসাইটটি বন্ধুদের মাঝে শেয়ার করবেন। আজকের মতই এখানেই বিদায় নিলাম, ইনশাআল্লাহ দেখা হবে অন্য কোন প্রোজেক্ট এ। ভালো থাকবেন সুস্থ থাকবেন। আল্লাহ হাফেয।
