diff --git a/typografie.html b/typografie.html
new file mode 100644
index 0000000..ae63b66
--- /dev/null
+++ b/typografie.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <link rel="stylesheet" href="css/bootstrap.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
+</head>
+<body class="d-flex flex-column min-vh-100">
+    <!-- navigační lištu -->
+    <div class="container">
+            <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
+              <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
+                <span class="fs-4">Typografie <i class="bi bi-x-diamond-fill"></i> </span>
+              </a>        
+              <ul class="nav nav-pills">
+                <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Home</a></li>
+                <li class="nav-item"><a href="#" class="nav-link">Link 1</a></li>
+                <li class="nav-item"><a href="#" class="nav-link">Link 2</a></li>
+                <li class="nav-item"><a href="#" class="nav-link">Link 3</a></li>
+              </ul>
+            </header>
+          </div>
+    <!-- HLAVNÍ ČÁST KÓDU -->
+    <main class="container">
+        <h1>Nadpisy</h1>
+        <!-- H1-6 mužeme napsat i jako <p> s classou h1-6 -->
+        <h2>Nadpis H2 přes H2</h2>
+        <p class="h2"> Nadpis H2 přes P</p>
+        <br>
+      <h2>Ukázka kodu:</h2>
+
+        <xmp class="border border-primary border-5 rounded-pill">
+            <h2>Nadpis H2 přes H2</h2>
+            <p class="h2"> Nadpis H2 přes P</p>
+        </xmp>
+
+        <hr>        
+        <h1>Display zobrazení</h1>
+        <!-- Class "Display-(1-6)" umožnuje zobrazení vetšího písma pro nadpisy -->
+        <h1 class="display-1">Display-1</h1>
+        <h1 class="display-2">Display-2</h1>
+        <h1 class="display-3">Display-3</h1>
+
+        <xmp class="border border-primary border-5 rounded-pill">
+            <h1 class="display-1">Display-1</h1>
+        </xmp>
+
+        <hr>
+        <h1>Lead</h1>
+        <p class="lead"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique corporis deleniti asperiores porro, neque officia cupiditate ipsa, assumenda reprehenderit ipsum, ea iste alias recusandae et voluptate est. Corrupti, praesentium reiciendis.</p>
+        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque, consequuntur vitae. Adipisci officiis doloribus tempore est, magni officia reprehenderit accusamus illo facere minima omnis quam veritatis non harum rem praesentium.</p>
+        <xmp class="border border-primary border-5 rounded-pill">
+          <p class="lean">LOREM</p>
+        </xmp>
+
+        <hr>
+        <h1>Uprava Textu</h1>
+        <p>HTML se <mark>neprogramuje</mark> </p>
+        <p><strong>Místo B lze použít strong</strong></p>
+        <p><em>Tento text je psán EM kurzívou</em></p>
+        <p><u>Text potrhnu pres tag U</u></p>
+        <p>Text obyčejný. <small>text malý</small></p>
+        <p><del>vymazaný text</del> | <s>nesprávný text</s></p>
+        <p>Pro využití kopírování je potřeba <kbd>CTRL+C</kbd> klávesová zkratka</p>
+
+        <hr>
+        <h1>Listy</h1>
+        <p>Obyčejný list:</p>
+        <ul>
+          <li>Item 1</li>
+          <li>Item 2</li>
+          <li>Item 3</li>
+        </ul>
+
+        <p>Neoznačený list:</p>
+        <ul class="list-unstyled">
+          <li>Item 1</li>
+          <li>Item 2</li>
+          <li>Item 3</li>
+        </ul>
+
+        <hr>
+        <h1>Citace</h1>
+
+      <figure >
+        <blockquote class="blockquote">
+          <p>Citace jak by měla jakkoliv být.</p>
+        </blockquote>
+        <figcaption class="blockquote-footer">
+          Autor neznámý
+        </figcaption> 
+      </figure>
+
+      <xmp class="border border-primary border-5 rounded-pill">
+          <figure >
+              <blockquote class="blockquote">
+                <p>Citace jak by měla jakkoliv být.</p>
+              </blockquote>
+              <figcaption class="blockquote-footer">
+                Autor neznámý
+              </figcaption> 
+            </figure>
+      </xmp>
+        <hr>
+        <h1>Flex Procvičení</h1>
+        <!-- div.d-flex.justify-content-evenly>div.m-1.p-2.border*4 -->
+        <div class="d-flex justify-content-evenly">
+          <div class="m-1 p-2 border">Text 1</div>
+          <div class="m-1 p-2 border">Text 2</div>
+          <div class="m-1 p-2 border">Text 3</div>
+          <div class="m-1 p-2 border">Text 4</div>
+        </div>
+        <xmp class="border border-secondary border-5 rounded-pill">
+            <div class="d-flex justify-content-evenly">
+                <div class="m-1 p-2 border">Text 1</div>
+                ...
+            </div>
+        </xmp>
+
+        <hr>
+        <h1>Označení textu</h1>
+        <p class="user-select-all">Označít veškerý dlouhý text</p>
+        <p class="user-select-auto">Základní označení textu</p>
+        <p class="user-select-none">Nelze označit</p>
+        
+        <xmp class="border border-secondary border-5 rounded-pill">
+            <p class="user-select-all">Označít veškerý dlouhý text</p>
+            <p class="user-select-auto">Základní označení textu</p>
+            <p class="user-select-none">Nelze označit</p>
+        </xmp>
+      </main>
+    
+    
+    <!-- Footer - zakončení stránky -->    
+    <footer class="footer mt-auto">
+            <ul class="nav justify-content-center border-bottom py-2  mb-3">
+                <li class="nav-item"><a href="#" class="nav-link text-muted">HOME</a></li>
+                <li class="nav-item"><a href="#" class="nav-link text-muted">Link1</a></li>
+                <li class="nav-item"><a href="#" class="nav-link text-muted">Link2</a></li>    
+            </ul>
+            <p class="text-center text-muted">Škrabánek 2022</p>
+    </footer>
+
+
+
+    <script src="js/bootstrap.bundle.js"></script>
+</body>
+</html>
\ No newline at end of file
