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

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

کلاس 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">❝</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">❝</span><br>
<p style="margin-top:-60px">
<i><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</b></i></p>
</div>

خودتان امتحان کنيد »

: نوشته شده توسط زهرا داوودی; بازدید: 3384

برای درج دیدگاه، ابتدا باید وارد بیاموز شوید.