Pure.CSS ব্যবহার করে simple এবং complex cards তৈরি করা খুবই সহজ এবং দ্রুত। Cards হল একটি জনপ্রিয় ডিজাইন উপাদান যা ওয়েব পেজে বিভিন্ন কন্টেন্ট উপস্থাপন করতে ব্যবহৃত হয়, যেমন টেক্সট, ছবি, বাটন ইত্যাদি। Pure.CSS এর সাহায্যে আপনি সহজেই স্টাইলিশ এবং রেসপন্সিভ কার্ড তৈরি করতে পারেন যা মোবাইল, ট্যাবলেট এবং ডেস্কটপে সমানভাবে কাজ করবে।
1. Simple Card in Pure.CSS
Simple Cards হল ছোট এবং সহজ ডিজাইন যা সাধারণত একটি ছবি, শিরোনাম এবং সংক্ষিপ্ত বিবরণ ধারণ করে।
উদাহরণ: Simple Card
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Card with Pure.CSS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
.card {
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
padding: 20px;
text-align: center;
width: 200px;
margin: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.card img {
width: 100%;
border-radius: 5px;
}
.card h3 {
margin: 15px 0;
font-size: 1.2em;
color: #333;
}
.card p {
font-size: 1em;
color: #777;
}
.card button {
margin-top: 15px;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
.card button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="card">
<img src="https://via.placeholder.com/200" alt="Card Image">
<h3>Card Title</h3>
<p>This is a simple card with a brief description of the content.</p>
<button>Read More</button>
</div>
</body>
</html>
ব্যাখ্যা:
.card: কার্ডটির জন্য একটি বেসিক ডিজাইন স্টাইলিং দেওয়া হয়েছে, যার মধ্যে ব্যাকগ্রাউন্ড, বর্ডার, বর্ডার রেডিয়াস, প্যাডিং, মার্জিন এবং শ্যাডো রয়েছে।.card img: কার্ডে একটি ইমেজ রয়েছে এবং তার স্টাইলিং করা হয়েছে যাতে সেটি কার্ডের প্রস্থে ভরপুর থাকে এবং বর্ডার রেডিয়াস প্রদান করা হয়।.card button: কার্ডে একটি বাটন যোগ করা হয়েছে যা ব্যবহারকারীদের জন্য আরও কন্টেন্ট দেখতে সাহায্য করবে।
2. Complex Card in Pure.CSS
Complex Cards সাধারণত বেশি কন্টেন্ট ধারণ করে, যেমন টেক্সট, ছবি, বাটন, আইকন এবং অন্যান্য উপাদান। এই ধরনের কার্ডগুলিতে আরও এক্সটেনডেড ডিজাইন এবং কাস্টম স্টাইলিং থাকে।
উদাহরণ: Complex Card
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complex Card with Pure.CSS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
.complex-card {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 300px;
margin: 20px;
padding: 20px;
transition: box-shadow 0.3s ease-in-out;
}
.complex-card:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.complex-card img {
width: 100%;
border-radius: 5px;
}
.complex-card h3 {
font-size: 1.5em;
margin: 15px 0;
color: #333;
}
.complex-card .card-description {
font-size: 1em;
color: #777;
margin-bottom: 20px;
}
.complex-card .card-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.complex-card .price {
font-size: 1.2em;
color: #4CAF50;
}
.complex-card .card-button {
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
.complex-card .card-button:hover {
background-color: #0056b3;
}
.complex-card .card-footer i {
font-size: 1.5em;
color: #ff9800;
}
</style>
</head>
<body>
<div class="complex-card">
<img src="https://via.placeholder.com/300x200" alt="Complex Card Image">
<h3>Product Title</h3>
<p class="card-description">This is a more detailed description of the product. It can contain several lines of text.</p>
<div class="card-footer">
<span class="price">$299</span>
<button class="card-button">Buy Now</button>
<i class="fa fa-heart"></i>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
.complex-card: এই কার্ডের জন্য উন্নত স্টাইলিং এবং শ্যাডো প্রয়োগ করা হয়েছে, যাতে এটি আরও আকর্ষণীয় দেখায়। এখানে hover effect ব্যবহার করা হয়েছে যাতে মাউসের উপর কার্ড আসলে এর শ্যাডো বাড়ে।.complex-card img: কার্ডের মধ্যে একটি বড় ইমেজ প্রদর্শিত হয়েছে এবং সেটির বর্ডার রেডিয়াস দেওয়া হয়েছে।.complex-card .card-description: কার্ডের বর্ণনা অংশটি টেক্সট হিসেবে দেওয়া হয়েছে, যা সাধারণত 1-2 লাইন ধারণ করে।.complex-card .card-footer: কার্ডের পাদটীকা অংশে দাম, বাটন এবং আইকন রয়েছে, যা পরিপূর্ণ টেবিলের মতভাবে সাজানো হয়েছে।.complex-card .price: দাম অংশটি বিশেষভাবে হাইলাইট করা হয়েছে, যাতে এটি চোখে পড়বে।
3. Responsive Card Layout
Pure.CSS কার্ডগুলো মোবাইল এবং ডেস্কটপে রেসপন্সিভভাবে উপস্থাপন করতে সাহায্য করে। আপনি media queries ব্যবহার করে ছোট স্ক্রীনে কার্ডগুলোকে আরও উপযুক্তভাবে সাজাতে পারেন।
উদাহরণ: Responsive Complex Card
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Complex Card</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
.complex-card {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
margin: 20px;
padding: 20px;
transition: box-shadow 0.3s ease-in-out;
}
.complex-card:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.complex-card img {
width: 100%;
border-radius: 5px;
}
.complex-card h3 {
font-size: 1.5em;
margin: 15px 0;
color: #333;
}
.complex-card .card-description {
font-size: 1em;
color: #777;
margin-bottom: 20px;
}
.complex-card .card-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.complex-card .price {
font-size: 1.2em;
color: #4CAF50;
}
.complex-card .card-button {
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
.complex-card .card-button:hover {
background-color: #0056b3;
}
.complex-card .card-footer i {
font-size: 1.5em;
color: #ff9800;
}
@media (max-width: 600px) {
.complex-card {
width: 100%;
margin: 10px 0;
}
}
</style>
</head>
<body>
<div class="complex-card">
<img src="https://via.placeholder.com/300x200" alt="Complex Card Image">
<h3>Product Title</h3>
<p class="card-description">This is a more detailed description of the product. It can contain several lines of text.</p>
<div class="card-footer">
<span class="price">$299</span>
<button class="card-button">Buy Now</button>
<i class="fa fa-heart"></i>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
- Responsive Design: @media (max-width: 600px) মিডিয়া কোয়েরি ব্যবহার করে, ছোট স্ক্রীন আকারে (মোবাইল) কার্ডের প্রস্থ 100% করা হয়েছে এবং মার্জিন ছোট করা হয়েছে যাতে কার্ডটি আরও উপযুক্তভাবে প্রদর্শিত হয়।
Pure.CSS দিয়ে আপনি খুব সহজে simple এবং complex cards তৈরি করতে পারেন। Cards হল এক্সটেনসিভ ডিজাইন উপাদান যা বিভিন্ন কন্টেন্টের জন্য ব্যবহৃত হয়। Pure.CSS-এ টেবিল, ছবি, বাটন, আইকন এবং টেক্সট যুক্ত করে আপনি আকর্ষণীয় এবং রেসপন্সিভ কার্ড ডিজাইন করতে পারেন। Media Queries ব্যবহার করে আপনি এই কার্ডগুলিকে বিভিন্ন স্ক্রীন সাইজে রেসপন্সিভভাবে কাস্টমাইজ করতে পারেন।
Content added By
Read more
