Pure.CSS ব্যবহার করে Image এবং Text যুক্ত Cards তৈরি করা একটি সাধারণ এবং জনপ্রিয় ওয়েব ডিজাইন কৌশল। এটি একটি খুবই প্রাথমিক এবং কার্যকরী উপায়, যা ওয়েব পেজের কন্টেন্ট সুন্দরভাবে প্রদর্শন করতে সাহায্য করে। Pure.CSS এর grid system এবং flexbox layout ব্যবহার করে আপনি সহজেই cards তৈরি করতে পারেন, যেখানে আপনি images, text, এবং buttons অন্তর্ভুক্ত করতে পারেন।
নিচে Image এবং Text যুক্ত Cards তৈরির একটি উদাহরণ দেওয়া হলো।
1. Basic Card with Image and Text using Pure.CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Card Example</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
/* Card styling */
.card {
width: 300px;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
margin: 20px;
overflow: hidden;
text-align: center;
}
.card img {
width: 100%;
height: auto;
}
.card-content {
padding: 15px;
}
.card-title {
font-size: 1.5em;
margin: 10px 0;
}
.card-description {
font-size: 1em;
color: #555;
margin-bottom: 15px;
}
.card-button {
padding: 10px 20px;
background-color: #3498db;
color: white;
text-decoration: none;
border-radius: 5px;
}
.card-button:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<div class="card">
<img src="https://via.placeholder.com/300x200" alt="Card Image">
<div class="card-content">
<h2 class="card-title">Card Title</h2>
<p class="card-description">This is an example description for the card. You can add more information here.</p>
<a href="#" class="card-button">Read More</a>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
- Card Container:
.cardক্লাসটি ব্যবহৃত হয়েছে, যা একটি বর্ডার, শ্যাডো, এবং বর্ডার-রেডিয়াস সহ একটি বক্স তৈরি করে। এই ক্লাসটি একক কার্ডের সীমানা নির্ধারণ করে। - Image:
.card imgদ্বারা ইমেজের আকার পূর্ণ প্রসারিত করা হয়েছে এবং প্রস্থ 100% করা হয়েছে, যাতে এটি কার্ডের ভেতরের জায়গায় পুরোপুরি ফিট হয়। - Card Content:
.card-contentক্লাসের মাধ্যমে পাঠ্য এবং বাটনের জন্য যথাযথ প্যাডিং দেয়া হয়েছে। - Title & Description:
.card-titleএবং.card-descriptionক্লাসের মাধ্যমে টেক্সটের আকার এবং স্টাইল কাস্টমাইজ করা হয়েছে। - Button:
.card-buttonক্লাসের মাধ্যমে বাটনটি স্টাইল করা হয়েছে, যা মাউস হোভার করার সময় রঙ পরিবর্তন করবে।
2. Multiple Cards with Grid Layout using Pure.CSS
এখন যদি আপনি একাধিক card একসাথে প্রদর্শন করতে চান, তবে Pure.CSS এর গ্রিড সিস্টেম ব্যবহার করা যেতে পারে, যাতে প্রতিটি কার্ড একে অপর থেকে আলাদা হয় এবং রেসপন্সিভ হয়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Cards Grid</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
/* Card Container */
.card-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin: 20px;
}
.card {
width: 300px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: center;
overflow: hidden;
}
.card img {
width: 100%;
height: auto;
}
.card-content {
padding: 15px;
}
.card-title {
font-size: 1.5em;
margin: 10px 0;
}
.card-description {
font-size: 1em;
color: #555;
margin-bottom: 15px;
}
.card-button {
padding: 10px 20px;
background-color: #3498db;
color: white;
text-decoration: none;
border-radius: 5px;
}
.card-button:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<div class="card-container">
<div class="card">
<img src="https://via.placeholder.com/300x200" alt="Card Image 1">
<div class="card-content">
<h2 class="card-title">Card Title 1</h2>
<p class="card-description">This is a description of card 1. It's just a simple text.</p>
<a href="#" class="card-button">Read More</a>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/300x200" alt="Card Image 2">
<div class="card-content">
<h2 class="card-title">Card Title 2</h2>
<p class="card-description">This is a description of card 2. It's just a simple text.</p>
<a href="#" class="card-button">Read More</a>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/300x200" alt="Card Image 3">
<div class="card-content">
<h2 class="card-title">Card Title 3</h2>
<p class="card-description">This is a description of card 3. It's just a simple text.</p>
<a href="#" class="card-button">Read More</a>
</div>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
- Card Container: এখানে flexbox ব্যবহৃত হয়েছে (
display: flex; flex-wrap: wrap;), যা একাধিক কার্ডকে একটি সারিতে প্রদর্শন করবে এবং রেসপন্সিভ ডিজাইনের জন্য পরবর্তী সারিতে স্থানান্তর করবে। - Card Styling: প্রতিটি কার্ডের জন্য width, margin, padding ইত্যাদি কাস্টমাইজ করা হয়েছে, যাতে এটি সুন্দরভাবে প্রদর্শিত হয়।
এটি তিনটি কার্ড প্রদর্শন করবে, যা একটি গ্রিডের মধ্যে সাজানো এবং ফ্লেক্সবক্স দ্বারা রেসপন্সিভ ডিজাইনে প্রদর্শিত হবে।
3. Hover Effect on Cards
আপনি hover ইফেক্ট ব্যবহার করে কার্ডগুলির ডিজাইন আরও আকর্ষণীয় এবং ইন্টারেক্টিভ করতে পারেন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card Hover Effect</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
.card {
width: 300px;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: center;
overflow: hidden;
transition: transform 0.3s ease;
margin-bottom: 20px;
}
.card:hover {
transform: scale(1.05);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
.card img {
width: 100%;
height: auto;
}
.card-content {
padding: 15px;
}
.card-title {
font-size: 1.5em;
margin: 10px 0;
}
.card-description {
font-size: 1em;
color: #555;
margin-bottom: 15px;
}
.card-button {
padding: 10px 20px;
background-color: #3498db;
color: white;
text-decoration: none;
border-radius: 5px;
}
.card-button:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<div class="card">
<img src="https://via.placeholder.com/300x200" alt="Card Image">
<div class="card-content">
<h2 class="card-title">Card Title</h2>
<p class="card-description">This is a description of the card. It's just a simple text.</p>
<a href="#" class="card-button">Read More</a>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
- Hover Effect:
transform: scale(1.05)ব্যবহার করে কার্ডটিকে হোভার করার সময় কিছুটা বড় করা হয়েছে। box-shadow এফেক্টটিও হোভার করার সময় বড় হয়েছে, যা কার্ডটির চারপাশে সুন্দর শ্যাডো যোগ করবে।
Pure.CSS দিয়ে Image এবং Text যুক্ত Cards তৈরি করা সহজ এবং কার্যকর। আপনি flexbox, grid system, এবং hover effects ব্যবহার করে সুন্দর এবং রেসপন্সিভ কার্ড তৈরি করতে পারেন। এই কার্ডগুলো ওয়েবসাইটের কন্টেন্ট সুন্দরভাবে উপস্থাপন করতে সহায়ক, এবং বিভিন্ন স্ক্রীন সাইজে সঠিকভাবে ফিট করতে সাহায্য করে।
Content added By
Read more
