Pure.CSS একটি হালকা এবং মডুলার CSS ফ্রেমওয়ার্ক, যা ওয়েব ডেভেলপমেন্টের জন্য বিভিন্ন উপাদান এবং স্টাইল প্রদান করে। এর মধ্যে Cards এবং Panels ডিজাইন উপাদানগুলোও অন্তর্ভুক্ত রয়েছে, যেগুলি ওয়েব পেজে বিভিন্ন কন্টেন্ট বা ইনফরমেশন প্রদর্শন করতে ব্যবহৃত হয়। এই উপাদানগুলি সাধারণত প্রেজেন্টেশন, প্রোডাক্ট প্রদর্শন, সার্ভিস কার্ড, বা অন্যান্য UI ব্লক হিসেবে ব্যবহৃত হয়।
এখানে Pure.CSS এর Cards এবং Panels তৈরি করার উদাহরণ দেওয়া হলো।
১. Pure.CSS Card Design:
Pure.CSS সরাসরি কার্ড ডিজাইন তৈরি করার জন্য কোনো নির্দিষ্ট ক্লাস প্রদান করে না, তবে আপনি pure-menu বা অন্যান্য ক্লাস ব্যবহার করে সোজা একটি কার্ড তৈরি করতে পারেন। নিচে একটি সাধারণ কার্ড ডিজাইনের উদাহরণ দেওয়া হলো:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<title>Card Design with Pure.CSS</title>
<style>
.card {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 250px;
text-align: center;
margin: 20px;
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-10px); /* Hover effect */
}
.card img {
width: 100%;
height: auto;
border-radius: 8px;
}
.card-title {
font-size: 20px;
margin-top: 10px;
}
.card-description {
font-size: 14px;
color: #777;
margin-top: 10px;
}
.card-button {
background-color: #0078d4;
color: #fff;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 15px;
width: 100%;
}
.card-button:hover {
background-color: #005fa3;
}
</style>
</head>
<body>
<div class="card">
<img src="https://via.placeholder.com/250" alt="Card Image">
<div class="card-title">Card Title</div>
<div class="card-description">This is a short description of the card content.</div>
<button class="card-button">Read More</button>
</div>
</body>
</html>
উদাহরণ বিশ্লেষণ:
- .card: এটি একটি সাধারণ কার্ড স্টাইল যা ব্যাকগ্রাউন্ড কালার, বর্ডার, বক্স শ্যাডো, প্যাডিং এবং ট্রানজিশন যোগ করে।
- .card img: ইমেজের প্রস্থ 100% করে দিয়েছি যাতে এটি কার্ডের প্রস্থ অনুযায়ী মানিয়ে যায় এবং কোণ গোলাকার হয়।
- .card-title: কার্ডের শিরোনাম।
- .card-description: কার্ডের বর্ণনা।
- .card-button: কার্ডে একটি বাটন যা ব্যবহারকারীকে আরও তথ্য দেখানোর জন্য প্ররোচিত করে। হোভার ইফেক্ট যোগ করা হয়েছে যা বাটনটি রঙ পরিবর্তন করে।
২. Pure.CSS Panel Design:
Panel ডিজাইন সাধারণত ফর্ম, তথ্য বা অন্যান্য কন্টেন্টের জন্য ব্যবহৃত হয়। নিচে একটি সাধারণ প্যানেল ডিজাইনের উদাহরণ দেওয়া হলো।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<title>Panel Design with Pure.CSS</title>
<style>
.panel {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin: 20px;
max-width: 300px;
}
.panel-header {
font-size: 18px;
font-weight: bold;
border-bottom: 2px solid #eee;
padding-bottom: 10px;
margin-bottom: 15px;
}
.panel-body {
font-size: 14px;
color: #555;
}
.panel-footer {
text-align: right;
margin-top: 20px;
}
.panel-footer button {
background-color: #0078d4;
color: white;
padding: 8px 16px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.panel-footer button:hover {
background-color: #005fa3;
}
</style>
</head>
<body>
<div class="panel">
<div class="panel-header">Panel Header</div>
<div class="panel-body">
This is the body of the panel. You can display information, notifications, or content here.
</div>
<div class="panel-footer">
<button>Click Me</button>
</div>
</div>
</body>
</html>
উদাহরণ বিশ্লেষণ:
- .panel: এটি প্যানেলটির মূল কনটেইনার যা ব্যাকগ্রাউন্ড কালার, বর্ডার, শ্যাডো এবং প্যাডিং যুক্ত করেছে।
- .panel-header: প্যানেলের শিরোনাম যা একটি সিম্পল বর্ডার দিয়ে সাজানো।
- .panel-body: প্যানেলের প্রধান কন্টেন্ট, যেখানে যে কোনো তথ্য বা উপাদান রাখা যেতে পারে।
- .panel-footer: প্যানেলের ফুটার, যেখানে সাধারণত একটি বাটন থাকে এবং এটি একটি হোভার ইফেক্টও রয়েছে।
৩. Responsive Cards and Panels:
Pure.CSS ব্যবহার করে আপনি সহজেই রেসপন্সিভ ডিজাইন তৈরি করতে পারেন। এখানে একটি উদাহরণ দেওয়া হলো যেখানে কার্ড এবং প্যানেল ডিজাইনগুলি রেসপন্সিভভাবে সাজানো হয়েছে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<title>Responsive Cards and Panels</title>
<style>
.card, .panel {
margin: 20px;
border-radius: 5px;
}
@media (min-width: 600px) {
.card, .panel {
width: 45%;
display: inline-block;
vertical-align: top;
}
}
@media (max-width: 599px) {
.card, .panel {
width: 100%;
}
}
</style>
</head>
<body>
<div class="card">
<img src="https://via.placeholder.com/250" alt="Card Image">
<div class="card-title">Card Title</div>
<div class="card-description">This is a short description of the card content.</div>
<button class="card-button">Read More</button>
</div>
<div class="panel">
<div class="panel-header">Panel Header</div>
<div class="panel-body">
This is the body of the panel. You can display information, notifications, or content here.
</div>
<div class="panel-footer">
<button>Click Me</button>
</div>
</div>
</body>
</html>
Pure.CSS এর মাধ্যমে আপনি সহজেই Cards এবং Panels তৈরি করতে পারেন। এর প্রি-বিল্ট স্টাইল এবং কাস্টম CSS ব্যবহার করে আপনি আপনার ওয়েবসাইটে সুন্দর, কার্যকরী এবং রেসপন্সিভ ডিজাইন উপাদান তৈরি করতে পারেন। Pure.CSS এর হালকা ফ্রেমওয়ার্ক এবং সহজ স্টাইলিং এর মাধ্যমে আপনার ওয়েবসাইট দ্রুত লোড হয় এবং সুন্দর দেখায়।
Content added By
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
Pure.CSS একটি লাইটওয়েট এবং মডুলার CSS ফ্রেমওয়ার্ক, যা দ্রুত এবং সহজে ওয়েব ডিজাইন তৈরি করতে সহায়ক। Card Layouts এবং Content Styling হল দুটি সাধারণ ওয়েব ডিজাইন উপাদান যা প্রায় সব ওয়েব অ্যাপ্লিকেশনে ব্যবহৃত হয়। Pure.CSS ব্যবহার করে, আপনি সহজে সুন্দর এবং রেসপন্সিভ কার্ড লেআউট এবং কনটেন্ট স্টাইলিং তৈরি করতে পারেন। এখানে Card Layouts এবং Content Styling তৈরি করার কিছু সহজ কৌশল আলোচনা করা হলো।
1. Card Layouts in Pure.CSS
Card Layouts হল ডিজাইনের এমন একটি স্টাইল যা তথ্য উপস্থাপনের জন্য ছোট-বড় ব্লক (কার্ড) ব্যবহার করে। Pure.CSS এর মাধ্যমে আপনি সহজেই সুশৃঙ্খল এবং রেসপন্সিভ কার্ড লেআউট তৈরি করতে পারেন। Flexbox এবং Grid System ব্যবহার করে আপনি এই কার্ডগুলো সাজাতে পারেন।
Basic Card Layout 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 Layout</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
.card {
background-color: #fff;
border: 1px solid #ddd;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
text-align: center;
margin: 10px;
}
.card img {
max-width: 100%;
border-radius: 5px;
}
.card h3 {
margin-top: 10px;
font-size: 20px;
font-weight: bold;
}
.card p {
font-size: 16px;
color: #555;
}
</style>
</head>
<body>
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4">
<div class="card">
<img src="https://via.placeholder.com/300x200" alt="Card Image">
<h3>Card Title 1</h3>
<p>This is some information about the card content. You can add details here.</p>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4">
<div class="card">
<img src="https://via.placeholder.com/300x200" alt="Card Image">
<h3>Card Title 2</h3>
<p>This is another card with a different title and content.</p>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4">
<div class="card">
<img src="https://via.placeholder.com/300x200" alt="Card Image">
<h3>Card Title 3</h3>
<p>This card has some unique content that fits the layout perfectly.</p>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4">
<div class="card">
<img src="https://via.placeholder.com/300x200" alt="Card Image">
<h3>Card Title 4</h3>
<p>More information for this card that showcases a responsive layout.</p>
</div>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
pure-g: এটি গ্রিড কন্টেইনার তৈরি করে, যা কার্ডগুলোকে সঠিকভাবে সাজাতে সহায়ক।pure-u-1,pure-u-sm-1-2,pure-u-md-1-4: এগুলি গ্রিড আইটেমের ক্লাস যা স্ক্রীন সাইজের ভিত্তিতে কার্ডগুলোর প্রস্থ কাস্টমাইজ করে। যেমন, মোবাইল স্ক্রীনে প্রতিটি কার্ড পূর্ণ প্রস্থ নিবে, আর মিডিয়াম এবং ডেস্কটপ স্ক্রীনে ৪টি কার্ড এক লাইনে আসবে।- Card Styling: কার্ডের জন্য border, padding, border-radius, এবং box-shadow ব্যবহার করে একটি সুন্দর, শ্যাডোসহ ডিজাইন তৈরি করা হয়েছে।
2. Content Styling in Pure.CSS
Content Styling হল টেক্সট এবং অন্যান্য কন্টেন্ট উপাদানকে সুন্দর এবং পড়তে সুবিধাজনকভাবে উপস্থাপন করা। Pure.CSS টেক্সট এবং কন্টেন্ট স্টাইলিংয়ের জন্য কিছু বেসিক স্টাইল প্রদান করে, তবে আপনি এটি কাস্টমাইজ করে আরও উন্নত ডিজাইন তৈরি করতে পারেন।
Basic Content Styling
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Content Styling</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
.content {
padding: 20px;
background-color: #f4f4f4;
border-radius: 5px;
margin: 20px;
}
.content h2 {
font-size: 24px;
font-weight: bold;
color: #333;
margin-bottom: 10px;
}
.content p {
font-size: 16px;
color: #555;
line-height: 1.6;
}
.content a {
color: #0078d4;
text-decoration: none;
}
.content a:hover {
text-decoration: underline;
}
.content ul {
list-style-type: square;
padding-left: 20px;
}
</style>
</head>
<body>
<div class="content">
<h2>Content Title</h2>
<p>This is a sample paragraph for content styling. The text is styled using Pure.CSS and some custom CSS properties.</p>
<a href="#">Read more</a>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</body>
</html>
ব্যাখ্যা:
content: এটি কন্টেন্ট ব্লকের জন্য কাস্টম স্টাইল প্রয়োগ করে, যেমন প্যাডিং, ব্যাকগ্রাউন্ড কালার, এবং মার্জিন।h2: টাইটেল স্টাইল করার জন্য ফন্ট সাইজ এবং বোল্ড ব্যবহার করা হয়েছে।p: প্যারাগ্রাফ টেক্সটের জন্য ফন্ট সাইজ, কালার এবং লাইন হাইট কাস্টমাইজ করা হয়েছে, যাতে এটি আরও পড়তে সহজ হয়।a: লিঙ্কের জন্য স্টাইলিং এবং হোভার স্টাইল করা হয়েছে।
3. Responsive Card Layout
Pure.CSS-এ Grid এবং Flexbox সিস্টেম ব্যবহার করে আপনি রেসপন্সিভ কার্ড লেআউট তৈরি করতে পারেন, যা ছোট স্ক্রীনে কার্ডগুলো একে একে স্ট্যাক হবে এবং বড় স্ক্রীনে এক লাইনে সাজানো থাকবে।
Responsive Card Layout Using Grid
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Cards with Pure.CSS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
.pure-g {
display: flex;
flex-wrap: wrap;
}
.card {
background-color: #fff;
border: 1px solid #ddd;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
text-align: center;
margin: 10px;
flex: 1 0 48%; /* 2 cards per row */
}
@media (max-width: 768px) {
.card {
flex: 1 0 100%; /* Single card per row on small screens */
}
}
</style>
</head>
<body>
<div class="pure-g">
<div class="card">
<h3>Card 1</h3>
<p>This is the content of card 1.</p>
</div>
<div class="card">
<h3>Card 2</h3>
<p>This is the content of card 2.</p>
</div>
<div class="card">
<h3>Card 3</h3>
<p>This is the content of card 3.</p>
</div>
<div class="card">
<h3>Card 4</h3>
<p>This is the content of card 4.</p>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
flex: 1 0 48%: এই স্টাইলটি কার্ডগুলোকে ২টি কলামে ভাগ করবে (৪৮% প্রস্থে)। বড় স্ক্রীনে ২টি কার্ড এক লাইনে থাকবে।@media (max-width: 768px): ছোট স্ক্রীনে (768px বা তার নিচে), কার্ডগুলো একে একে পুরো প্রস্থে (১০০%) সজ্জিত হবে, যাতে এটি মোবাইল-ফ্রেন্ডলি হয়।
Pure.CSS আপনাকে card layouts এবং content styling তৈরি করতে সহজ এবং দ্রুত সমাধান প্রদান করে। Grid system এবং Flexbox ব্যবহার করে আপনি রেসপন্সিভ কার্ড লেআউট তৈরি করতে পারেন, এবং কাস্টম স্টাইলিংয়ের মাধ্যমে আপনার কন্টেন্টকে আকর্ষণীয় ও পড়তে সহজ করে তুলতে পারেন। Pure.CSS-এর সিম্পল ক্লাস এবং গ্রিড সিস্টেম ব্যবহার করে আপনি অনেক কম কোডে সাশ্রয়ী এবং সুন্দর ওয়েব ডিজাইন তৈরি করতে পারবেন।
Content added By
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
Pure.CSS ফ্রেমওয়ার্ক ব্যবহার করে Card Grids এবং Responsive Card Design তৈরি করা অত্যন্ত সহজ এবং কার্যকর। Cards হল UI উপাদান যা সাধারণত তথ্য বা কন্টেন্টকে একটি সুষম এবং স্পষ্ট উপস্থাপনার জন্য ব্যবহৃত হয়। রেসপন্সিভ ডিজাইনের মাধ্যমে আপনি ওয়েবসাইটের কন্টেন্ট বা উপাদানগুলো বিভিন্ন স্ক্রীন সাইজে সুন্দরভাবে প্রদর্শন করতে পারেন। নিচে Pure.CSS ব্যবহার করে Card Grids এবং Responsive Card Design তৈরির প্রক্রিয়া দেওয়া হলো।
1. Card Grids with Pure.CSS
Pure.CSS এর গ্রিড সিস্টেম ব্যবহার করে আপনি খুব সহজে Card Grids তৈরি করতে পারেন। গ্রিড সিস্টেমের মাধ্যমে আপনি বিভিন্ন ডিভাইসের জন্য কাস্টম সাইজে কার্ড সাজাতে পারবেন।
Card Grid Example with 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 Grid</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
.card {
background-color: #ecf0f1;
padding: 20px;
margin: 10px;
border-radius: 5px;
box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
text-align: center;
}
.card img {
max-width: 100%;
height: auto;
border-radius: 5px;
}
.card h3 {
color: #3498db;
margin-top: 15px;
}
.card p {
color: #7f8c8d;
}
</style>
</head>
<body>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3">
<div class="card">
<img src="https://via.placeholder.com/300" alt="Card 1">
<h3>Card 1</h3>
<p>This is a simple card.</p>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<div class="card">
<img src="https://via.placeholder.com/300" alt="Card 2">
<h3>Card 2</h3>
<p>This is another card.</p>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<div class="card">
<img src="https://via.placeholder.com/300" alt="Card 3">
<h3>Card 3</h3>
<p>This is a third card.</p>
</div>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
- Grid System: এখানে
pure-g(গ্রিড কন্টেইনার) এবংpure-u-1-3(প্রতিটি কলাম 1/3 প্রস্থ) ব্যবহার করা হয়েছে। এইভাবে ৩টি কার্ড সুষমভাবে স্ক্রীনে প্রদর্শিত হবে। - Card Styling: প্রতিটি কার্ডে
background-color,padding,box-shadowএবংborder-radiusদিয়ে একটি পরিষ্কার এবং আধুনিক ডিজাইন তৈরি করা হয়েছে।
Responsiveness:
- Mobile view: মোবাইলে, প্রতিটি কার্ড পুরো প্রস্থ নেবে (
pure-u-1), যাতে তারা একটির নিচে আরেকটি প্রদর্শিত হয়। - Desktop view: মিডিয়াম স্ক্রীন এবং এর উপরে, প্রতিটি কার্ড 1/3 প্রস্থ নেবে (
pure-u-md-1-3), যাতে ৩টি কার্ড এক লাইনে প্রদর্শিত হয়।
2. Responsive Card Design
Responsive Card Design হল এমন একটি ডিজাইন কৌশল, যেখানে কার্ডের লেআউট বিভিন্ন স্ক্রীন সাইজের জন্য স্বয়ংক্রিয়ভাবে অ্যাডজাস্ট হয়ে যায়। Pure.CSS গ্রিড এবং মিডিয়া কোয়েরি ব্যবহার করে আপনি খুব সহজেই রেসপন্সিভ কার্ড ডিজাইন তৈরি করতে পারবেন।
Responsive Card Design Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Pure.CSS Card Design</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
.card {
background-color: #f4f4f4;
padding: 20px;
margin: 10px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
text-align: center;
}
.card img {
width: 100%;
height: auto;
border-radius: 5px;
}
.card h3 {
color: #2980b9;
margin-top: 15px;
}
.card p {
color: #34495e;
}
/* Responsive design: 2-column grid for medium screens */
@media (min-width: 600px) {
.pure-g {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
/* Responsive design: 3-column grid for large screens */
@media (min-width: 900px) {
.pure-g {
grid-template-columns: repeat(3, 1fr);
}
}
</style>
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-2 pure-u-md-1-3">
<div class="card">
<img src="https://via.placeholder.com/300" alt="Card 1">
<h3>Card 1</h3>
<p>This is a responsive card.</p>
</div>
</div>
<div class="pure-u-1-2 pure-u-md-1-3">
<div class="card">
<img src="https://via.placeholder.com/300" alt="Card 2">
<h3>Card 2</h3>
<p>This card adjusts based on screen size.</p>
</div>
</div>
<div class="pure-u-1-2 pure-u-md-1-3">
<div class="card">
<img src="https://via.placeholder.com/300" alt="Card 3">
<h3>Card 3</h3>
<p>Responsive design is powerful.</p>
</div>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
- Grid with Media Queries: এখানে
pure-gএবংpure-u-1-2(২টি কলাম),pure-u-md-1-3(৩টি কলাম) ব্যবহার করা হয়েছে। মিডিয়া কোয়েরি ব্যবহার করে ৩টি ভিন্ন লেআউট তৈরি করা হয়েছে:- Mobile view: একক কলাম লেআউট (
pure-u-1-1), যেখানে প্রতিটি কার্ড পূর্ণ প্রস্থ নেবে। - Medium screens (Tablet): ২টি কলাম লেআউট (
grid-template-columns: repeat(2, 1fr)), যেখানে দুটি কার্ড এক লাইনে প্রদর্শিত হবে। - Large screens (Desktop): ৩টি কলাম লেআউট (
grid-template-columns: repeat(3, 1fr)), যেখানে তিনটি কার্ড এক লাইনে প্রদর্শিত হবে।
- Mobile view: একক কলাম লেআউট (
- Responsive Media Queries: এখানে তিনটি মিডিয়া কোয়েরি ব্যবহার করা হয়েছে:
- Small screens (মোবাইল): এক কলাম।
- Medium screens (ট্যাবলেট): দুই কলাম।
- Large screens (ডেস্কটপ): তিন কলাম।
3. Advantages of Responsive Card Design
- Scalability: বিভিন্ন স্ক্রীন সাইজের জন্য একাধিক লেআউট তৈরি করতে পারবেন।
- Consistency: একক কার্ড ডিজাইন ব্যবহার করে আপনি ওয়েব পেজের কন্টেন্টকে একরকম সাজাতে পারবেন, যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করবে।
- Mobile-Friendly: মোবাইল-ফার্স্ট ডিজাইন নিশ্চিত করে যে ওয়েবসাইটটি মোবাইল ডিভাইসে সুন্দরভাবে কাজ করবে।
- Flexibility: বিভিন্ন মিডিয়া কোয়েরি এবং গ্রিড সিস্টেমের মাধ্যমে আপনি গ্রিডের কলাম সংখ্যা সহজেই পরিবর্তন করতে পারবেন।
Pure.CSS এর গ্রিড সিস্টেম এবং মিডিয়া কোয়েরি ব্যবহার করে আপনি খুব সহজেই Responsive Card Design তৈরি করতে পারেন। এটি আপনাকে আপনার ওয়েবসাইটের ডিজাইনকে মোবাইল এবং ডেস্কটপের জন্য সুন্দরভাবে উপস্থাপন করতে সহায়তা করে। এর মাধ্যমে আপনি যেকোনো স্ক্রীনে টেবিল, লিস্ট বা অন্যান্য কন্টেন্টের জন্য রেসপন্সিভ কার্ড লেআউট তৈরি করতে পারবেন।
Content added By
Read more
