Introduction
This chapter demonstrates about the W3CSS Quotes. Quotation marks will be used in document user can use the one or more quotation mark pairs following are the concepts covered in this chapter.
- Displaying Quotes
- Large Quotes
- Block Quotes
- Using Font Awesome Icons
- Quotes as Cards
Description
User can display the quotes by using the W3-panel which is the perfect way to display the quotes. These quotes are displayed with grey color background and left border bar with italic font style. The code below demonstrates Displaying Quotes.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Displaying Quotes</h2>
<p>Simple Programming Lessons Tutorials:</p>
<div class="w3-panel w3-leftbar w3-aqua">
<p class="w3-xlarge w3-serif"><i>"Simple Programming Lessons Tutorials"</i></p>
<p>SPLESSONS</p>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
In W3.CSS user will also get the large quotes which are used in the internet. Which is the large content of text which can be get by using the w3-panel, The code below demonstrates to get the large quotes as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Displaying Large Quotes</h2>
<p>Simple Programming Lessons Tutorials:</p>
<div class="w3-panel w3-leftbar w3-aqua">
<p class="w3-xxlarge w3-serif"><i>"Simple Programming Lessons Tutorials."</i></p>
<p>SPLESSONS</p>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
By using W3.CSS user can also use the Block quotes but while using the block quotes browser will add some extra left, right margins. The code below demonstrates to using the left and right margins as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Displaying Blockquotes</h2>
<p>Simple Programming Lessons Tutorials:</p>
<blockquote class="w3-panel w3-leftbar w3-aqua">
<p class="w3-large"><i>"Simple Programming Lessons Tutorials."</i></p>
<p>SPLESSONs</p>
</blockquote>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
In W3.CSS there is a facility to use icons from Font Awesome Library user can select the icons from these library and use in the code. The code below demonstrates to using of Font Awesome Icons as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<body>
<div class="w3-container">
<h1>Simple Programming Lessons</h1>
<div class="w3-panel w3-leftbar">
<p><i class="fa fa-quote-right w3-xxlarge"></i><br>
<i class="w3-serif w3-xlarge">
SPLessons stands for Simple Programming Lessons and was started with a motive to present programming codes and to help the developers all around the globe with different queries in different Programming Languages.</i></p>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
The code below demonstrates to using of Font Awesome Icons as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<body>
<div class="w3-container">
<h1>SPLESSONS</h1>
<div class="w3-panel w3-aqua">
<p class="w3-large w3-serif">
<i class="fa fa-quote-right w3-xxlarge xw3-margin-right"></i>
SPLessons stands for Simple Programming Lessons and was started with a motive to present programming codes and to help the developers all around the globe with different queries in different Programming Languages.</p>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
User can also display the quotes as a cards by using the w3-panel and w3-card. The code below demonstrates to displaying quotes as a cards as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<body>
<div class="w3-container">
<h1>SPLESSONS</h1>
<div class="w3-panel w3-card-4 w3-aqua" style="width:50%">
<p class=" w3-large w3-serif">
<i class="fa fa-quote-right w3-xxlarge w3-text-red"></i><br>
SPLessons stands for Simple Programming Lessons and was started with a motive to present programming codes and to help the developers all around the globe with different queries in different Programming Languages.</p>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Key Points
- User can display the Quotes as a cards.
- Block quotes will add some extra margins.
- User will also use some font awesome icons from libraries.