quote shortcodes:

4 files changed, 56 insertions, 3 deletions

diff --git a/README.md b/README.md
index 5c0a8ba..52a66c9 100644
--- a/README.md
+++ b/README.md
@@ -22,7 +22,7 @@
  - Disqus
  - One Signal Push
  - Social share & Bookmark bar
- - Shortcodes:Info, Warning, Colorcode.  [Demo Here](https://jesselau.com/w3-simple-shortcodes-demo/)
+ - Shortcodes:Info, Warning, Colorcode, quote.  [Demo Here](https://jesselau.com/w3-simple-shortcodes-demo/)
  - Sphinx or Manticore search supported. Output xml file which can be indexed by sphinx and manticore search. Example site can not include search function because it need server-side setting. [Live Search function Demo Here](https://jesselau.com/search/)
  - Table of content and back to top button on scroll.
  - Grid style and simple list style.
diff --git a/exampleSite/content/posts/shortcodes-demopage.md b/exampleSite/content/posts/shortcodes-demopage.md
index e76d724..a497a60 100644
--- a/exampleSite/content/posts/shortcodes-demopage.md
+++ b/exampleSite/content/posts/shortcodes-demopage.md
@@ -188,7 +188,58 @@ y = json.loads(x)<br>
 # the result is a Python dictionary:<br>
 print(y["age"]) <br>
 {{< /colorcode >}}  
+<hr>
 
+## quote shortcode
+
+We can display quotes with shortcodes
+
+{{< colorcode title="Code for quote shortcodes">}}  
+{{&lt; quote  &gt;}}<br>  
+&lt;p class=" w3-xlarge"&gt;<br> 
+     Make it as simple as possible, but not simpler.<br> 
+&lt;/p&gt;<br> 
+&lt;p class="w3-right"&gt;--- Albert Einstein&lt;/p&gt;<br> 
+{{&lt; /quote &gt;}}  
+{{< /colorcode >}}  
+It will display quote with default width 100% style:  
+{{< quote  >}}  
+<p class=" w3-xlarge">
+     Make it as simple as possible, but not simpler.
+</p><p class="w3-right">--- Albert Einstein</p>
+{{< /quote >}}  
+
+You can also set width with shortcodes:
+ {{< colorcode title="Code for quote shortcodes with % width">}}  
+{{&lt; quote width="38.2%"  &gt;}}<br>  
+&lt;p class=" w3-xlarge"&gt;<br> 
+     Make it as simple as possible, but not simpler.<br> 
+&lt;/p&gt;<br> 
+&lt;p class="w3-right"&gt;--- Albert Einstein&lt;/p&gt;<br> 
+{{&lt; /quote &gt;}}  
+{{< /colorcode >}}  
+{{< quote width="38.2%" >}}  
+<p class=" w3-xlarge">
+     Make it as simple as possible, but not simpler.
+</p><p class="w3-right">--- Albert Einstein</p>
+{{< /quote >}}   
+
+Or you can set px to width
+
+{{< colorcode title="Code for quote shortcodes with px width">}}  
+{{&lt; quote width="300px"  &gt;}}<br>  
+&lt;p class=" w3-xlarge"&gt;<br> 
+     Make it as simple as possible, but not simpler.<br> 
+&lt;/p&gt;<br> 
+&lt;p class="w3-right"&gt;--- Albert Einstein&lt;/p&gt;<br> 
+{{&lt; /quote &gt;}}  
+{{< /colorcode >}}  
+
+{{< quote width="300px" >}}  
+<p class=" w3-xlarge">
+     Make it as simple as possible, but not simpler.
+</p><p class="w3-right">--- Albert Einstein</p>
+{{< /quote >}}   
 
 ## Test first picture without thumbnail set
 ![Thanks to Unsplash](https://raw.githubusercontent.com/jesselau76/hugo-w3-simple/master/exampleSite/images/thumb-jad-limcaco-183877-unsplash.jpg)
\ No newline at end of file
diff --git a/layouts/shortcodes/htmlcode.html b/layouts/shortcodes/htmlcode.html
deleted file mode 100644
index fb8cb85..0000000
--- a/layouts/shortcodes/htmlcode.html
+++ /dev/null
@@ -1,2 +0,0 @@
-    {{ .Inner | safeHTML }}
-  
\ No newline at end of file
diff --git a/layouts/shortcodes/quote.html b/layouts/shortcodes/quote.html
new file mode 100644
index 0000000..62892db
--- /dev/null
+++ b/layouts/shortcodes/quote.html
@@ -0,0 +1,4 @@
+<div class="w3-panel w3-card-4 w3-light-grey"{{ with .Get "width"}} style="width:{{.}}"{{ end }}>
+    <i class="fa fa-quote-right w3-xxlarge w3-text-red"></i><br>
+    {{ .Inner | safeHTML }}
+  </div>
\ No newline at end of file