Citations W3.CSS
La douleur elle-même est l'amour, le principal système de stockage. Que la masse de la vie n'est pas un sourire chaleureux des ours. Le rire de l'urne Rien n'est compliqué.
Affichage des cotations
La classe w3-panel est la classe idéale pour afficher les devis.
Les citations sont souvent affichées avec un arrière-plan gris, une barre de bordure gauche et un style de police en italique :
Exemple
<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>
Grandes citations
Les grandes citations sont souvent utilisées sur Internet :
Exemple
<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>
Citations en bloc
Si vous utilisez l'élément HTML standard <blockquote>, notez que le navigateur ajoutera une marge supplémentaire à gauche et à droite :
"Make it as simple as possible, but not simpler."
Albert Einstein
Exemple
<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>
Utilisation des symboles HTML
Vous pouvez utiliser des symboles HTML standard à la place des esperluettes :
| symbole | Code |
|---|---|
| ≪ | #8810 |
| ✂ | #9986 |
| ❝ | #10077 |
| ❞ | #10078 |
| ❠ | #10080 |
| ✔ | #10004 |
La douleur elle-même est l'amour, le principal système de stockage. Que la masse de la vie n'est pas un sourire chaleureux des ours. Le rire de l'urne Rien n'est compliqué.
La douleur elle-même est l'amour, le principal système de stockage. Que la masse de la vie n'est pas un sourire chaleureux des ours. Le rire de l'urne Rien n'est compliqué.
Exemple
<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>
Exemple
<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>
Utilisation des icônes Font Awesome
Vous pouvez également utiliser les icônes de la bibliothèque Font Awesome :
Exemple
<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>
Vous pouvez également modifier la couleur et l'opacité :
Exemple
<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>
Une citation noire :
La douleur elle-même est l'amour, le principal système de stockage. Que la masse de la vie n'est pas un sourire chaleureux des ours. Le rire de l'urne Rien n'est compliqué.
Exemple
<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>
Afficher les devis sous forme de cartes
La douleur elle-même est l'amour, le principal système de stockage. Que la masse de la vie n'est pas un sourire chaleureux des ours. Le rire de l'urne Rien n'est compliqué.
Exemple
<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>
La douleur elle-même est l'amour, le principal système de stockage. Que la masse de la vie n'est pas un sourire chaleureux des ours. Le rire de l'urne Rien n'est compliqué.
Exemple
<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>