add images & obrazky.html

3 years ago · 6631015813
87 changed files with 132 additions and 0 deletions
--- a/images/Thumbs.db
+++ b/images/Thumbs.db
--- a/images/image_01.jpg
+++ b/images/image_01.jpg
--- a/images/image_02.jpg
+++ b/images/image_02.jpg
--- a/images/image_03.jpg
+++ b/images/image_03.jpg
--- a/images/image_04.jpg
+++ b/images/image_04.jpg
--- a/images/image_05.jpg
+++ b/images/image_05.jpg
--- a/images/image_06.jpg
+++ b/images/image_06.jpg
--- a/images/image_07.jpg
+++ b/images/image_07.jpg
--- a/images/image_08.jpg
+++ b/images/image_08.jpg
--- a/images/image_09.jpg
+++ b/images/image_09.jpg
--- a/images/image_10.jpg
+++ b/images/image_10.jpg
--- a/images/image_11.jpg
+++ b/images/image_11.jpg
--- a/images/image_12.jpg
+++ b/images/image_12.jpg
--- a/images/image_13.jpg
+++ b/images/image_13.jpg
--- a/images/image_14.jpg
+++ b/images/image_14.jpg
--- a/images/image_15.jpg
+++ b/images/image_15.jpg
--- a/images/image_16.jpg
+++ b/images/image_16.jpg
--- a/images/image_17.jpg
+++ b/images/image_17.jpg
--- a/images/image_18.jpg
+++ b/images/image_18.jpg
--- a/images/image_19.jpg
+++ b/images/image_19.jpg
--- a/images/image_20.jpg
+++ b/images/image_20.jpg
--- a/images/image_21.jpg
+++ b/images/image_21.jpg
--- a/images/image_22.jpg
+++ b/images/image_22.jpg
--- a/images/image_23.jpg
+++ b/images/image_23.jpg
--- a/images/image_24.jpg
+++ b/images/image_24.jpg
--- a/images/image_25.jpg
+++ b/images/image_25.jpg
--- a/images/image_26.jpg
+++ b/images/image_26.jpg
--- a/images/image_27.jpg
+++ b/images/image_27.jpg
--- a/images/image_28.jpg
+++ b/images/image_28.jpg
--- a/images/image_29.jpg
+++ b/images/image_29.jpg
--- a/images/image_30.jpg
+++ b/images/image_30.jpg
--- a/images/image_31.jpg
+++ b/images/image_31.jpg
--- a/images/image_32.jpg
+++ b/images/image_32.jpg
--- a/images/image_33.jpg
+++ b/images/image_33.jpg
--- a/images/image_34.jpg
+++ b/images/image_34.jpg
--- a/images/image_35.jpg
+++ b/images/image_35.jpg
--- a/images/image_36.jpg
+++ b/images/image_36.jpg
--- a/images/image_37.jpg
+++ b/images/image_37.jpg
--- a/images/image_38.jpg
+++ b/images/image_38.jpg
--- a/images/image_39.jpg
+++ b/images/image_39.jpg
--- a/images/image_40.jpg
+++ b/images/image_40.jpg
--- a/images/image_41.jpg
+++ b/images/image_41.jpg
--- a/images/image_42.jpg
+++ b/images/image_42.jpg
--- a/images/thumbs/Thumbs.db
+++ b/images/thumbs/Thumbs.db
--- a/images/thumbs/thumb_01.jpg
+++ b/images/thumbs/thumb_01.jpg
--- a/images/thumbs/thumb_02.jpg
+++ b/images/thumbs/thumb_02.jpg
--- a/images/thumbs/thumb_03.jpg
+++ b/images/thumbs/thumb_03.jpg
--- a/images/thumbs/thumb_04.jpg
+++ b/images/thumbs/thumb_04.jpg
--- a/images/thumbs/thumb_05.jpg
+++ b/images/thumbs/thumb_05.jpg
--- a/images/thumbs/thumb_06.jpg
+++ b/images/thumbs/thumb_06.jpg
--- a/images/thumbs/thumb_07.jpg
+++ b/images/thumbs/thumb_07.jpg
--- a/images/thumbs/thumb_08.jpg
+++ b/images/thumbs/thumb_08.jpg
--- a/images/thumbs/thumb_09.jpg
+++ b/images/thumbs/thumb_09.jpg
--- a/images/thumbs/thumb_10.jpg
+++ b/images/thumbs/thumb_10.jpg
--- a/images/thumbs/thumb_11.jpg
+++ b/images/thumbs/thumb_11.jpg
--- a/images/thumbs/thumb_12.jpg
+++ b/images/thumbs/thumb_12.jpg
--- a/images/thumbs/thumb_13.jpg
+++ b/images/thumbs/thumb_13.jpg
--- a/images/thumbs/thumb_14.jpg
+++ b/images/thumbs/thumb_14.jpg
--- a/images/thumbs/thumb_15.jpg
+++ b/images/thumbs/thumb_15.jpg
--- a/images/thumbs/thumb_16.jpg
+++ b/images/thumbs/thumb_16.jpg
--- a/images/thumbs/thumb_17.jpg
+++ b/images/thumbs/thumb_17.jpg
--- a/images/thumbs/thumb_18.jpg
+++ b/images/thumbs/thumb_18.jpg
--- a/images/thumbs/thumb_19.jpg
+++ b/images/thumbs/thumb_19.jpg
--- a/images/thumbs/thumb_20.jpg
+++ b/images/thumbs/thumb_20.jpg
--- a/images/thumbs/thumb_21.jpg
+++ b/images/thumbs/thumb_21.jpg
--- a/images/thumbs/thumb_22.jpg
+++ b/images/thumbs/thumb_22.jpg
--- a/images/thumbs/thumb_23.jpg
+++ b/images/thumbs/thumb_23.jpg
--- a/images/thumbs/thumb_24.jpg
+++ b/images/thumbs/thumb_24.jpg
--- a/images/thumbs/thumb_25.jpg
+++ b/images/thumbs/thumb_25.jpg
--- a/images/thumbs/thumb_26.jpg
+++ b/images/thumbs/thumb_26.jpg
--- a/images/thumbs/thumb_27.jpg
+++ b/images/thumbs/thumb_27.jpg
--- a/images/thumbs/thumb_28.jpg
+++ b/images/thumbs/thumb_28.jpg
--- a/images/thumbs/thumb_29.jpg
+++ b/images/thumbs/thumb_29.jpg
--- a/images/thumbs/thumb_30.jpg
+++ b/images/thumbs/thumb_30.jpg
--- a/images/thumbs/thumb_31.jpg
+++ b/images/thumbs/thumb_31.jpg
--- a/images/thumbs/thumb_32.jpg
+++ b/images/thumbs/thumb_32.jpg
--- a/images/thumbs/thumb_33.jpg
+++ b/images/thumbs/thumb_33.jpg
--- a/images/thumbs/thumb_34.jpg
+++ b/images/thumbs/thumb_34.jpg
--- a/images/thumbs/thumb_35.jpg
+++ b/images/thumbs/thumb_35.jpg
--- a/images/thumbs/thumb_36.jpg
+++ b/images/thumbs/thumb_36.jpg
--- a/images/thumbs/thumb_37.jpg
+++ b/images/thumbs/thumb_37.jpg
--- a/images/thumbs/thumb_38.jpg
+++ b/images/thumbs/thumb_38.jpg
--- a/images/thumbs/thumb_39.jpg
+++ b/images/thumbs/thumb_39.jpg
--- a/images/thumbs/thumb_40.jpg
+++ b/images/thumbs/thumb_40.jpg
--- a/images/thumbs/thumb_41.jpg
+++ b/images/thumbs/thumb_41.jpg
--- a/images/thumbs/thumb_42.jpg
+++ b/images/thumbs/thumb_42.jpg
--- a/obrazky.html
+++ b/obrazky.html
@ -0,0 +1,132 @@
 <!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">
 </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">Nazev Aplikace</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 class="display-1">Práce s Obrázky (tag <i>img</i>)</h1>
      <h2>Zobrazení</h2>
      <div class="row">
        <div class="col">
          <img src="images/image_01.jpg" style="width: 100%;" class="rounded-circle">
        </div>
        <div class="col">
          <img src="images/image_02.jpg" style="width: 100%;" class="rounded">
        </div>
        <div class="col">
          <img src="images/image_03.jpg" style="width: 100%;" class="img-thumbnail">
        </div>
      </div>
      <hr>
      <h2>Bootstrap-Cards</h2>
      <div class="row">
        <!-- Jednotlivá karta -->
        <!-- Emmet rada "div.col>div.card>div.card-body"   -->
        <div class="col">
          <div class="card bg-info">  
            <div class="card-header"> HEADER</div>          
            <div class="card-body">
              <h4 class="card-title"> Title</h4>
              <p class="card-text">card-text</p>
            </div>
            <div class="card-footer">Footer</div>
          </div>
        </div>
        <div class="col">
          <div class="card bg-warning">
            <div class="card-body">
              <h4 class="card-title">Title</h4>
              <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus quaerat similique, sit, saepe vitae mollitia quas quis perspiciatis voluptates deserunt iure asperiores repudiandae qui minima ad. Eaque sed veniam tempora.
              </p>
              <a href="#" class="card-link">Link1</a>
              <a href="#" class="card-link">Link2</a>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="card">
            <img class="card-img-top" src="images/image_04.jpg">
            <div class="card-body">
              <h4 class="card-title">John</h4>
              <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus culpa molestias aliquid veniam ratione repellat. Atque officiis nostrum, consequatur officia sint voluptate, itaque qui recusandae fuga adipisci velit dolores perferendis.</p>
              <a href="#" class="btn btn-primary">Zobrazit Profil</a>
            </div>
          </div>
        </div>
        <div class="col">
            <div class="card">
              <div class="card-body">
                <h4 class="card-title">John</h4>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus culpa molestias aliquid veniam ratione repellat. Atque officiis nostrum, consequatur officia sint voluptate, itaque qui recusandae fuga adipisci velit dolores perferendis.</p>
                <a href="#" class="btn btn-primary">Zobrazit Profil</a>
              </div>
              <img class="card-img-bottom" src="images/image_05.jpg">
            </div>
          </div>
      </div>
      <hr>
      <h2>Figure - obrázek s popisem</h2>
      <div class="row">
        <div class="col">
          <figure class="figure">
            <img class="figure-img rounded" src="images/image_06.jpg" alt="" style="width: 100%;">
            <div class="figure-caption"> Popisek obrázku</div>
          </figure>
        </div>
        <div class="col">
            <figure class="figure">
              <img class="figure-img rounded" src="images/image_07.jpg" alt="" style="width: 100%;">
              <div class="figure-caption text-end"> Popisek obrázku</div>
            </figure>
          </div> 
      </div>
    </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>