Cotizaciones W3.CSS
El dolor en sí mismo es el amor, el principal sistema de almacenamiento. Que la masa de la vida no es una cálida sonrisa de los osos. La risa de la urna Nada es complicado.
Mostrar cotizaciones
La clase w3-panel es la clase perfecta para mostrar cotizaciones.
Las comillas a menudo se muestran con un fondo gris, una barra en el borde izquierdo y un estilo de fuente en cursiva:
Ejemplo
<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>
Cotizaciones grandes
Las comillas grandes se usan a menudo en Internet:
Ejemplo
<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>
cotizaciones en bloque
Si usa el elemento estándar HTML <blockquote>, observe que el navegador agregará un margen izquierdo y derecho adicional:
"Make it as simple as possible, but not simpler."
Albert Einstein
Ejemplo
<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>
Uso de símbolos HTML
Puede usar símbolos HTML estándar en lugar de símbolos de unión:
| Símbolo | Código |
|---|---|
| ≪ | #8810 |
| ✂ | #9986 |
| ❝ | #10077 |
| ❞ | #10078 |
| ❠ | #10080 |
| ✔ | #10004 |
El dolor en sí mismo es el amor, el principal sistema de almacenamiento. Que la masa de la vida no es una cálida sonrisa de los osos. La risa de la urna Nada es complicado.
El dolor en sí mismo es el amor, el principal sistema de almacenamiento. Que la masa de la vida no es una cálida sonrisa de los osos. La risa de la urna Nada es complicado.
Ejemplo
<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>
Ejemplo
<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>
Uso de iconos de Font Awesome
También puede usar íconos de la biblioteca Font Awesome:
Ejemplo
<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>
También puedes cambiar el color y la opacidad:
Ejemplo
<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>
Una cita negra:
El dolor en sí mismo es el amor, el principal sistema de almacenamiento. Que la masa de la vida no es una cálida sonrisa de los osos. La risa de la urna Nada es complicado.
Ejemplo
<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>
Mostrar cotizaciones como tarjetas
El dolor en sí mismo es el amor, el principal sistema de almacenamiento. Que la masa de la vida no es una cálida sonrisa de los osos. La risa de la urna Nada es complicado.
Ejemplo
<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>
El dolor en sí mismo es el amor, el principal sistema de almacenamiento. Que la masa de la vida no es una cálida sonrisa de los osos. La risa de la urna Nada es complicado.
Ejemplo
<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>