W3.CSS-Zitate
Der Schmerz selbst ist Liebe, das Hauptspeichersystem. Dass die Masse des Lebens kein warmes Lächeln der Bären ist. Das Lachen der Urne Nichts ist kompliziert.
Angebote anzeigen
Die w3-Panel- Klasse ist die perfekte Klasse, um Zitate anzuzeigen.
Zitate werden oft mit einem grauen Hintergrund, einem linken Randbalken und einem kursiven Schriftstil angezeigt:
Beispiel
<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>
Große Zitate
Im Internet werden oft große Anführungszeichen verwendet:
Beispiel
<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>
Block Zitate
Wenn Sie das Standard-HTML-Element <blockquote> verwenden, beachten Sie, dass der Browser einen zusätzlichen linken und rechten Rand hinzufügt:
"Make it as simple as possible, but not simpler."
Albert Einstein
Beispiel
<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>
Verwenden von HTML-Symbolen
Anstelle von kaufmännischen Und-Zeichen können Sie Standard-HTML-Symbole verwenden:
| Symbol | Code |
|---|---|
| ≪ | #8810 |
| ✂ | #9986 |
| ❝ | #10077 |
| ❞ | #10078 |
| ❠ | #10080 |
| ✔ | #10004 |
Der Schmerz selbst ist Liebe, das Hauptspeichersystem. Dass die Masse des Lebens kein warmes Lächeln der Bären ist. Das Lachen der Urne Nichts ist kompliziert.
Der Schmerz selbst ist Liebe, das Hauptspeichersystem. Dass die Masse des Lebens kein warmes Lächeln der Bären ist. Das Lachen der Urne Nichts ist kompliziert.
Beispiel
<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>
Beispiel
<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>
Verwenden von Font Awesome-Symbolen
Sie können auch Symbole aus der Font Awesome-Bibliothek verwenden:
Beispiel
<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>
Sie können auch die Farbe und Deckkraft ändern:
Beispiel
<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>
Ein schwarzes Zitat:
Der Schmerz selbst ist Liebe, das Hauptspeichersystem. Dass die Masse des Lebens kein warmes Lächeln der Bären ist. Das Lachen der Urne Nichts ist kompliziert.
Beispiel
<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>
Zitate als Karten anzeigen
Der Schmerz selbst ist Liebe, das Hauptspeichersystem. Dass die Masse des Lebens kein warmes Lächeln der Bären ist. Das Lachen der Urne Nichts ist kompliziert.
Beispiel
<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>
Der Schmerz selbst ist Liebe, das Hauptspeichersystem. Dass die Masse des Lebens kein warmes Lächeln der Bären ist. Das Lachen der Urne Nichts ist kompliziert.
Beispiel
<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>