Creating visually appealing card layouts w3-card In Hindi
W3.CSS वेब डेवलपमेंट स्क्रिप्ट वेब डेवेलपर को प्रीव्यू में अट्रैक्टिव कमर्शियल वेबपेज वेबसाइट कार्ड लेआउट क्रिएट करने के लिए w3-card क्लास प्रोवाइड करता है। एक सिंपल वेबसाइट में कार्ड एक तरह के वेबसाइट डाटा इनफार्मेशन कंटेनर कॉम्पोनेंट होते हैं, जिनका यूज़ वेबसाइट के कंटेंट को ऑर्गनाइज़्ड और क्लियर आर्डर में डिस्प्ले करने में किया जा सकता है। w3-card क्लास का कमर्शियल यूज़ वेबसाइट में ज्यादातर इमेज, वेबपेज टाइटल, टेक्स्ट डाटा, कक्लिकेबल बटन और टेक्स्ट लिंक जैसे वेब एलिमेंट डिफाइन होते हैं. जो वेब डेवलपर को किसी वेबसाइट में किसी तरह के इ-कॉमर्स प्रोडक्ट, सर्विसेज, या ब्लॉग, पोस्ट, आर्टिकल को डिस्प्ले करने में हेल्प करते हैं।
So, let’s create and customize card layouts using the w3-card class and other W3.CSS utility classes in W3.CSS.
Basic Card Layout Concepts in W3.CSS.
W3.CSS वेब डेवलपमेंट स्क्रिप्ट बेस्ड एक सिंपल कार्ड में एक तरह से यह एक डाटा या इनफार्मेशन कंटेनर होता है. जिसमें वेबसाइट वेबपेज डिफाइन ऑब्जेक्ट में बॉर्डर, पैडिंग, और डिज़ाइन कार्ड को डेप्थ प्रोवाइड करने के लिए एक लाइटवेट शैडो इफ़ेक्ट अप्लाई किया जाता है।
Example of a simple card in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Simple Card in W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-card-4 w3-margin w3-round-large”>
<img src=”https://cdn-icons-png.flaticon.com/128/8898/8898827.png” height=”50″ width =”50″ alt=”product” class=”w3-card-img-top”>
<div class=”w3-container”>
<h4><b>Our Services </b></h4>
<p>You can buy our top services. </p>
<ul>
<li><h6><b>Digital Marketing</b></h6></li>
<li><h6><b>Full stack Development</b></h6></li>
<li><h6><b>Machine Learning</b></h6></li>
</ul>
<button class=”w3-button w3-pink”>Read More</button>
</div>
</div>
</body>
</html>
Explanation of a simple card in W3.CSS.
- w3-card-4 – यहाँ इस एक्साम्प्ल में यह कार्ड इफ़ेक्ट क्रिएट करने के लिए शैडो और बॉर्डर रेडियस को ऐड करता है।
- w3-margin – यह W3.CSS क्लास डिज़ाइन कार्ड के चारों ओर एक एम्प्टी स्पेस को ऐड करता है।
- w3-round-large – यह W3.CSS क्लास क्रिएटेड कार्ड में राउंड कार्नर इफ़ेक्ट को ऐड करता है।
- w3-card-img-top – यह W3.CSS क्लास डेवलप कार्ड के अंदर इमेज मे एक यूनिक क्लास को अप्लाई करता है, जिससे कि ये डिज़ाइन कार्ड के वेब एलिमेंट के रूप में अधिक कमर्शियल डिस्प्ले हो।
- w3-container – यह W3.CSS क्लास डिज़ाइन कार्ड के कंटेंट एरिया (टेक्स्ट और बटन के साथ) सर्विसेज डाटा इनफार्मेशन को इंडीकेट करने में किया किया जाता है।
A webpage card with multiple elements in W3.CSS.
एक यूजर डिफाइन वेबपेज वेबसाइट में डिज़ाइन कार्ड ब्लॉक में टेक्स्ट हेडिंग, ग्राफिकल इमेज, टेक्स्ट पैराग्राफ, और लिंक्ड बटन जैसे मल्टीप्ल वेब एलिमेंट डिफाइन हो सकते हैं। इस तरह का कार्ड लेआउट वेबपेज वेबसाइट सर्विसेज ई-कॉमर्स प्रोडक्ट कार्ड, ब्लॉग, पोस्ट प्रीव्यू आदि के लिए वेबसाइट में यूज़ किये जाते है।
Example of a card with a title, image, text, and button in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Card with Multiple Card Elements in W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-card-4 w3-margin w3-round-large”>
<img src=”https://cdn-icons-png.flaticon.com/128/3242/3242257.png” height=”70” width =”70″ alt=”services” class=”w3-card-img-top”>
<div class=”w3-container”>
<h4><b>Web Development</b></h4>
<p>Web development is the process of creating and maintaining webpage websites and web applications.
It includes process of languages like HTML, CSS, JavaScript, and various programming language.
</p>
<button class=”w3-button w3-indigo”>Explore More</button>
</div>
</div>
</body>
</html>
Explanation of a card with a title, image, text, and button in W3.CSS.
- w3-card-img-top – यहाँ इस कार्ड एक्साम्प्ल में कार्ड इमेज कार्ड के सबसे टॉप में डिस्प्ले की गई है।
- W3.CSS वेबपेज कार्ड में एक कार्ड टाइटल, कार्ड डिस्क्रिप्शन टेक्स्ट, और एक लिंक्ड बटन डिफाइन होता है।
- डिफाइन कार्ड बटन में indigo बैकग्राउंड कलर अप्लाई करने के लिए w3-indigo क्लास यूज़ होती है, जिससे यह एक एक्शन बटन के रूप में डिफरेंट प्रीव्यू हो।
A card with icons and action buttons in W3.CSS.
W3.CSS वेब डेवलपमेंट स्क्रिप्ट में वेब डेवलपर बेस्ड डिज़ाइन डेवलप कार्ड को अधिक इंटरैक्टिव क्रिएट करने के लिए कार्ड टेक्स्ट के साथ इमेज आइकन को यूज़ कर सकते हैं। आप W3.CSS स्किप्ट में इमेज आइकॉन लिंक के लिए, Font Awesome आइकन लाइब्रेरी और अन्य का यूज़ कर सकते है. जिससे कि वेब डेवलपर जरूरत पड़ने पर कार्ड के अंदर इजीली आइकन को यूज़ कर सकें।
Example of a card with icons and action buttons in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Card with Icons and linked Buttons in W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css”>
</head>
<body>
<div class=”w3-card-4 w3-margin w3-round-large”>
<img src=”https://cdn-icons-png.flaticon.com/128/8209/8209385.png” height=”70” width =”70″ alt=”hotel” alt=”Card Image” class=”w3-card-img-top”>
<div class=”w3-container”>
<h4><b>Abc International Hotel</b></h4>
<p> Our hotel provides you comfortable accommodation, quality services, and a relaxing stay for valuable guests. </p>
<button class=”w3-button w3-red”>
<i class=”fa-solid fa-globe”></i> View Services
</button>
</div>
</div>
</body>
</html>
Explanation of a card with icons and action buttons in W3.CSS.
- <i class=”fa-solid fa-globe”></i> – यहाँ इस एक्साम्प्ल में यह एक Font Awesome आइकन लाइब्रेरी का लिंक्ड है. इस एक्साम्प्ल में एक ग्लोबल होटल आइकन है।
- यहाँ हमने इस आइकन को बटन के साथ डिस्प्ले किया है. यहाँ बटन में w3-red: बटन क्लास का बैकग्राउंड रेड है, जिससे यह दुसरो वेब कार्ड एलिमेंट से अलग डिस्प्ले होता है।
Cards with hover effects in a W3.CSS webpage.
W3.CSS वेब डेवलपमेंट स्क्रिप्ट में कुछ इंटरैक्टिविटी कार्ड इफ़ेक्ट अप्लाई करने के लिए वेब डेवलपर ऐसे कार्ड क्रिएट कर सकते हैं, जो वेब यूजर द्वारा माउस पॉइंटर को होवर करने पर कार्ड बटन रिस्पॉन्ड करते हैं। W3.CSS वेब फोर्मत्तिंग में होवर इफ़ेक्ट के लिए आपको कई बिल्ट-इन क्लास मिलते हैं. जैसे, डिज़ाइन वेबपेज कार्ड पर होवर इफ़ेक्ट अप्लाई करने पर शैडो, बॉर्डर, या बैकग्राउंड कलर मॉडिफाई करने आदि में यूज़ करते है।
Example of a card with a hover effect in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Card with Hover Effect in W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-card-4 w3-margin w3-round-large w3-hover-shadow-large”>
<img src=”https://cdn-icons-png.flaticon.com/128/8086/8086179.png” height=”70” width =”70″ alt=”yoga” class=”w3-card-img-top”>
<div class=”w3-container”>
<h4><b>Xyz Yoga Center</b></h4>
<p>Yoga is a practice that promotes physical fitness, mental relaxation, flexibility, and overall well-being.</p>
<button class=”w3-button w3-yellow”>Explore More </button>
</div>
</div>
</body>
</html>
Explanation of a card with a hover effect in W3.CSS.
- w3-hover-shadow-large – यहाँ इस एक्साम्प्ल में यह क्लास यूज़र डिफाइन वेबपेज कार्ड पर होवर करने पर एक लार्ज शैडो इफ़ेक्ट को ऐड करता है. जिससे यह सामान्य यूजर को एक 3D के जैसा कार्ड प्रीव्यू होता है।
- w3-hover-opacity – वेब डेवलपर इस क्लास का यूज़ कार्ड पर होवर करने पर उस ऑब्जेक्ट की ओपेसिटी को मॉडिफाई करने पर कर सकते हैं. जिससे वेब यूज़र के इंटरैक्ट करने पर यह थोड़ा फीका डिस्प्ले होता है।
Cards in a W3.CSS Grid Layout.
W3.CSS वेब डेवलपमेंट स्क्रिप्ट में यदि वेब डेवलपर मल्टीप्ल कार्ड वाला वेबपेज वेबसाइट लेआउट डिज़ाइन डेवलप करने जा रहे हैं. तो इस तरह के वेबपेज में ग्रिड लेआउट स्ट्रक्चर का यूज़ करना एक कॉमन थिंग्स है। W3.CSS वेबपेज में वेब डेवलपर w3-row और w3-col क्लास का यूज़ करके इजीली मल्टीप्ल कार्ड वाला वेबपेज डेवलप कर सकते हैं।
Example of a card grid layout in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Card Grid Layout in W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-row w3-light-gray”>
<div class=”w3-col m4″>
<div class=”w3-card-4 w3-margin w3-round-large”>
<img src=”https://cdn-icons-png.flaticon.com/128/5968/5968350.png” height=”70” width =”70″ alt=”python” class=”w3-card-img-top”>
<div class=”w3-container w3-red”>
<h4><b>Python Course</b></h4>
<ul>
<li><p>Python basics & code</p></li>
<li><p>Functions and loops</p></li>
<li><p>Projects & practice</p></li>
</ul>
<button class=”w3-button w3-white”>Buy Course </button>
</div>
</div>
</div>
<div class=”w3-col m4″>
<div class=”w3-card-4 w3-margin w3-round-large”>
<img src=”https://cdn-icons-png.flaticon.com/128/3291/3291669.png” height=”70” width =”70″ alt=”java” class=”w3-card-img-top”>
<div class=”w3-container w3-indigo”>
<h4><b>Java Course</b></h4>
<ul>
<li><p>Java basics and syntax</p></li>
<li><p>Classes, objects and OOP</p></li>
<li><p>Projects & practice</p></li>
</ul>
<button class=”w3-button w3-white”>Buy Course </button>
</div>
</div>
</div>
<div class=”w3-col m4″>
<div class=”w3-card-4 w3-margin w3-round-large”>
<img src=”https://cdn-icons-png.flaticon.com/128/5968/5968371.png” height=”70” width =”70″ alt=”swift” class=”w3-card-img-top”>
<div class=”w3-container w3-yellow”>
<h4><b>Swift Course</b></h4>
<ul>
<li><p>Swift basics and syntax</p></li>
<li><p>iOS apps and UI design</p></li>
<li><p>Projects & practice</p></li>
</ul>
<button class=”w3-button w3-white”>Buy Course </button>
</div>
</div>
</div>
<div class=”w3-col m4″>
<div class=”w3-card-4 w3-margin w3-round-large”>
<img src=”https://cdn-icons-png.flaticon.com/128/11485/11485808.png” height=”70” width =”70″ alt=”machine” class=”w3-card-img-top”>
<div class=”w3-container w3-pink”>
<h4><b>Machine Learning Course </b></h4>
<ul>
<li><p>ML basics and models</p></li>
<li><p>Data prep and trains</p></li>
<li><p>Projects & practice</p></li>
</ul>
<button class=”w3-button w3-white”>Buy Course </button>
</div>
</div>
</div>
</div>
</body>
</html>
