[css-logical-1] Add code example to the introduction

Author: FremyCompany

css-logical-1/Overview.bs

@@ -56,9 +56,36 @@ Introduction</h2>
     lists, headings, and paragraphs are typically left-aligned in English;
     but actually they are start-aligned, because in Arabic the same constructs are right-aligned,
     and a multilingual document will need to accommodate both writing systems accordingly.
-    However the drop shadows on buttons on a page must remain consistent throughout,
-    so their offset will be chosen based on visual considerations and physical directions,
-    and not vary by writing system.
+
+    The following code examplify how using logical syntax can help you write code 
+        that works across different writing systems:
+
+    <figure>
+        <img src="./images/example01.png" width="300" height="109" />
+        <figcaption>Rendering of the below code in a compatible browser</figcaption>
+    </figure>
+
+    <xmp highlight="html">
+        <blockquote dir="auto">Quotation in English</blockquote>
+        <blockquote dir="auto">اقتباس في العربية</blockquote>
+    </xmp>
+
+    <xmp highlight="css">
+
+        blockquote {
+            text-align: start; /* left in latin, right in arabic */
+            margin-inline-start: 0px; /* margin-left in latin, margin-right in arabic */
+            border-inline-start: 5px solid gray; /* border-left in latin, border-right in arabic */
+            padding-inline-start: 5px; /* padding-left in latin, padding-right in arabic */
+        }
+
+    </xmp>
+
+    Documents might need both logical and physical properties. For instance
+      the drop shadows on buttons on a page must remain consistent throughout,
+      so their offset will be chosen based on visual considerations and physical directions,
+      and not vary by writing system.
+
   </div>
 
   Since CSS was originally designed with only physical coordinates in its controls,