Merge pull request #17 from phuocduong-agilityio/training/chapter-13

Init sample code training chapter 13
2026-09-22 20:01:33 +00:00 · 2023-06-21 15:14:41 +07:00
parent 9cbf932ea7 d43c74454a
commit 4c15406737
3 changed files with 89 additions and 0 deletions
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Boxes</title>
+    <style type="text/css">
+        body {
+            font-size: 80%;
+            font-family: "Courier New", Courier, monospace;
+            letter-spacing: 0.15em;
+            background-color: #efefef;
+        }
+
+        #page {
+            max-width: 940px;
+            min-width: 720px;
+            margin: 10px auto 10px auto;
+            padding: 20px;
+            border: 4px double #000;
+            background-color: #ffffff;
+        }
+
+        #logo {
+            width: 150px;
+            margin: 10px auto 25px auto;
+        }
+
+        ul {
+            width: 570px;
+            padding: 15px;
+            margin: 0px auto 0px auto;
+            border-top: 2px solid #000;
+            border-bottom: 1px solid #000;
+            text-align: center;
+        }
+
+        li {
+            display: inline;
+            margin: 0px 3px;
+        }
+
+        p {
+            text-align: center;
+            width: 600px;
+            margin: 20px auto 20px auto;
+            font-weight: normal;
+        }
+
+        a {
+            color: #000000;
+            text-transform: uppercase;
+            text-decoration: none;
+            padding: 6px 18px 5px 18px;
+        }
+
+        a:hover,
+        a.on {
+            color: #cc3333;
+            background-color: #ffffff;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="page">
+        <div id="logo">
+            <img src="./assets/images/PYBr.gif" alt="The Analog Specialists" width="150px" />
+        </div>
+        <ul id="navigation">
+            <li><a href="#" class="on">Home</a></li>
+            <li><a href="#">For Sale</a></li>
+            <li><a href="#">Repairs</a></li>
+            <li><a href="#">About</a></li>
+            <li><a href="#">Contact</a></li>
+        </ul>
+        <p>
+            <img src="./assets/images/1200px-Location_dot_red.svg.png" alt="Fender Rhodes, Hohner Clavinet, 
+        and Wurlitzer EP200" height="100px" width="100px" />
+        </p>
+        <p>
+            We specialise in the sales and repair of classic keyboards, in particular
+            the Fender Rhodes, Wurlitzer EP200, and Hohner Clavinet.
+        </p>
+    </div>
+</body>
+
+</html>