Kutipan W3.CSS
Rasa sakit itu sendiri adalah cinta, sistem penyimpanan utama. Bahwa massa kehidupan bukanlah senyum hangat beruang. Tawa guci Tidak ada yang rumit.
Menampilkan Kutipan
Kelas panel w3 adalah kelas yang sempurna untuk menampilkan kutipan.
Kutipan sering ditampilkan dengan latar belakang abu-abu, bilah batas kiri, dan gaya font miring:
Contoh
<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>
Kutipan Besar
Kutipan besar sering digunakan di Internet:
Contoh
<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>
Blockquotes
Jika Anda menggunakan elemen HTML <blockquote> standar, perhatikan bahwa browser akan menambahkan margin kiri dan kanan tambahan:
"Make it as simple as possible, but not simpler."
Albert Einstein
Contoh
<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>
Menggunakan Simbol HTML
Anda dapat menggunakan simbol HTML standar alih-alih ampersand:
| Simbol | Kode |
|---|---|
| « | #8810 |
| ✂. | #9986 |
| ❝. | #10077 |
| ❞. | #10078 |
| ❠. | #10080 |
| ✔. | #10004 |
Rasa sakit itu sendiri adalah cinta, sistem penyimpanan utama. Bahwa massa kehidupan bukanlah senyum hangat beruang. Tawa guci Tidak ada yang rumit.
Rasa sakit itu sendiri adalah cinta, sistem penyimpanan utama. Bahwa massa kehidupan bukanlah senyum hangat beruang. Tawa guci Tidak ada yang rumit.
Contoh
<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>
Contoh
<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>
Menggunakan Font Ikon Keren
Anda juga dapat menggunakan ikon dari perpustakaan Font Awesome:
Contoh
<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>
Anda juga dapat mengubah warna dan opacity:
Contoh
<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>
Sebuah kutipan hitam:
Rasa sakit itu sendiri adalah cinta, sistem penyimpanan utama. Bahwa massa kehidupan bukanlah senyum hangat beruang. Tawa guci Tidak ada yang rumit.
Contoh
<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>
Tampilkan Kutipan sebagai Kartu
Rasa sakit itu sendiri adalah cinta, sistem penyimpanan utama. Bahwa massa kehidupan bukanlah senyum hangat beruang. Tawa guci Tidak ada yang rumit.
Contoh
<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>
Rasa sakit itu sendiri adalah cinta, sistem penyimpanan utama. Bahwa massa kehidupan bukanlah senyum hangat beruang. Tawa guci Tidak ada yang rumit.
Contoh
<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>