نقل قول واکنشگرا

چاپ

نمایش نقل قولها

کلاس  w3-panel برای نمایش نقل قول ها بسیار مناسب است.

نقل قولها اغلب با یک پس زمینه خاکستری و نوار مرزی سمت چپ و یک سبک فونت italic نمایش داده میشود:

"تا میتوانی آن را ساده کن و نه ساده تر ."

آلبرت اینشتین

مثال

<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>
خودتان امتحان کنيد »

 Blockquote ها

اگر شما از عنصر استاندارد <blockquote> استفاده کنید مرورگر یک margin اضافی  از سمت چپ و راست می افزاید:

"تا میتوانی آن را ساده کن اما نه ساده تر ."

آلبرت اینشتین

مثال

<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  استفاده کنید :

Code سمبل
#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">&#10077;</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>
خودتان امتحان کنيد »

استفاده از فونت Awesome

شما میتوانید از کتابخانه فونت 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-8 w3-center" style="width:50%">
  <span style="font-size:100px">&#10077;</span><br>
  <p style="margin-top:-60px">
  <i><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</b></i></p>
</div>
خودتان امتحان کنيد »