Combining images, text, and buttons cards in hindi
W3.CSS वेब डेवलपमेंट स्क्रिप्ट में वेबपेज वेबसाइट कार्ड ब्लॉक एक यूनिवर्सल UI कॉम्पोनेंट एलिमेंट होते है, W3.CSS वेब डेवलपर इन कार्ड्स का यूज़ करके कार्ड के अंदर ग्राफिकल इमेज, टेक्स्ट, सेन्टेन्स, ब्लॉग, पोस्ट, और हाइपरलिंक बटन को इजीली इम्प्लीमेंट कर सकते हैं। इन कार्ड्स एलिमेंट्स का यूज़ सामान्य रूप से वेबसाइट में इ-कॉमर्स प्रोडक्ट डिस्प्ले, ब्लॉग, पोस्ट, सर्विसेज, या किसी भी ऐसे डिजिटल कंटेंट इनफार्मेशन को डिस्प्ले करने में किया जा सकता है. जिसे विज़ुअली ब्लॉक या कार्ड में ग्रुप कर ऑर्गनाइज़ या डिस्प्ले करने की ज़रूरत होती है।
W3.CSS में डिज़ाइन डेवलप्ड कार्ड्स ब्लॉक में बॉर्डर, शैडो, मार्जिन, पैडिंग, और इन वेबपेज एलिमेंट रिस्पॉन्सिवनेस के लिए अपनी बिल्ट-इन रेडीमेड W3.CSS क्लास के साथ कार्ड को स्ट्रक्चर और स्टाइल करना इजी करता है। इन W3.CSS कार्ड वेब एलिमेंट्स को किसी वेबपेज में क्लियर और विज़ुअली आर्डर में ऐड कर डिस्प्ले करने की डिटेल निचे दी गई है।
A basic card concept with an image, text, and a button in W3.CSS.
यहाँ हम एक सिंपल वेबपेज कार्ड लेआउट क्रिएट करते है, जिसमें सबसे टॉप पर एक इमेज सेट होती है, उसके बाद एक कार्ड टाइटल और कुछ प्रोडक्ट सर्विसेज डिस्क्रिप्टिव टेक्स्ट इनफार्मेशन डिक्लेअर होता है. जिसमें यूज़र इंटरैक्शन के लिए एक बाय या रीड मोर बटन होता है।
Example of a simple card with an image, text, and a 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 Image, Text, and Button Attributes 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-pink w3-round-large”>
<img src=”https://cdn-icons-png.flaticon.com/128/7666/7666328.png” height=”50″ width =”50″ alt=”Ev” class=”w3-card-img-top”>
<div class=”w3-container w3-indigo”>
<h4><b>Tata Ev</b></h4>
<p>Tata EV is a smart, stylish, eco-friendly car offering comfort, powerful performance, and a greener future. </p>
<ul>
<li><h6>Tata EVs are smart, stylish, and eco-friendly cars. </h6></li>
<li><h6>They offer smooth performance, modern technology, and comfort. </h6></li>
<li><h6>A great choice for cleaner, greener everyday travel. </h6></li>
</ul>
<button class=”w3-button w3-aqua”>Read More</button>
</div>
</div>
</body>
</html>
Explanation of a simple card with an image, text, and a button in W3.CSS.
- w3-card-4 – यह इस एक्साम्प्ल में कार्ड ब्लॉक में एक शैडो और राउंड कार्नर इफ़ेक्ट को ऐड करता है।
- w3-card-img-top – यह क्लास इमेज को कार्ड के टॉप लोकेशन पर प्रॉपर आर्डर में डिस्प्ले करने के लिए ऑटोमैटिकली फ़ॉर्मेट करता है।
- w3-container – यह क्लास कार्ड कंटेंट जिसमे (कार्ड टाइटल, टेक्स्ट और बटन) को पैडिंग इफ़ेक्ट के साथ एक कंटेनर में एक साथ ग्रुप डिस्प्ले करने में यूज़ किया जाता है।
- w3-button w3-aqua – लास्ट में एक बटन को aqua कलर ऐड कर डिस्प्ले करता है, जिससे आप इस बटन को कॉल-टू-एक्शन के रूप में यूज़ कर सकते है।
A card in W3.CSS with an image on the left, text on the right, and a button.
यहाँ हम W3.CSS में डिज़ाइन वेबपेज वेबसाइट लेआउट में इमेज कार्ड के लेफ्ट ओर टेक्स्ट और बटन के राइट साइड में डिस्प्ले होते हैं। यह कार्ड डिज़ाइन पैटर्न में एक कॉमन डिज़ाइन पैटर्न स्ट्रक्चर है, जिसका यूज़ ऐसे वेबपेज कार्ड कंटेंट को डिज़ाइन करने में किया जाता है, जिन कार्ड में बहुत अधिक ग्राफिकल इमेज होती है. जैसे, ऑनलाइन बिज़नेस प्रोडक्ट लिस्टिंग या कंपनी ऑफर सर्विसेज डिस्क्रिप्शन, आदि है।
Example of a left align 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 Left Align Image, Text, and Button Attributes 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-teal w3-round-large”>
<div class=”w3-row”>
<div class=”w3-col s4″>
<img src=”https://cdn-icons-png.flaticon.com/128/10988/10988139.png” alt=”AI” class=”w3-card-img w3-round”>
</div>
<div class=”w3-col s8″>
<div class=”w3-container w3-indigo”>
<h4><b>Ai Evolution</b></h4>
<p>AI is smart technology that helps people solve problems, learn faster, create ideas, and make life easier. </p>
<button class=”w3-button w3-yellow”>Learn Now</button>
</div>
</div>
</div>
</div>
</body>
</html>
Explanation of a left align image, text, and button in W3.CSS.
- w3-row – यह क्लास मौजूदा कार्ड ब्लॉक में एक टेक्स्ट कंटेंट के लिए एक रो लेआउट को डिफाइन करता है।
- w3-col s4 – यह क्लास मौजूदा कार्ड ब्लॉक में इमेज कंटेनर की विड्थ को इंडीकेट करता है. जिसमे, यह स्माल स्क्रीन पर 12 में से 4 कॉलम वैल्यू को इनपुट लेता है।
- w3-col s8 – यह क्लास मौजूदा कार्ड ब्लॉक में टेक्स्ट और बटन कंटेनर बाकी 8 कॉलम वैल्यू को इनपुट लेता है।
- w3-card-img w3-round – यह क्लास मौजूदा कार्ड ब्लॉक में इमेज पर एक राउंडेड बॉर्डर इफ़ेक्ट को अप्लाई करता है. जिससे की मौजूदा कार्ड ब्लॉक मोर एफ्फिसिएंट डिस्प्ले होता है।
A card with an image, text, button, and overlay in W3.CSS.
W3.CSS वेब डेवलपमेंट स्क्रिप्ट में वेब डेवलपर अधिक विज़ुअली कमर्शियल कार्ड ब्लॉक इफ़ेक्ट के लिए इमेज के टॉप में टेक्स्ट या बटन भी ओवरले कर डिस्प्ले कर सकते हैं। इस तरह के वेबपेज लेआउट स्ट्रक्चर का यूज़ अधिकतर वेबसाइट में ब्लॉग, पोस्ट, प्रोडक्ट या सर्विसेज प्रमोशन या किसी लाइव इवेंट अनाउंसमेंट जैसी कार्ड ब्लॉक एलिमेंट टेक्स्ट इनफार्मेशन को डिस्प्ले करने में किया जाता है, जहाँ वेब यूजर डिफाइन कार्ड ब्लॉक इमेज बैकग्राउंड का रोल प्ले करती है।
Example of a card with an image overlay 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 Image Overlay Attributes in W3.CSS </title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<style>
/* here we add custom styles for card block overlay attributes */
.card-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: white;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
</style>
</head>
<body>
<div class=”w3-card-4 w3-margin w3-teal w3-round-large w3-display-container”>
<img src=”https://cdn-icons-png.flaticon.com/128/962/962649.png” alt=”AI” class=”w3-card-img-top”>
<div class=”card-overlay”>
<div class=”w3-container w3-text-white”>
<h4><b>What Is AI </b></h4>
<p>E-commerce is the modern way of shopping online, allowing customers to buy products anytime and anywhere. It offers convenience, variety, easy payments, doorstep delivery, and helps businesses reach more customers. </p>
<button class=”w3-button w3-pink”>Explore More About It ?</button>
</div>
</div>
</div>
</body>
</html>
Explanation of a card with an image overlay in W3.CSS.
- w3-display-container – यहाँ इस एक्साम्प्ल में यह क्लास कार्ड ब्लॉक में ऐड इमेज को ओवरले करने के लिए बैकग्राउंड अप्लाई करने की परमिशन प्रोवाइड करता है, जबकि ओवरले जावास्क्रिप्ट कोड इसमें एब्सोल्यूट पोजिशनिंग को इनेबल करता है।
- Custom .card-overlay – यह क्लास मौजूदा कार्ड ब्लॉक में ओवरले इफ़ेक्ट को इनेबल करता है, जो की सेमी-ट्रांसपेरेंट टील बैकग्राउंड का यूज़ करता है, और कार्ड ब्लॉक टेक्स्ट और बटन को इमेज के ऊपर सेंटर करता है।
- w3-card-img-top – यह क्लास मौजूदा कार्ड ब्लॉक में यह मैनेज करता है कि इमेज कार्ड टॉप पोरशन में डिस्प्ले हो, जिसके नीचे ओवरले इफ़ेक्ट डिस्प्ले होता है।
