Init sample code training chapter 12

2026-09-22 20:01:33 +00:00 · 2023-06-21 10:03:40 +07:00
parent 3c40ecb572
commit b022094558
3 changed files with 116 additions and 0 deletions
@@ -0,0 +1,26 @@
+h1, h2 {
+    text-transform: uppercase;
+    letter-spacing: 0.2em;
+}
+
+.credits {
+    font-weight: bold;
+    word-spacing: 1.5em;
+    text-indent: 20px;
+}
+
+p {
+    text-align: justify;
+}
+
+.test {
+    vertical-align: text-bottom;
+}
+
+.text-indent-20 {
+    text-indent: 20px;
+}
+
+.text-indent--10 {
+    text-indent: -10px;
+}
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Text</title>
+    <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">
+    <style type="text/css">
+        body {
+            padding: 20px;
+            font-family: 'Cabin', sans-serif;
+        }
+
+        h1,
+        h2,
+        h3,
+        a {
+            font-weight: normal;
+            color: #0088dd;
+            margin: 0px;
+        }
+
+        h1 {
+            font-size: 250%;
+            text-shadow: 2px 2px 3px #666666;
+            padding-bottom: 10px;
+        }
+
+        h2 {
+            font-size: 90%;
+            text-transform: uppercase;
+            letter-spacing: 0.2em;
+        }
+
+        h3 {
+            font-size: 150%;
+        }
+
+        p {
+            line-height: 1.4em;
+            color: #665544;
+        }
+
+        p.intro:first-line {
+            font-weight: bold;
+        }
+
+        .credits {
+            font-style: italic;
+            text-align: right;
+        }
+
+        a {
+            text-decoration: none;
+        }
+
+        a:hover {
+            text-decoration: underline;
+        }
+
+        a:focus{
+            text-decoration: overline;
+        }
+
+        a:visited{
+            color: green;
+        }
+    </style>
+</head>
+
+<body>
+    <h1>Briards</h1>
+    <h2>A Heart wrapped in fur</h2>
+    <p class="intro">The <a class="breed" href="http://en.wikipedia.org/wikiBriard">
+            briard</a>, or berger de brie, is a large breed of dog traditionally used as a
+        herder and guardian of sheep.</p>
+    <h3>Breed History</h3>
+    <p>The briard, which is believed to have originated in France, has been bred for
+        centuries to herd and to protect sheep. The breed was used by the French Army as
+        sentries, messengers and to search for wounded soldiers because of its fine sense
+        of hearing. Briards were used in the First World War almost to the point of
+        extinction. Currently the population of briards is slowly recovering.
+        Charlemagne, Napoleon, Thomas Jefferson and Lafayette all owned briards.</p>
+    <p class="credits">by Ivy Duckett</p>
+</body>
+
+</html>