W3.CSS उद्धरण
दर्द ही प्रेम है, मुख्य भंडारण प्रणाली। कि जीवन का द्रव्यमान भालुओं की गर्म मुस्कान नहीं है। कलश की हँसी कुछ भी जटिल नहीं है।
उद्धरण प्रदर्शित करना
w3- पैनल वर्ग उद्धरण प्रदर्शित करने के लिए एकदम सही वर्ग है।
उद्धरण अक्सर एक धूसर पृष्ठभूमि, एक बाईं सीमा पट्टी और एक इटैलिक फ़ॉन्ट शैली के साथ प्रदर्शित होते हैं:
उदाहरण
<div class="w3-panel w3-leftbar w3-light-grey">
<p class="w3-xlarge w3-serif">
<i>"Make it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</div>
बड़े उद्धरण
इंटरनेट पर अक्सर बड़े उद्धरणों का उपयोग किया जाता है:
उदाहरण
<div class="w3-panel w3-leftbar w3-sand">
<p class="w3-xxlarge w3-serif">
<i>"Make it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</div>
ब्लॉक उद्धरण
यदि आप मानक HTML <blockquote> तत्व का उपयोग करते हैं, तो ध्यान दें कि ब्राउज़र एक अतिरिक्त बाएँ और दाएँ हाशिया जोड़ देगा:
"Make it as simple as possible, but not simpler."
Albert Einstein
उदाहरण
<blockquote class="w3-panel w3-leftbar w3-light-grey">
<p class="w3-large">
<i>"Make it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</blockquote>
HTML प्रतीकों का उपयोग करना
आप एम्परसेंड के बजाय मानक HTML प्रतीकों का उपयोग कर सकते हैं:
| प्रतीक | कोड |
|---|---|
| मैं | #8810 |
| मैं | #9986 |
| मैं | #10077 |
| मैं | #10078 |
| मैं | #10080 |
| ✔ | #10004 |
दर्द ही प्रेम है, मुख्य भंडारण प्रणाली। कि जीवन का द्रव्यमान भालुओं की गर्म मुस्कान नहीं है। कलश की हँसी कुछ भी जटिल नहीं है।
दर्द ही प्रेम है, मुख्य भंडारण प्रणाली। कि जीवन का द्रव्यमान भालुओं की गर्म मुस्कान नहीं है। कलश की हँसी कुछ भी जटिल नहीं है।
उदाहरण
<div class="w3-panel w3-light-grey">
<span
style="font-size:150px;line-height:0.6em;opacity:0.2">❝</span>
<p class="w3-xlarge" style="margin-top:-40px">
<i>"Lorem ipsum dolor sit amet, consectetur adipiscing elit ..."</i></p>
<p>Albert
Einstein</p>
</div>
उदाहरण
<div class="w3-panel w3-center w3-leftbar w3-sand">
<p><i
class="w3-serif w3-xlarge">
<span
style="font-size:150px;line-height:0.6em;opacity:0.2">✔</span>
Programming in C will slowly decline.<br>
Programming in JavaScript
will be more important.</i></p>
</div>
फ़ॉन्ट विस्मयकारी चिह्नों का उपयोग करना
आप फ़ॉन्ट विस्मयकारी पुस्तकालय से आइकन का भी उपयोग कर सकते हैं:
उदाहरण
<div class="w3-panel w3-leftbar">
<p><i class="fa fa-quote-right
w3-xxlarge"></i><br>
<i class="w3-serif w3-xlarge">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</i></p>
</div>
आप रंग और अस्पष्टता भी बदल सकते हैं:
उदाहरण
<div class="w3-panel w3-sand w3-leftbar">
<p><i class="fa fa-quote-right
w3-xxlarge w3-opacity"></i>
<span class="w3-serif
w3-xlarge">
Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</span></p>
</div>
एक काला उद्धरण:
दर्द ही प्रेम है, मुख्य भंडारण प्रणाली। कि जीवन का द्रव्यमान भालुओं की गर्म मुस्कान नहीं है। कलश की हँसी कुछ भी जटिल नहीं है।
उदाहरण
<div class="w3-panel w3-black">
<p class="w3-large
w3-serif">
<i class="fa fa-quote-right w3-xxlarge w3-margin-right"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</p>
</div>
कार्ड के रूप में उद्धरण प्रदर्शित करें
दर्द ही प्रेम है, मुख्य भंडारण प्रणाली। कि जीवन का द्रव्यमान भालुओं की गर्म मुस्कान नहीं है। कलश की हँसी कुछ भी जटिल नहीं है।
उदाहरण
<div class="w3-panel w3-card-4 w3-light-grey" style="width:50%">
<p
class=" w3-large w3-serif">
<i class="fa fa-quote-right w3-xxlarge
w3-text-red"></i><br>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit ...</p>
</div>
दर्द ही प्रेम है, मुख्य भंडारण प्रणाली। कि जीवन का द्रव्यमान भालुओं की गर्म मुस्कान नहीं है। कलश की हँसी कुछ भी जटिल नहीं है।
उदाहरण
<div class="w3-panel w3-card-4 w3-center" style="width:50%">
<span
style="font-size:100px">❝</span><br>
<p style="margin-top:-60px">
<i><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</b></i></p>
</div>