اقتباسات W3.CSS
الألم نفسه هو الحب ، نظام التخزين الرئيسي. أن كتلة الحياة ليست بابتسامة دافئة للدببة. ضحك الجرة لا شيء معقد.
عرض الأسعار
تعتبر فئة w3-panel هي الفئة المثالية لعرض الأسعار.
غالبًا ما يتم عرض علامات الاقتباس بخلفية رمادية وشريط حد أيسر ونمط خط مائل:
مثال
<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>
استخدام أيقونات Font Awesome
يمكنك أيضًا استخدام الرموز من مكتبة Font Awesome:
مثال
<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>