From 1cd13c2bee6ac8457ac972f8d28d87a82b76dc5d Mon Sep 17 00:00:00 2001
From: Nezumi <loiphan2711@gmail.com>
Date: Wed, 21 Jun 2023 16:27:50 +0700
Subject: [PATCH] Init sample code training chapter 14

---
 .../assets/images/plus-solid.svg              |   1 +
 .../assets/images/social_facebook_fb_35.ico   | Bin 0 -> 4286 bytes
 Sample/chapter-14-sample/index.html           | 199 ++++++++++++++++++
 3 files changed, 200 insertions(+)
 create mode 100644 Sample/chapter-14-sample/assets/images/plus-solid.svg
 create mode 100644 Sample/chapter-14-sample/assets/images/social_facebook_fb_35.ico
 create mode 100644 Sample/chapter-14-sample/index.html
diff --git a/Sample/chapter-14-sample/assets/images/plus-solid.svg b/Sample/chapter-14-sample/assets/images/plus-solid.svg
new file mode 100644
index 0000000..ca3619b
--- /dev/null
+++ b/Sample/chapter-14-sample/assets/images/plus-solid.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>
\ No newline at end of file
diff --git a/Sample/chapter-14-sample/assets/images/social_facebook_fb_35.ico b/Sample/chapter-14-sample/assets/images/social_facebook_fb_35.ico
new file mode 100644
index 0000000000000000000000000000000000000000..635dc499d3f0d809fcf98ea21a51b3a3dfce6cf4
GIT binary patch
literal 4286
zcmc(iy-LJD6oqGrsMu&_p@m!8>JwO~*jxEm`UZ+vxfV8pzm1)>jS5zRzi8(JXuFTF
zr63y5w`^nxyU86A$z9HFcIMo3W|GY0#<`k4^}6HRU5q$4>YSSt)Z}Ia+KGnx3dXqd
zSA_%NN_gymW7_D0Q)WaGTNYl0Zz0YB9Ju6=TO?+c{4V5q_UivoE*hcHr-WnSN9d((
zZASwwG%YbC(yd_CxAM?LJ1ZFDe|RTjL_6y|aGnxw*6*2kiym%_d1#&p-C|aa*6Y2V
z5@79Rjo0tPV=k4?I^kaRd0EFr{L#hBUz;ld-sBhcM+46!*e|l?o9-*aA5Vh)(z37l
zV<^KPPrTOzU)yqAhCe=dA6Dp(_jQH-ct2L?kM~o6|E{>hLcie0p#IPf-UQ1%1P5=<
zft9~4ZeCo9VAaDr<o>hxp9c8j9kTxJ#orO81wZEXhj#EJ#75v<_5PzFwCgqNnBk@O
zpMAB3<ikz&Umdn<#gP0hlDw$vcth9}9t4Y)|NP-u81nqR6TesNsUy!n{rp8Mr2e3W
zp#JF=dH&t%k3`2>e=)x=;Y?T%SPxU3-*f$D&A(UurL=Z!SY`dm7^<wl@h7N}j|8q&
z*15Fwp%L=_A^Kl%PZoLqA{UJ!!P;CBUW9KUZ_aSoTgV}|%ovkc-upKkbHvSoSQCnM
xk#;_vn`r47-gIsNJVy;awFE9|XhvNyOqS5;OZbhbReP?rBD4T3Jn+I3?_UDl$xr|Q

literal 0
HcmV?d00001

diff --git a/Sample/chapter-14-sample/index.html b/Sample/chapter-14-sample/index.html
new file mode 100644
index 0000000..f2ed0ff
--- /dev/null
+++ b/Sample/chapter-14-sample/index.html
@@ -0,0 +1,199 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Cabin:wght@400;500;700&display=swap" rel="stylesheet">
+    <title>Lists, Tables and Forms</title>
+    <style type="text/css">
+
+        body {
+            font-family: 'Cabin', sans-serif;
+            font-size: 90%;
+            color: #666;
+            background-color: #f8f8f8;
+        }
+
+        li {
+            list-style-image: url("./assets/images/plus-solid.svg");
+            line-height: 1.6em;
+        }
+
+        table {
+            border-spacing: 0px;
+        }
+
+        th,
+        td {
+            padding: 5px 30px 5px 10px;
+            border-spacing: 0px;
+            font-size: 90%;
+            margin: 0px;
+        }
+
+        th,
+        td {
+            text-align: left;
+            background-color: #e0e9f0;
+            border-top: 1px solid #f1f8fe;
+            border-bottom: 1px solid #cbd2d8;
+            border-right: 1px solid #cbd2d8;
+        }
+
+        tr.head th {
+            color: #fff;
+            background-color: #90b4d6;
+            border-bottom: 2px solid #547ca0;
+            border-right: 1px solid #749abe;
+            border-top: 1px solid #90b4d6;
+            text-align: center;
+            text-shadow: -1px -1px 1px #666;
+            letter-spacing: 0.15em;
+        }
+
+        td {
+            text-shadow: 1px 1px 1px #fff;
+        }
+
+        tr.even td,
+        tr.even th {
+            background-color: #e8eff5;
+        }
+
+        tr.head th:first-child {
+            -webkit-border-top-left-radius: 5px;
+            -moz-border-radius-topleft: 5px;
+            border-top-left-radius: 5px;
+        }
+
+        tr.head th:last-child {
+            -webkit-border-top-right-radius: 5px;
+            -moz-border-radius-topright: 5px;
+            border-top-right-radius: 5px;
+        }
+
+        fieldset {
+            width: 310px;
+            margin-top: 20px;
+            border: 1px solid #d6d6d6;
+            background-color: #ffffff;
+            line-height: 1.6em;
+        }
+
+        legend {
+            font-style: italic;
+            color: #666666;
+        }
+
+        input[type="text"] {
+            width: 120px;
+            border: 1px solid #d6d6d6;
+            padding: 2px;
+            outline: none;
+        }
+
+        input[type="text"]:focus,
+        input[type="text"]:hover {
+            background-color: #d0e2f0;
+            border: 1px solid #999;
+        }
+
+        input[type="submit"] {
+            border: 1px solid #006633;
+            background-color: #009966;
+            color: #FFFFFF;
+            border-radius: 5px;
+            padding: 5px;
+            margin-top: 10px;
+        }
+
+        input[type="submit"]:hover {
+            border: 1px solid #006633;
+            background-color: #00CC33;
+            color: #FFFFFF;
+            cursor: pointer;
+        }
+
+        .title {
+            float: left;
+            width: 160px;
+            clear: left;
+        }
+
+        .submit {
+            width: 310px;
+            text-align: right;
+        }
+    </style>
+</head>
+
+<body>
+    <h1>Poetry Workshops</h1>
+    <p>We will be conducting a number of poetry workshops
+        and symposiums throughout the year.</p>
+    <p>Please note that the following events are free to
+        members:</p>
+    <ul>
+        <li>A Poetic Perspective</li>
+        <li>Walt Whitman at War</li>
+        <li>Found Poems and Outsider Poetry</li>
+    </ul>
+    <table>
+        <tr class="head">
+            <th></th>
+            <th>New York</th>
+            <th>Chicago</th>
+            <th>San Francisco</th>
+        </tr>
+        <tr>
+            <th>A Poetic Perspective</th>
+            <td>Sat, 4 Feb 2012<br />11am - 2pm</td>
+            <td>Sat, 3 Mar 2012<br />11am - 2pm</td>
+            <td>Sat, 17 Mar 2012<br />11am - 2pm</td>
+        </tr>
+        <tr class="even">
+            <th>Walt Whitman at War</th>
+            <td>Sat, 7 Apr 2012<br />11am - 1pm</td>
+            <td>Sat, 5 May 2012<br />11am - 1pm</td>
+            <td>Sat, 19 May 2012<br />11am - 1pm</td>
+        </tr>
+        <tr>
+            <th>Found Poems &amp; Outsider Poetry</th>
+            <td>Sat, 9 Jun 2012<br />11am - 2pm</td>
+            <td>Sat, 7 Jul 2012<br />11am - 2pm</td>
+            <td>Sat, 21 Jul 2012<br />11am - 2pm</td>
+        </tr>
+        <tr class="even">
+            <th>Natural Death: An Exploration</th>
+            <td>Sat, 4 Aug 2012<br />11am - 4pm</td>
+            <td>Sat, 8 Sep 2012<br />11am - 4pm</td>
+            <td>Sat, 15 Sep 2012<br />11am - 4pm</td>
+        </tr>
+    </table>
+    <form action="http://www.example.com/form.php" method="get">
+        <fieldset>
+            <legend>Register your interest</legend>
+            <p><label class="title" for="name">Your name:</label>
+                <input type="text" name="name" id="name"><br />
+                <label class="title" for="email">Your email:</label>
+                <input type="text" name="email" id="email">
+            </p>
+            <p><label for="location" class="title">Your closest center:</label>
+                <select name="location" id="location">
+                    <option value="ny">New York</option>
+                    <option value="il">Chicago</option>
+                    <option value="ca">San Francisco</option>
+                </select>
+            </p>
+            <span class="title">Are you a member?</span>
+            <label><input type="radio" name="member" value="yes" /> Yes</label>
+            <label><input type="radio" name="member" value="no" /> No</label></p>
+        </fieldset>
+        <div class="submit"><input type="submit" value="Register" /></div>
+    </form>
+</body>
+
+</html>
\ No newline at end of file

	New York	Chicago	San Francisco
A Poetic Perspective	Sat, 4 Feb 2012 11am - 2pm	Sat, 3 Mar 2012 11am - 2pm	Sat, 17 Mar 2012 11am - 2pm
Walt Whitman at War	Sat, 7 Apr 2012 11am - 1pm	Sat, 5 May 2012 11am - 1pm	Sat, 19 May 2012 11am - 1pm
Found Poems & Outsider Poetry	Sat, 9 Jun 2012 11am - 2pm	Sat, 7 Jul 2012 11am - 2pm	Sat, 21 Jul 2012 11am - 2pm
Natural Death: An Exploration	Sat, 4 Aug 2012 11am - 4pm	Sat, 8 Sep 2012 11am - 4pm	Sat, 15 Sep 2012 11am - 4pm