main 82ff80eedffe cached
155 files
7.3 MB
1.9M tokens
393 symbols
1 requests
Download .txt
Showing preview only (7,683K chars total). Download the full file or copy to clipboard to get everything.
Repository: hakanyalcinkaya/kodluyoruz-frontend-101-egitimi
Branch: main
Commit: 82ff80eedffe
Files: 155
Total size: 7.3 MB

Directory structure:
gitextract_1xipjz63/

├── .gitignore
├── 01-html-kategorisi/
│   ├── 005-Aciklama-Satirlari-Olusturmak.html
│   ├── 006-Basliklar-ve-Paragraflarla-Calismak.html
│   ├── 007-Listelerle-Calismak.html
│   ├── 008-Emmet-ile-Daha-Hizlica-HTML-Etiketleri-Olusturmak.html
│   ├── 009-Gorsellerle-Calismak.html
│   ├── 010-Linklerle-Calismak.html
│   ├── 011-Blok-Elementler-Div-Span-ve-Diger-Inline-Elementler-Ile-Calismak.html
│   ├── 012-HTML-Etiketlerine-Ekstra-Ozellikler-Eklemek.html
│   ├── 013-HTML-Isteketinin-Genel-Yapisini-Anlamak.html
│   ├── 014-Semantic-Etiketlerin-Kullanimi.html
│   ├── README.md
│   └── bolum-sonu-calismasi/
│       ├── about-us.html
│       ├── contact.html
│       └── index.html
├── 02-css-kategorisi/
│   ├── 002-CSS-Inline-CSS-Temel-Kullanimi.html
│   ├── 003-Inline-Internal-ve-External-CSS-Kullanimlar/
│   │   ├── about-us.html
│   │   ├── contact.html
│   │   ├── css/
│   │   │   └── kodluyoruz.css
│   │   ├── index.html
│   │   └── inline-css.html
│   ├── 004-Aciklama-Satiri-ve-Genel-Font-Ozellikleri/
│   │   ├── about-us.html
│   │   ├── contact.html
│   │   ├── css/
│   │   │   └── kodluyoruz.css
│   │   └── index.html
│   ├── 005-CSS-Class-ve-ID-Kullanimi/
│   │   ├── css/
│   │   │   └── kodluyoruz.css
│   │   └── index.html
│   ├── 006-CSS-Seciciler-Ile-Istedigimiz-Yerin-Secilebilmesi/
│   │   ├── css/
│   │   │   └── kodluyoruz.css
│   │   └── index.html
│   ├── 007-CSS-Margin-Padding-Width-Height-ile-Kutu-Ozelliklerinin-Kullanimi/
│   │   ├── css/
│   │   │   └── kodluyoruz.css
│   │   └── index.html
│   ├── 008-Bolum-Sonu-Calismasi/
│   │   ├── css/
│   │   │   └── kodluyoruz.css
│   │   └── index.html
│   └── README.md
├── 03-bootstrap-kategorisi/
│   ├── 003.html
│   ├── 004.html
│   ├── 005.html
│   ├── 006.html
│   ├── 008.html
│   ├── 009.html
│   ├── 010.html
│   ├── README.md
│   └── bolum-sonu-projesi/
│       ├── css/
│       │   ├── bootstrap-grid.css
│       │   ├── bootstrap-reboot.css
│       │   ├── bootstrap.css
│       │   └── medium.css
│       ├── fontawesome/
│       │   ├── LICENSE.txt
│       │   ├── attribution.js
│       │   ├── css/
│       │   │   ├── all.css
│       │   │   ├── brands.css
│       │   │   ├── fontawesome.css
│       │   │   ├── regular.css
│       │   │   ├── solid.css
│       │   │   ├── svg-with-js.css
│       │   │   └── v4-shims.css
│       │   ├── js/
│       │   │   ├── all.js
│       │   │   ├── brands.js
│       │   │   ├── conflict-detection.js
│       │   │   ├── fontawesome.js
│       │   │   ├── regular.js
│       │   │   ├── solid.js
│       │   │   └── v4-shims.js
│       │   ├── less/
│       │   │   ├── _animated.less
│       │   │   ├── _bordered-pulled.less
│       │   │   ├── _core.less
│       │   │   ├── _fixed-width.less
│       │   │   ├── _icons.less
│       │   │   ├── _larger.less
│       │   │   ├── _list.less
│       │   │   ├── _mixins.less
│       │   │   ├── _rotated-flipped.less
│       │   │   ├── _screen-reader.less
│       │   │   ├── _shims.less
│       │   │   ├── _stacked.less
│       │   │   ├── _variables.less
│       │   │   ├── brands.less
│       │   │   ├── fontawesome.less
│       │   │   ├── regular.less
│       │   │   ├── solid.less
│       │   │   └── v4-shims.less
│       │   ├── metadata/
│       │   │   ├── categories.yml
│       │   │   ├── icons.json
│       │   │   ├── icons.yml
│       │   │   ├── shims.json
│       │   │   ├── shims.yml
│       │   │   └── sponsors.yml
│       │   └── scss/
│       │       ├── _animated.scss
│       │       ├── _bordered-pulled.scss
│       │       ├── _core.scss
│       │       ├── _fixed-width.scss
│       │       ├── _icons.scss
│       │       ├── _larger.scss
│       │       ├── _list.scss
│       │       ├── _mixins.scss
│       │       ├── _rotated-flipped.scss
│       │       ├── _screen-reader.scss
│       │       ├── _shims.scss
│       │       ├── _stacked.scss
│       │       ├── _variables.scss
│       │       ├── brands.scss
│       │       ├── fontawesome.scss
│       │       ├── regular.scss
│       │       ├── solid.scss
│       │       └── v4-shims.scss
│       ├── index.html
│       └── js/
│           ├── bootstrap.bundle.js
│           └── bootstrap.js
├── 04-javascript-kategorisi/
│   ├── README.MD
│   ├── data/
│   │   └── settings.json
│   ├── index.html
│   └── js/
│       ├── 001-hello-world.js
│       ├── 002-degisken-tanimlama.js
│       ├── 003-degisken-tanimlama-kurallari.js
│       ├── 004-number-veri-turu-ile-calismak.js
│       ├── 005-boolean-veri-turu-ile-calismak.js
│       ├── 006-veri-turu-ve-veri-turu-donusumleri.js
│       ├── 007-template-literals-kullanimi.js
│       ├── 008-string-veri-turu-islemleri.js
│       ├── 009-document-object-model.js
│       ├── 010-dom-icerisinden-oge-secimi.js
│       ├── 011-prompt-ile-kullanicidan-bilgi-almak.js
│       ├── 012-liste-icindeki-ogeye-ulasmak-veya-yeni-oge-eklemek.js
│       ├── 013-css-class-eklemek-veya-cikartmak.js
│       ├── 014-karsilastirma-operatorleri-ve-mantiksal-operatorler.js
│       ├── 015-kosullarla-calismak.js
│       ├── 016-coklu-kosullar-ile-calismak.js
│       ├── 017-ternary-operator-ile-short-if-kullanimi.js
│       ├── 018-kosullarla-calismak-bolum-sonu-egzersizi.js
│       ├── 019-fonksiyonlar-neden-fonksiyonlara-ihtiyac-duyariz-ve-ilk-fonksiyonumuz.js
│       ├── 020-fonksiyona-parametre-atamak-ve-geridonus-almak.js
│       ├── 021-arrow-function-kullanimi.js
│       ├── 022-dom-etkinlikleriyle-calismak.js
│       ├── 023-functions-bolum-sonu-egzersizi.js
│       ├── 024-localStorage-icerisine-veri-eklemek-duzenlemek-ve-silmek.js
│       ├── 025-localStorage-icerisinde-farkli-turde-bilgilerin-saklanmasi.js
│       ├── 026-localStorage-bolum-sonu-egzersizi.js
│       ├── 027-form-submit-yonetimi.js
│       ├── 028-input-icerisindeki-veriyi-almak.js
│       ├── 029-formlarla-calismak-bolum-sonu-egzersizi.js
│       ├── 030-dizi-olusturmak-ve-dizi-icindeki-ilk-son-elemana-ulasmak.js
│       ├── 031-array-yapisina-oge-eklemek-cikartmak-ve-guncellemek.js
│       ├── 032-cok-kullanilan-array-dizi-metotlari.js
│       ├── 033-for-dongusu-kullanimi.js
│       ├── 034-break-ve-continue-kullanimi.js
│       ├── 035-while-dongusu-kullanimi.js
│       ├── 036-array-forEach-kullanimi.js
│       ├── 037-array-filter-kullanimi.js
│       ├── 038-array-map-kullanimi.js
│       ├── 039-object-nedir-nasil-olusturulur.js
│       ├── 040-object-key-ve-value-yapisinin-kullanimi.js
│       ├── 041-object-icinde-metot-nasil-ekleriz.js
│       ├── 042-09-042-object-ve-array-destructuring-nasil-kullanilir.js
│       ├── 043-hata-yonetimi-icin-try-catch-kullanimi.js
│       └── 044-fetch-api-ile-calismak.js
└── README.md

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
# Created by https://www.toptal.com/developers/gitignore/api/windows,vscode,macos
# Edit at https://www.toptal.com/developers/gitignore?templates=windows,vscode,macos

### macOS ###
# General
.DS_Store
.AppleDouble
.LSOverride


# Icon must end with two \r
Icon


# Thumbnails
._*

# Files that might appear in the root of a volume
.DocumentRevisions-V100
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes
.VolumeIcon.icns
.com.apple.timemachine.donotpresent

# Directories potentially created on remote AFP share
.AppleDB
.AppleDesktop
Network Trash Folder
Temporary Items
.apdisk

### vscode ###
.vscode
# .vscode/*
# !.vscode/settings.json
# !.vscode/tasks.json
# !.vscode/launch.json
# !.vscode/extensions.json
# *.code-workspace

### Windows ###
# Windows thumbnail cache files
Thumbs.db
Thumbs.db:encryptable
ehthumbs.db
ehthumbs_vista.db

# Dump file
*.stackdump

# Folder config file
[Dd]esktop.ini

# Recycle Bin used on file shares
$RECYCLE.BIN/

# Windows Installer files
*.cab
*.msi
*.msix
*.msm
*.msp

# Windows shortcuts
*.lnk


================================================
FILE: 01-html-kategorisi/005-Aciklama-Satirlari-Olusturmak.html
================================================
<h1>Kodluyoruz - Front-End 101</h1>

<!-- aciklama yazildi -->

<!-- 
  birden fazla satir icerisinde 
  aciklama kullanimi
-->


<!-- Etiketleri Aciklama Satirina Almak: -->
<!-- 
<h2>Deneme</h2>
<h3>Aciklama Kisminda..</h3>
-->


================================================
FILE: 01-html-kategorisi/006-Basliklar-ve-Paragraflarla-Calismak.html
================================================
<h1>Kodluyoruz - Front-End</h1>
<!-- açıklama yazıldı -->
<h2>HTML</h2>
<h3>Açıklamalarla Çalışmak</h3>
<p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, maiores?
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<p>Veritatis eveniet dolorem exercitationem molestiae possimus aliquam.</p>
<p>Maiores voluptas vero asperiores tenetur a officia.</p>
<p>Dolores fugiat eius inventore ut voluptate quos?</p>
<p>Laborum iusto quas, obcaecati suscipit quam quo.</p>

<h3>Başlıklar ve Paragraflarla çalışmak</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
<p>Odio sed dolor neque perspiciatis commodi?</p>
<p>Minus eius consectetur atque vero impedit.</p>

<h2>CSS</h2>
<h3>BOOTSTRAP</h3>

================================================
FILE: 01-html-kategorisi/007-Listelerle-Calismak.html
================================================
<h1>Listeler</h1>
<!--
  Sıralı Listeler -> 1, 2, 3 ordered list ? -> ol
  Sıralı Olmayan listeler -> *, *, *, unordered list ? -> ul 
  -> list item -> li
-->

<ol>
  <li>liste öğesi *1*</li>
  <li>
    liste öğesi *2*
    <ul>
      <li>Liste Öğesi *1*</li>
      <li>Liste Öğesi *2*</li>
      <li>Liste Öğesi *3*</li>
    </ul>
  </li>
  <li>Diğer Özellikler</li>
</ol>

<ul>
  <li>Liste Öğesi *1*</li>
  <li>Liste Öğesi *1*</li>
  <li>Liste Öğesi *1*</li>
</ul>


================================================
FILE: 01-html-kategorisi/008-Emmet-ile-Daha-Hizlica-HTML-Etiketleri-Olusturmak.html
================================================
<h2>Emmet / Zen Coding</h2>

<!--
    etiket isimlerini direkt verebiliyoruz
    + kardeş öğe
    > içinde öğe
    ^ yukarı çık  ve öğe oluştur.
    * çarp -> p*3
    lorem ???
    . -> class
    # -> id 
-->

<!-- h1+p+p+h2+p+p+p+p -->
<!-- h1+p+p+h2+p+p+p+p -> h1+p*2+h2+p*4   -->
<!-- ul>li*5 -->
<!-- ul>li*3^p*2+h3 -->

<!-- ul>li*3>lorem1^p*2>lorem4+h3>lorem1 -- hatalı  -->
<!-- ul>li*3>lorem1^^p*2>lorem4^h3>lorem1 -->

<h3 class="deneme">Lorem.</h3>
<!-- h3.lorem1 -->
<h3 id="idollusun">Lorem.</h3>
<!-- h3#idollusun>lorem1 -->

<h3 class="deneme" id="idolussun">Lorem.</h3>
<!--h3.deneme#idolussun>lorem1-->

<!-- ul>li.tepki  -->
<ul>
  <li class="tepki"></li>
</ul>

<!-- ul>.text-red*3 -->
<ul>
  <li class="text-red"></li>
  <li class="text-red"></li>
  <li class="text-red"></li>
</ul>


================================================
FILE: 01-html-kategorisi/009-Gorsellerle-Calismak.html
================================================
<h2>Görsellerle Çalışmak</h2>

<!-- img -->

<img width="200" height="200" src="images/1.jpg" alt="Deri kitap kapagı" />

<img src="https://picsum.photos/600/300" alt="" />

<img
  src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSadO-rX_E5Obuxzj15jaP_lgQhdfCDaSpBlA&usqp=CAU"
  alt=""
/>

<img
  src="https://assets.ubuntu.com/v1/25363584-Ubuntu-Dell-AI%3AML.svg"
  alt=""
/>


================================================
FILE: 01-html-kategorisi/010-Linklerle-Calismak.html
================================================
<h2>Linkler ile Çalışmak</h2>

<!--
    - Başka bir web sayfasına git
    - Başka bir sayfaya git 
    - Aynı sayfa içinde bir yere ? ID  ->  bilgisine git 
    - Mail At 
    - Telefon Et 
    - href="

-->
<ul>
  <li>
    <a href="https://kodluyoruz.org" target="_blank">
      kodluyoruz-sayfasına gidilecek.
    </a>
  </li>
  <li>
    <a href="iletisim.html"> İletişim sayfasına git. </a>
  </li>
  <li>
    <a href="#footer"> En alt kısma git. </a>
  </li>

  <li>
    <a href="mailto:info@kodluyoruz.org"> Kodluyoruza mail at. </a>
  </li>

  <li>
    <a href="tel:0555555555"> Telefon Aç </a>
  </li>
</ul>

<a href="https://picsum.photos/">
  <img src="images/1.jpg" alt="Deri kitap kapagı" />
</a>

<h2
  id="footer
"
>
  En Alt Kısım
</h2>

<p>Lorem ipsum dolor sit.</p>


================================================
FILE: 01-html-kategorisi/011-Blok-Elementler-Div-Span-ve-Diger-Inline-Elementler-Ile-Calismak.html
================================================
<h1>HTML</h1>
<h2>Blok Elements</h2>

<p>
  Lorem ipsum dolor <strong>sit amet consectetur adipisicing</strong> elit.
  <em>Tempore,</em> odio. <a href="">consectetur adipisicing</a>
</p>

<p>
  Lorem ipsum, dolor sit <strong>amet consectetur adipisicing</strong> elit.
  <span style="color: darkred">
    Assumenda ipsam id amet ratione quam natus.</span
  >
</p>

<p>
  div: Lorem ipsum dolor
  <br />
  sit amet consectetur adipisicing elit. Laboriosam, non.
</p>

<p>
  <strong>
    <em>Lorem ipsum dolor sit</em>
  </strong>
  amet consectetur adipisicing elit. Deserunt, tempore?
</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Autem, vel.</p>

<hr />

<h2><a href=""></a>Block Element</h2>


================================================
FILE: 01-html-kategorisi/012-HTML-Etiketlerine-Ekstra-Ozellikler-Eklemek.html
================================================
<h1>HTML</h1>
<img src="" alt="" />
<a
  id="ikiKelimeBoşlukOlamaz"
  class="birinci-sınıf ikinci-sınıf"
  data-id=""
  href=""
  >Link Bilgisi</a
>
<div class="" id="tekbilgi" data-section=""></div>


================================================
FILE: 01-html-kategorisi/013-HTML-Isteketinin-Genel-Yapisini-Anlamak.html
================================================
<!DOCTYPE html>
<html lang="en">
  <!-- lang: Yazdigimiz Dokumanin Dili.. Yani Turkce Icerik Varsa Bu Kisim tr olmali.. -->
  <head>
    <!-- Browser'a giden bilgiler -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Browser'da Gozuken Baslik Bilgisi</title>
  </head>
  <body>
    <!-- bizim yazdigimiz etiketler ve icerikler -->
    <h1>Kodluyoruz - HTML</h1>
    <ul>
      <li>Lorem.</li>
      <li>Sunt.</li>
      <li>Ipsum?</li>
      <li>Consequuntur.</li>
      <li>Dolores.</li>
    </ul>
  </body>
</html>


================================================
FILE: 01-html-kategorisi/014-Semantic-Etiketlerin-Kullanimi.html
================================================
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Browser'da Gozuken Baslik Bilgisi</title>
  </head>
  <body>
    <nav>
      <ul>
        <li>Lorem, ipsum dolor.</li>
        <li>Quisquam, adipisci corrupti!</li>
        <li>Tempora, et blanditiis.</li>
      </ul>
    </nav>
    <hr />

    <main>
      <aside>
        <h2>Left Bar</h2>
        <ul>
          <li>Lorem, ipsum.</li>
          <li>Ipsa, similique.</li>
          <li>Ullam, illum?</li>
          <li>Ducimus, officiis?</li>
        </ul>
      </aside>

      <section>
        <article>
          <h1>Lorem.</h1>
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Aspernatur eius voluptate quia cupiditate.</p>
        </article>
        <article>
          <h1>Id?</h1>
          <p>Placeat quasi minus libero veniam.</p>
          <p>Amet reiciendis veniam deserunt voluptatem.</p>
        </article>
        <article>
          <h1>Expedita.</h1>
          <p>Iste minus harum quam dolore.</p>
          <p>Incidunt sit perspiciatis minima? Aliquid.</p>
        </article>
      </section>
    </main>

    <footer>
      <h1>Footer</h1>
      <p>Lorem, ipsum dolor.</p>
    </footer>
  </body>
</html>


================================================
FILE: 01-html-kategorisi/README.md
================================================
# HTML Temelleri

================================================
FILE: 01-html-kategorisi/bolum-sonu-calismasi/about-us.html
================================================
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hakkimizda Sayfasi</title>
  </head>
  <body>
    <!-- navbar-start -->
    <nav>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        fill="currentColor"
        class="bi bi-award-fill"
        viewBox="0 0 16 16"
      >
        <path
          d="M8 0l1.669.864 1.858.282.842 1.68 1.337 1.32L13.4 6l.306 1.854-1.337 1.32-.842 1.68-1.858.282L8 12l-1.669-.864-1.858-.282-.842-1.68-1.337-1.32L2.6 6l-.306-1.854 1.337-1.32.842-1.68L6.331.864 8 0z"
        />
        <path
          d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1 4 11.794z"
        />
      </svg>
      <ul>
        <li>
          <a href="index.html">Ana sayfa</a>
        </li>
        <li>
          <a href="about-us.html">Hakkımızda</a>
        </li>
        <li>
          <a href="contact.html">İletişim</a>
        </li>
      </ul>
    </nav>
    <!-- navbar-end -->
    <hr />

    <!-- content-start -->
    <main>
      <article>
        <h1>Hakkımızda</h1>
        <img src="https://picsum.photos/200/300" alt="Hakkımızda" />
        <p>Lorem ipsum dolor sit amet consectetur.</p>
        <p>Provident est repellendus deserunt laudantium aspernatur!</p>
        <p>Quibusdam aliquid animi debitis blanditiis vitae!</p>
        <p>Illum iure maxime voluptatem modi totam.</p>
        <p>Pariatur exercitationem magnam esse vero qui?</p>
        <p>Minus a odit et voluptates nemo.</p>
        <hr />
      </article>
    </main>
    <!-- content-end -->

    <!-- footer-start -->
    <nav>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        fill="currentColor"
        class="bi bi-award-fill"
        viewBox="0 0 16 16"
      >
        <path
          d="M8 0l1.669.864 1.858.282.842 1.68 1.337 1.32L13.4 6l.306 1.854-1.337 1.32-.842 1.68-1.858.282L8 12l-1.669-.864-1.858-.282-.842-1.68-1.337-1.32L2.6 6l-.306-1.854 1.337-1.32.842-1.68L6.331.864 8 0z"
        />
        <path
          d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1 4 11.794z"
        />
      </svg>
      <ul>
        <li>
          <a href="index.html">Ana sayfa</a>
        </li>
        <li>
          <a href="about-us.html">Hakkımızda</a>
        </li>
        <li>
          <a href="contact.html">İletişim</a>
        </li>
      </ul>
    </nav>
    <!-- footer-end -->
  </body>
</html>


================================================
FILE: 01-html-kategorisi/bolum-sonu-calismasi/contact.html
================================================
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Iletisim Sayfasi</title>
  </head>
  <body>
    <!-- navbar-start-->
    <nav>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        fill="currentColor"
        class="bi bi-award-fill"
        viewBox="0 0 16 16"
      >
        <path
          d="M8 0l1.669.864 1.858.282.842 1.68 1.337 1.32L13.4 6l.306 1.854-1.337 1.32-.842 1.68-1.858.282L8 12l-1.669-.864-1.858-.282-.842-1.68-1.337-1.32L2.6 6l-.306-1.854 1.337-1.32.842-1.68L6.331.864 8 0z"
        />
        <path
          d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1 4 11.794z"
        />
      </svg>
      <ul>
        <li>
          <a href="index.html">Ana sayfa</a>
        </li>
        <li>
          <a href="about-us.html">Hakkımızda</a>
        </li>
        <li>
          <a href="contact.html">İletişim</a>
        </li>
      </ul>
    </nav>
    <!-- navbar-end-->
    <hr />

    <!-- content-start-->
    <main>
      <article>
        <h2>İletişim</h2>
        <p>Adres: jdkfldşsfşdl</p>
        <ul>
          <li>
            <a href="tel:02122223344">Telefon : 0212 222 33 44</a>
          </li>
          <li>
            <a href="mailto:info@kodluyoruz.org">mailto:info@kodluyoruz.org</a>
          </li>
        </ul>
        <hr />
      </article>
    </main>
    <!-- content-end-->

    <!-- footer-start-->
    <nav>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        fill="currentColor"
        class="bi bi-award-fill"
        viewBox="0 0 16 16"
      >
        <path
          d="M8 0l1.669.864 1.858.282.842 1.68 1.337 1.32L13.4 6l.306 1.854-1.337 1.32-.842 1.68-1.858.282L8 12l-1.669-.864-1.858-.282-.842-1.68-1.337-1.32L2.6 6l-.306-1.854 1.337-1.32.842-1.68L6.331.864 8 0z"
        />
        <path
          d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1 4 11.794z"
        />
      </svg>
      <ul>
        <li>
          <a href="index.html">Ana sayfa</a>
        </li>
        <li>
          <a href="about-us.html">Hakkımızda</a>
        </li>
        <li>
          <a href="contact.html">İletişim</a>
        </li>
      </ul>
    </nav>
    <!-- footer-end-->
  </body>
</html>


================================================
FILE: 01-html-kategorisi/bolum-sonu-calismasi/index.html
================================================
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ana sayfa</title>
  </head>
  <body>
    <!-- navbar-start-->
    <nav>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        fill="currentColor"
        class="bi bi-award-fill"
        viewBox="0 0 16 16"
      >
        <path
          d="M8 0l1.669.864 1.858.282.842 1.68 1.337 1.32L13.4 6l.306 1.854-1.337 1.32-.842 1.68-1.858.282L8 12l-1.669-.864-1.858-.282-.842-1.68-1.337-1.32L2.6 6l-.306-1.854 1.337-1.32.842-1.68L6.331.864 8 0z"
        />
        <path
          d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1 4 11.794z"
        />
      </svg>
      <ul>
        <li>
          <a href="index.html">Ana sayfa</a>
        </li>
        <li>
          <a href="about-us.html">Hakkımızda</a>
        </li>
        <li>
          <a href="contact.html">İletişim</a>
        </li>
      </ul>
    </nav>
    <!-- navbar-end-->
    <hr />

    <!-- content-start-->
    <main>
      <article>
        <h1>Yazı 1</h1>
        <img src="https://picsum.photos/id/34/600/300" alt="Yazı 1 " />
        <p>Lorem ipsum dolor sit amet consectetur.</p>
        <p>Provident est repellendus deserunt laudantium aspernatur!</p>
        <p>Quibusdam aliquid animi debitis blanditiis vitae!</p>
        <p>Illum iure maxime voluptatem modi totam.</p>
        <p>Pariatur exercitationem magnam esse vero qui?</p>
        <p>Minus a odit et voluptates nemo.</p>
        <hr />
      </article>
      <article>
        <h1>Yazı 2</h1>
        <img src="https://picsum.photos/id/35/600/300" alt="Yazı 2" />
        <p>Lorem ipsum dolor sit amet consectetur.</p>
        <p>Provident est repellendus deserunt laudantium aspernatur!</p>
        <p>Quibusdam aliquid animi debitis blanditiis vitae!</p>
        <p>Illum iure maxime voluptatem modi totam.</p>
        <p>Pariatur exercitationem magnam esse vero qui?</p>
        <p>Minus a odit et voluptates nemo.</p>
        <hr />
      </article>
      <article>
        <h1>Yazı 3</h1>
        <img src="https://picsum.photos/id/36/600/300" alt="Yazı 3" />
        <p>Lorem ipsum dolor sit amet consectetur.</p>
        <p>Provident est repellendus deserunt laudantium aspernatur!</p>
        <p>Quibusdam aliquid animi debitis blanditiis vitae!</p>
        <p>Illum iure maxime voluptatem modi totam.</p>
        <p>Pariatur exercitationem magnam esse vero qui?</p>
        <p>Minus a odit et voluptates nemo.</p>
        <hr />
      </article>
      <article>
        <h1>Yazı 4</h1>
        <img src="https://picsum.photos/id/37/600/300" alt="Yazı 2" />
        <p>Lorem ipsum dolor sit amet consectetur.</p>
        <p>Provident est repellendus deserunt laudantium aspernatur!</p>
        <p>Quibusdam aliquid animi debitis blanditiis vitae!</p>
        <p>Illum iure maxime voluptatem modi totam.</p>
        <p>Pariatur exercitationem magnam esse vero qui?</p>
        <p>Minus a odit et voluptates nemo.</p>
        <hr />
      </article>
    </main>
    <!-- content-end-->

    <!-- footer-start-->
    <nav>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        fill="currentColor"
        class="bi bi-award-fill"
        viewBox="0 0 16 16"
      >
        <path
          d="M8 0l1.669.864 1.858.282.842 1.68 1.337 1.32L13.4 6l.306 1.854-1.337 1.32-.842 1.68-1.858.282L8 12l-1.669-.864-1.858-.282-.842-1.68-1.337-1.32L2.6 6l-.306-1.854 1.337-1.32.842-1.68L6.331.864 8 0z"
        />
        <path
          d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1 4 11.794z"
        />
      </svg>
      <ul>
        <li>
          <a href="index.html">Ana sayfa</a>
        </li>
        <li>
          <a href="about-us.html">Hakkımızda</a>
        </li>
        <li>
          <a href="contact.html">İletişim</a>
        </li>
      </ul>
    </nav>
    <!-- footer-end-->
  </body>
</html>


================================================
FILE: 02-css-kategorisi/002-CSS-Inline-CSS-Temel-Kullanimi.html
================================================
<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS</title>
  </head>
  <body>
    <h1 style="color: deeppink; font-size: 64px">CSS Deneme</h1>
    <p style="color: blue; font-size: 20px">Lorem ipsum dolor sit.</p>
    <p style="color: green; font-size: 20px">Lorem ipsum dolor sit amet.</p>
  </body>
</html>


================================================
FILE: 02-css-kategorisi/003-Inline-Internal-ve-External-CSS-Kullanimlar/about-us.html
================================================
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/kodluyoruz.css" />
  </head>
  <body>
    <h2>Lorem, ipsum.</h2>
    <p>Lorem ipsum dolor sit amet.</p>
  </body>
</html>


================================================
FILE: 02-css-kategorisi/003-Inline-Internal-ve-External-CSS-Kullanimlar/contact.html
================================================
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=hz, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/kodluyoruz.css" />
  </head>
  <body>
    <h2>Contact</h2>
  </body>
</html>


================================================
FILE: 02-css-kategorisi/003-Inline-Internal-ve-External-CSS-Kullanimlar/css/kodluyoruz.css
================================================
h2 {
  color: red;
  font-size: 74px;
}
p {
  color: black;
  font-size: 40px;
}


================================================
FILE: 02-css-kategorisi/003-Inline-Internal-ve-External-CSS-Kullanimlar/index.html
================================================
<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS</title>
    <link rel="stylesheet" href="css/kodluyoruz.css" />
    <!-- Internal CSS: -->
    <style>
      h2 {
        color: red;
        font-size: 64px;
      }
      p {
        color: blue;
        font-size: 40px;
      }
    </style>
  </head>
  <body>
    <!-- 
    
    Inline CSS -> Etiket içinde kullanımı
    Internal CSS -> Head içinde style etiketinde yazılır.
    External CSS -> Head içinde link belirtilerek yazılır.
    
    -->

    <!-- inline css: -->
    <h1 style="color: purple">CSS Deneme</h1>

    <h2>Inline CSS</h2>
    <p>Lorem ipsum dolor sit.</p>
    <p>Lorem ipsum dolor sit amet consectetur.</p>
    <h2>Internal CSS</h2>
  </body>
</html>


================================================
FILE: 02-css-kategorisi/003-Inline-Internal-ve-External-CSS-Kullanimlar/inline-css.html
================================================
<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS</title>
  </head>
  <body>
    <h1 style="color: deeppink; font-size: 64px">CSS Deneme</h1>
    <p style="color: blue; font-size: 20px">Lorem ipsum dolor sit.</p>
    <p style="color: green; font-size: 20px">Lorem ipsum dolor sit amet.</p>
  </body>
</html>


================================================
FILE: 02-css-kategorisi/004-Aciklama-Satiri-ve-Genel-Font-Ozellikleri/about-us.html
================================================
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/kodluyoruz.css" />
  </head>
  <body>
    <h2>Lorem, ipsum.</h2>
    <p>Lorem ipsum dolor sit amet.</p>
  </body>
</html>


================================================
FILE: 02-css-kategorisi/004-Aciklama-Satiri-ve-Genel-Font-Ozellikleri/contact.html
================================================
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=hz, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/kodluyoruz.css" />
  </head>
  <body>
    <h2>Contact</h2>
  </body>
</html>


================================================
FILE: 02-css-kategorisi/004-Aciklama-Satiri-ve-Genel-Font-Ozellikleri/css/kodluyoruz.css
================================================
/************** Layout  ***************/
body {
  background-color: black;
  color: white;
  font-family: "Roboto", sans-serif;
}

/* 
h2 {
  color: blue;
  font-size: 4px;
} */

h2 {
  color: red;
  font-size: 74px;
  text-transform: uppercase;
}
p {
  font-size: 40px;
}

ul {
  color: blue;
}


================================================
FILE: 02-css-kategorisi/004-Aciklama-Satiri-ve-Genel-Font-Ozellikleri/index.html
================================================
<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS</title>
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;1,300&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="css/kodluyoruz.css" />
  </head>
  <body>
    <!-- 
    
    Inline CSS -> Etiket içinde kullanımı
    Internal CSS -> Head içinde style etiketinde yazılır.
    External CSS -> Head içinde link belirtilerek yazılır.
    
    -->

    <h1>CSS Deneme</h1>
    <h2>Inline CSS</h2>
    <p>Lorem ipsum dolor sit.</p>
    <p>Lorem ipsum dolor sit amet consectetur.</p>
    <h2>Internal CSS</h2>
    <ul>
      <li>Lorem.</li>
      <li>Optio.</li>
      <li>Quod!</li>
      <li>Blanditiis?</li>
    </ul>
  </body>
</html>


================================================
FILE: 02-css-kategorisi/005-CSS-Class-ve-ID-Kullanimi/css/kodluyoruz.css
================================================
/**************** Layout ************/

/* class -> .text-red {} */
/* #id-bilgisi -> .text-red {}  */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #2c2c2c;
}
h1 {
  font-size: 30px;
  color: #202020;
}

p {
  font-size: 20px;
}

#first-article {
  font-size: 40px;
}

.text-red {
  color: red;
}

.fs-14 {
  font-size: 14px;
}

.fs-20 {
  font-size: 20px;
}

.fs-30 {
  font-size: 30px;
}


================================================
FILE: 02-css-kategorisi/005-CSS-Class-ve-ID-Kullanimi/index.html
================================================
<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS</title>
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;1,300&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="css/kodluyoruz.css" />
  </head>
  <body>
    <article id="first-article">
      <h1>Lorem, ipsum dolor.</h1>
      <h2>Lorem, ipsum.</h2>
      <p>Lorem ipsum dolor sit.</p>
      <p>Magni expedita minima delectus.</p>
      <p>Nostrum dicta voluptate dolor?</p>
    </article>
    <article>
      <h1 class="fs-30 text-red">Praesentium, voluptates fugit.</h1>
      <h2>Sapiente, sint?</h2>
      <p>Nobis voluptates accusamus sequi!</p>
      <p>Id fugiat beatae iste.</p>
      <p>Repudiandae atque distinctio tempora.</p>
    </article>
    <article>
      <h1>Vitae, recusandae laudantium.</h1>
      <h2>Atque, qui?</h2>
      <p>Provident libero fugit facilis.</p>
      <p>Amet autem pariatur laborum?</p>
      <p>Autem debitis maiores aperiam!</p>
    </article>
  </body>
</html>


================================================
FILE: 02-css-kategorisi/006-CSS-Seciciler-Ile-Istedigimiz-Yerin-Secilebilmesi/css/kodluyoruz.css
================================================
/**************** Layout ************/

/* class -> .text-red {} */
/* #id-bilgisi -> .text-red {}  */

/* Css Selektors */

/*
 li:first-child {
     color: green;
 }

 li:last-child {
    color:aqua;
} */

/*
li:nth-child(odd){
     color: red;
}

li:nth-child(even){
        color: blue;
} */

li:nth-child(3n) {
  color: red;
}

.color-blue .fw-normal {
  color: blue;
  font-weight: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #2c2c2c;
}
h1 {
  font-size: 30px;
  color: #202020;
}

p {
  font-size: 20px;
}

#first-article {
  font-size: 40px;
}

.text-red {
  color: red;
}

.fs-14 {
  font-size: 14px;
}

.fs-20 {
  font-size: 20px;
}

.fs-30 {
  font-size: 30px;
}


================================================
FILE: 02-css-kategorisi/006-CSS-Seciciler-Ile-Istedigimiz-Yerin-Secilebilmesi/index.html
================================================
<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS</title>
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;1,300&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="css/kodluyoruz.css" />
  </head>
  <body>
    <ul>
      <li>Lorem.</li>
      <li>Eveniet?</li>
      <li>Eos?</li>
      <li>Nobis!</li>
      <li>Nemo.</li>
      <li>Quas.</li>
      <li>Quos?</li>
    </ul>
    <article id="first-article">
      <h1 class="color-blue">
        Lorem, <span class="fw-normal">ipsum</span> dolor.
      </h1>
      <h2>Lorem, ipsum.</h2>
      <p>Lorem ipsum dolor sit.</p>
      <p>Magni expedita minima delectus.</p>
      <p>Nostrum dicta voluptate dolor?</p>
    </article>
    <article>
      <h1 class="fs-30 text-red">Praesentium, voluptates fugit.</h1>
      <h2>Sapiente, sint?</h2>
      <p>Nobis voluptates accusamus sequi!</p>
      <p>Id fugiat beatae iste.</p>
      <p>Repudiandae atque distinctio tempora.</p>
    </article>
    <article>
      <h1>Vitae, recusandae laudantium.</h1>
      <h2>Atque, qui?</h2>
      <p>Provident libero fugit facilis.</p>
      <p>Amet autem pariatur laborum?</p>
      <p>Autem debitis maiores aperiam!</p>
    </article>
  </body>
</html>


================================================
FILE: 02-css-kategorisi/007-CSS-Margin-Padding-Width-Height-ile-Kutu-Ozelliklerinin-Kullanimi/css/kodluyoruz.css
================================================
body {
  margin: 0;
  padding: 0;
}
.container {
  width: 1000px;
  /*  
    margin-left: auto;
    margin-right: auto;*/
  margin: 50px auto 0;
}

.left-bar {
  width: 200px;
  float: left;
}
.content {
  width: 800px;
  float: left;
  height: auto;
}

.card {
  width: 20%;
  float: left;
  padding: 5%;
  margin-right: 3%;
  background-color: rgb(209, 209, 209);
  border-radius: 10px;
}

.clear {
  clear: both;
}

.box {
  background-color: red;
  width: 300px;
  height: 300px;
  padding: 10px;
  /*  margin: 10px; */
  margin-right: 10px;
  /*  margin-left: 10px; */
  /*  margin-top: 10px; */
  /*  margin-bottom: 10px; */
  float: left;

  margin-bottom: 10px;
  margin-top: 10px;
}

.bg-red {
  background-color: red;
}

.bg-green {
  background-color: green;
}
.bg-yellow {
  background-color: yellow;
}

/**************** Layout ************/

/* class -> .text-red {} */
/* #id-bilgisi -> .text-red {}  */

/* Css Selektors */

/*
 li:first-child {
     color: green;
 }

 li:last-child {
    color:aqua;
} */

/*
li:nth-child(odd){
     color: red;
}

li:nth-child(even){
        color: blue;
} 

li:nth-child(3n){
    color: red;
} 

 .color-blue .fw-normal {
     color: blue;
     font-weight: normal;
 }

 h1, h2, h3, h4, h5, h6 {
     color: #2c2c2c;
 }
 h1 {
     font-size: 30px;
     color: #202020;
 }

 p {
     font-size: 20px;
 }

 #first-article {
     font-size: 40px;
 }
   

.text-red {
    color: red; 
}

.fs-14 {
    font-size: 14px;

}

.fs-20 {
    font-size: 20px;
    
}

.fs-30 {
    font-size: 30px;

}

*/


================================================
FILE: 02-css-kategorisi/007-CSS-Margin-Padding-Width-Height-ile-Kutu-Ozelliklerinin-Kullanimi/index.html
================================================
<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS</title>
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;1,300&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="css/kodluyoruz.css" />
  </head>
  <body>
    <div class="container">
      <div class="left-bar">
        <h1>Left Bar</h1>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto,
        repellendus.
      </div>
      <div class="content">
        <div class="card">
          <h2>Lorem, ipsum dolor.</h2>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
        <div class="card">
          <h2>Blanditiis, labore .</h2>
          <p>Suscipit tempora commodi itaque.</p>
        </div>
        <div class="card">
          <h2>Ipsa, veniam mollitia?</h2>
          <p>Nam reiciendis quas eius aperiam.</p>
        </div>
      </div>
    </div>
  </body>
</html>


================================================
FILE: 02-css-kategorisi/008-Bolum-Sonu-Calismasi/css/kodluyoruz.css
================================================
body {
  margin: 0;
  padding: 0;
}

.gradient {
  background: linear-gradient(
    90deg,
    rgba(45, 156, 219, 0.6),
    rgba(155, 81, 224, 0.6)
  );
}

.btn {
  padding: 10px 20px;
  border-radius: 25px;
  color: white;
  text-decoration: none;
  box-shadow: 2px 2px 15px 7px rgba(0, 0, 0, 0.3);
}

.container {
  width: 1000px;
  /*  
    margin-left: auto;
    margin-right: auto;*/
  margin: 50px auto 0;
}

.left-bar {
  width: 200px;
  float: left;
}
.content {
  width: 800px;
  float: left;
  height: auto;
}

.card {
  width: 20%;
  float: left;
  padding: 5%;
  margin-right: 3%;
  background-color: rgb(209, 209, 209);
  border-radius: 10px;
}

.clear {
  clear: both;
}

.box {
  background-color: red;
  width: 300px;
  height: 300px;
  padding: 10px;
  /*  margin: 10px; */
  margin-right: 10px;
  /*  margin-left: 10px; */
  /*  margin-top: 10px; */
  /*  margin-bottom: 10px; */
  float: left;

  margin-bottom: 10px;
  margin-top: 10px;
}

.bg-red {
  background-color: red;
}

.bg-green {
  background-color: green;
}
.bg-yellow {
  background-color: yellow;
}

/**************** Layout ************/

/* class -> .text-red {} */
/* #id-bilgisi -> .text-red {}  */

/* Css Selektors */

/*
 li:first-child {
     color: green;
 }

 li:last-child {
    color:aqua;
} */

/*
li:nth-child(odd){
     color: red;
}

li:nth-child(even){
        color: blue;
} 

li:nth-child(3n){
    color: red;
} 

 .color-blue .fw-normal {
     color: blue;
     font-weight: normal;
 }

 h1, h2, h3, h4, h5, h6 {
     color: #2c2c2c;
 }
 h1 {
     font-size: 30px;
     color: #202020;
 }

 p {
     font-size: 20px;
 }

 #first-article {
     font-size: 40px;
 }
   

.text-red {
    color: red; 
}

.fs-14 {
    font-size: 14px;

}

.fs-20 {
    font-size: 20px;
    
}

.fs-30 {
    font-size: 30px;

}

*/


================================================
FILE: 02-css-kategorisi/008-Bolum-Sonu-Calismasi/index.html
================================================
<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS</title>
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;1,300&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="css/kodluyoruz.css" />
  </head>
  <body>
    <div class="container">
      <div class="left-bar">
        <h1>Left Bar</h1>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto,
        repellendus.
      </div>
      <div class="content">
        <div class="card">
          <h2>Lorem, ipsum dolor.</h2>
          <p>Lorem ipsum dolor sit amet.</p>
          <a href="" class="gradient btn">Başvur</a>
        </div>
        <div class="card">
          <h2>Blanditiis, labore .</h2>
          <p>Suscipit tempora commodi itaque.</p>
        </div>
        <div class="card">
          <h2>Ipsa, veniam mollitia?</h2>
          <p>Nam reiciendis quas eius aperiam.</p>
        </div>
      </div>
    </div>
  </body>
</html>


================================================
FILE: 02-css-kategorisi/README.md
================================================
# CSS Temelleri

================================================
FILE: 03-bootstrap-kategorisi/003.html
================================================
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
      integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
      crossorigin="anonymous"
    />

    <title>Hello, world!</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-sm bg-primary">
          <h1 class="text-danger">Hello world</h1>
          One of there columns
        </div>
        <div class="col-sm bg-secondary">One of there columns</div>
        <div class="col-sm bg-success">One of there columns</div>
      </div>
    </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
      crossorigin="anonymous"
    ></script>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    -->
  </body>
</html>


================================================
FILE: 03-bootstrap-kategorisi/004.html
================================================
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
      integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
      crossorigin="anonymous"
    />

    <title>Hello, world!</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 bg-primary">
          Lorem, ipsum.
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 bg-secondary">
          At, aperiam.
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 bg-info">
          Animi, accusamus!
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 bg-danger">
          Libero, quia!
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 bg-warning">
          Eveniet, maxime.
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 bg-success">
          Totam, beatae.
        </div>
      </div>
    </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
      crossorigin="anonymous"
    ></script>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    -->
  </body>
</html>


================================================
FILE: 03-bootstrap-kategorisi/005.html
================================================
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
      integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
      crossorigin="anonymous"
    />

    <title>Hello, world!</title>
  </head>
  <body>
    <main class="container mt-3">
      <div class="row">
        <section class="col-sm-8">
          <article class="row mb-3">
            <!-- articles-->
            <div class="col-sm-8">
              <h2>Lorem ipsum dolor sit.</h2>
              <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                Voluptate magni provident expedita tenetur nulla corrupti eos
                quam recusandae? Laboriosam reiciendis dolor ducimus
                consequatur, impedit nam blanditiis modi suscipit ut earum.
              </p>
            </div>
            <div class="col-sm-4">
              <img
                class="w-100 img-thumbnail"
                src="https://picsum.photos/id/22/400/300"
                alt="Article1"
              />
            </div>
          </article>
          <article class="row mb-3">
            <div class="col-sm-8">
              <h2>Lorem ipsum dolor sit.</h2>
              <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                Voluptate magni provident expedita tenetur nulla corrupti eos
                quam recusandae? Laboriosam reiciendis dolor ducimus
                consequatur, impedit nam blanditiis modi suscipit ut earum.
              </p>
            </div>
            <div class="col-sm-4">
              <img
                class="w-100 img-thumbnail"
                src="https://picsum.photos/id/34/400/300"
                alt="Article1"
              />
            </div>
          </article>
          <article class="row mb-3">
            <div class="col-sm-8">
              <h2>Lorem ipsum dolor sit.</h2>
              <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                Voluptate magni provident expedita tenetur nulla corrupti eos
                quam recusandae? Laboriosam reiciendis dolor ducimus
                consequatur, impedit nam blanditiis modi suscipit ut earum.
              </p>
            </div>
            <div class="col-sm-4">
              <img
                class="w-100 img-thumbnail"
                src="https://picsum.photos/400/300"
                alt="Article1"
              />
            </div>
          </article>
        </section>
        <aside class="col-sm-4">
          <ul>
            <li>Lorem, ipsum.</li>
            <li>Corporis, esse?</li>
            <li>Eligendi, sit!</li>
            <li>Nobis, tempora.</li>
          </ul>
        </aside>
      </div>
      <!-- bulunduğu yerde 12 lik grid sistem oluşturmamızı sağlar-->
    </main>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
      crossorigin="anonymous"
    ></script>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    -->
  </body>
</html>


================================================
FILE: 03-bootstrap-kategorisi/006.html
================================================
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
      integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
      crossorigin="anonymous"
    />

    <title>Koduluyoruz</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Koduluyoruz</a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNavAltMarkup"
          aria-controls="navbarNavAltMarkup"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav ms-auto">
            <a class="nav-link active" aria-current="page" href="#">Anasayfa</a>
            <a class="nav-link" href="#">Hakkımızda</a>
            <a class="nav-link" href="#">Eğitimler</a>
            <a class="nav-link" href="#">İletişim</a>
          </div>
        </div>
      </div>
    </nav>

    <!-- carousel start -->
    <div
      id="carouselExampleIndicators"
      class="carousel slide"
      data-ride="carousel"
    >
      <ol class="carousel-indicators">
        <li
          data-target="#carouselExampleIndicators"
          data-slide-to="0"
          class="active"
        ></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img
            src="https://picsum.photos/id/24/1600/600"
            class="d-block w-100"
            alt="..."
          />
        </div>
        <div class="carousel-item">
          <img
            src="https://picsum.photos/id/34/1600/600"
            class="d-block w-100"
            alt="..."
          />
        </div>
        <div class="carousel-item">
          <img
            src="https://picsum.photos/id/44/1600/600"
            class="d-block w-100"
            alt="..."
          />
        </div>
      </div>
      <a
        class="carousel-control-prev"
        href="#carouselExampleIndicators"
        role="button"
        data-slide="prev"
      >
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a
        class="carousel-control-next"
        href="#carouselExampleIndicators"
        role="button"
        data-slide="next"
      >
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
    <!-- carousel end -->

    <!-- container-start -->
    <div class="container mt-5">
      <div class="row">
        <!-- row - start -->
        <div class="col-sm-6">
          <!-- about us - start-->

          <img
            class="w-100 img-thumbnail"
            src="https://picsum.photos/id/88/600/400"
            alt=""
          />
        </div>
        <div class="col-sm-6">
          <h2>Hakkimizda</h2>
          <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit.
            Voluptates, quos.
          </p>
          <p>
            Unde, enim. Optio voluptates quo doloribus cupiditate omnis ipsa
            voluptatum.
          </p>
          <p>Doloribus vero eaque ut harum omnis a ratione nihil ex.</p>
          <p>
            Tenetur, vel quas quos amet reiciendis asperiores quae possimus
            repellat!
          </p>
        </div>
        <!-- about us - end-->
      </div>
      <!-- row - end -->

      <!-- products - start-->
      <div class="row mt-3">
        <div class="col-sm-4">
          <div class="card">
            <img
              src="https://picsum.photos/id/18/400/300"
              class="card-img-top"
              alt="..."
            />
            <div class="card-body">
              <h5 class="card-title">Urun 1</h5>
              <p class="card-text">
                Some quick example text to build on the card title and make up
                the bulk of the card's content.
              </p>
              <a href="#" class="btn btn-primary">İncele</a>
            </div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="card">
            <img
              src="https://picsum.photos/id/38/400/300"
              class="card-img-top"
              alt="..."
            />
            <div class="card-body">
              <h5 class="card-title">Urun 2</h5>
              <p class="card-text">
                Some quick example text to build on the card title and make up
                the bulk of the card's content.
              </p>
              <a href="#" class="btn btn-primary">İncele</a>
            </div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="card">
            <img
              src="https://picsum.photos/id/68/400/300"
              class="card-img-top"
              alt="..."
            />
            <div class="card-body">
              <h5 class="card-title">Urun 3</h5>
              <p class="card-text">
                Some quick example text to build on the card title and make up
                the bulk of the card's content.
              </p>
              <a href="#" class="btn btn-primary">İncele</a>
            </div>
          </div>
        </div>
      </div>

      <!-- product - end -->

      <!-- pictures - start -->
      <div class="row mt-5">
        <div class="col-12">
          <h4>Resimler</h4>
        </div>
        <div class="col-sm">
          <img
            src="https://picsum.photos/id/18/400/300"
            alt=""
            class="w-100 img-thumbnail"
          />
        </div>
        <div class="col-sm">
          <img
            src="https://picsum.photos/id/38/400/300"
            alt=""
            class="w-100 img-thumbnail"
          />
        </div>
        <div class="col-sm">
          <img
            src="https://picsum.photos/id/48/400/300"
            alt=""
            class="w-100 img-thumbnail"
          />
        </div>
        <div class="col-sm">
          <img
            src="https://picsum.photos/id/58/400/300"
            alt=""
            class="w-100 img-thumbnail"
          />
        </div>
        <div class="col-sm">
          <img
            src="https://picsum.photos/id/98/400/300"
            alt=""
            class="w-100 img-thumbnail"
          />
        </div>
      </div>
      <!-- pictures - end -->
    </div>
    <!-- container-end-->

    <!-- footer - start -->
    <div class="bg-dark text-lıght">
      <footer class="container py-5 mt-5">
        <div class="row">
          <div class="col-12 col-md">
            <h5>Kodluyoruz</h5>
            <small class="d-block mb-3 text-muted">© 2017-2020</small>
          </div>
          <div class="col-6 col-md">
            <h5>Features</h5>
            <ul class="list-unstyled text-small">
              <li><a class="link-secondary" href="#">Cool stuff</a></li>
              <li><a class="link-secondary" href="#">Random feature</a></li>
              <li><a class="link-secondary" href="#">Team feature</a></li>
              <li>
                <a class="link-secondary" href="#">Stuff for developers</a>
              </li>
              <li><a class="link-secondary" href="#">Another one</a></li>
              <li><a class="link-secondary" href="#">Last time</a></li>
            </ul>
          </div>
          <div class="col-6 col-md">
            <h5>Resources</h5>
            <ul class="list-unstyled text-small">
              <li><a class="link-secondary" href="#">Resource name</a></li>
              <li><a class="link-secondary" href="#">Resource</a></li>
              <li><a class="link-secondary" href="#">Another resource</a></li>
              <li><a class="link-secondary" href="#">Final resource</a></li>
            </ul>
          </div>
          <div class="col-6 col-md">
            <h5>Resources</h5>
            <ul class="list-unstyled text-small">
              <li><a class="link-secondary" href="#">Business</a></li>
              <li><a class="link-secondary" href="#">Education</a></li>
              <li><a class="link-secondary" href="#">Government</a></li>
              <li><a class="link-secondary" href="#">Gaming</a></li>
            </ul>
          </div>
          <div class="col-6 col-md">
            <h5>About</h5>
            <ul class="list-unstyled text-small">
              <li><a class="link-secondary" href="#">Team</a></li>
              <li><a class="link-secondary" href="#">Locations</a></li>
              <li><a class="link-secondary" href="#">Privacy</a></li>
              <li><a class="link-secondary" href="#">Terms</a></li>
            </ul>
          </div>
        </div>
      </footer>
    </div>
    <!-- footer - end -->

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
      crossorigin="anonymous"
    ></script>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    -->
  </body>
</html>


================================================
FILE: 03-bootstrap-kategorisi/008.html
================================================
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
      integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
      crossorigin="anonymous"
    />

    <title>Kodluyoruz</title>
  </head>
  <body>
    <h1 class="d-block d-sm-none bg-warning">
      XS - Mobil Görünümlü Sitemize Hoşgeldiniz
    </h1>
    <h1 class="d-none d-sm-block d-md-none bg-primary">
      SM - Tablet Görünümlü Sitemize Hoşgeldiniz
    </h1>
    <h1 class="d-none d-md-block d-lg-none bg-success">
      MD - Laptop Görünümlü Sitemize Hoşgeldiniz
    </h1>
    <h1 class="d-none d-lg-block d-xl-none bg-danger">
      LG - Normal Görünümlü Sitemize Hoşgeldiniz
    </h1>
    <h1 class="d-none d-xl-block bg-info">
      XL - Büyük Görünümlü Sitemize Hoşgeldiniz
    </h1>

    <div class="container">
      <div class="row">
        <div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 bg-info">1 Lorem.</div>
        <div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 bg-warning">
          2 Esse.
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 bg-danger">
          3 Ipsam!
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 bg-success">
          4 Magnam.
        </div>
        <div
          class="col-sm-6 col-md-4 col-lg-3 col-xl-2 bg-primary d-lg-none d-xl-block"
        >
          5 Voluptatem?
        </div>
        <div
          class="col-sm-6 col-md-4 col-lg-3 col-xl-2 bg-secondary d-lg-none d-xl-block"
        >
          6 Eaque?
        </div>
      </div>
    </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
      crossorigin="anonymous"
    ></script>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    -->
  </body>
</html>


================================================
FILE: 03-bootstrap-kategorisi/009.html
================================================
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
      integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
      crossorigin="anonymous"
    />

    <title>Hello, world!</title>
    <style>
      .shadow {
        -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
        box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
      }

      .btn-rounded {
        border-radius: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container mt-5">
      <div class="row">
        <div class="col-12 mb-3">
          <h1 class="text-center">Kodluyoruz Nasıl Çalışır?</h1>
        </div>
        <div class="col-sm text-center">
          <img
            src="https://cdn.sanity.io/images/9kdepi1d/production/294d797750d6b6b1a0e00fa8ab122997db92549e-863x574.svg?w=320&h=213&fit=crop&fm=webp"
            alt=""
          />
          <h2>Becerilerini Geliştir</h2>
          <p>Quas dolor alias explicabo adipisci accusamus!</p>
          <a href="" class="btn btn-info btn-rounded btn-lg">Başvur</a>
        </div>

        <div class="col-sm text-center">
          <img
            src="https://cdn.sanity.io/images/9kdepi1d/production/6a5ed2a57036cbd99732311d8558882d2eaa6717-1088x826.svg?w=320&h=243&fit=crop&fm=webp"
            alt=""
          />
          <h2>Mezunlar Kulübü'ne Katıl</h2>
          <p>Quas dolor alias explicabo adipisci accusamus!</p>
          <a href="" class="btn btn-info btn-rounded btn-lg">Kulüp Hakkında</a>
        </div>
        <div class="col-sm text-center">
          <img
            src="https://cdn.sanity.io/images/9kdepi1d/production/a0d5d919e567c1ca122529eea4a6350ac2997198-926x749.svg?w=320&h=259&fit=crop&fm=webp"
            alt=""
          />
          <h2>Şirketlerle Buluş</h2>
          <p>Quas dolor alias explicabo adipisci accusamus.</p>
          <a href="" class="btn btn-info btn-rounded btn-lg"
            >Şirketlerle Çalışmalarımız</a
          >
        </div>
      </div>
    </div>

    <div style="background-color: rgba(41, 41, 41, 0.1)" class="py-5 mt-5">
      <div class="container mt-5">
        <div class="row">
          <div class="col-12 text-center">
            <h1>Eşitlik</h1>
            <p class="lead">
              Potansiyeli yüksek ve sosyoekonomik ihtiyacı olan gençlere
              ücretsiz eğitim sağlıyoruz
            </p>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-10 offset-sm-1 shadow">
            <div class="row bg-light p-3">
              <div class="col-sm border-end border-dark">
                <h2 class="text-warning text-center">%80</h2>
                <p>Bootcamp'lerden ortalama mezuniyet oranı</p>
              </div>
              <div class="col-sm border-end border-dark">
                <h2 class="text-warning text-center">%45</h2>
                <p>Kadın öğrenci oranımız - Eşitliği destekliyoruz!</p>
              </div>
              <div class="col-sm">
                <h2 class="text-warning text-center">%60</h2>
                <p>Mezun olduktan sonra 3 ay içinde işe yerleşme oranı</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
      crossorigin="anonymous"
    ></script>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    -->
  </body>
</html>


================================================
FILE: 03-bootstrap-kategorisi/010.html
================================================
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
      integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
      crossorigin="anonymous"
    />

    <title>Hello, world!</title>
  </head>
  <body>
    <div class="container mt-5">
      <div class="row">
        <div class="col-sm-3 order-2 order-sm-1 mt-5 mt-sm-0">
          <h4>Kategoriler</h4>
          <ul class="list-group">
            <li
              class="list-group-item d-flex justify-content-between align-items-center"
            >
              Cras justo odio
              <span class="badge bg-primary rounded-pill">14</span>
            </li>
            <li
              class="list-group-item d-flex justify-content-between align-items-center"
            >
              Dapibus ac facilisis in
              <span class="badge bg-primary rounded-pill">2</span>
            </li>
            <li
              class="list-group-item d-flex justify-content-between align-items-center"
            >
              Morbi leo risus
              <span class="badge bg-primary rounded-pill">1</span>
            </li>
          </ul>
        </div>

        <div class="col-sm-9 order-1 order-sm-2">
          <div class="row">
            <div class="col-sm-4 mb-3">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                  <p class="card-text">
                    Some quick example text to build on the card title and make
                    up the bulk of the card's content.
                  </p>
                  <a href="#" class="card-link">Card link</a>
                  <a href="#" class="card-link">Another link</a>
                </div>
              </div>
            </div>
            <div class="col-sm-4 mb-3">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                  <p class="card-text">
                    Some quick example text to build on the card title and make
                    up the bulk of the card's content.
                  </p>
                  <a href="#" class="card-link">Card link</a>
                  <a href="#" class="card-link">Another link</a>
                </div>
              </div>
            </div>
            <div class="col-sm-4 mb-3">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                  <p class="card-text">
                    Some quick example text to build on the card title and make
                    up the bulk of the card's content.
                  </p>
                  <a href="#" class="card-link">Card link</a>
                  <a href="#" class="card-link">Another link</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
      crossorigin="anonymous"
    ></script>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    -->
  </body>
</html>


================================================
FILE: 03-bootstrap-kategorisi/README.md
================================================
# Bootstrap Temelleri


================================================
FILE: 03-bootstrap-kategorisi/bolum-sonu-projesi/css/bootstrap-grid.css
================================================
/*!
 * Bootstrap Grid v4.5.3 (https://getbootstrap.com/)
 * Copyright 2011-2020 The Bootstrap Authors
 * Copyright 2011-2020 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
html {
  box-sizing: border-box;
  -ms-overflow-style: scrollbar;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container, .container-sm {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container, .container-sm, .container-md {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container, .container-sm, .container-md, .container-lg {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1140px;
  }
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}

.row-cols-1 > * {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

.row-cols-2 > * {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.row-cols-3 > * {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.row-cols-4 > * {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.row-cols-5 > * {
  -ms-flex: 0 0 20%;
  flex: 0 0 20%;
  max-width: 20%;
}

.row-cols-6 > * {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.col-auto {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

.col-1 {
  -ms-flex: 0 0 8.333333%;
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}

.col-2 {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.col-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.col-5 {
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}

.col-6 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  -ms-flex: 0 0 58.333333%;
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}

.col-8 {
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

.col-9 {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  -ms-flex: 0 0 83.333333%;
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}

.col-11 {
  -ms-flex: 0 0 91.666667%;
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}

.col-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

.order-first {
  -ms-flex-order: -1;
  order: -1;
}

.order-last {
  -ms-flex-order: 13;
  order: 13;
}

.order-0 {
  -ms-flex-order: 0;
  order: 0;
}

.order-1 {
  -ms-flex-order: 1;
  order: 1;
}

.order-2 {
  -ms-flex-order: 2;
  order: 2;
}

.order-3 {
  -ms-flex-order: 3;
  order: 3;
}

.order-4 {
  -ms-flex-order: 4;
  order: 4;
}

.order-5 {
  -ms-flex-order: 5;
  order: 5;
}

.order-6 {
  -ms-flex-order: 6;
  order: 6;
}

.order-7 {
  -ms-flex-order: 7;
  order: 7;
}

.order-8 {
  -ms-flex-order: 8;
  order: 8;
}

.order-9 {
  -ms-flex-order: 9;
  order: 9;
}

.order-10 {
  -ms-flex-order: 10;
  order: 10;
}

.order-11 {
  -ms-flex-order: 11;
  order: 11;
}

.order-12 {
  -ms-flex-order: 12;
  order: 12;
}

.offset-1 {
  margin-left: 8.333333%;
}

.offset-2 {
  margin-left: 16.666667%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-4 {
  margin-left: 33.333333%;
}

.offset-5 {
  margin-left: 41.666667%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-7 {
  margin-left: 58.333333%;
}

.offset-8 {
  margin-left: 66.666667%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-10 {
  margin-left: 83.333333%;
}

.offset-11 {
  margin-left: 91.666667%;
}

@media (min-width: 576px) {
  .col-sm {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .row-cols-sm-1 > * {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .row-cols-sm-2 > * {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .row-cols-sm-3 > * {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .row-cols-sm-4 > * {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .row-cols-sm-5 > * {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
  .row-cols-sm-6 > * {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-sm-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-sm-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-sm-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-sm-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-sm-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-sm-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-sm-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-sm-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-sm-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-sm-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-sm-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-sm-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-sm-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-sm-first {
    -ms-flex-order: -1;
    order: -1;
  }
  .order-sm-last {
    -ms-flex-order: 13;
    order: 13;
  }
  .order-sm-0 {
    -ms-flex-order: 0;
    order: 0;
  }
  .order-sm-1 {
    -ms-flex-order: 1;
    order: 1;
  }
  .order-sm-2 {
    -ms-flex-order: 2;
    order: 2;
  }
  .order-sm-3 {
    -ms-flex-order: 3;
    order: 3;
  }
  .order-sm-4 {
    -ms-flex-order: 4;
    order: 4;
  }
  .order-sm-5 {
    -ms-flex-order: 5;
    order: 5;
  }
  .order-sm-6 {
    -ms-flex-order: 6;
    order: 6;
  }
  .order-sm-7 {
    -ms-flex-order: 7;
    order: 7;
  }
  .order-sm-8 {
    -ms-flex-order: 8;
    order: 8;
  }
  .order-sm-9 {
    -ms-flex-order: 9;
    order: 9;
  }
  .order-sm-10 {
    -ms-flex-order: 10;
    order: 10;
  }
  .order-sm-11 {
    -ms-flex-order: 11;
    order: 11;
  }
  .order-sm-12 {
    -ms-flex-order: 12;
    order: 12;
  }
  .offset-sm-0 {
    margin-left: 0;
  }
  .offset-sm-1 {
    margin-left: 8.333333%;
  }
  .offset-sm-2 {
    margin-left: 16.666667%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .offset-sm-4 {
    margin-left: 33.333333%;
  }
  .offset-sm-5 {
    margin-left: 41.666667%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  .offset-sm-7 {
    margin-left: 58.333333%;
  }
  .offset-sm-8 {
    margin-left: 66.666667%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  .offset-sm-10 {
    margin-left: 83.333333%;
  }
  .offset-sm-11 {
    margin-left: 91.666667%;
  }
}

@media (min-width: 768px) {
  .col-md {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .row-cols-md-1 > * {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .row-cols-md-2 > * {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .row-cols-md-3 > * {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .row-cols-md-4 > * {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .row-cols-md-5 > * {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
  .row-cols-md-6 > * {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-md-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-md-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-md-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-md-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-md-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-md-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-md-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-md-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-md-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-md-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-md-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-md-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-md-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-md-first {
    -ms-flex-order: -1;
    order: -1;
  }
  .order-md-last {
    -ms-flex-order: 13;
    order: 13;
  }
  .order-md-0 {
    -ms-flex-order: 0;
    order: 0;
  }
  .order-md-1 {
    -ms-flex-order: 1;
    order: 1;
  }
  .order-md-2 {
    -ms-flex-order: 2;
    order: 2;
  }
  .order-md-3 {
    -ms-flex-order: 3;
    order: 3;
  }
  .order-md-4 {
    -ms-flex-order: 4;
    order: 4;
  }
  .order-md-5 {
    -ms-flex-order: 5;
    order: 5;
  }
  .order-md-6 {
    -ms-flex-order: 6;
    order: 6;
  }
  .order-md-7 {
    -ms-flex-order: 7;
    order: 7;
  }
  .order-md-8 {
    -ms-flex-order: 8;
    order: 8;
  }
  .order-md-9 {
    -ms-flex-order: 9;
    order: 9;
  }
  .order-md-10 {
    -ms-flex-order: 10;
    order: 10;
  }
  .order-md-11 {
    -ms-flex-order: 11;
    order: 11;
  }
  .order-md-12 {
    -ms-flex-order: 12;
    order: 12;
  }
  .offset-md-0 {
    margin-left: 0;
  }
  .offset-md-1 {
    margin-left: 8.333333%;
  }
  .offset-md-2 {
    margin-left: 16.666667%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  .offset-md-4 {
    margin-left: 33.333333%;
  }
  .offset-md-5 {
    margin-left: 41.666667%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .offset-md-7 {
    margin-left: 58.333333%;
  }
  .offset-md-8 {
    margin-left: 66.666667%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  .offset-md-10 {
    margin-left: 83.333333%;
  }
  .offset-md-11 {
    margin-left: 91.666667%;
  }
}

@media (min-width: 992px) {
  .col-lg {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .row-cols-lg-1 > * {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .row-cols-lg-2 > * {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .row-cols-lg-3 > * {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .row-cols-lg-4 > * {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .row-cols-lg-5 > * {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
  .row-cols-lg-6 > * {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-lg-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-lg-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-lg-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-lg-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-lg-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-lg-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-lg-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-lg-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-lg-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-lg-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-lg-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-lg-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-lg-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-lg-first {
    -ms-flex-order: -1;
    order: -1;
  }
  .order-lg-last {
    -ms-flex-order: 13;
    order: 13;
  }
  .order-lg-0 {
    -ms-flex-order: 0;
    order: 0;
  }
  .order-lg-1 {
    -ms-flex-order: 1;
    order: 1;
  }
  .order-lg-2 {
    -ms-flex-order: 2;
    order: 2;
  }
  .order-lg-3 {
    -ms-flex-order: 3;
    order: 3;
  }
  .order-lg-4 {
    -ms-flex-order: 4;
    order: 4;
  }
  .order-lg-5 {
    -ms-flex-order: 5;
    order: 5;
  }
  .order-lg-6 {
    -ms-flex-order: 6;
    order: 6;
  }
  .order-lg-7 {
    -ms-flex-order: 7;
    order: 7;
  }
  .order-lg-8 {
    -ms-flex-order: 8;
    order: 8;
  }
  .order-lg-9 {
    -ms-flex-order: 9;
    order: 9;
  }
  .order-lg-10 {
    -ms-flex-order: 10;
    order: 10;
  }
  .order-lg-11 {
    -ms-flex-order: 11;
    order: 11;
  }
  .order-lg-12 {
    -ms-flex-order: 12;
    order: 12;
  }
  .offset-lg-0 {
    margin-left: 0;
  }
  .offset-lg-1 {
    margin-left: 8.333333%;
  }
  .offset-lg-2 {
    margin-left: 16.666667%;
  }
  .offset-lg-3 {
    margin-left: 25%;
  }
  .offset-lg-4 {
    margin-left: 33.333333%;
  }
  .offset-lg-5 {
    margin-left: 41.666667%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .offset-lg-7 {
    margin-left: 58.333333%;
  }
  .offset-lg-8 {
    margin-left: 66.666667%;
  }
  .offset-lg-9 {
    margin-left: 75%;
  }
  .offset-lg-10 {
    margin-left: 83.333333%;
  }
  .offset-lg-11 {
    margin-left: 91.666667%;
  }
}

@media (min-width: 1200px) {
  .col-xl {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .row-cols-xl-1 > * {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .row-cols-xl-2 > * {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .row-cols-xl-3 > * {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .row-cols-xl-4 > * {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .row-cols-xl-5 > * {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
  .row-cols-xl-6 > * {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-xl-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-xl-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-xl-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-xl-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-xl-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-xl-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-xl-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-xl-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-xl-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-xl-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-xl-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-xl-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-xl-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-xl-first {
    -ms-flex-order: -1;
    order: -1;
  }
  .order-xl-last {
    -ms-flex-order: 13;
    order: 13;
  }
  .order-xl-0 {
    -ms-flex-order: 0;
    order: 0;
  }
  .order-xl-1 {
    -ms-flex-order: 1;
    order: 1;
  }
  .order-xl-2 {
    -ms-flex-order: 2;
    order: 2;
  }
  .order-xl-3 {
    -ms-flex-order: 3;
    order: 3;
  }
  .order-xl-4 {
    -ms-flex-order: 4;
    order: 4;
  }
  .order-xl-5 {
    -ms-flex-order: 5;
    order: 5;
  }
  .order-xl-6 {
    -ms-flex-order: 6;
    order: 6;
  }
  .order-xl-7 {
    -ms-flex-order: 7;
    order: 7;
  }
  .order-xl-8 {
    -ms-flex-order: 8;
    order: 8;
  }
  .order-xl-9 {
    -ms-flex-order: 9;
    order: 9;
  }
  .order-xl-10 {
    -ms-flex-order: 10;
    order: 10;
  }
  .order-xl-11 {
    -ms-flex-order: 11;
    order: 11;
  }
  .order-xl-12 {
    -ms-flex-order: 12;
    order: 12;
  }
  .offset-xl-0 {
    margin-left: 0;
  }
  .offset-xl-1 {
    margin-left: 8.333333%;
  }
  .offset-xl-2 {
    margin-left: 16.666667%;
  }
  .offset-xl-3 {
    margin-left: 25%;
  }
  .offset-xl-4 {
    margin-left: 33.333333%;
  }
  .offset-xl-5 {
    margin-left: 41.666667%;
  }
  .offset-xl-6 {
    margin-left: 50%;
  }
  .offset-xl-7 {
    margin-left: 58.333333%;
  }
  .offset-xl-8 {
    margin-left: 66.666667%;
  }
  .offset-xl-9 {
    margin-left: 75%;
  }
  .offset-xl-10 {
    margin-left: 83.333333%;
  }
  .offset-xl-11 {
    margin-left: 91.666667%;
  }
}

.d-none {
  display: none !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

.d-table {
  display: table !important;
}

.d-table-row {
  display: table-row !important;
}

.d-table-cell {
  display: table-cell !important;
}

.d-flex {
  display: -ms-flexbox !important;
  display: flex !important;
}

.d-inline-flex {
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
}

@media (min-width: 576px) {
  .d-sm-none {
    display: none !important;
  }
  .d-sm-inline {
    display: inline !important;
  }
  .d-sm-inline-block {
    display: inline-block !important;
  }
  .d-sm-block {
    display: block !important;
  }
  .d-sm-table {
    display: table !important;
  }
  .d-sm-table-row {
    display: table-row !important;
  }
  .d-sm-table-cell {
    display: table-cell !important;
  }
  .d-sm-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-sm-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

@media (min-width: 768px) {
  .d-md-none {
    display: none !important;
  }
  .d-md-inline {
    display: inline !important;
  }
  .d-md-inline-block {
    display: inline-block !important;
  }
  .d-md-block {
    display: block !important;
  }
  .d-md-table {
    display: table !important;
  }
  .d-md-table-row {
    display: table-row !important;
  }
  .d-md-table-cell {
    display: table-cell !important;
  }
  .d-md-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-md-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }
  .d-lg-inline {
    display: inline !important;
  }
  .d-lg-inline-block {
    display: inline-block !important;
  }
  .d-lg-block {
    display: block !important;
  }
  .d-lg-table {
    display: table !important;
  }
  .d-lg-table-row {
    display: table-row !important;
  }
  .d-lg-table-cell {
    display: table-cell !important;
  }
  .d-lg-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-lg-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

@media (min-width: 1200px) {
  .d-xl-none {
    display: none !important;
  }
  .d-xl-inline {
    display: inline !important;
  }
  .d-xl-inline-block {
    display: inline-block !important;
  }
  .d-xl-block {
    display: block !important;
  }
  .d-xl-table {
    display: table !important;
  }
  .d-xl-table-row {
    display: table-row !important;
  }
  .d-xl-table-cell {
    display: table-cell !important;
  }
  .d-xl-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-xl-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

@media print {
  .d-print-none {
    display: none !important;
  }
  .d-print-inline {
    display: inline !important;
  }
  .d-print-inline-block {
    display: inline-block !important;
  }
  .d-print-block {
    display: block !important;
  }
  .d-print-table {
    display: table !important;
  }
  .d-print-table-row {
    display: table-row !important;
  }
  .d-print-table-cell {
    display: table-cell !important;
  }
  .d-print-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-print-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

.flex-row {
  -ms-flex-direction: row !important;
  flex-direction: row !important;
}

.flex-column {
  -ms-flex-direction: column !important;
  flex-direction: column !important;
}

.flex-row-reverse {
  -ms-flex-direction: row-reverse !important;
  flex-direction: row-reverse !important;
}

.flex-column-reverse {
  -ms-flex-direction: column-reverse !important;
  flex-direction: column-reverse !important;
}

.flex-wrap {
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
}

.flex-nowrap {
  -ms-flex-wrap: nowrap !important;
  flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
  -ms-flex-wrap: wrap-reverse !important;
  flex-wrap: wrap-reverse !important;
}

.flex-fill {
  -ms-flex: 1 1 auto !important;
  flex: 1 1 auto !important;
}

.flex-grow-0 {
  -ms-flex-positive: 0 !important;
  flex-grow: 0 !important;
}

.flex-grow-1 {
  -ms-flex-positive: 1 !important;
  flex-grow: 1 !important;
}

.flex-shrink-0 {
  -ms-flex-negative: 0 !important;
  flex-shrink: 0 !important;
}

.flex-shrink-1 {
  -ms-flex-negative: 1 !important;
  flex-shrink: 1 !important;
}

.justify-content-start {
  -ms-flex-pack: start !important;
  justify-content: flex-start !important;
}

.justify-content-end {
  -ms-flex-pack: end !important;
  justify-content: flex-end !important;
}

.justify-content-center {
  -ms-flex-pack: center !important;
  justify-content: center !important;
}

.justify-content-between {
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
}

.justify-content-around {
  -ms-flex-pack: distribute !important;
  justify-content: space-around !important;
}

.align-items-start {
  -ms-flex-align: start !important;
  align-items: flex-start !important;
}

.align-items-end {
  -ms-flex-align: end !important;
  align-items: flex-end !important;
}

.align-items-center {
  -ms-flex-align: center !important;
  align-items: center !important;
}

.align-items-baseline {
  -ms-flex-align: baseline !important;
  align-items: baseline !important;
}

.align-items-stretch {
  -ms-flex-align: stretch !important;
  align-items: stretch !important;
}

.align-content-start {
  -ms-flex-line-pack: start !important;
  align-content: flex-start !important;
}

.align-content-end {
  -ms-flex-line-pack: end !important;
  align-content: flex-end !important;
}

.align-content-center {
  -ms-flex-line-pack: center !important;
  align-content: center !important;
}

.align-content-between {
  -ms-flex-line-pack: justify !important;
  align-content: space-between !important;
}

.align-content-around {
  -ms-flex-line-pack: distribute !important;
  align-content: space-around !important;
}

.align-content-stretch {
  -ms-flex-line-pack: stretch !important;
  align-content: stretch !important;
}

.align-self-auto {
  -ms-flex-item-align: auto !important;
  align-self: auto !important;
}

.align-self-start {
  -ms-flex-item-align: start !important;
  align-self: flex-start !important;
}

.align-self-end {
  -ms-flex-item-align: end !important;
  align-self: flex-end !important;
}

.align-self-center {
  -ms-flex-item-align: center !important;
  align-self: center !important;
}

.align-self-baseline {
  -ms-flex-item-align: baseline !important;
  align-self: baseline !important;
}

.align-self-stretch {
  -ms-flex-item-align: stretch !important;
  align-self: stretch !important;
}

@media (min-width: 576px) {
  .flex-sm-row {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }
  .flex-sm-column {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }
  .flex-sm-row-reverse {
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }
  .flex-sm-column-reverse {
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }
  .flex-sm-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
  }
  .flex-sm-nowrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }
  .flex-sm-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }
  .flex-sm-fill {
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
  }
  .flex-sm-grow-0 {
    -ms-flex-positive: 0 !important;
    flex-grow: 0 !important;
  }
  .flex-sm-grow-1 {
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
  }
  .flex-sm-shrink-0 {
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
  }
  .flex-sm-shrink-1 {
    -ms-flex-negative: 1 !important;
    flex-shrink: 1 !important;
  }
  .justify-content-sm-start {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }
  .justify-content-sm-end {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }
  .justify-content-sm-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }
  .justify-content-sm-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }
  .justify-content-sm-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }
  .align-items-sm-start {
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }
  .align-items-sm-end {
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }
  .align-items-sm-center {
    -ms-flex-align: center !important;
    align-items: center !important;
  }
  .align-items-sm-baseline {
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
  }
  .align-items-sm-stretch {
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
  }
  .align-content-sm-start {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
  }
  .align-content-sm-end {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important;
  }
  .align-content-sm-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
  }
  .align-content-sm-between {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
  }
  .align-content-sm-around {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
  }
  .align-content-sm-stretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
  }
  .align-self-sm-auto {
    -ms-flex-item-align: auto !important;
    align-self: auto !important;
  }
  .align-self-sm-start {
    -ms-flex-item-align: start !important;
    align-self: flex-start !important;
  }
  .align-self-sm-end {
    -ms-flex-item-align: end !important;
    align-self: flex-end !important;
  }
  .align-self-sm-center {
    -ms-flex-item-align: center !important;
    align-self: center !important;
  }
  .align-self-sm-baseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important;
  }
  .align-self-sm-stretch {
    -ms-flex-item-align: stretch !important;
    align-self: stretch !important;
  }
}

@media (min-width: 768px) {
  .flex-md-row {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }
  .flex-md-column {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }
  .flex-md-row-reverse {
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }
  .flex-md-column-reverse {
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }
  .flex-md-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
  }
  .flex-md-nowrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }
  .flex-md-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }
  .flex-md-fill {
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
  }
  .flex-md-grow-0 {
    -ms-flex-positive: 0 !important;
    flex-grow: 0 !important;
  }
  .flex-md-grow-1 {
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
  }
  .flex-md-shrink-0 {
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
  }
  .flex-md-shrink-1 {
    -ms-flex-negative: 1 !important;
    flex-shrink: 1 !important;
  }
  .justify-content-md-start {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }
  .justify-content-md-end {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }
  .justify-content-md-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }
  .justify-content-md-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }
  .justify-content-md-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }
  .align-items-md-start {
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }
  .align-items-md-end {
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }
  .align-items-md-center {
    -ms-flex-align: center !important;
    align-items: center !important;
  }
  .align-items-md-baseline {
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
  }
  .align-items-md-stretch {
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
  }
  .align-content-md-start {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
  }
  .align-content-md-end {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important;
  }
  .align-content-md-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
  }
  .align-content-md-between {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
  }
  .align-content-md-around {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
  }
  .align-content-md-stretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
  }
  .align-self-md-auto {
    -ms-flex-item-align: auto !important;
    align-self: auto !important;
  }
  .align-self-md-start {
    -ms-flex-item-align: start !important;
    align-self: flex-start !important;
  }
  .align-self-md-end {
    -ms-flex-item-align: end !important;
    align-self: flex-end !important;
  }
  .align-self-md-center {
    -ms-flex-item-align: center !important;
    align-self: center !important;
  }
  .align-self-md-baseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important;
  }
  .align-self-md-stretch {
    -ms-flex-item-align: stretch !important;
    align-self: stretch !important;
  }
}

@media (min-width: 992px) {
  .flex-lg-row {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }
  .flex-lg-column {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }
  .flex-lg-row-reverse {
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }
  .flex-lg-column-reverse {
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }
  .flex-lg-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
  }
  .flex-lg-nowrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }
  .flex-lg-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }
  .flex-lg-fill {
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
  }
  .flex-lg-grow-0 {
    -ms-flex-positive: 0 !important;
    flex-grow: 0 !important;
  }
  .flex-lg-grow-1 {
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
  }
  .flex-lg-shrink-0 {
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
  }
  .flex-lg-shrink-1 {
    -ms-flex-negative: 1 !important;
    flex-shrink: 1 !important;
  }
  .justify-content-lg-start {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }
  .justify-content-lg-end {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }
  .justify-content-lg-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }
  .justify-content-lg-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }
  .justify-content-lg-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }
  .align-items-lg-start {
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }
  .align-items-lg-end {
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }
  .align-items-lg-center {
    -ms-flex-align: center !important;
    align-items: center !important;
  }
  .align-items-lg-baseline {
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
  }
  .align-items-lg-stretch {
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
  }
  .align-content-lg-start {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
  }
  .align-content-lg-end {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important;
  }
  .align-content-lg-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
  }
  .align-content-lg-between {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
  }
  .align-content-lg-around {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
  }
  .align-content-lg-stretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
  }
  .align-self-lg-auto {
    -ms-flex-item-align: auto !important;
    align-self: auto !important;
  }
  .align-self-lg-start {
    -ms-flex-item-align: start !important;
    align-self: flex-start !important;
  }
  .align-self-lg-end {
    -ms-flex-item-align: end !important;
    align-self: flex-end !important;
  }
  .align-self-lg-center {
    -ms-flex-item-align: center !important;
    align-self: center !important;
  }
  .align-self-lg-baseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important;
  }
  .align-self-lg-stretch {
    -ms-flex-item-align: stretch !important;
    align-self: stretch !important;
  }
}

@media (min-width: 1200px) {
  .flex-xl-row {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }
  .flex-xl-column {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }
  .flex-xl-row-reverse {
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }
  .flex-xl-column-reverse {
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }
  .flex-xl-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
  }
  .flex-xl-nowrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }
  .flex-xl-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }
  .flex-xl-fill {
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
  }
  .flex-xl-grow-0 {
    -ms-flex-positive: 0 !important;
    flex-grow: 0 !important;
  }
  .flex-xl-grow-1 {
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
  }
  .flex-xl-shrink-0 {
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
  }
  .flex-xl-shrink-1 {
    -ms-flex-negative: 1 !important;
    flex-shrink: 1 !important;
  }
  .justify-content-xl-start {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }
  .justify-content-xl-end {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }
  .justify-content-xl-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }
  .justify-content-xl-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }
  .justify-content-xl-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }
  .align-items-xl-start {
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }
  .align-items-xl-end {
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }
  .align-items-xl-center {
    -ms-flex-align: center !important;
    align-items: center !important;
  }
  .align-items-xl-baseline {
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
  }
  .align-items-xl-stretch {
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
  }
  .align-content-xl-start {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
  }
  .align-content-xl-end {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important;
  }
  .align-content-xl-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
  }
  .align-content-xl-between {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
  }
  .align-content-xl-around {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
  }
  .align-content-xl-stretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
  }
  .align-self-xl-auto {
    -ms-flex-item-align: auto !important;
    align-self: auto !important;
  }
  .align-self-xl-start {
    -ms-flex-item-align: start !important;
    align-self: flex-start !important;
  }
  .align-self-xl-end {
    -ms-flex-item-align: end !important;
    align-self: flex-end !important;
  }
  .align-self-xl-center {
    -ms-flex-item-align: center !important;
    align-self: center !important;
  }
  .align-self-xl-baseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important;
  }
  .align-self-xl-stretch {
    -ms-flex-item-align: stretch !important;
    align-self: stretch !important;
  }
}

.m-0 {
  margin: 0 !important;
}

.mt-0,
.my-0 {
  margin-top: 0 !important;
}

.mr-0,
.mx-0 {
  margin-right: 0 !important;
}

.mb-0,
.my-0 {
  margin-bottom: 0 !important;
}

.ml-0,
.mx-0 {
  margin-left: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.mt-1,
.my-1 {
  margin-top: 0.25rem !important;
}

.mr-1,
.mx-1 {
  margin-right: 0.25rem !important;
}

.mb-1,
.my-1 {
  margin-bottom: 0.25rem !important;
}

.ml-1,
.mx-1 {
  margin-left: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.mt-2,
.my-2 {
  margin-top: 0.5rem !important;
}

.mr-2,
.mx-2 {
  margin-right: 0.5rem !important;
}

.mb-2,
.my-2 {
  margin-bottom: 0.5rem !important;
}

.ml-2,
.mx-2 {
  margin-left: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.mt-3,
.my-3 {
  margin-top: 1rem !important;
}

.mr-3,
.mx-3 {
  margin-right: 1rem !important;
}

.mb-3,
.my-3 {
  margin-bottom: 1rem !important;
}

.ml-3,
.mx-3 {
  margin-left: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.mt-4,
.my-4 {
  margin-top: 1.5rem !important;
}

.mr-4,
.mx-4 {
  margin-right: 1.5rem !important;
}

.mb-4,
.my-4 {
  margin-bottom: 1.5rem !important;
}

.ml-4,
.mx-4 {
  margin-left: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.mt-5,
.my-5 {
  margin-top: 3rem !important;
}

.mr-5,
.mx-5 {
  margin-right: 3rem !important;
}

.mb-5,
.my-5 {
  margin-bottom: 3rem !important;
}

.ml-5,
.mx-5 {
  margin-left: 3rem !important;
}

.p-0 {
  padding: 0 !important;
}

.pt-0,
.py-0 {
  padding-top: 0 !important;
}

.pr-0,
.px-0 {
  padding-right: 0 !important;
}

.pb-0,
.py-0 {
  padding-bottom: 0 !important;
}

.pl-0,
.px-0 {
  padding-left: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.pt-1,
.py-1 {
  padding-top: 0.25rem !important;
}

.pr-1,
.px-1 {
  padding-right: 0.25rem !important;
}

.pb-1,
.py-1 {
  padding-bottom: 0.25rem !important;
}

.pl-1,
.px-1 {
  padding-left: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.pt-2,
.py-2 {
  padding-top: 0.5rem !important;
}

.pr-2,
.px-2 {
  padding-right: 0.5rem !important;
}

.pb-2,
.py-2 {
  padding-bottom: 0.5rem !important;
}

.pl-2,
.px-2 {
  padding-left: 0.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.pt-3,
.py-3 {
  padding-top: 1rem !important;
}

.pr-3,
.px-3 {
  padding-right: 1rem !important;
}

.pb-3,
.py-3 {
  padding-bottom: 1rem !important;
}

.pl-3,
.px-3 {
  padding-left: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.pt-4,
.py-4 {
  padding-top: 1.5rem !important;
}

.pr-4,
.px-4 {
  padding-right: 1.5rem !important;
}

.pb-4,
.py-4 {
  padding-bottom: 1.5rem !important;
}

.pl-4,
.px-4 {
  padding-left: 1.5rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.pt-5,
.py-5 {
  padding-top: 3rem !important;
}

.pr-5,
.px-5 {
  padding-right: 3rem !important;
}

.pb-5,
.py-5 {
  padding-bottom: 3rem !important;
}

.pl-5,
.px-5 {
  padding-left: 3rem !important;
}

.m-n1 {
  margin: -0.25rem !important;
}

.mt-n1,
.my-n1 {
  margin-top: -0.25rem !important;
}

.mr-n1,
.mx-n1 {
  margin-right: -0.25rem !important;
}

.mb-n1,
.my-n1 {
  margin-bottom: -0.25rem !important;
}

.ml-n1,
.mx-n1 {
  margin-left: -0.25rem !important;
}

.m-n2 {
  margin: -0.5rem !important;
}

.mt-n2,
.my-n2 {
  margin-top: -0.5rem !important;
}

.mr-n2,
.mx-n2 {
  margin-right: -0.5rem !important;
}

.mb-n2,
.my-n2 {
  margin-bottom: -0.5rem !important;
}

.ml-n2,
.mx-n2 {
  margin-left: -0.5rem !important;
}

.m-n3 {
  margin: -1rem !important;
}

.mt-n3,
.my-n3 {
  margin-top: -1rem !important;
}

.mr-n3,
.mx-n3 {
  margin-right: -1rem !important;
}

.mb-n3,
.my-n3 {
  margin-bottom: -1rem !important;
}

.ml-n3,
.mx-n3 {
  margin-left: -1rem !important;
}

.m-n4 {
  margin: -1.5rem !important;
}

.mt-n4,
.my-n4 {
  margin-top: -1.5rem !important;
}

.mr-n4,
.mx-n4 {
  margin-right: -1.5rem !important;
}

.mb-n4,
.my-n4 {
  margin-bottom: -1.5rem !important;
}

.ml-n4,
.mx-n4 {
  margin-left: -1.5rem !important;
}

.m-n5 {
  margin: -3rem !important;
}

.mt-n5,
.my-n5 {
  margin-top: -3rem !important;
}

.mr-n5,
.mx-n5 {
  margin-right: -3rem !important;
}

.mb-n5,
.my-n5 {
  margin-bottom: -3rem !important;
}

.ml-n5,
.mx-n5 {
  margin-left: -3rem !important;
}

.m-auto {
  margin: auto !important;
}

.mt-auto,
.my-auto {
  margin-top: auto !important;
}

.mr-auto,
.mx-auto {
  margin-right: auto !important;
}

.mb-auto,
.my-auto {
  margin-bottom: auto !important;
}

.ml-auto,
.mx-auto {
  margin-left: auto !important;
}

@media (min-width: 576px) {
  .m-sm-0 {
    margin: 0 !important;
  }
  .mt-sm-0,
  .my-sm-0 {
    margin-top: 0 !important;
  }
  .mr-sm-0,
  .mx-sm-0 {
    margin-right: 0 !important;
  }
  .mb-sm-0,
  .my-sm-0 {
    margin-bottom: 0 !important;
  }
  .ml-sm-0,
  .mx-sm-0 {
    margin-left: 0 !important;
  }
  .m-sm-1 {
    margin: 0.25rem !important;
  }
  .mt-sm-1,
  .my-sm-1 {
    margin-top: 0.25rem !important;
  }
  .mr-sm-1,
  .mx-sm-1 {
    margin-right: 0.25rem !important;
  }
  .mb-sm-1,
  .my-sm-1 {
    margin-bottom: 0.25rem !important;
  }
  .ml-sm-1,
  .mx-sm-1 {
    margin-left: 0.25rem !important;
  }
  .m-sm-2 {
    margin: 0.5rem !important;
  }
  .mt-sm-2,
  .my-sm-2 {
    margin-top: 0.5rem !important;
  }
  .mr-sm-2,
  .mx-sm-2 {
    margin-right: 0.5rem !important;
  }
  .mb-sm-2,
  .my-sm-2 {
    margin-bottom: 0.5rem !important;
  }
  .ml-sm-2,
  .mx-sm-2 {
    margin-left: 0.5rem !important;
  }
  .m-sm-3 {
    margin: 1rem !important;
  }
  .mt-sm-3,
  .my-sm-3 {
    margin-top: 1rem !important;
  }
  .mr-sm-3,
  .mx-sm-3 {
    margin-right: 1rem !important;
  }
  .mb-sm-3,
  .my-sm-3 {
    margin-bottom: 1rem !important;
  }
  .ml-sm-3,
  .mx-sm-3 {
    margin-left: 1rem !important;
  }
  .m-sm-4 {
    margin: 1.5rem !important;
  }
  .mt-sm-4,
  .my-sm-4 {
    margin-top: 1.5rem !important;
  }
  .mr-sm-4,
  .mx-sm-4 {
    margin-right: 1.5rem !important;
  }
  .mb-sm-4,
  .my-sm-4 {
    margin-bottom: 1.5rem !important;
  }
  .ml-sm-4,
  .mx-sm-4 {
    margin-left: 1.5rem !important;
  }
  .m-sm-5 {
    margin: 3rem !important;
  }
  .mt-sm-5,
  .my-sm-5 {
    margin-top: 3rem !important;
  }
  .mr-sm-5,
  .mx-sm-5 {
    margin-right: 3rem !important;
  }
  .mb-sm-5,
  .my-sm-5 {
    margin-bottom: 3rem !important;
  }
  .ml-sm-5,
  .mx-sm-5 {
    margin-left: 3rem !important;
  }
  .p-sm-0 {
    padding: 0 !important;
  }
  .pt-sm-0,
  .py-sm-0 {
    padding-top: 0 !important;
  }
  .pr-sm-0,
  .px-sm-0 {
    padding-right: 0 !important;
  }
  .pb-sm-0,
  .py-sm-0 {
    padding-bottom: 0 !important;
  }
  .pl-sm-0,
  .px-sm-0 {
    padding-left: 0 !important;
  }
  .p-sm-1 {
    padding: 0.25rem !important;
  }
  .pt-sm-1,
  .py-sm-1 {
    padding-top: 0.25rem !important;
  }
  .pr-sm-1,
  .px-sm-1 {
    padding-right: 0.25rem !important;
  }
  .pb-sm-1,
  .py-sm-1 {
    padding-bottom: 0.25rem !important;
  }
  .pl-sm-1,
  .px-sm-1 {
    padding-left: 0.25rem !important;
  }
  .p-sm-2 {
    padding: 0.5rem !important;
  }
  .pt-sm-2,
  .py-sm-2 {
    padding-top: 0.5rem !important;
  }
  .pr-sm-2,
  .px-sm-2 {
    padding-right: 0.5rem !important;
  }
  .pb-sm-2,
  .py-sm-2 {
    padding-bottom: 0.5rem !important;
  }
  .pl-sm-2,
  .px-sm-2 {
    padding-left: 0.5rem !important;
  }
  .p-sm-3 {
    padding: 1rem !important;
  }
  .pt-sm-3,
  .py-sm-3 {
    padding-top: 1rem !important;
  }
  .pr-sm-3,
  .px-sm-3 {
    padding-right: 1rem !important;
  }
  .pb-sm-3,
  .py-sm-3 {
    padding-bottom: 1rem !important;
  }
  .pl-sm-3,
  .px-sm-3 {
    padding-left: 1rem !important;
  }
  .p-sm-4 {
    padding: 1.5rem !important;
  }
  .pt-sm-4,
  .py-sm-4 {
    padding-top: 1.5rem !important;
  }
  .pr-sm-4,
  .px-sm-4 {
    padding-right: 1.5rem !important;
  }
  .pb-sm-4,
  .py-sm-4 {
    padding-bottom: 1.5rem !important;
  }
  .pl-sm-4,
  .px-sm-4 {
    padding-left: 1.5rem !important;
  }
  .p-sm-5 {
    padding: 3rem !important;
  }
  .pt-sm-5,
  .py-sm-5 {
    padding-top: 3rem !important;
  }
  .pr-sm-5,
  .px-sm-5 {
    padding-right: 3rem !important;
  }
  .pb-sm-5,
  .py-sm-5 {
    padding-bottom: 3rem !important;
  }
  .pl-sm-5,
  .px-sm-5 {
    padding-left: 3rem !important;
  }
  .m-sm-n1 {
    margin: -0.25rem !important;
  }
  .mt-sm-n1,
  .my-sm-n1 {
    margin-top: -0.25rem !important;
  }
  .mr-sm-n1,
  .mx-sm-n1 {
    margin-right: -0.25rem !important;
  }
  .mb-sm-n1,
  .my-sm-n1 {
    margin-bottom: -0.25rem !important;
  }
  .ml-sm-n1,
  .mx-sm-n1 {
    margin-left: -0.25rem !important;
  }
  .m-sm-n2 {
    margin: -0.5rem !important;
  }
  .mt-sm-n2,
  .my-sm-n2 {
    margin-top: -0.5rem !important;
  }
  .mr-sm-n2,
  .mx-sm-n2 {
    margin-right: -0.5rem !important;
  }
  .mb-sm-n2,
  .my-sm-n2 {
    margin-bottom: -0.5rem !important;
  }
  .ml-sm-n2,
  .mx-sm-n2 {
    margin-left: -0.5rem !important;
  }
  .m-sm-n3 {
    margin: -1rem !important;
  }
  .mt-sm-n3,
  .my-sm-n3 {
    margin-top: -1rem !important;
  }
  .mr-sm-n3,
  .mx-sm-n3 {
    margin-right: -1rem !important;
  }
  .mb-sm-n3,
  .my-sm-n3 {
    margin-bottom: -1rem !important;
  }
  .ml-sm-n3,
  .mx-sm-n3 {
    margin-left: -1rem !important;
  }
  .m-sm-n4 {
    margin: -1.5rem !important;
  }
  .mt-sm-n4,
  .my-sm-n4 {
    margin-top: -1.5rem !important;
  }
  .mr-sm-n4,
  .mx-sm-n4 {
    margin-right: -1.5rem !important;
  }
  .mb-sm-n4,
  .my-sm-n4 {
    margin-bottom: -1.5rem !important;
  }
  .ml-sm-n4,
  .mx-sm-n4 {
    margin-left: -1.5rem !important;
  }
  .m-sm-n5 {
    margin: -3rem !important;
  }
  .mt-sm-n5,
  .my-sm-n5 {
    margin-top: -3rem !important;
  }
  .mr-sm-n5,
  .mx-sm-n5 {
    margin-right: -3rem !important;
  }
  .mb-sm-n5,
  .my-sm-n5 {
    margin-bottom: -3rem !important;
  }
  .ml-sm-n5,
  .mx-sm-n5 {
    margin-left: -3rem !important;
  }
  .m-sm-auto {
    margin: auto !important;
  }
  .mt-sm-auto,
  .my-sm-auto {
    margin-top: auto !important;
  }
  .mr-sm-auto,
  .mx-sm-auto {
    margin-right: auto !important;
  }
  .mb-sm-auto,
  .my-sm-auto {
    margin-bottom: auto !important;
  }
  .ml-sm-auto,
  .mx-sm-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 768px) {
  .m-md-0 {
    margin: 0 !important;
  }
  .mt-md-0,
  .my-md-0 {
    margin-top: 0 !important;
  }
  .mr-md-0,
  .mx-md-0 {
    margin-right: 0 !important;
  }
  .mb-md-0,
  .my-md-0 {
    margin-bottom: 0 !important;
  }
  .ml-md-0,
  .mx-md-0 {
    margin-left: 0 !important;
  }
  .m-md-1 {
    margin: 0.25rem !important;
  }
  .mt-md-1,
  .my-md-1 {
    margin-top: 0.25rem !important;
  }
  .mr-md-1,
  .mx-md-1 {
    margin-right: 0.25rem !important;
  }
  .mb-md-1,
  .my-md-1 {
    margin-bottom: 0.25rem !important;
  }
  .ml-md-1,
  .mx-md-1 {
    margin-left: 0.25rem !important;
  }
  .m-md-2 {
    margin: 0.5rem !important;
  }
  .mt-md-2,
  .my-md-2 {
    margin-top: 0.5rem !important;
  }
  .mr-md-2,
  .mx-md-2 {
    margin-right: 0.5rem !important;
  }
  .mb-md-2,
  .my-md-2 {
    margin-bottom: 0.5rem !important;
  }
  .ml-md-2,
  .mx-md-2 {
    margin-left: 0.5rem !important;
  }
  .m-md-3 {
    margin: 1rem !important;
  }
  .mt-md-3,
  .my-md-3 {
    margin-top: 1rem !important;
  }
  .mr-md-3,
  .mx-md-3 {
    margin-right: 1rem !important;
  }
  .mb-md-3,
  .my-md-3 {
    margin-bottom: 1rem !important;
  }
  .ml-md-3,
  .mx-md-3 {
    margin-left: 1rem !important;
  }
  .m-md-4 {
    margin: 1.5rem !important;
  }
  .mt-md-4,
  .my-md-4 {
    margin-top: 1.5rem !important;
  }
  .mr-md-4,
  .mx-md-4 {
    margin-right: 1.5rem !important;
  }
  .mb-md-4,
  .my-md-4 {
    margin-bottom: 1.5rem !important;
  }
  .ml-md-4,
  .mx-md-4 {
    margin-left: 1.5rem !important;
  }
  .m-md-5 {
    margin: 3rem !important;
  }
  .mt-md-5,
  .my-md-5 {
    margin-top: 3rem !important;
  }
  .mr-md-5,
  .mx-md-5 {
    margin-right: 3rem !important;
  }
  .mb-md-5,
  .my-md-5 {
    margin-bottom: 3rem !important;
  }
  .ml-md-5,
  .mx-md-5 {
    margin-left: 3rem !important;
  }
  .p-md-0 {
    padding: 0 !important;
  }
  .pt-md-0,
  .py-md-0 {
    padding-top: 0 !important;
  }
  .pr-md-0,
  .px-md-0 {
    padding-right: 0 !important;
  }
  .pb-md-0,
  .py-md-0 {
    padding-bottom: 0 !important;
  }
  .pl-md-0,
  .px-md-0 {
    padding-left: 0 !important;
  }
  .p-md-1 {
    padding: 0.25rem !important;
  }
  .pt-md-1,
  .py-md-1 {
    padding-top: 0.25rem !important;
  }
  .pr-md-1,
  .px-md-1 {
    padding-right: 0.25rem !important;
  }
  .pb-md-1,
  .py-md-1 {
    padding-bottom: 0.25rem !important;
  }
  .pl-md-1,
  .px-md-1 {
    padding-left: 0.25rem !important;
  }
  .p-md-2 {
    padding: 0.5rem !important;
  }
  .pt-md-2,
  .py-md-2 {
    padding-top: 0.5rem !important;
  }
  .pr-md-2,
  .px-md-2 {
    padding-right: 0.5rem !important;
  }
  .pb-md-2,
  .py-md-2 {
    padding-bottom: 0.5rem !important;
  }
  .pl-md-2,
  .px-md-2 {
    padding-left: 0.5rem !important;
  }
  .p-md-3 {
    padding: 1rem !important;
  }
  .pt-md-3,
  .py-md-3 {
    padding-top: 1rem !important;
  }
  .pr-md-3,
  .px-md-3 {
    padding-right: 1rem !important;
  }
  .pb-md-3,
  .py-md-3 {
    padding-bottom: 1rem !important;
  }
  .pl-md-3,
  .px-md-3 {
    padding-left: 1rem !important;
  }
  .p-md-4 {
    padding: 1.5rem !important;
  }
  .pt-md-4,
  .py-md-4 {
    padding-top: 1.5rem !important;
  }
  .pr-md-4,
  .px-md-4 {
    padding-right: 1.5rem !important;
  }
  .pb-md-4,
  .py-md-4 {
    padding-bottom: 1.5rem !important;
  }
  .pl-md-4,
  .px-md-4 {
    padding-left: 1.5rem !important;
  }
  .p-md-5 {
    padding: 3rem !important;
  }
  .pt-md-5,
  .py-md-5 {
    padding-top: 3rem !important;
  }
  .pr-md-5,
  .px-md-5 {
    padding-right: 3rem !important;
  }
  .pb-md-5,
  .py-md-5 {
    padding-bottom: 3rem !important;
  }
  .pl-md-5,
  .px-md-5 {
    padding-left: 3rem !important;
  }
  .m-md-n1 {
    margin: -0.25rem !important;
  }
  .mt-md-n1,
  .my-md-n1 {
    margin-top: -0.25rem !important;
  }
  .mr-md-n1,
  .mx-md-n1 {
    margin-right: -0.25rem !important;
  }
  .mb-md-n1,
  .my-md-n1 {
    margin-bottom: -0.25rem !important;
  }
  .ml-md-n1,
  .mx-md-n1 {
    margin-left: -0.25rem !important;
  }
  .m-md-n2 {
    margin: -0.5rem !important;
  }
  .mt-md-n2,
  .my-md-n2 {
    margin-top: -0.5rem !important;
  }
  .mr-md-n2,
  .mx-md-n2 {
    margin-right: -0.5rem !important;
  }
  .mb-md-n2,
  .my-md-n2 {
    margin-bottom: -0.5rem !important;
  }
  .ml-md-n2,
  .mx-md-n2 {
    margin-left: -0.5rem !important;
  }
  .m-md-n3 {
    margin: -1rem !important;
  }
  .mt-md-n3,
  .my-md-n3 {
    margin-top: -1rem !important;
  }
  .mr-md-n3,
  .mx-md-n3 {
    margin-right: -1rem !important;
  }
  .mb-md-n3,
  .my-md-n3 {
    margin-bottom: -1rem !important;
  }
  .ml-md-n3,
  .mx-md-n3 {
    margin-left: -1rem !important;
  }
  .m-md-n4 {
    margin: -1.5rem !important;
  }
  .mt-md-n4,
  .my-md-n4 {
    margin-top: -1.5rem !important;
  }
  .mr-md-n4,
  .mx-md-n4 {
    margin-right: -1.5rem !important;
  }
  .mb-md-n4,
  .my-md-n4 {
    margin-bottom: -1.5rem !important;
  }
  .ml-md-n4,
  .mx-md-n4 {
    margin-left: -1.5rem !important;
  }
  .m-md-n5 {
    margin: -3rem !important;
  }
  .mt-md-n5,
  .my-md-n5 {
    margin-top: -3rem !important;
  }
  .mr-md-n5,
  .mx-md-n5 {
    margin-right: -3rem !important;
  }
  .mb-md-n5,
  .my-md-n5 {
    margin-bottom: -3rem !important;
  }
  .ml-md-n5,
  .mx-md-n5 {
    margin-left: -3rem !important;
  }
  .m-md-auto {
    margin: auto !important;
  }
  .mt-md-auto,
  .my-md-auto {
    margin-top: auto !important;
  }
  .mr-md-auto,
  .mx-md-auto {
    margin-right: auto !important;
  }
  .mb-md-auto,
  .my-md-auto {
    margin-bottom: auto !important;
  }
  .ml-md-auto,
  .mx-md-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 992px) {
  .m-lg-0 {
    margin: 0 !important;
  }
  .mt-lg-0,
  .my-lg-0 {
    margin-top: 0 !important;
  }
  .mr-lg-0,
  .mx-lg-0 {
    margin-right: 0 !important;
  }
  .mb-lg-0,
  .my-lg-0 {
    margin-bottom: 0 !important;
  }
  .ml-lg-0,
  .mx-lg-0 {
    margin-left: 0 !important;
  }
  .m-lg-1 {
    margin: 0.25rem !important;
  }
  .mt-lg-1,
  .my-lg-1 {
    margin-top: 0.25rem !important;
  }
  .mr-lg-1,
  .mx-lg-1 {
    margin-right: 0.25rem !important;
  }
  .mb-lg-1,
  .my-lg-1 {
    margin-bottom: 0.25rem !important;
  }
  .ml-lg-1,
  .mx-lg-1 {
    margin-left: 0.25rem !important;
  }
  .m-lg-2 {
    margin: 0.5rem !important;
  }
  .mt-lg-2,
  .my-lg-2 {
    margin-top: 0.5rem !important;
  }
  .mr-lg-2,
  .mx-lg-2 {
    margin-right: 0.5rem !important;
  }
  .mb-lg-2,
  .my-lg-2 {
    margin-bottom: 0.5rem !important;
  }
  .ml-lg-2,
  .mx-lg-2 {
    margin-left: 0.5rem !important;
  }
  .m-lg-3 {
    margin: 1rem !important;
  }
  .mt-lg-3,
  .my-lg-3 {
    margin-top: 1rem !important;
  }
  .mr-lg-3,
  .mx-lg-3 {
    margin-right: 1rem !important;
  }
  .mb-lg-3,
  .my-lg-3 {
    margin-bottom: 1rem !important;
  }
  .ml-lg-3,
  .mx-lg-3 {
    margin-left: 1rem !important;
  }
  .m-lg-4 {
    margin: 1.5rem !important;
  }
  .mt-lg-4,
  .my-lg-4 {
    margin-top: 1.5rem !important;
  }
  .mr-lg-4,
  .mx-lg-4 {
    margin-right: 1.5rem !important;
  }
  .mb-lg-4,
  .my-lg-4 {
    margin-bottom: 1.5rem !important;
  }
  .ml-lg-4,
  .mx-lg-4 {
    margin-left: 1.5rem !important;
  }
  .m-lg-5 {
    margin: 3rem !important;
  }
  .mt-lg-5,
  .my-lg-5 {
    margin-top: 3rem !important;
  }
  .mr-lg-5,
  .mx-lg-5 {
    margin-right: 3rem !important;
  }
  .mb-lg-5,
  .my-lg-5 {
    margin-bottom: 3rem !important;
  }
  .ml-lg-5,
  .mx-lg-5 {
    margin-left: 3rem !important;
  }
  .p-lg-0 {
    padding: 0 !important;
  }
  .pt-lg-0,
  .py-lg-0 {
    padding-top: 0 !important;
  }
  .pr-lg-0,
  .px-lg-0 {
    padding-right: 0 !important;
  }
  .pb-lg-0,
  .py-lg-0 {
    padding-bottom: 0 !important;
  }
  .pl-lg-0,
  .px-lg-0 {
    padding-left: 0 !important;
  }
  .p-lg-1 {
    padding: 0.25rem !important;
  }
  .pt-lg-1,
  .py-lg-1 {
    padding-top: 0.25rem !important;
  }
  .pr-lg-1,
  .px-lg-1 {
    padding-right: 0.25rem !important;
  }
  .pb-lg-1,
  .py-lg-1 {
    padding-bottom: 0.25rem !important;
  }
  .pl-lg-1,
  .px-lg-1 {
    padding-left: 0.25rem !important;
  }
  .p-lg-2 {
    padding: 0.5rem !important;
  }
  .pt-lg-2,
  .py-lg-2 {
    padding-top: 0.5rem !important;
  }
  .pr-lg-2,
  .px-lg-2 {
    padding-right: 0.5rem !important;
  }
  .pb-lg-2,
  .py-lg-2 {
    padding-bottom: 0.5rem !important;
  }
  .pl-lg-2,
  .px-lg-2 {
    padding-left: 0.5rem !important;
  }
  .p-lg-3 {
    padding: 1rem !important;
  }
  .pt-lg-3,
  .py-lg-3 {
    padding-top: 1rem !important;
  }
  .pr-lg-3,
  .px-lg-3 {
    padding-right: 1rem !important;
  }
  .pb-lg-3,
  .py-lg-3 {
    padding-bottom: 1rem !important;
  }
  .pl-lg-3,
  .px-lg-3 {
    padding-left: 1rem !important;
  }
  .p-lg-4 {
    padding: 1.5rem !important;
  }
  .pt-lg-4,
  .py-lg-4 {
    padding-top: 1.5rem !important;
  }
  .pr-lg-4,
  .px-lg-4 {
    padding-right: 1.5rem !important;
  }
  .pb-lg-4,
  .py-lg-4 {
    padding-bottom: 1.5rem !important;
  }
  .pl-lg-4,
  .px-lg-4 {
    padding-left: 1.5rem !important;
  }
  .p-lg-5 {
    padding: 3rem !important;
  }
  .pt-lg-5,
  .py-lg-5 {
    padding-top: 3rem !important;
  }
  .pr-lg-5,
  .px-lg-5 {
    padding-right: 3rem !important;
  }
  .pb-lg-5,
  .py-lg-5 {
    padding-bottom: 3rem !important;
  }
  .pl-lg-5,
  .px-lg-5 {
    padding-left: 3rem !important;
  }
  .m-lg-n1 {
    margin: -0.25rem !important;
  }
  .mt-lg-n1,
  .my-lg-n1 {
    margin-top: -0.25rem !important;
  }
  .mr-lg-n1,
  .mx-lg-n1 {
    margin-right: -0.25rem !important;
  }
  .mb-lg-n1,
  .my-lg-n1 {
    margin-bottom: -0.25rem !important;
  }
  .ml-lg-n1,
  .mx-lg-n1 {
    margin-left: -0.25rem !important;
  }
  .m-lg-n2 {
    margin: -0.5rem !important;
  }
  .mt-lg-n2,
  .my-lg-n2 {
    margin-top: -0.5rem !important;
  }
  .mr-lg-n2,
  .mx-lg-n2 {
    margin-right: -0.5rem !important;
  }
  .mb-lg-n2,
  .my-lg-n2 {
    margin-bottom: -0.5rem !important;
  }
  .ml-lg-n2,
  .mx-lg-n2 {
    margin-left: -0.5rem !important;
  }
  .m-lg-n3 {
    margin: -1rem !important;
  }
  .mt-lg-n3,
  .my-lg-n3 {
    margin-top: -1rem !important;
  }
  .mr-lg-n3,
  .mx-lg-n3 {
    margin-right: -1rem !important;
  }
  .mb-lg-n3,
  .my-lg-n3 {
    margin-bottom: -1rem !important;
  }
  .ml-lg-n3,
  .mx-lg-n3 {
    margin-left: -1rem !important;
  }
  .m-lg-n4 {
    margin: -1.5rem !important;
  }
  .mt-lg-n4,
  .my-lg-n4 {
    margin-top: -1.5rem !important;
  }
  .mr-lg-n4,
  .mx-lg-n4 {
    margin-right: -1.5rem !important;
  }
  .mb-lg-n4,
  .my-lg-n4 {
    margin-bottom: -1.5rem !important;
  }
  .ml-lg-n4,
  .mx-lg-n4 {
    margin-left: -1.5rem !important;
  }
  .m-lg-n5 {
    margin: -3rem !important;
  }
  .mt-lg-n5,
  .my-lg-n5 {
    margin-top: -3rem !important;
  }
  .mr-lg-n5,
  .mx-lg-n5 {
    margin-right: -3rem !important;
  }
  .mb-lg-n5,
  .my-lg-n5 {
    margin-bottom: -3rem !important;
  }
  .ml-lg-n5,
  .mx-lg-n5 {
    margin-left: -3rem !important;
  }
  .m-lg-auto {
    margin: auto !important;
  }
  .mt-lg-auto,
  .my-lg-auto {
    margin-top: auto !important;
  }
  .mr-lg-auto,
  .mx-lg-auto {
    margin-right: auto !important;
  }
  .mb-lg-auto,
  .my-lg-auto {
    margin-bottom: auto !important;
  }
  .ml-lg-auto,
  .mx-lg-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 1200px) {
  .m-xl-0 {
    margin: 0 !important;
  }
  .mt-xl-0,
  .my-xl-0 {
    margin-top: 0 !important;
  }
  .mr-xl-0,
  .mx-xl-0 {
    margin-right: 0 !important;
  }
  .mb-xl-0,
  .my-xl-0 {
    margin-bottom: 0 !important;
  }
  .ml-xl-0,
  .mx-xl-0 {
    margin-left: 0 !important;
  }
  .m-xl-1 {
    margin: 0.25rem !important;
  }
  .mt-xl-1,
  .my-xl-1 {
    margin-top: 0.25rem !important;
  }
  .mr-xl-1,
  .mx-xl-1 {
    margin-right: 0.25rem !important;
  }
  .mb-xl-1,
  .my-xl-1 {
    margin-bottom: 0.25rem !important;
  }
  .ml-xl-1,
  .mx-xl-1 {
    margin-left: 0.25rem !important;
  }
  .m-xl-2 {
    margin: 0.5rem !important;
  }
  .mt-xl-2,
  .my-xl-2 {
    margin-top: 0.5rem !important;
  }
  .mr-xl-2,
  .mx-xl-2 {
    margin-right: 0.5rem !important;
  }
  .mb-xl-2,
  .my-xl-2 {
    margin-bottom: 0.5rem !important;
  }
  .ml-xl-2,
  .mx-xl-2 {
    margin-left: 0.5rem !important;
  }
  .m-xl-3 {
    margin: 1rem !important;
  }
  .mt-xl-3,
  .my-xl-3 {
    margin-top: 1rem !important;
  }
  .mr-xl-3,
  .mx-xl-3 {
    margin-right: 1rem !important;
  }
  .mb-xl-3,
  .my-xl-3 {
    margin-bottom: 1rem !important;
  }
  .ml-xl-3,
  .mx-xl-3 {
    margin-left: 1rem !important;
  }
  .m-xl-4 {
    margin: 1.5rem !important;
  }
  .mt-xl-4,
  .my-xl-4 {
    margin-top: 1.5rem !important;
  }
  .mr-xl-4,
  .mx-xl-4 {
    margin-right: 1.5rem !important;
  }
  .mb-xl-4,
  .my-xl-4 {
    margin-bottom: 1.5rem !important;
  }
  .ml-xl-4,
  .mx-xl-4 {
    margin-left: 1.5rem !important;
  }
  .m-xl-5 {
    margin: 3rem !important;
  }
  .mt-xl-5,
  .my-xl-5 {
    margin-top: 3rem !important;
  }
  .mr-xl-5,
  .mx-xl-5 {
    margin-right: 3rem !important;
  }
  .mb-xl-5,
  .my-xl-5 {
    margin-bottom: 3rem !important;
  }
  .ml-xl-5,
  .mx-xl-5 {
    margin-left: 3rem !important;
  }
  .p-xl-0 {
    padding: 0 !important;
  }
  .pt-xl-0,
  .py-xl-0 {
    padding-top: 0 !important;
  }
  .pr-xl-0,
  .px-xl-0 {
    padding-right: 0 !important;
  }
  .pb-xl-0,
  .py-xl-0 {
    padding-bottom: 0 !important;
  }
  .pl-xl-0,
  .px-xl-0 {
    padding-left: 0 !important;
  }
  .p-xl-1 {
    padding: 0.25rem !important;
  }
  .pt-xl-1,
  .py-xl-1 {
    padding-top: 0.25rem !important;
  }
  .pr-xl-1,
  .px-xl-1 {
    padding-right: 0.25rem !important;
  }
  .pb-xl-1,
  .py-xl-1 {
    padding-bottom: 0.25rem !important;
  }
  .pl-xl-1,
  .px-xl-1 {
    padding-left: 0.25rem !important;
  }
  .p-xl-2 {
    padding: 0.5rem !important;
  }
  .pt-xl-2,
  .py-xl-2 {
    padding-top: 0.5rem !important;
  }
  .pr-xl-2,
  .px-xl-2 {
    padding-right: 0.5rem !important;
  }
  .pb-xl-2,
  .py-xl-2 {
    padding-bottom: 0.5rem !important;
  }
  .pl-xl-2,
  .px-xl-2 {
    padding-left: 0.5rem !important;
  }
  .p-xl-3 {
    padding: 1rem !important;
  }
  .pt-xl-3,
  .py-xl-3 {
    padding-top: 1rem !important;
  }
  .pr-xl-3,
  .px-xl-3 {
    padding-right: 1rem !important;
  }
  .pb-xl-3,
  .py-xl-3 {
    padding-bottom: 1rem !important;
  }
  .pl-xl-3,
  .px-xl-3 {
    padding-left: 1rem !important;
  }
  .p-xl-4 {
    padding: 1.5rem !important;
  }
  .pt-xl-4,
  .py-xl-4 {
    padding-top: 1.5rem !important;
  }
  .pr-xl-4,
  .px-xl-4 {
    padding-right: 1.5rem !important;
  }
  .pb-xl-4,
  .py-xl-4 {
    padding-bottom: 1.5rem !important;
  }
  .pl-xl-4,
  .px-xl-4 {
    padding-left: 1.5rem !important;
  }
  .p-xl-5 {
    padding: 3rem !important;
  }
  .pt-xl-5,
  .py-xl-5 {
    padding-top: 3rem !important;
  }
  .pr-xl-5,
  .px-xl-5 {
    padding-right: 3rem !important;
  }
  .pb-xl-5,
  .py-xl-5 {
    padding-bottom: 3rem !important;
  }
  .pl-xl-5,
  .px-xl-5 {
    padding-left: 3rem !important;
  }
  .m-xl-n1 {
    margin: -0.25rem !important;
  }
  .mt-xl-n1,
  .my-xl-n1 {
    margin-top: -0.25rem !important;
  }
  .mr-xl-n1,
  .mx-xl-n1 {
    margin-right: -0.25rem !important;
  }
  .mb-xl-n1,
  .my-xl-n1 {
    margin-bottom: -0.25rem !important;
  }
  .ml-xl-n1,
  .mx-xl-n1 {
    margin-left: -0.25rem !important;
  }
  .m-xl-n2 {
    margin: -0.5rem !important;
  }
  .mt-xl-n2,
  .my-xl-n2 {
    margin-top: -0.5rem !important;
  }
  .mr-xl-n2,
  .mx-xl-n2 {
    margin-right: -0.5rem !important;
  }
  .mb-xl-n2,
  .my-xl-n2 {
    margin-bottom: -0.5rem !important;
  }
  .ml-xl-n2,
  .mx-xl-n2 {
    margin-left: -0.5rem !important;
  }
  .m-xl-n3 {
    margin: -1rem !important;
  }
  .mt-xl-n3,
  .my-xl-n3 {
    margin-top: -1rem !important;
  }
  .mr-xl-n3,
  .mx-xl-n3 {
    margin-right: -1rem !important;
  }
  .mb-xl-n3,
  .my-xl-n3 {
    margin-bottom: -1rem !important;
  }
  .ml-xl-n3,
  .mx-xl-n3 {
    margin-left: -1rem !important;
  }
  .m-xl-n4 {
    margin: -1.5rem !important;
  }
  .mt-xl-n4,
  .my-xl-n4 {
    margin-top: -1.5rem !important;
  }
  .mr-xl-n4,
  .mx-xl-n4 {
    margin-right: -1.5rem !important;
  }
  .mb-xl-n4,
  .my-xl-n4 {
    margin-bottom: -1.5rem !important;
  }
  .ml-xl-n4,
  .mx-xl-n4 {
    margin-left: -1.5rem !important;
  }
  .m-xl-n5 {
    margin: -3rem !important;
  }
  .mt-xl-n5,
  .my-xl-n5 {
    margin-top: -3rem !important;
  }
  .mr-xl-n5,
  .mx-xl-n5 {
    margin-right: -3rem !important;
  }
  .mb-xl-n5,
  .my-xl-n5 {
    margin-bottom: -3rem !important;
  }
  .ml-xl-n5,
  .mx-xl-n5 {
    margin-left: -3rem !important;
  }
  .m-xl-auto {
    margin: auto !important;
  }
  .mt-xl-auto,
  .my-xl-auto {
    margin-top: auto !important;
  }
  .mr-xl-auto,
  .mx-xl-auto {
    margin-right: auto !important;
  }
  .mb-xl-auto,
  .my-xl-auto {
    margin-bottom: auto !important;
  }
  .ml-xl-auto,
  .mx-xl-auto {
    margin-left: auto !important;
  }
}
/*# sourceMappingURL=bootstrap-grid.css.map */

================================================
FILE: 03-bootstrap-kategorisi/bolum-sonu-projesi/css/bootstrap-reboot.css
================================================
/*!
 * Bootstrap Reboot v4.5.3 (https://getbootstrap.com/)
 * Copyright 2011-2020 The Bootstrap Authors
 * Copyright 2011-2020 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
}

[tabindex="-1"]:focus:not(:focus-visible) {
  outline: 0 !important;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

abbr[title],
abbr[data-original-title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: 700;
}

dd {
  margin-bottom: .5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1rem;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
}

a:hover {
  color: #0056b3;
  text-decoration: underline;
}

a:not([href]):not([class]) {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}

pre,
code,
kbd,
samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
}

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  -ms-overflow-style: scrollbar;
}

figure {
  margin: 0 0 1rem;
}

img {
  vertical-align: middle;
  border-style: none;
}

svg {
  overflow: hidden;
  vertical-align: middle;
}

table {
  border-collapse: collapse;
}

caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #6c757d;
  text-align: left;
  caption-side: bottom;
}

th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}

label {
  display: inline-block;
  margin-bottom: 0.5rem;
}

button {
  border-radius: 0;
}

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

[role="button"] {
  cursor: pointer;
}

select {
  word-wrap: normal;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
  cursor: pointer;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

input[type="radio"],
input[type="checkbox"] {
  box-sizing: border-box;
  padding: 0;
}

textarea {
  overflow: auto;
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: .5rem;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  outline-offset: -2px;
  -webkit-appearance: none;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

output {
  display: inline-block;
}

summary {
  display: list-item;
  cursor: pointer;
}

template {
  display: none;
}

[hidden] {
  display: none !important;
}
/*# sourceMappingURL=bootstrap-reboot.css.map */

================================================
FILE: 03-bootstrap-kategorisi/bolum-sonu-projesi/css/bootstrap.css
================================================
/*!
 * Bootstrap v4.5.3 (https://getbootstrap.com/)
 * Copyright 2011-2020 The Bootstrap Authors
 * Copyright 2011-2020 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
}

[tabindex="-1"]:focus:not(:focus-visible) {
  outline: 0 !important;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

abbr[title],
abbr[data-original-title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: 700;
}

dd {
  margin-bottom: .5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1rem;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
}

a:hover {
  color: #0056b3;
  text-decoration: underline;
}

a:not([href]):not([class]) {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}

pre,
code,
kbd,
samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
}

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  -ms-overflow-style: scrollbar;
}

figure {
  margin: 0 0 1rem;
}

img {
  vertical-align: middle;
  border-style: none;
}

svg {
  overflow: hidden;
  vertical-align: middle;
}

table {
  border-collapse: collapse;
}

caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #6c757d;
  text-align: left;
  caption-side: bottom;
}

th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}

label {
  display: inline-block;
  margin-bottom: 0.5rem;
}

button {
  border-radius: 0;
}

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

[role="button"] {
  cursor: pointer;
}

select {
  word-wrap: normal;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
  cursor: pointer;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

input[type="radio"],
input[type="checkbox"] {
  box-sizing: border-box;
  padding: 0;
}

textarea {
  overflow: auto;
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: .5rem;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  outline-offset: -2px;
  -webkit-appearance: none;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

output {
  display: inline-block;
}

summary {
  display: list-item;
  cursor: pointer;
}

template {
  display: none;
}

[hidden] {
  display: none !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

h1, .h1 {
  font-size: 2.5rem;
}

h2, .h2 {
  font-size: 2rem;
}

h3, .h3 {
  font-size: 1.75rem;
}

h4, .h4 {
  font-size: 1.5rem;
}

h5, .h5 {
  font-size: 1.25rem;
}

h6, .h6 {
  font-size: 1rem;
}

.lead {
  font-size: 1.25rem;
  font-weight: 300;
}

.display-1 {
  font-size: 6rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-2 {
  font-size: 5.5rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-3 {
  font-size: 4.5rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-4 {
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1.2;
}

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

small,
.small {
  font-size: 80%;
  font-weight: 400;
}

mark,
.mark {
  padding: 0.2em;
  background-color: #fcf8e3;
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

.list-inline {
  padding-left: 0;
  list-style: none;
}

.list-inline-item {
  display: inline-block;
}

.list-inline-item:not(:last-child) {
  margin-right: 0.5rem;
}

.initialism {
  font-size: 90%;
  text-transform: uppercase;
}

.blockquote {
  margin-bottom: 1rem;
  font-size: 1.25rem;
}

.blockquote-footer {
  display: block;
  font-size: 80%;
  color: #6c757d;
}

.blockquote-footer::before {
  content: "\2014\00A0";
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.img-thumbnail {
  padding: 0.25rem;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  max-width: 100%;
  height: auto;
}

.figure {
  display: inline-block;
}

.figure-img {
  margin-bottom: 0.5rem;
  line-height: 1;
}

.figure-caption {
  font-size: 90%;
  color: #6c757d;
}

code {
  font-size: 87.5%;
  color: #e83e8c;
  word-wrap: break-word;
}

a > code {
  color: inherit;
}

kbd {
  padding: 0.2rem 0.4rem;
  font-size: 87.5%;
  color: #fff;
  background-color: #212529;
  border-radius: 0.2rem;
}

kbd kbd {
  padding: 0;
  font-size: 100%;
  font-weight: 700;
}

pre {
  display: block;
  font-size: 87.5%;
  color: #212529;
}

pre code {
  font-size: inherit;
  color: inherit;
  word-break: normal;
}

.pre-scrollable {
  max-height: 340px;
  overflow-y: scroll;
}

.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container, .container-sm {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container, .container-sm, .container-md {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container, .container-sm, .container-md, .container-lg {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1140px;
  }
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}

.row-cols-1 > * {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

.row-cols-2 > * {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.row-cols-3 > * {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.row-cols-4 > * {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.row-cols-5 > * {
  -ms-flex: 0 0 20%;
  flex: 0 0 20%;
  max-width: 20%;
}

.row-cols-6 > * {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.col-auto {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

.col-1 {
  -ms-flex: 0 0 8.333333%;
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}

.col-2 {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.col-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.col-5 {
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}

.col-6 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  -ms-flex: 0 0 58.333333%;
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}

.col-8 {
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

.col-9 {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  -ms-flex: 0 0 83.333333%;
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}

.col-11 {
  -ms-flex: 0 0 91.666667%;
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}

.col-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

.order-first {
  -ms-flex-order: -1;
  order: -1;
}

.order-last {
  -ms-flex-order: 13;
  order: 13;
}

.order-0 {
  -ms-flex-order: 0;
  order: 0;
}

.order-1 {
  -ms-flex-order: 1;
  order: 1;
}

.order-2 {
  -ms-flex-order: 2;
  order: 2;
}

.order-3 {
  -ms-flex-order: 3;
  order: 3;
}

.order-4 {
  -ms-flex-order: 4;
  order: 4;
}

.order-5 {
  -ms-flex-order: 5;
  order: 5;
}

.order-6 {
  -ms-flex-order: 6;
  order: 6;
}

.order-7 {
  -ms-flex-order: 7;
  order: 7;
}

.order-8 {
  -ms-flex-order: 8;
  order: 8;
}

.order-9 {
  -ms-flex-order: 9;
  order: 9;
}

.order-10 {
  -ms-flex-order: 10;
  order: 10;
}

.order-11 {
  -ms-flex-order: 11;
  order: 11;
}

.order-12 {
  -ms-flex-order: 12;
  order: 12;
}

.offset-1 {
  margin-left: 8.333333%;
}

.offset-2 {
  margin-left: 16.666667%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-4 {
  margin-left: 33.333333%;
}

.offset-5 {
  margin-left: 41.666667%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-7 {
  margin-left: 58.333333%;
}

.offset-8 {
  margin-left: 66.666667%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-10 {
  margin-left: 83.333333%;
}

.offset-11 {
  margin-left: 91.666667%;
}

@media (min-width: 576px) {
  .col-sm {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .row-cols-sm-1 > * {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .row-cols-sm-2 > * {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .row-cols-sm-3 > * {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .row-cols-sm-4 > * {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .row-cols-sm-5 > * {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
  .row-cols-sm-6 > * {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-sm-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-sm-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-sm-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-sm-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-sm-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-sm-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-sm-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-sm-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-sm-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-sm-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-sm-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-sm-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-sm-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-sm-first {
    -ms-flex-order: -1;
    order: -1;
  }
  .order-sm-last {
    -ms-flex-order: 13;
    order: 13;
  }
  .order-sm-0 {
    -ms-flex-order: 0;
    order: 0;
  }
  .order-sm-1 {
    -ms-flex-order: 1;
    order: 1;
  }
  .order-sm-2 {
    -ms-flex-order: 2;
    order: 2;
  }
  .order-sm-3 {
    -ms-flex-order: 3;
    order: 3;
  }
  .order-sm-4 {
    -ms-flex-order: 4;
    order: 4;
  }
  .order-sm-5 {
    -ms-flex-order: 5;
    order: 5;
  }
  .order-sm-6 {
    -ms-flex-order: 6;
    order: 6;
  }
  .order-sm-7 {
    -ms-flex-order: 7;
    order: 7;
  }
  .order-sm-8 {
    -ms-flex-order: 8;
    order: 8;
  }
  .order-sm-9 {
    -ms-flex-order: 9;
    order: 9;
  }
  .order-sm-10 {
    -ms-flex-order: 10;
    order: 10;
  }
  .order-sm-11 {
    -ms-flex-order: 11;
    order: 11;
  }
  .order-sm-12 {
    -ms-flex-order: 12;
    order: 12;
  }
  .offset-sm-0 {
    margin-left: 0;
  }
  .offset-sm-1 {
    margin-left: 8.333333%;
  }
  .offset-sm-2 {
    margin-left: 16.666667%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .offset-sm-4 {
    margin-left: 33.333333%;
  }
  .offset-sm-5 {
    margin-left: 41.666667%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  .offset-sm-7 {
    margin-left: 58.333333%;
  }
  .offset-sm-8 {
    margin-left: 66.666667%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  .offset-sm-10 {
    margin-left: 83.333333%;
  }
  .offset-sm-11 {
    margin-left: 91.666667%;
  }
}

@media (min-width: 768px) {
  .col-md {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .row-cols-md-1 > * {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .row-cols-md-2 > * {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .row-cols-md-3 > * {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .row-cols-md-4 > * {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .row-cols-md-5 > * {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
  .row-cols-md-6 > * {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-md-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-md-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-md-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-md-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-md-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-md-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-md-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-md-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-md-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-md-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-md-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-md-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-md-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-md-first {
    -ms-flex-order: -1;
    order: -1;
  }
  .order-md-last {
    -ms-flex-order: 13;
    order: 13;
  }
  .order-md-0 {
    -ms-flex-order: 0;
    order: 0;
  }
  .order-md-1 {
    -ms-flex-order: 1;
    order: 1;
  }
  .order-md-2 {
    -ms-flex-order: 2;
    order: 2;
  }
  .order-md-3 {
    -ms-flex-order: 3;
    order: 3;
  }
  .order-md-4 {
    -ms-flex-order: 4;
    order: 4;
  }
  .order-md-5 {
    -ms-flex-order: 5;
    order: 5;
  }
  .order-md-6 {
    -ms-flex-order: 6;
    order: 6;
  }
  .order-md-7 {
    -ms-flex-order: 7;
    order: 7;
  }
  .order-md-8 {
    -ms-flex-order: 8;
    order: 8;
  }
  .order-md-9 {
    -ms-flex-order: 9;
    order: 9;
  }
  .order-md-10 {
    -ms-flex-order: 10;
    order: 10;
  }
  .order-md-11 {
    -ms-flex-order: 11;
    order: 11;
  }
  .order-md-12 {
    -ms-flex-order: 12;
    order: 12;
  }
  .offset-md-0 {
    margin-left: 0;
  }
  .offset-md-1 {
    margin-left: 8.333333%;
  }
  .offset-md-2 {
    margin-left: 16.666667%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  .offset-md-4 {
    margin-left: 33.333333%;
  }
  .offset-md-5 {
    margin-left: 41.666667%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .offset-md-7 {
    margin-left: 58.333333%;
  }
  .offset-md-8 {
    margin-left: 66.666667%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  .offset-md-10 {
    margin-left: 83.333333%;
  }
  .offset-md-11 {
    margin-left: 91.666667%;
  }
}

@media (min-width: 992px) {
  .col-lg {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .row-cols-lg-1 > * {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .row-cols-lg-2 > * {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .row-cols-lg-3 > * {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .row-cols-lg-4 > * {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .row-cols-lg-5 > * {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
  .row-cols-lg-6 > * {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-lg-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-lg-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-lg-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-lg-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-lg-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-lg-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-lg-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-lg-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-lg-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-lg-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-lg-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-lg-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-lg-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-lg-first {
    -ms-flex-order: -1;
    order: -1;
  }
  .order-lg-last {
    -ms-flex-order: 13;
    order: 13;
  }
  .order-lg-0 {
    -ms-flex-order: 0;
    order: 0;
  }
  .order-lg-1 {
    -ms-flex-order: 1;
    order: 1;
  }
  .order-lg-2 {
    -ms-flex-order: 2;
    order: 2;
  }
  .order-lg-3 {
    -ms-flex-order: 3;
    order: 3;
  }
  .order-lg-4 {
    -ms-flex-order: 4;
    order: 4;
  }
  .order-lg-5 {
    -ms-flex-order: 5;
    order: 5;
  }
  .order-lg-6 {
    -ms-flex-order: 6;
    order: 6;
  }
  .order-lg-7 {
    -ms-flex-order: 7;
    order: 7;
  }
  .order-lg-8 {
    -ms-flex-order: 8;
    order: 8;
  }
  .order-lg-9 {
    -ms-flex-order: 9;
    order: 9;
  }
  .order-lg-10 {
    -ms-flex-order: 10;
    order: 10;
  }
  .order-lg-11 {
    -ms-flex-order: 11;
    order: 11;
  }
  .order-lg-12 {
    -ms-flex-order: 12;
    order: 12;
  }
  .offset-lg-0 {
    margin-left: 0;
  }
  .offset-lg-1 {
    margin-left: 8.333333%;
  }
  .offset-lg-2 {
    margin-left: 16.666667%;
  }
  .offset-lg-3 {
    margin-left: 25%;
  }
  .offset-lg-4 {
    margin-left: 33.333333%;
  }
  .offset-lg-5 {
    margin-left: 41.666667%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .offset-lg-7 {
    margin-left: 58.333333%;
  }
  .offset-lg-8 {
    margin-left: 66.666667%;
  }
  .offset-lg-9 {
    margin-left: 75%;
  }
  .offset-lg-10 {
    margin-left: 83.333333%;
  }
  .offset-lg-11 {
    margin-left: 91.666667%;
  }
}

@media (min-width: 1200px) {
  .col-xl {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .row-cols-xl-1 > * {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .row-cols-xl-2 > * {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .row-cols-xl-3 > * {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .row-cols-xl-4 > * {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .row-cols-xl-5 > * {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
  .row-cols-xl-6 > * {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-xl-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-xl-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-xl-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-xl-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-xl-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-xl-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-xl-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-xl-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-xl-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-xl-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-xl-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-xl-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-xl-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-xl-first {
    -ms-flex-order: -1;
    order: -1;
  }
  .order-xl-last {
    -ms-flex-order: 13;
    order: 13;
  }
  .order-xl-0 {
    -ms-flex-order: 0;
    order: 0;
  }
  .order-xl-1 {
    -ms-flex-order: 1;
    order: 1;
  }
  .order-xl-2 {
    -ms-flex-order: 2;
    order: 2;
  }
  .order-xl-3 {
    -ms-flex-order: 3;
    order: 3;
  }
  .order-xl-4 {
    -ms-flex-order: 4;
    order: 4;
  }
  .order-xl-5 {
    -ms-flex-order: 5;
    order: 5;
  }
  .order-xl-6 {
    -ms-flex-order: 6;
    order: 6;
  }
  .order-xl-7 {
    -ms-flex-order: 7;
    order: 7;
  }
  .order-xl-8 {
    -ms-flex-order: 8;
    order: 8;
  }
  .order-xl-9 {
    -ms-flex-order: 9;
    order: 9;
  }
  .order-xl-10 {
    -ms-flex-order: 10;
    order: 10;
  }
  .order-xl-11 {
    -ms-flex-order: 11;
    order: 11;
  }
  .order-xl-12 {
    -ms-flex-order: 12;
    order: 12;
  }
  .offset-xl-0 {
    margin-left: 0;
  }
  .offset-xl-1 {
    margin-left: 8.333333%;
  }
  .offset-xl-2 {
    margin-left: 16.666667%;
  }
  .offset-xl-3 {
    margin-left: 25%;
  }
  .offset-xl-4 {
    margin-left: 33.333333%;
  }
  .offset-xl-5 {
    margin-left: 41.666667%;
  }
  .offset-xl-6 {
    margin-left: 50%;
  }
  .offset-xl-7 {
    margin-left: 58.333333%;
  }
  .offset-xl-8 {
    margin-left: 66.666667%;
  }
  .offset-xl-9 {
    margin-left: 75%;
  }
  .offset-xl-10 {
    margin-left: 83.333333%;
  }
  .offset-xl-11 {
    margin-left: 91.666667%;
  }
}

.table {
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
}

.table th,
.table td {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid #dee2e6;
}

.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #dee2e6;
}

.table tbody + tbody {
  border-top: 2px solid #dee2e6;
}

.table-sm th,
.table-sm td {
  padding: 0.3rem;
}

.table-bordered {
  border: 1px solid #dee2e6;
}

.table-bordered th,
.table-bordered td {
  border: 1px solid #dee2e6;
}

.table-bordered thead th,
.table-bordered thead td {
  border-bottom-width: 2px;
}

.table-borderless th,
.table-borderless td,
.table-borderless thead th,
.table-borderless tbody + tbody {
  border: 0;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

.table-hover tbody tr:hover {
  color: #212529;
  background-color: rgba(0, 0, 0, 0.075);
}

.table-primary,
.table-primary > th,
.table-primary > td {
  background-color: #b8daff;
}

.table-primary th,
.table-primary td,
.table-primary thead th,
.table-primary tbody + tbody {
  border-color: #7abaff;
}

.table-hover .table-primary:hover {
  background-color: #9fcdff;
}

.table-hover .table-primary:hover > td,
.table-hover .table-primary:hover > th {
  background-color: #9fcdff;
}

.table-secondary,
.table-secondary > th,
.table-secondary > td {
  background-color: #d6d8db;
}

.table-secondary th,
.table-secondary td,
.table-secondary thead th,
.table-secondary tbody + tbody {
  border-color: #b3b7bb;
}

.table-hover .table-secondary:hover {
  background-color: #c8cbcf;
}

.table-hover .table-secondary:hover > td,
.table-hover .table-secondary:hover > th {
  background-color: #c8cbcf;
}

.table-success,
.table-success > th,
.table-success > td {
  background-color: #c3e6cb;
}

.table-success th,
.table-success td,
.table-success thead th,
.table-success tbody + tbody {
  border-color: #8fd19e;
}

.table-hover .table-success:hover {
  background-color: #b1dfbb;
}

.table-hover .table-success:hover > td,
.table-hover .table-success:hover > th {
  background-color: #b1dfbb;
}

.table-info,
.table-info > th,
.table-info > td {
  background-color: #bee5eb;
}

.table-info th,
.table-info td,
.table-info thead th,
.table-info tbody + tbody {
  border-color: #86cfda;
}

.table-hover .table-info:hover {
  background-color: #abdde5;
}

.table-hover .table-info:hover > td,
.table-hover .table-info:hover > th {
  background-color: #abdde5;
}

.table-warning,
.table-warning > th,
.table-warning > td {
  background-color: #ffeeba;
}

.table-warning th,
.table-warning td,
.table-warning thead th,
.table-warning tbody + tbody {
  border-color: #ffdf7e;
}

.table-hover .table-warning:hover {
  background-color: #ffe8a1;
}

.table-hover .table-warning:hover > td,
.table-hover .table-warning:hover > th {
  background-color: #ffe8a1;
}

.table-danger,
.table-danger > th,
.table-danger > td {
  background-color: #f5c6cb;
}

.table-danger th,
.table-danger td,
.table-danger thead th,
.table-danger tbody + tbody {
  border-color: #ed969e;
}

.table-hover .table-danger:hover {
  background-color: #f1b0b7;
}

.table-hover .table-danger:hover > td,
.table-hover .table-danger:hover > th {
  background-color: #f1b0b7;
}

.table-light,
.table-light > th,
.table-light > td {
  background-color: #fdfdfe;
}

.table-light th,
.table-light td,
.table-light thead th,
.table-light tbody + tbody {
  border-color: #fbfcfc;
}

.table-hover .table-light:hover {
  background-color: #ececf6;
}

.table-hover .table-light:hover > td,
.table-hover .table-light:hover > th {
  background-color: #ececf6;
}

.table-dark,
.table-dark > th,
.table-dark > td {
  background-color: #c6c8ca;
}

.table-dark th,
.table-dark td,
.table-dark thead th,
.table-dark tbody + tbody {
  border-color: #95999c;
}

.table-hover .table-dark:hover {
  background-color: #b9bbbe;
}

.table-hover .table-dark:hover > td,
.table-hover .table-dark:hover > th {
  background-color: #b9bbbe;
}

.table-active,
.table-active > th,
.table-active > td {
  background-color: rgba(0, 0, 0, 0.075);
}

.table-hover .table-active:hover {
  background-color: rgba(0, 0, 0, 0.075);
}

.table-hover .table-active:hover > td,
.table-hover .table-active:hover > th {
  background-color: rgba(0, 0, 0, 0.075);
}

.table .thead-dark th {
  color: #fff;
  background-color: #343a40;
  border-color: #454d55;
}

.table .thead-light th {
  color: #495057;
  background-color: #e9ecef;
  border-color: #dee2e6;
}

.table-dark {
  color: #fff;
  background-color: #343a40;
}

.table-dark th,
.table-dark td,
.table-dark thead th {
  border-color: #454d55;
}

.table-dark.table-bordered {
  border: 0;
}

.table-dark.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.05);
}

.table-dark.table-hover tbody tr:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.075);
}

@media (max-width: 575.98px) {
  .table-responsive-sm {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-sm > .table-bordered {
    border: 0;
  }
}

@media (max-width: 767.98px) {
  .table-responsive-md {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-md > .table-bordered {
    border: 0;
  }
}

@media (max-width: 991.98px) {
  .table-responsive-lg {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-lg > .table-bordered {
    border: 0;
  }
}

@media (max-width: 1199.98px) {
  .table-responsive-xl {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-xl > .table-bordered {
    border: 0;
  }
}

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive > .table-bordered {
  border: 0;
}

.form-control {
  display: block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .form-control {
    transition: none;
  }
}

.form-control::-ms-expand {
  background-color: transparent;
  border: 0;
}

.form-control:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #495057;
}

.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-control::-webkit-input-placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control::-moz-placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control:-ms-input-placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control::-ms-input-placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control::placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control:disabled, .form-control[readonly] {
  background-color: #e9ecef;
  opacity: 1;
}

input[type="date"].form-control,
input[type="time"].form-control,
input[type="datetime-local"].form-control,
input[type="month"].form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select.form-control:focus::-ms-value {
  color: #495057;
  background-color: #fff;
}

.form-control-file,
.form-control-range {
  display: block;
  width: 100%;
}

.col-form-label {
  padding-top: calc(0.375rem + 1px);
  padding-bottom: calc(0.375rem + 1px);
  margin-bottom: 0;
  font-size: inherit;
  line-height: 1.5;
}

.col-form-label-lg {
  padding-top: calc(0.5rem + 1px);
  padding-bottom: calc(0.5rem + 1px);
  font-size: 1.25rem;
  line-height: 1.5;
}

.col-form-label-sm {
  padding-top: calc(0.25rem + 1px);
  padding-bottom: calc(0.25rem + 1px);
  font-size: 0.875rem;
  line-height: 1.5;
}

.form-control-plaintext {
  display: block;
  width: 100%;
  padding: 0.375rem 0;
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #212529;
  background-color: transparent;
  border: solid transparent;
  border-width: 1px 0;
}

.form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg {
  padding-right: 0;
  padding-left: 0;
}

.form-control-sm {
  height: calc(1.5em + 0.5rem + 2px);
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}

.form-control-lg {
  height: calc(1.5em + 1rem + 2px);
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
}

select.form-control[size], select.form-control[multiple] {
  height: auto;
}

textarea.form-control {
  height: auto;
}

.form-group {
  margin-bottom: 1rem;
}

.form-text {
  display: block;
  margin-top: 0.25rem;
}

.form-row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}

.form-row > .col,
.form-row > [class*="col-"] {
  padding-right: 5px;
  padding-left: 5px;
}

.form-check {
  position: relative;
  display: block;
  padding-left: 1.25rem;
}

.form-check-input {
  position: absolute;
  margin-top: 0.3rem;
  margin-left: -1.25rem;
}

.form-check-input[disabled] ~ .form-check-label,
.form-check-input:disabled ~ .form-check-label {
  color: #6c757d;
}

.form-check-label {
  margin-bottom: 0;
}

.form-check-inline {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
  align-items: center;
  padding-left: 0;
  margin-right: 0.75rem;
}

.form-check-inline .form-check-input {
  position: static;
  margin-top: 0;
  margin-right: 0.3125rem;
  margin-left: 0;
}

.valid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 80%;
  color: #28a745;
}

.valid-tooltip {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: .1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #fff;
  background-color: rgba(40, 167, 69, 0.9);
  border-radius: 0.25rem;
}

.was-validated :valid ~ .valid-feedback,
.was-validated :valid ~ .valid-tooltip,
.is-valid ~ .valid-feedback,
.is-valid ~ .valid-tooltip {
  display: block;
}

.was-validated .form-control:valid, .form-control.is-valid {
  border-color: #28a745;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated .form-control:valid:focus, .form-control.is-valid:focus {
  border-color: #28a745;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.was-validated textarea.form-control:valid, textarea.form-control.is-valid {
  padding-right: calc(1.5em + 0.75rem);
  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}

.was-validated .custom-select:valid, .custom-select.is-valid {
  border-color: #28a745;
  padding-right: calc(0.75em + 2.3125rem);
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated .custom-select:valid:focus, .custom-select.is-valid:focus {
  border-color: #28a745;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
  color: #28a745;
}

.was-validated .form-check-input:valid ~ .valid-feedback,
.was-validated .form-check-input:valid ~ .valid-tooltip, .form-check-input.is-valid ~ .valid-feedback,
.form-check-input.is-valid ~ .valid-tooltip {
  display: block;
}

.was-validated .custom-control-input:valid ~ .custom-control-label, .custom-control-input.is-valid ~ .custom-control-label {
  color: #28a745;
}

.was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before {
  border-color: #28a745;
}

.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before {
  border-color: #34ce57;
  background-color: #34ce57;
}

.was-validated .custom-control-input:valid:focus ~ .custom-control-label::before, .custom-control-input.is-valid:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before {
  border-color: #28a745;
}

.was-validated .custom-file-input:valid ~ .custom-file-label, .custom-file-input.is-valid ~ .custom-file-label {
  border-color: #28a745;
}

.was-validated .custom-file-input:valid:focus ~ .custom-file-label, .custom-file-input.is-valid:focus ~ .custom-file-label {
  border-color: #28a745;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 80%;
  color: #dc3545;
}

.invalid-tooltip {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: .1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #fff;
  background-color: rgba(220, 53, 69, 0.9);
  border-radius: 0.25rem;
}

.was-validated :invalid ~ .invalid-feedback,
.was-validated :invalid ~ .invalid-tooltip,
.is-invalid ~ .invalid-feedback,
.is-invalid ~ .invalid-tooltip {
  display: block;
}

.was-validated .form-control:invalid, .form-control.is-invalid {
  border-color: #dc3545;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
  padding-right: calc(1.5em + 0.75rem);
  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}

.was-validated .custom-select:invalid, .custom-select.is-invalid {
  border-color: #dc3545;
  padding-right: calc(0.75em + 2.3125rem);
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
  color: #dc3545;
}

.was-validated .form-check-input:invalid ~ .invalid-feedback,
.was-validated .form-check-input:invalid ~ .invalid-tooltip, .form-check-input.is-invalid ~ .invalid-feedback,
.form-check-input.is-invalid ~ .invalid-tooltip {
  display: block;
}

.was-validated .custom-control-input:invalid ~ .custom-control-label, .custom-control-input.is-invalid ~ .custom-control-label {
  color: #dc3545;
}

.was-validated .custom-control-input:invalid ~ .custom-control-label::before, .custom-control-input.is-invalid ~ .custom-control-label::before {
  border-color: #dc3545;
}

.was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before, .custom-control-input.is-invalid:checked ~ .custom-control-label::before {
  border-color: #e4606d;
  background-color: #e4606d;
}

.was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before, .custom-control-input.is-invalid:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before {
  border-color: #dc3545;
}

.was-validated .custom-file-input:invalid ~ .custom-file-label, .custom-file-input.is-invalid ~ .custom-file-label {
  border-color: #dc3545;
}

.was-validated .custom-file-input:invalid:focus ~ .custom-file-label, .custom-file-input.is-invalid:focus ~ .custom-file-label {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.form-inline {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -ms-flex-align: center;
  align-items: center;
}

.form-inline .form-check {
  width: 100%;
}

@media (min-width: 576px) {
  .form-inline label {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 0;
  }
  .form-inline .form-group {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 0;
  }
  .form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }
  .form-inline .form-control-plaintext {
    display: inline-block;
  }
  .form-inline .input-group,
  .form-inline .custom-select {
    width: auto;
  }
  .form-inline .form-check {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: auto;
    padding-left: 0;
  }
  .form-inline .form-check-input {
    position: relative;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-top: 0;
    margin-right: 0.25rem;
    margin-left: 0;
  }
  .form-inline .custom-control {
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .form-inline .custom-control-label {
    margin-bottom: 0;
  }
}

.btn {
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

.btn:hover {
  color: #212529;
  text-decoration: none;
}

.btn:focus, .btn.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.btn.disabled, .btn:disabled {
  opacity: 0.65;
}

.btn:not(:disabled):not(.disabled) {
  cursor: pointer;
}

a.btn.disabled,
fieldset:disabled a.btn {
  pointer-events: none;
}

.btn-primary {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:hover {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
}

.btn-primary:focus, .btn-primary.focus {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

.btn-primary.disabled, .btn-primary:disabled {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #0062cc;
  border-color: #005cbf;
}

.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

.btn-secondary {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-secondary:hover {
  color: #fff;
  background-color: #5a6268;
  border-color: #545b62;
}

.btn-secondary:focus, .btn-secondary.focus {
  color: #fff;
  background-color: #5a6268;
  border-color: #545b62;
  box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}

.btn-secondary.disabled, .btn-secondary:disabled {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
  color: #fff;
  background-color: #545b62;
  border-color: #4e555b;
}

.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}

.btn-success {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

.btn-success:hover {
  color: #fff;
  background-color: #218838;
  border-color: #1e7e34;
}

.btn-success:focus, .btn-success.focus {
  color: #fff;
  background-color: #218838;
  border-color: #1e7e34;
  box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
}

.btn-success.disabled, .btn-success:disabled {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
  color: #fff;
  background-color: #1e7e34;
  border-color: #1c7430;
}

.btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus,
.show > .btn-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
}

.btn-info {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.btn-info:hover {
  color: #fff;
  background-color: #138496;
  border-color: #117a8b;
}

.btn-info:focus, .btn-info.focus {
  color: #fff;
  background-color: #138496;
  border-color: #117a8b;
  box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
}

.btn-info.disabled, .btn-info:disabled {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active,
.show > .btn-info.dropdown-toggle {
  color: #fff;
  background-color: #117a8b;
  border-color: #10707f;
}

.btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus,
.show > .btn-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
}

.btn-warning {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-warning:hover {
  color: #212529;
  background-color: #e0a800;
  border-color: #d39e00;
}

.btn-warning:focus, .btn-warning.focus {
  color: #212529;
  background-color: #e0a800;
  border-color: #d39e00;
  box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);
}

.btn-warning.disabled, .btn-warning:disabled {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active,
.show > .btn-warning.dropdown-toggle {
  color: #212529;
  background-color: #d39e00;
  border-color: #c69500;
}

.btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus,
.show > .btn-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);
}

.btn-danger {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-danger:hover {
  color: #fff;
  background-color: #c82333;
  border-color: #bd2130;
}

.btn-danger:focus, .btn-danger.focus {
  color: #fff;
  background-color: #c82333;
  border-color: #bd2130;
  box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
}

.btn-danger.disabled, .btn-danger:disabled {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active,
.show > .btn-danger.dropdown-toggle {
  color: #fff;
  background-color: #bd2130;
  border-color: #b21f2d;
}

.btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus,
.show > .btn-danger.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
}

.btn-light {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-light:hover {
  color: #212529;
  background-color: #e2e6ea;
  border-color: #dae0e5;
}

.btn-light:focus, .btn-light.focus {
  color: #212529;
  background-color: #e2e6ea;
  border-color: #dae0e5;
  box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5);
}

.btn-light.disabled, .btn-light:disabled {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active,
.show > .btn-light.dropdown-toggle {
  color: #212529;
  background-color: #dae0e5;
  border-color: #d3d9df;
}

.btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus,
.show > .btn-light.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5);
}

.btn-dark {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}

.btn-dark:hover {
  color: #fff;
  background-color: #23272b;
  border-color: #1d2124;
}

.btn-dark:focus, .btn-dark.focus {
  color: #fff;
  background-color: #23272b;
  border-color: #1d2124;
  box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5);
}

.btn-dark.disabled, .btn-dark:disabled {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}

.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active,
.show > .btn-dark.dropdown-toggle {
  color: #fff;
  background-color: #1d2124;
  border-color: #171a1d;
}

.btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus,
.show > .btn-dark.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5);
}

.btn-outline-primary {
  color: #007bff;
  border-color: #007bff;
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-outline-primary:focus, .btn-outline-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.btn-outline-primary.disabled, .btn-outline-primary:disabled {
  color: #007bff;
  background-color: transparent;
}

.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.btn-outline-secondary {
  color: #6c757d;
  border-color: #6c757d;
}

.btn-outline-secondary:hover {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-outline-secondary:focus, .btn-outline-secondary.focus {
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}

.btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
  color: #6c757d;
  background-color: transparent;
}

.btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active,
.show > .btn-outline-secondary.dropdown-toggle {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}

.btn-outline-success {
  color: #28a745;
  border-color: #28a745;
}

.btn-outline-success:hover {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

.btn-outline-success:focus, .btn-outline-success.focus {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}

.btn-outline-success.disabled, .btn-outline-success:disabled {
  color: #28a745;
  background-color: transparent;
}

.btn-outline-success:not(:disabled):not(.disabled):active, .btn-outline-success:not(:disabled):not(.disabled).active,
.show > .btn-outline-success.dropdown-toggle {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

.btn-outline-success:not(:disabled):not(.disabled):active:focus, .btn-outline-success:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}

.btn-outline-info {
  color: #17a2b8;
  border-color: #17a2b8;
}

.btn-outline-info:hover {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.btn-outline-info:focus, .btn-outline-info.focus {
  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}

.btn-outline-info.disabled, .btn-outline-info:disabled {
  color: #17a2b8;
  background-color: transparent;
}

.btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active,
.show > .btn-outline-info.dropdown-toggle {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}

.btn-outline-warning {
  color: #ffc107;
  border-color: #ffc107;
}

.btn-outline-warning:hover {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-outline-warning:focus, .btn-outline-warning.focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

.btn-outline-warning.disabled, .btn-outline-warning:disabled {
  color: #ffc107;
  background-color: transparent;
}

.btn-outline-warning:not(:disabled):not(.disabled):active, .btn-outline-warning:not(:disabled):not(.disabled).active,
.show > .btn-outline-warning.dropdown-toggle {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-outline-warning:not(:disabled):not(.disabled):active:focus, .btn-outline-warning:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

.btn-outline-danger {
  color: #dc3545;
  border-color: #dc3545;
}

.btn-outline-danger:hover {
  color: #fff;
  background-color: #dc
Download .txt
gitextract_1xipjz63/

├── .gitignore
├── 01-html-kategorisi/
│   ├── 005-Aciklama-Satirlari-Olusturmak.html
│   ├── 006-Basliklar-ve-Paragraflarla-Calismak.html
│   ├── 007-Listelerle-Calismak.html
│   ├── 008-Emmet-ile-Daha-Hizlica-HTML-Etiketleri-Olusturmak.html
│   ├── 009-Gorsellerle-Calismak.html
│   ├── 010-Linklerle-Calismak.html
│   ├── 011-Blok-Elementler-Div-Span-ve-Diger-Inline-Elementler-Ile-Calismak.html
│   ├── 012-HTML-Etiketlerine-Ekstra-Ozellikler-Eklemek.html
│   ├── 013-HTML-Isteketinin-Genel-Yapisini-Anlamak.html
│   ├── 014-Semantic-Etiketlerin-Kullanimi.html
│   ├── README.md
│   └── bolum-sonu-calismasi/
│       ├── about-us.html
│       ├── contact.html
│       └── index.html
├── 02-css-kategorisi/
│   ├── 002-CSS-Inline-CSS-Temel-Kullanimi.html
│   ├── 003-Inline-Internal-ve-External-CSS-Kullanimlar/
│   │   ├── about-us.html
│   │   ├── contact.html
│   │   ├── css/
│   │   │   └── kodluyoruz.css
│   │   ├── index.html
│   │   └── inline-css.html
│   ├── 004-Aciklama-Satiri-ve-Genel-Font-Ozellikleri/
│   │   ├── about-us.html
│   │   ├── contact.html
│   │   ├── css/
│   │   │   └── kodluyoruz.css
│   │   └── index.html
│   ├── 005-CSS-Class-ve-ID-Kullanimi/
│   │   ├── css/
│   │   │   └── kodluyoruz.css
│   │   └── index.html
│   ├── 006-CSS-Seciciler-Ile-Istedigimiz-Yerin-Secilebilmesi/
│   │   ├── css/
│   │   │   └── kodluyoruz.css
│   │   └── index.html
│   ├── 007-CSS-Margin-Padding-Width-Height-ile-Kutu-Ozelliklerinin-Kullanimi/
│   │   ├── css/
│   │   │   └── kodluyoruz.css
│   │   └── index.html
│   ├── 008-Bolum-Sonu-Calismasi/
│   │   ├── css/
│   │   │   └── kodluyoruz.css
│   │   └── index.html
│   └── README.md
├── 03-bootstrap-kategorisi/
│   ├── 003.html
│   ├── 004.html
│   ├── 005.html
│   ├── 006.html
│   ├── 008.html
│   ├── 009.html
│   ├── 010.html
│   ├── README.md
│   └── bolum-sonu-projesi/
│       ├── css/
│       │   ├── bootstrap-grid.css
│       │   ├── bootstrap-reboot.css
│       │   ├── bootstrap.css
│       │   └── medium.css
│       ├── fontawesome/
│       │   ├── LICENSE.txt
│       │   ├── attribution.js
│       │   ├── css/
│       │   │   ├── all.css
│       │   │   ├── brands.css
│       │   │   ├── fontawesome.css
│       │   │   ├── regular.css
│       │   │   ├── solid.css
│       │   │   ├── svg-with-js.css
│       │   │   └── v4-shims.css
│       │   ├── js/
│       │   │   ├── all.js
│       │   │   ├── brands.js
│       │   │   ├── conflict-detection.js
│       │   │   ├── fontawesome.js
│       │   │   ├── regular.js
│       │   │   ├── solid.js
│       │   │   └── v4-shims.js
│       │   ├── less/
│       │   │   ├── _animated.less
│       │   │   ├── _bordered-pulled.less
│       │   │   ├── _core.less
│       │   │   ├── _fixed-width.less
│       │   │   ├── _icons.less
│       │   │   ├── _larger.less
│       │   │   ├── _list.less
│       │   │   ├── _mixins.less
│       │   │   ├── _rotated-flipped.less
│       │   │   ├── _screen-reader.less
│       │   │   ├── _shims.less
│       │   │   ├── _stacked.less
│       │   │   ├── _variables.less
│       │   │   ├── brands.less
│       │   │   ├── fontawesome.less
│       │   │   ├── regular.less
│       │   │   ├── solid.less
│       │   │   └── v4-shims.less
│       │   ├── metadata/
│       │   │   ├── categories.yml
│       │   │   ├── icons.json
│       │   │   ├── icons.yml
│       │   │   ├── shims.json
│       │   │   ├── shims.yml
│       │   │   └── sponsors.yml
│       │   └── scss/
│       │       ├── _animated.scss
│       │       ├── _bordered-pulled.scss
│       │       ├── _core.scss
│       │       ├── _fixed-width.scss
│       │       ├── _icons.scss
│       │       ├── _larger.scss
│       │       ├── _list.scss
│       │       ├── _mixins.scss
│       │       ├── _rotated-flipped.scss
│       │       ├── _screen-reader.scss
│       │       ├── _shims.scss
│       │       ├── _stacked.scss
│       │       ├── _variables.scss
│       │       ├── brands.scss
│       │       ├── fontawesome.scss
│       │       ├── regular.scss
│       │       ├── solid.scss
│       │       └── v4-shims.scss
│       ├── index.html
│       └── js/
│           ├── bootstrap.bundle.js
│           └── bootstrap.js
├── 04-javascript-kategorisi/
│   ├── README.MD
│   ├── data/
│   │   └── settings.json
│   ├── index.html
│   └── js/
│       ├── 001-hello-world.js
│       ├── 002-degisken-tanimlama.js
│       ├── 003-degisken-tanimlama-kurallari.js
│       ├── 004-number-veri-turu-ile-calismak.js
│       ├── 005-boolean-veri-turu-ile-calismak.js
│       ├── 006-veri-turu-ve-veri-turu-donusumleri.js
│       ├── 007-template-literals-kullanimi.js
│       ├── 008-string-veri-turu-islemleri.js
│       ├── 009-document-object-model.js
│       ├── 010-dom-icerisinden-oge-secimi.js
│       ├── 011-prompt-ile-kullanicidan-bilgi-almak.js
│       ├── 012-liste-icindeki-ogeye-ulasmak-veya-yeni-oge-eklemek.js
│       ├── 013-css-class-eklemek-veya-cikartmak.js
│       ├── 014-karsilastirma-operatorleri-ve-mantiksal-operatorler.js
│       ├── 015-kosullarla-calismak.js
│       ├── 016-coklu-kosullar-ile-calismak.js
│       ├── 017-ternary-operator-ile-short-if-kullanimi.js
│       ├── 018-kosullarla-calismak-bolum-sonu-egzersizi.js
│       ├── 019-fonksiyonlar-neden-fonksiyonlara-ihtiyac-duyariz-ve-ilk-fonksiyonumuz.js
│       ├── 020-fonksiyona-parametre-atamak-ve-geridonus-almak.js
│       ├── 021-arrow-function-kullanimi.js
│       ├── 022-dom-etkinlikleriyle-calismak.js
│       ├── 023-functions-bolum-sonu-egzersizi.js
│       ├── 024-localStorage-icerisine-veri-eklemek-duzenlemek-ve-silmek.js
│       ├── 025-localStorage-icerisinde-farkli-turde-bilgilerin-saklanmasi.js
│       ├── 026-localStorage-bolum-sonu-egzersizi.js
│       ├── 027-form-submit-yonetimi.js
│       ├── 028-input-icerisindeki-veriyi-almak.js
│       ├── 029-formlarla-calismak-bolum-sonu-egzersizi.js
│       ├── 030-dizi-olusturmak-ve-dizi-icindeki-ilk-son-elemana-ulasmak.js
│       ├── 031-array-yapisina-oge-eklemek-cikartmak-ve-guncellemek.js
│       ├── 032-cok-kullanilan-array-dizi-metotlari.js
│       ├── 033-for-dongusu-kullanimi.js
│       ├── 034-break-ve-continue-kullanimi.js
│       ├── 035-while-dongusu-kullanimi.js
│       ├── 036-array-forEach-kullanimi.js
│       ├── 037-array-filter-kullanimi.js
│       ├── 038-array-map-kullanimi.js
│       ├── 039-object-nedir-nasil-olusturulur.js
│       ├── 040-object-key-ve-value-yapisinin-kullanimi.js
│       ├── 041-object-icinde-metot-nasil-ekleriz.js
│       ├── 042-09-042-object-ve-array-destructuring-nasil-kullanilir.js
│       ├── 043-hata-yonetimi-icin-try-catch-kullanimi.js
│       └── 044-fetch-api-ile-calismak.js
└── README.md
Download .txt
SYMBOL INDEX (393 symbols across 27 files)

FILE: 03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/js/all.js
  function bunker (line 35) | function bunker(fn) {
  function _defineProperty (line 45) | function _defineProperty(obj, key, value) {
  function _objectSpread (line 60) | function _objectSpread(target) {
  function defineIcons (line 86) | function defineIcons(prefix, icons) {
  function bunker (line 617) | function bunker(fn) {
  function _defineProperty (line 627) | function _defineProperty(obj, key, value) {
  function _objectSpread (line 642) | function _objectSpread(target) {
  function defineIcons (line 668) | function defineIcons(prefix, icons) {
  function bunker (line 893) | function bunker(fn) {
  function _defineProperty (line 903) | function _defineProperty(obj, key, value) {
  function _objectSpread (line 918) | function _objectSpread(target) {
  function defineIcons (line 944) | function defineIcons(prefix, icons) {
  function _typeof (line 1992) | function _typeof(obj) {
  function _classCallCheck (line 2006) | function _classCallCheck(instance, Constructor) {
  function _defineProperties (line 2012) | function _defineProperties(target, props) {
  function _createClass (line 2022) | function _createClass(Constructor, protoProps, staticProps) {
  function _defineProperty (line 2028) | function _defineProperty(obj, key, value) {
  function _objectSpread (line 2043) | function _objectSpread(target) {
  function _slicedToArray (line 2062) | function _slicedToArray(arr, i) {
  function _toConsumableArray (line 2066) | function _toConsumableArray(arr) {
  function _arrayWithoutHoles (line 2070) | function _arrayWithoutHoles(arr) {
  function _arrayWithHoles (line 2078) | function _arrayWithHoles(arr) {
  function _iterableToArray (line 2082) | function _iterableToArray(iter) {
  function _iterableToArrayLimit (line 2086) | function _iterableToArrayLimit(arr, i) {
  function _nonIterableSpread (line 2112) | function _nonIterableSpread() {
  function _nonIterableRest (line 2116) | function _nonIterableRest() {
  function getAttrConfig (line 2211) | function getAttrConfig(attr) {
  function coerce (line 2219) | function coerce(val) {
  function domready (line 2290) | function domready (fn) {
  function asyncFlush (line 2307) | function asyncFlush() {
  function asyncCall (line 2318) | function asyncCall(callback, arg) {
  function invokeResolver (line 2327) | function invokeResolver(resolver, promise) {
  function invokeCallback (line 2343) | function invokeCallback(subscriber) {
  function handleThenable (line 2371) | function handleThenable(promise, value) {
  function resolve (line 2414) | function resolve(promise, value) {
  function fulfill (line 2420) | function fulfill(promise, value) {
  function reject (line 2428) | function reject(promise, reason) {
  function publish (line 2436) | function publish(promise) {
  function publishFulfillment (line 2440) | function publishFulfillment(promise) {
  function publishRejection (line 2445) | function publishRejection(promise) {
  function notifyRejectionHandled (line 2454) | function notifyRejectionHandled(promise) {
  function P (line 2462) | function P(resolver) {
  function resolver (line 2521) | function resolver(index) {
  function isReserved (line 2594) | function isReserved(name) {
  function bunker (line 2598) | function bunker(fn) {
  function insertCss (line 2607) | function insertCss(css) {
  function nextUniqueId (line 2631) | function nextUniqueId() {
  function toArray (line 2641) | function toArray(obj) {
  function classArray (line 2650) | function classArray(node) {
  function getIconName (line 2659) | function getIconName(familyPrefix, cls) {
  function htmlEscape (line 2670) | function htmlEscape(str) {
  function joinAttributes (line 2673) | function joinAttributes(attributes) {
  function joinStyles (line 2678) | function joinStyles(styles) {
  function transformIsMeaningful (line 2683) | function transformIsMeaningful(transform) {
  function transformForSvg (line 2686) | function transformForSvg(_ref) {
  function transformForCss (line 2708) | function transformForCss(_ref2) {
  function fillBlack (line 2738) | function fillBlack(abstract) {
  function deGroup (line 2748) | function deGroup(abstract) {
  function makeIconMasking (line 2756) | function makeIconMasking (_ref) {
  function makeIconStandard (line 2829) | function makeIconStandard (_ref) {
  function asIcon (line 2870) | function asIcon (_ref) {
  function asSymbol (line 2897) | function asSymbol (_ref) {
  function makeInlineSvgAbstract (line 2919) | function makeInlineSvgAbstract(params) {
  function makeLayersTextAbstract (line 2996) | function makeLayersTextAbstract(params) {
  function makeLayersCounterAbstract (line 3053) | function makeLayersCounterAbstract(params) {
  function toHex (line 3163) | function toHex(unicode) {
  function codePointAt (line 3173) | function codePointAt(string, index) {
  function isPrivateUnicode (line 3194) | function isPrivateUnicode(iconName) {
  function defineIcons (line 3203) | function defineIcons(prefix, icons) {
  function byUnicode (line 3284) | function byUnicode(prefix, unicode) {
  function byLigature (line 3287) | function byLigature(prefix, ligature) {
  function byOldName (line 3290) | function byOldName(name) {
  function getCanonicalIcon (line 3305) | function getCanonicalIcon(values) {
  function iconFromMapping (line 3324) | function iconFromMapping(mapping, prefix, iconName) {
  function toHtml (line 3334) | function toHtml(abstractNodes) {
  function isWatched (line 3350) | function isWatched(node) {
  function getMutator (line 3355) | function getMutator() {
  function performOperationSync (line 3414) | function performOperationSync(op) {
  function perform (line 3418) | function perform(mutations, callback) {
  function disableObservation (line 3440) | function disableObservation() {
  function enableObservation (line 3443) | function enableObservation() {
  function observe (line 3447) | function observe(options) {
  function disconnect (line 3498) | function disconnect() {
  function styleParser (line 3503) | function styleParser (node) {
  function classParser (line 3524) | function classParser (node) {
  function transformParser (line 3612) | function transformParser (node) {
  function symbolParser (line 3616) | function symbolParser (node) {
  function attributesParser (line 3621) | function attributesParser (node) {
  function maskParser (line 3644) | function maskParser (node) {
  function blankMeta (line 3656) | function blankMeta() {
  function parseMeta (line 3673) | function parseMeta(node) {
  function MissingIcon (line 3701) | function MissingIcon(error) {
  function resolveCustomIconVersion (line 3780) | function resolveCustomIconVersion() {
  function asFoundIcon (line 3801) | function asFoundIcon(icon) {
  function findIcon (line 3850) | function findIcon(iconName, prefix) {
  function generateSvgReplacementMutation (line 3880) | function generateSvgReplacementMutation(node, nodeMeta) {
  function generateLayersText (line 3916) | function generateLayersText(node, nodeMeta) {
  function generateMutation (line 3945) | function generateMutation(node) {
  function onTree (line 3955) | function onTree(root) {
  function onNode (line 4025) | function onNode(node) {
  function replaceForPosition (line 4034) | function replaceForPosition(node, position) {
  function replace (line 4111) | function replace(node) {
  function processable (line 4115) | function processable(node) {
  function searchPseudoElements (line 4119) | function searchPseudoElements (root) {
  function css (line 4139) | function css () {
  function Library (line 4159) | function Library() {
  function ensureCss (line 4207) | function ensureCss() {
  function apiObject (line 4215) | function apiObject(val, abstractCreator) {
  function findIconDefinition (line 4237) | function findIconDefinition(iconLookup) {
  function resolveIcons (line 4245) | function resolveIcons(next) {
  function bootstrap (line 4488) | function bootstrap() {

FILE: 03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/js/brands.js
  function bunker (line 35) | function bunker(fn) {
  function _defineProperty (line 45) | function _defineProperty(obj, key, value) {
  function _objectSpread (line 60) | function _objectSpread(target) {
  function defineIcons (line 86) | function defineIcons(prefix, icons) {

FILE: 03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/js/conflict-detection.js
  function _typeof (line 11) | function _typeof(obj) {
  function _defineProperty (line 25) | function _defineProperty(obj, key, value) {
  function _objectSpread (line 40) | function _objectSpread(target) {
  function domready (line 94) | function domready (fn) {
  function report (line 99) | function report (_ref) {
  function createCommonjsModule (line 167) | function createCommonjsModule(fn, module) {
  function safeAdd (line 183) | function safeAdd(x, y) {
  function bitRotateLeft (line 197) | function bitRotateLeft(num, cnt) {
  function md5cmn (line 213) | function md5cmn(q, a, b, x, s, t) {
  function md5ff (line 230) | function md5ff(a, b, c, d, x, s, t) {
  function md5gg (line 247) | function md5gg(a, b, c, d, x, s, t) {
  function md5hh (line 264) | function md5hh(a, b, c, d, x, s, t) {
  function md5ii (line 281) | function md5ii(a, b, c, d, x, s, t) {
  function binlMD5 (line 293) | function binlMD5(x, len) {
  function binl2rstr (line 392) | function binl2rstr(input) {
  function rstr2binl (line 412) | function rstr2binl(input) {
  function rstrMD5 (line 437) | function rstrMD5(s) {
  function rstrHMACMD5 (line 449) | function rstrHMACMD5(key, data) {
  function rstr2hex (line 477) | function rstr2hex(input) {
  function str2rstrUTF8 (line 498) | function str2rstrUTF8(input) {
  function rawMD5 (line 509) | function rawMD5(s) {
  function hexMD5 (line 520) | function hexMD5(s) {
  function rawHMACMD5 (line 532) | function rawHMACMD5(k, d) {
  function hexHMACMD5 (line 544) | function hexHMACMD5(k, d) {
  function md5 (line 559) | function md5(string, key, raw) {
  function md5ForNode (line 583) | function md5ForNode(node) {
  function pollUntil (line 610) | function pollUntil(_ref) {
  function detectWebfontConflicts (line 652) | function detectWebfontConflicts() {
  function detectSvgConflicts (line 771) | function detectSvgConflicts(currentScript) {
  function setDoneResults (line 851) | function setDoneResults(_ref2) {
  function conflictDetection (line 860) | function conflictDetection() {
  function bunker (line 978) | function bunker(fn) {

FILE: 03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/js/fontawesome.js
  function _typeof (line 8) | function _typeof(obj) {
  function _classCallCheck (line 22) | function _classCallCheck(instance, Constructor) {
  function _defineProperties (line 28) | function _defineProperties(target, props) {
  function _createClass (line 38) | function _createClass(Constructor, protoProps, staticProps) {
  function _defineProperty (line 44) | function _defineProperty(obj, key, value) {
  function _objectSpread (line 59) | function _objectSpread(target) {
  function _slicedToArray (line 78) | function _slicedToArray(arr, i) {
  function _toConsumableArray (line 82) | function _toConsumableArray(arr) {
  function _arrayWithoutHoles (line 86) | function _arrayWithoutHoles(arr) {
  function _arrayWithHoles (line 94) | function _arrayWithHoles(arr) {
  function _iterableToArray (line 98) | function _iterableToArray(iter) {
  function _iterableToArrayLimit (line 102) | function _iterableToArrayLimit(arr, i) {
  function _nonIterableSpread (line 128) | function _nonIterableSpread() {
  function _nonIterableRest (line 132) | function _nonIterableRest() {
  function getAttrConfig (line 227) | function getAttrConfig(attr) {
  function coerce (line 235) | function coerce(val) {
  function domready (line 306) | function domready (fn) {
  function asyncFlush (line 323) | function asyncFlush() {
  function asyncCall (line 334) | function asyncCall(callback, arg) {
  function invokeResolver (line 343) | function invokeResolver(resolver, promise) {
  function invokeCallback (line 359) | function invokeCallback(subscriber) {
  function handleThenable (line 387) | function handleThenable(promise, value) {
  function resolve (line 430) | function resolve(promise, value) {
  function fulfill (line 436) | function fulfill(promise, value) {
  function reject (line 444) | function reject(promise, reason) {
  function publish (line 452) | function publish(promise) {
  function publishFulfillment (line 456) | function publishFulfillment(promise) {
  function publishRejection (line 461) | function publishRejection(promise) {
  function notifyRejectionHandled (line 470) | function notifyRejectionHandled(promise) {
  function P (line 478) | function P(resolver) {
  function resolver (line 537) | function resolver(index) {
  function isReserved (line 610) | function isReserved(name) {
  function bunker (line 614) | function bunker(fn) {
  function insertCss (line 623) | function insertCss(css) {
  function nextUniqueId (line 647) | function nextUniqueId() {
  function toArray (line 657) | function toArray(obj) {
  function classArray (line 666) | function classArray(node) {
  function getIconName (line 675) | function getIconName(familyPrefix, cls) {
  function htmlEscape (line 686) | function htmlEscape(str) {
  function joinAttributes (line 689) | function joinAttributes(attributes) {
  function joinStyles (line 694) | function joinStyles(styles) {
  function transformIsMeaningful (line 699) | function transformIsMeaningful(transform) {
  function transformForSvg (line 702) | function transformForSvg(_ref) {
  function transformForCss (line 724) | function transformForCss(_ref2) {
  function fillBlack (line 754) | function fillBlack(abstract) {
  function deGroup (line 764) | function deGroup(abstract) {
  function makeIconMasking (line 772) | function makeIconMasking (_ref) {
  function makeIconStandard (line 845) | function makeIconStandard (_ref) {
  function asIcon (line 886) | function asIcon (_ref) {
  function asSymbol (line 913) | function asSymbol (_ref) {
  function makeInlineSvgAbstract (line 935) | function makeInlineSvgAbstract(params) {
  function makeLayersTextAbstract (line 1012) | function makeLayersTextAbstract(params) {
  function makeLayersCounterAbstract (line 1069) | function makeLayersCounterAbstract(params) {
  function toHex (line 1179) | function toHex(unicode) {
  function codePointAt (line 1189) | function codePointAt(string, index) {
  function isPrivateUnicode (line 1210) | function isPrivateUnicode(iconName) {
  function defineIcons (line 1219) | function defineIcons(prefix, icons) {
  function byUnicode (line 1300) | function byUnicode(prefix, unicode) {
  function byLigature (line 1303) | function byLigature(prefix, ligature) {
  function byOldName (line 1306) | function byOldName(name) {
  function getCanonicalIcon (line 1321) | function getCanonicalIcon(values) {
  function iconFromMapping (line 1340) | function iconFromMapping(mapping, prefix, iconName) {
  function toHtml (line 1350) | function toHtml(abstractNodes) {
  function isWatched (line 1366) | function isWatched(node) {
  function getMutator (line 1371) | function getMutator() {
  function performOperationSync (line 1430) | function performOperationSync(op) {
  function perform (line 1434) | function perform(mutations, callback) {
  function disableObservation (line 1456) | function disableObservation() {
  function enableObservation (line 1459) | function enableObservation() {
  function observe (line 1463) | function observe(options) {
  function disconnect (line 1514) | function disconnect() {
  function styleParser (line 1519) | function styleParser (node) {
  function classParser (line 1540) | function classParser (node) {
  function transformParser (line 1628) | function transformParser (node) {
  function symbolParser (line 1632) | function symbolParser (node) {
  function attributesParser (line 1637) | function attributesParser (node) {
  function maskParser (line 1660) | function maskParser (node) {
  function blankMeta (line 1672) | function blankMeta() {
  function parseMeta (line 1689) | function parseMeta(node) {
  function MissingIcon (line 1717) | function MissingIcon(error) {
  function resolveCustomIconVersion (line 1796) | function resolveCustomIconVersion() {
  function asFoundIcon (line 1817) | function asFoundIcon(icon) {
  function findIcon (line 1866) | function findIcon(iconName, prefix) {
  function generateSvgReplacementMutation (line 1896) | function generateSvgReplacementMutation(node, nodeMeta) {
  function generateLayersText (line 1932) | function generateLayersText(node, nodeMeta) {
  function generateMutation (line 1961) | function generateMutation(node) {
  function onTree (line 1971) | function onTree(root) {
  function onNode (line 2041) | function onNode(node) {
  function replaceForPosition (line 2050) | function replaceForPosition(node, position) {
  function replace (line 2127) | function replace(node) {
  function processable (line 2131) | function processable(node) {
  function searchPseudoElements (line 2135) | function searchPseudoElements (root) {
  function css (line 2155) | function css () {
  function Library (line 2175) | function Library() {
  function ensureCss (line 2223) | function ensureCss() {
  function apiObject (line 2231) | function apiObject(val, abstractCreator) {
  function findIconDefinition (line 2253) | function findIconDefinition(iconLookup) {
  function resolveIcons (line 2261) | function resolveIcons(next) {
  function bootstrap (line 2504) | function bootstrap() {

FILE: 03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/js/regular.js
  function bunker (line 35) | function bunker(fn) {
  function _defineProperty (line 45) | function _defineProperty(obj, key, value) {
  function _objectSpread (line 60) | function _objectSpread(target) {
  function defineIcons (line 86) | function defineIcons(prefix, icons) {

FILE: 03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/js/solid.js
  function bunker (line 35) | function bunker(fn) {
  function _defineProperty (line 45) | function _defineProperty(obj, key, value) {
  function _objectSpread (line 60) | function _objectSpread(target) {
  function defineIcons (line 86) | function defineIcons(prefix, icons) {

FILE: 03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/js/v4-shims.js
  function bunker (line 38) | function bunker(fn) {

FILE: 03-bootstrap-kategorisi/bolum-sonu-projesi/js/bootstrap.bundle.js
  function _interopDefaultLegacy (line 12) | function _interopDefaultLegacy (e) { return e && typeof e === 'object' &...
  function _defineProperties (line 16) | function _defineProperties(target, props) {
  function _createClass (line 26) | function _createClass(Constructor, protoProps, staticProps) {
  function _extends (line 32) | function _extends() {
  function _inheritsLoose (line 50) | function _inheritsLoose(subClass, superClass) {
  function toType (line 72) | function toType(obj) {
  function getSpecialTransitionEndEvent (line 80) | function getSpecialTransitionEndEvent() {
  function transitionEndEmulator (line 94) | function transitionEndEmulator(duration) {
  function setTransitionEndSupport (line 109) | function setTransitionEndSupport() {
  function Alert (line 256) | function Alert(element) {
  function Button (line 418) | function Button(element) {
  function Carousel (line 664) | function Carousel(element, config) {
  function Collapse (line 1213) | function Collapse(element, config) {
  function microtaskDebounce (line 1558) | function microtaskDebounce(fn) {
  function taskDebounce (line 1572) | function taskDebounce(fn) {
  function isFunction (line 1605) | function isFunction(functionToCheck) {
  function getStyleComputedProperty (line 1617) | function getStyleComputedProperty(element, property) {
  function getParentNode (line 1634) | function getParentNode(element) {
  function getScrollParent (line 1648) | function getScrollParent(element) {
  function getReferenceNode (line 1683) | function getReferenceNode(reference) {
  function isIE (line 1697) | function isIE(version) {
  function getOffsetParent (line 1714) | function getOffsetParent(element) {
  function isOffsetContainer (line 1743) | function isOffsetContainer(element) {
  function getRoot (line 1759) | function getRoot(node) {
  function findCommonOffsetParent (line 1775) | function findCommonOffsetParent(element1, element2) {
  function getScroll (line 1819) | function getScroll(element) {
  function includeScroll (line 1843) | function includeScroll(rect, element) {
  function getBordersSize (line 1866) | function getBordersSize(styles, axis) {
  function getSize (line 1873) | function getSize(axis, body, html, computedStyle) {
  function getWindowSizes (line 1877) | function getWindowSizes(document) {
  function defineProperties (line 1895) | function defineProperties(target, props) {
  function getClientRect (line 1952) | function getClientRect(offsets) {
  function getBoundingClientRect (line 1966) | function getBoundingClientRect(element) {
  function getOffsetRectRelativeToArbitraryNode (line 2015) | function getOffsetRectRelativeToArbitraryNode(children, parent) {
  function getViewportOffsetRectRelativeToArtbitraryNode (line 2067) | function getViewportOffsetRectRelativeToArtbitraryNode(element) {
  function isFixed (line 2096) | function isFixed(element) {
  function getFixedPositionOffsetParent (line 2119) | function getFixedPositionOffsetParent(element) {
  function getBoundaries (line 2142) | function getBoundaries(popper, reference, padding, boundariesElement) {
  function getArea (line 2196) | function getArea(_ref) {
  function computeAutoPlacement (line 2212) | function computeAutoPlacement(placement, refRect, popper, reference, bou...
  function getReferenceOffsets (line 2273) | function getReferenceOffsets(state, popper, reference) {
  function getOuterSizes (line 2287) | function getOuterSizes(element) {
  function getOppositePlacement (line 2306) | function getOppositePlacement(placement) {
  function getPopperOffsets (line 2323) | function getPopperOffsets(popper, referenceOffsets, placement) {
  function find (line 2361) | function find(arr, check) {
  function findIndex (line 2380) | function findIndex(arr, prop, value) {
  function runModifiers (line 2405) | function runModifiers(modifiers, data, ends) {
  function update (line 2435) | function update() {
  function isModifierEnabled (line 2487) | function isModifierEnabled(modifiers, modifierName) {
  function getSupportedPropertyName (line 2502) | function getSupportedPropertyName(property) {
  function destroy (line 2521) | function destroy() {
  function getWindow (line 2551) | function getWindow(element) {
  function attachToScrollParents (line 2556) | function attachToScrollParents(scrollParent, event, callback, scrollPare...
  function setupEventListeners (line 2573) | function setupEventListeners(reference, options, state, updateBound) {
  function enableEventListeners (line 2593) | function enableEventListeners() {
  function removeEventListeners (line 2605) | function removeEventListeners(reference, state) {
  function disableEventListeners (line 2629) | function disableEventListeners() {
  function isNumeric (line 2643) | function isNumeric(n) {
  function setStyles (line 2655) | function setStyles(element, styles) {
  function setAttributes (line 2674) | function setAttributes(element, attributes) {
  function applyStyle (line 2694) | function applyStyle(data) {
  function applyStyleOnLoad (line 2723) | function applyStyleOnLoad(reference, popper, options, modifierOptions, s...
  function getRoundedOffsets (line 2760) | function getRoundedOffsets(data, shouldRound) {
  function computeStyle (line 2799) | function computeStyle(data, options) {
  function isModifierRequired (line 2900) | function isModifierRequired(modifiers, requestingName, requestedName) {
  function arrow (line 2925) | function arrow(data, options) {
  function getOppositeVariation (line 3007) | function getOppositeVariation(variation) {
  function clockwise (line 3062) | function clockwise(placement) {
  function flip (line 3083) | function flip(data, options) {
  function keepTogether (line 3180) | function keepTogether(data) {
  function toValue (line 3214) | function toValue(str, measurement, popperOffsets, referenceOffsets) {
  function parseOffset (line 3266) | function parseOffset(offset, popperOffsets, referenceOffsets, basePlacem...
  function offset (line 3342) | function offset(data, _ref) {
  function preventOverflow (line 3383) | function preventOverflow(data, options) {
  function shift (line 3454) | function shift(data) {
  function hide (line 3487) | function hide(data) {
  function inner (line 3525) | function inner(data) {
  function Popper (line 3992) | function Popper(reference, popper) {
  function Dropdown (line 4210) | function Dropdown(element, config) {
  function Modal (line 4708) | function Modal(element, config) {
  function allowedAttribute (line 5321) | function allowedAttribute(attr, allowedAttributeList) {
  function sanitizeHtml (line 5345) | function sanitizeHtml(unsafeHtml, whiteList, sanitizeFn) {
  function Tooltip (line 5472) | function Tooltip(element, config) {
  function Popover (line 6149) | function Popover() {
  function ScrollSpy (line 6323) | function ScrollSpy(element, config) {
  function Tab (line 6607) | function Tab(element) {
  function Toast (line 6835) | function Toast(element, config) {

FILE: 03-bootstrap-kategorisi/bolum-sonu-projesi/js/bootstrap.js
  function _interopDefaultLegacy (line 12) | function _interopDefaultLegacy (e) { return e && typeof e === 'object' &...
  function _defineProperties (line 17) | function _defineProperties(target, props) {
  function _createClass (line 27) | function _createClass(Constructor, protoProps, staticProps) {
  function _extends (line 33) | function _extends() {
  function _inheritsLoose (line 51) | function _inheritsLoose(subClass, superClass) {
  function toType (line 73) | function toType(obj) {
  function getSpecialTransitionEndEvent (line 81) | function getSpecialTransitionEndEvent() {
  function transitionEndEmulator (line 95) | function transitionEndEmulator(duration) {
  function setTransitionEndSupport (line 110) | function setTransitionEndSupport() {
  function Alert (line 257) | function Alert(element) {
  function Button (line 419) | function Button(element) {
  function Carousel (line 665) | function Carousel(element, config) {
  function Collapse (line 1214) | function Collapse(element, config) {
  function Dropdown (line 1597) | function Dropdown(element, config) {
  function Modal (line 2095) | function Modal(element, config) {
  function allowedAttribute (line 2708) | function allowedAttribute(attr, allowedAttributeList) {
  function sanitizeHtml (line 2732) | function sanitizeHtml(unsafeHtml, whiteList, sanitizeFn) {
  function Tooltip (line 2859) | function Tooltip(element, config) {
  function Popover (line 3536) | function Popover() {
  function ScrollSpy (line 3710) | function ScrollSpy(element, config) {
  function Tab (line 3994) | function Tab(element) {
  function Toast (line 4222) | function Toast(element, config) {

FILE: 04-javascript-kategorisi/js/002-degisken-tanimlama.js
  constant SERVER_PASSWORD (line 47) | const SERVER_PASSWORD = "oisjefo9jwes221"

FILE: 04-javascript-kategorisi/js/003-degisken-tanimlama-kurallari.js
  constant PASSWORD (line 22) | const PASSWORD = "1234" // dogru kullanim
  constant SERVER_PASSWORD (line 23) | const SERVER_PASSWORD = "1234"

FILE: 04-javascript-kategorisi/js/007-template-literals-kullanimi.js
  constant DOMAIN (line 5) | const DOMAIN = "kodluyoruz.org"

FILE: 04-javascript-kategorisi/js/008-string-veri-turu-islemleri.js
  constant DOMAIN (line 28) | let DOMAIN = email.slice( email.search("@") + 1)

FILE: 04-javascript-kategorisi/js/018-kosullarla-calismak-bolum-sonu-egzersizi.js
  constant SMILE (line 20) | const SMILE = `
  constant FROWN (line 27) | const FROWN = `

FILE: 04-javascript-kategorisi/js/019-fonksiyonlar-neden-fonksiyonlara-ihtiyac-duyariz-ve-ilk-fonksiyonumuz.js
  function helloWorld (line 3) | function helloWorld() {
  function hello (line 7) | function hello() {

FILE: 04-javascript-kategorisi/js/020-fonksiyona-parametre-atamak-ve-geridonus-almak.js
  function greetings (line 11) | function greetings(firstName="", lastName="") { // default parametre ali...
  function greetings2 (line 21) | function greetings2(firstName, lastName) {
  function domIdWriteInfo (line 30) | function domIdWriteInfo(id, info) {

FILE: 04-javascript-kategorisi/js/021-arrow-function-kullanimi.js
  function hello (line 4) | function hello(firstName) {

FILE: 04-javascript-kategorisi/js/022-dom-etkinlikleriyle-calismak.js
  function domClick (line 8) | function domClick() {

FILE: 04-javascript-kategorisi/js/023-functions-bolum-sonu-egzersizi.js
  function clickEvent (line 13) | function clickEvent() {

FILE: 04-javascript-kategorisi/js/026-localStorage-bolum-sonu-egzersizi.js
  function clickEvent (line 13) | function clickEvent() {

FILE: 04-javascript-kategorisi/js/027-form-submit-yonetimi.js
  function formSubmit (line 6) | function formSubmit(event) {

FILE: 04-javascript-kategorisi/js/028-input-icerisindeki-veriyi-almak.js
  function formSubmit (line 7) | function formSubmit(event) {

FILE: 04-javascript-kategorisi/js/029-formlarla-calismak-bolum-sonu-egzersizi.js
  function formHandler (line 21) | function formHandler(event) {

FILE: 04-javascript-kategorisi/js/034-break-ve-continue-kullanimi.js
  constant LOREM_LIST (line 4) | const LOREM_LIST = [
  constant UL_DOM (line 20) | const UL_DOM = document.querySelector('#userList')

FILE: 04-javascript-kategorisi/js/036-array-forEach-kullanimi.js
  constant PRODUCTS (line 5) | const PRODUCTS = ["Laptop", "Phone", "Speaker", "Desktop PC", "Server", ...

FILE: 04-javascript-kategorisi/js/037-array-filter-kullanimi.js
  constant PRODUCTS (line 5) | const PRODUCTS = ["Mic", "Cable", "Speaker", "Desktop PC", "Server", "Mo...
  constant NEW_PRODUCTS (line 7) | const NEW_PRODUCTS = PRODUCTS.filter(item => item.length > 5)
  constant USERS (line 12) | const USERS = [
  constant ACTIVE_USERS (line 20) | const ACTIVE_USERS = USERS.filter(user => user.isActive )

FILE: 04-javascript-kategorisi/js/038-array-map-kullanimi.js
  constant USERS (line 4) | const USERS = ["AYSE", "MehMet", "TugCE", "AkSEL"]
  constant NEW_USERS (line 11) | const NEW_USERS = USERS.map( user => user.toLowerCase() )
  constant USERS_OBJ (line 22) | const USERS_OBJ = USERS.map( item => (
Condensed preview — 155 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (7,980K chars).
[
  {
    "path": ".gitignore",
    "chars": 1043,
    "preview": "# Created by https://www.toptal.com/developers/gitignore/api/windows,vscode,macos\n# Edit at https://www.toptal.com/devel"
  },
  {
    "path": "01-html-kategorisi/005-Aciklama-Satirlari-Olusturmak.html",
    "chars": 230,
    "preview": "<h1>Kodluyoruz - Front-End 101</h1>\n\n<!-- aciklama yazildi -->\n\n<!-- \n  birden fazla satir icerisinde \n  aciklama kullan"
  },
  {
    "path": "01-html-kategorisi/006-Basliklar-ve-Paragraflarla-Calismak.html",
    "chars": 721,
    "preview": "<h1>Kodluyoruz - Front-End</h1>\n<!-- açıklama yazıldı -->\n<h2>HTML</h2>\n<h3>Açıklamalarla Çalışmak</h3>\n<p>\n    Lorem ip"
  },
  {
    "path": "01-html-kategorisi/007-Listelerle-Calismak.html",
    "chars": 467,
    "preview": "<h1>Listeler</h1>\n<!--\n  Sıralı Listeler -> 1, 2, 3 ordered list ? -> ol\n  Sıralı Olmayan listeler -> *, *, *, unordered"
  },
  {
    "path": "01-html-kategorisi/008-Emmet-ile-Daha-Hizlica-HTML-Etiketleri-Olusturmak.html",
    "chars": 802,
    "preview": "<h2>Emmet / Zen Coding</h2>\n\n<!--\n    etiket isimlerini direkt verebiliyoruz\n    + kardeş öğe\n    > içinde öğe\n    ^ yuk"
  },
  {
    "path": "01-html-kategorisi/009-Gorsellerle-Calismak.html",
    "chars": 387,
    "preview": "<h2>Görsellerle Çalışmak</h2>\n\n<!-- img -->\n\n<img width=\"200\" height=\"200\" src=\"images/1.jpg\" alt=\"Deri kitap kapagı\" />"
  },
  {
    "path": "01-html-kategorisi/010-Linklerle-Calismak.html",
    "chars": 782,
    "preview": "<h2>Linkler ile Çalışmak</h2>\n\n<!--\n    - Başka bir web sayfasına git\n    - Başka bir sayfaya git \n    - Aynı sayfa için"
  },
  {
    "path": "01-html-kategorisi/011-Blok-Elementler-Div-Span-ve-Diger-Inline-Elementler-Ile-Calismak.html",
    "chars": 715,
    "preview": "<h1>HTML</h1>\n<h2>Blok Elements</h2>\n\n<p>\n  Lorem ipsum dolor <strong>sit amet consectetur adipisicing</strong> elit.\n  "
  },
  {
    "path": "01-html-kategorisi/012-HTML-Etiketlerine-Ekstra-Ozellikler-Eklemek.html",
    "chars": 200,
    "preview": "<h1>HTML</h1>\n<img src=\"\" alt=\"\" />\n<a\n  id=\"ikiKelimeBoşlukOlamaz\"\n  class=\"birinci-sınıf ikinci-sınıf\"\n  data-id=\"\"\n  "
  },
  {
    "path": "01-html-kategorisi/013-HTML-Isteketinin-Genel-Yapisini-Anlamak.html",
    "chars": 588,
    "preview": "<!DOCTYPE html>\n<html lang=\"en\">\n  <!-- lang: Yazdigimiz Dokumanin Dili.. Yani Turkce Icerik Varsa Bu Kisim tr olmali.. "
  },
  {
    "path": "01-html-kategorisi/014-Semantic-Etiketlerin-Kullanimi.html",
    "chars": 1294,
    "preview": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-w"
  },
  {
    "path": "01-html-kategorisi/README.md",
    "chars": 16,
    "preview": "# HTML Temelleri"
  },
  {
    "path": "01-html-kategorisi/bolum-sonu-calismasi/about-us.html",
    "chars": 2536,
    "preview": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-w"
  },
  {
    "path": "01-html-kategorisi/bolum-sonu-calismasi/contact.html",
    "chars": 2370,
    "preview": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-w"
  },
  {
    "path": "01-html-kategorisi/bolum-sonu-calismasi/index.html",
    "chars": 4023,
    "preview": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-w"
  },
  {
    "path": "02-css-kategorisi/002-CSS-Inline-CSS-Temel-Kullanimi.html",
    "chars": 421,
    "preview": "<!DOCTYPE html>\n<html lang=\"tr\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-w"
  },
  {
    "path": "02-css-kategorisi/003-Inline-Internal-ve-External-CSS-Kullanimlar/about-us.html",
    "chars": 335,
    "preview": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-w"
  },
  {
    "path": "02-css-kategorisi/003-Inline-Internal-ve-External-CSS-Kullanimlar/contact.html",
    "chars": 280,
    "preview": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=hz, init"
  },
  {
    "path": "02-css-kategorisi/003-Inline-Internal-ve-External-CSS-Kullanimlar/css/kodluyoruz.css",
    "chars": 81,
    "preview": "h2 {\n  color: red;\n  font-size: 74px;\n}\np {\n  color: black;\n  font-size: 40px;\n}\n"
  },
  {
    "path": "02-css-kategorisi/003-Inline-Internal-ve-External-CSS-Kullanimlar/index.html",
    "chars": 839,
    "preview": "<!DOCTYPE html>\n<html lang=\"tr\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-w"
  },
  {
    "path": "02-css-kategorisi/003-Inline-Internal-ve-External-CSS-Kullanimlar/inline-css.html",
    "chars": 421,
    "preview": "<!DOCTYPE html>\n<html lang=\"tr\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-w"
  },
  {
    "path": "02-css-kategorisi/004-Aciklama-Satiri-ve-Genel-Font-Ozellikleri/about-us.html",
    "chars": 335,
    "preview": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-w"
  },
  {
    "path": "02-css-kategorisi/004-Aciklama-Satiri-ve-Genel-Font-Ozellikleri/contact.html",
    "chars": 280,
    "preview": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=hz, init"
  },
  {
    "path": "02-css-kategorisi/004-Aciklama-Satiri-ve-Genel-Font-Ozellikleri/css/kodluyoruz.css",
    "chars": 296,
    "preview": "/************** Layout  ***************/\nbody {\n  background-color: black;\n  color: white;\n  font-family: \"Roboto\", sans"
  },
  {
    "path": "02-css-kategorisi/004-Aciklama-Satiri-ve-Genel-Font-Ozellikleri/index.html",
    "chars": 927,
    "preview": "<!DOCTYPE html>\n<html lang=\"tr\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-w"
  },
  {
    "path": "02-css-kategorisi/005-CSS-Class-ve-ID-Kullanimi/css/kodluyoruz.css",
    "chars": 380,
    "preview": "/**************** Layout ************/\n\n/* class -> .text-red {} */\n/* #id-bilgisi -> .text-red {}  */\n\nh1,\nh2,\nh3,\nh4,\n"
  },
  {
    "path": "02-css-kategorisi/005-CSS-Class-ve-ID-Kullanimi/index.html",
    "chars": 1201,
    "preview": "<!DOCTYPE html>\n<html lang=\"tr\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-w"
  },
  {
    "path": "02-css-kategorisi/006-CSS-Seciciler-Ile-Istedigimiz-Yerin-Secilebilmesi/css/kodluyoruz.css",
    "chars": 675,
    "preview": "/**************** Layout ************/\n\n/* class -> .text-red {} */\n/* #id-bilgisi -> .text-red {}  */\n\n/* Css Selektors"
  },
  {
    "path": "02-css-kategorisi/006-CSS-Seciciler-Ile-Istedigimiz-Yerin-Secilebilmesi/index.html",
    "chars": 1437,
    "preview": "<!DOCTYPE html>\n<html lang=\"tr\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-w"
  },
  {
    "path": "02-css-kategorisi/007-CSS-Margin-Padding-Width-Height-ile-Kutu-Ozelliklerinin-Kullanimi/css/kodluyoruz.css",
    "chars": 1546,
    "preview": "body {\n  margin: 0;\n  padding: 0;\n}\n.container {\n  width: 1000px;\n  /*  \n    margin-left: auto;\n    margin-right: auto;*"
  },
  {
    "path": "02-css-kategorisi/007-CSS-Margin-Padding-Width-Height-ile-Kutu-Ozelliklerinin-Kullanimi/index.html",
    "chars": 1104,
    "preview": "<!DOCTYPE html>\n<html lang=\"tr\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-w"
  },
  {
    "path": "02-css-kategorisi/008-Bolum-Sonu-Calismasi/css/kodluyoruz.css",
    "chars": 1813,
    "preview": "body {\n  margin: 0;\n  padding: 0;\n}\n\n.gradient {\n  background: linear-gradient(\n    90deg,\n    rgba(45, 156, 219, 0.6),\n"
  },
  {
    "path": "02-css-kategorisi/008-Bolum-Sonu-Calismasi/index.html",
    "chars": 1157,
    "preview": "<!DOCTYPE html>\n<html lang=\"tr\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-w"
  },
  {
    "path": "02-css-kategorisi/README.md",
    "chars": 15,
    "preview": "# CSS Temelleri"
  },
  {
    "path": "03-bootstrap-kategorisi/003.html",
    "chars": 2135,
    "preview": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <!-- Required meta tags -->\n    <meta charset=\"utf-8\" />\n    <meta\n      n"
  },
  {
    "path": "03-bootstrap-kategorisi/004.html",
    "chars": 2517,
    "preview": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <!-- Required meta tags -->\n    <meta charset=\"utf-8\" />\n    <meta\n      n"
  },
  {
    "path": "03-bootstrap-kategorisi/005.html",
    "chars": 4389,
    "preview": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <!-- Required meta tags -->\n    <meta charset=\"utf-8\" />\n    <meta\n      n"
  },
  {
    "path": "03-bootstrap-kategorisi/006.html",
    "chars": 10661,
    "preview": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <!-- Required meta tags -->\n    <meta charset=\"utf-8\" />\n    <meta\n      n"
  },
  {
    "path": "03-bootstrap-kategorisi/008.html",
    "chars": 3092,
    "preview": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <!-- Required meta tags -->\n    <meta charset=\"utf-8\" />\n    <meta\n      n"
  },
  {
    "path": "03-bootstrap-kategorisi/009.html",
    "chars": 4831,
    "preview": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <!-- Required meta tags -->\n    <meta charset=\"utf-8\" />\n    <meta\n      n"
  },
  {
    "path": "03-bootstrap-kategorisi/010.html",
    "chars": 4758,
    "preview": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <!-- Required meta tags -->\n    <meta charset=\"utf-8\" />\n    <meta\n      n"
  },
  {
    "path": "03-bootstrap-kategorisi/README.md",
    "chars": 22,
    "preview": "# Bootstrap Temelleri\n"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/css/bootstrap-grid.css",
    "chars": 67472,
    "preview": "/*!\n * Bootstrap Grid v4.5.3 (https://getbootstrap.com/)\n * Copyright 2011-2020 The Bootstrap Authors\n * Copyright 2011-"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/css/bootstrap-reboot.css",
    "chars": 4800,
    "preview": "/*!\n * Bootstrap Reboot v4.5.3 (https://getbootstrap.com/)\n * Copyright 2011-2020 The Bootstrap Authors\n * Copyright 201"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/css/bootstrap.css",
    "chars": 198240,
    "preview": "/*!\n * Bootstrap v4.5.3 (https://getbootstrap.com/)\n * Copyright 2011-2020 The Bootstrap Authors\n * Copyright 2011-2020 "
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/css/medium.css",
    "chars": 287,
    "preview": "body {\n    font-family: 'PT Serif', serif;\n}\n\n.bg-yellow {\n    background-color:#FFC017; \n}\n\n.border-bottom-dark {\n    b"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/LICENSE.txt",
    "chars": 1548,
    "preview": "Font Awesome Free License\n-------------------------\n\nFont Awesome Free is free, open source, and GPL friendly. You can u"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/attribution.js",
    "chars": 187,
    "preview": "console.log(`Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com\nLicense - https://fontawesome.com/licens"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/css/all.css",
    "chars": 73625,
    "preview": "/*!\n * Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com\n * License - https://fontawesome.com/license/f"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/css/brands.css",
    "chars": 732,
    "preview": "/*!\n * Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com\n * License - https://fontawesome.com/license/f"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/css/fontawesome.css",
    "chars": 71990,
    "preview": "/*!\n * Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com\n * License - https://fontawesome.com/license/f"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/css/regular.css",
    "chars": 734,
    "preview": "/*!\n * Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com\n * License - https://fontawesome.com/license/f"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/css/solid.css",
    "chars": 727,
    "preview": "/*!\n * Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com\n * License - https://fontawesome.com/license/f"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/css/svg-with-js.css",
    "chars": 8077,
    "preview": "/*!\n * Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com\n * License - https://fontawesome.com/license/f"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/css/v4-shims.css",
    "chars": 41312,
    "preview": "/*!\n * Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com\n * License - https://fontawesome.com/license/f"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/js/all.js",
    "chars": 1262293,
    "preview": "/*!\n * Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com\n * License - https://fontawesome.com/license/f"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/js/brands.js",
    "chars": 455241,
    "preview": "/*!\n * Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com\n * License - https://fontawesome.com/license/f"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/js/conflict-detection.js",
    "chars": 33962,
    "preview": "/*!\n * Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com\n * License - https://fontawesome.com/license/f"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/js/fontawesome.js",
    "chars": 81309,
    "preview": "/*!\n * Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com\n * License - https://fontawesome.com/license/f"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/js/regular.js",
    "chars": 107110,
    "preview": "/*!\n * Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com\n * License - https://fontawesome.com/license/f"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/js/solid.js",
    "chars": 619191,
    "preview": "/*!\n * Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com\n * License - https://fontawesome.com/license/f"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/js/v4-shims.js",
    "chars": 17459,
    "preview": "/*!\n * Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com\n * License - https://fontawesome.com/license/f"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/less/_animated.less",
    "chars": 297,
    "preview": "// Animated Icons\n// --------------------------\n\n.@{fa-css-prefix}-spin {\n  animation: fa-spin 2s infinite linear;\n}\n\n.@"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/less/_bordered-pulled.less",
    "chars": 422,
    "preview": "// Bordered & Pulled\n// -------------------------\n\n.@{fa-css-prefix}-border {\n  border-radius: .1em;\n  border: solid .08"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/less/_core.less",
    "chars": 297,
    "preview": "// Base Class Definition\n// -------------------------\n\n.@{fa-css-prefix}, .fas, .far, .fal, .fad, .fab {\n  -moz-osx-font"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/less/_fixed-width.less",
    "chars": 119,
    "preview": "// Fixed Width Icons\n// -------------------------\n.@{fa-css-prefix}-fw {\n  text-align: center;\n  width: (20em / 16);\n}\n"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/less/_icons.less",
    "chars": 99154,
    "preview": "/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen\n   readers do not read off random characters th"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/less/_larger.less",
    "chars": 454,
    "preview": "// Icon Sizes\n// -------------------------\n\n.larger(@factor) when (@factor > 0) {\n  .larger((@factor - 1));\n\n  .@{fa-css"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/less/_list.less",
    "chars": 322,
    "preview": "// List Icons\n// -------------------------\n\n.@{fa-css-prefix}-ul {\n  list-style-type: none;\n  margin-left: (@fa-li-width"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/less/_mixins.less",
    "chars": 1237,
    "preview": "// Mixins\n// --------------------------\n\n.fa-icon() {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: an"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/less/_rotated-flipped.less",
    "chars": 771,
    "preview": "// Rotated & Flipped Icons\n// -------------------------\n\n.@{fa-css-prefix}-rotate-90  { .fa-icon-rotate(90deg, 1);  }\n.@"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/less/_screen-reader.less",
    "chars": 118,
    "preview": "// Screen Readers\n// -------------------------\n\n.sr-only { .sr-only(); }\n.sr-only-focusable { .sr-only-focusable(); }\n"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/less/_shims.less",
    "chars": 60766,
    "preview": ".@{fa-css-prefix}.@{fa-css-prefix}-glass:before { content: @fa-var-glass-martini; }\n\n.@{fa-css-prefix}.@{fa-css-prefix}-"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/less/_stacked.less",
    "chars": 478,
    "preview": "// Stacked Icons\n// -------------------------\n\n.@{fa-css-prefix}-stack {\n  display: inline-block;\n  height: 2em;\n  line-"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/less/_variables.less",
    "chars": 41848,
    "preview": "// Variables\n// --------------------------\n\n@fa-font-path:         \"../webfonts\";\n@fa-font-size-base:    16px;\n@fa-font-"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/less/brands.less",
    "chars": 811,
    "preview": "/*!\n * Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com\n * License - https://fontawesome.com/license/f"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/less/fontawesome.less",
    "chars": 505,
    "preview": "/*!\n * Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com\n * License - https://fontawesome.com/license/f"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/less/regular.less",
    "chars": 813,
    "preview": "/*!\n * Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com\n * License - https://fontawesome.com/license/f"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/less/solid.less",
    "chars": 806,
    "preview": "/*!\n * Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com\n * License - https://fontawesome.com/license/f"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/less/v4-shims.less",
    "chars": 236,
    "preview": "/*!\n * Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com\n * License - https://fontawesome.com/license/f"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/metadata/categories.yml",
    "chars": 40344,
    "preview": "accessibility:\n  icons:\n    - accessible-icon\n    - american-sign-language-interpreting\n    - assistive-listening-system"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/metadata/icons.json",
    "chars": 3276944,
    "preview": "{\n  \"500px\": {\n    \"changes\": [\n      \"4.4\",\n      \"5.0.0\"\n    ],\n    \"ligatures\": [],\n    \"search\": {\n      \"terms\": []"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/metadata/icons.yml",
    "chars": 296489,
    "preview": "500px:\n  changes:\n    - '4.4'\n    - 5.0.0\n  label: 500px\n  search:\n    terms: []\n  styles:\n    - brands\n  unicode: f26e\n"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/metadata/shims.json",
    "chars": 23699,
    "preview": "[\n  [\n    \"glass\",\n    null,\n    \"glass-martini\"\n  ],\n  [\n    \"meetup\",\n    \"fab\",\n    null\n  ],\n  [\n    \"star-o\",\n    \""
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/metadata/shims.yml",
    "chars": 4682,
    "preview": "area-chart:\n  name: chart-area\narrow-circle-o-down:\n  name: arrow-alt-circle-down\n  prefix: far\narrow-circle-o-left:\n  n"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/metadata/sponsors.yml",
    "chars": 12948,
    "preview": "accusoft:\n  icons:\n    - accusoft\n  label: Accusoft\n  url: 'https://www.accusoft.com'\nadministrator-technology:\n  icons:"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/scss/_animated.scss",
    "chars": 300,
    "preview": "// Animated Icons\n// --------------------------\n\n.#{$fa-css-prefix}-spin {\n  animation: fa-spin 2s infinite linear;\n}\n\n."
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/scss/_bordered-pulled.scss",
    "chars": 428,
    "preview": "// Bordered & Pulled\n// -------------------------\n\n.#{$fa-css-prefix}-border {\n  border: solid .08em $fa-border-color;\n "
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/scss/_core.scss",
    "chars": 332,
    "preview": "// Base Class Definition\n// -------------------------\n\n.#{$fa-css-prefix},\n.fas,\n.far,\n.fal,\n.fad,\n.fab {\n  -moz-osx-fon"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/scss/_fixed-width.scss",
    "chars": 121,
    "preview": "// Fixed Width Icons\n// -------------------------\n.#{$fa-css-prefix}-fw {\n  text-align: center;\n  width: $fa-fw-width;\n}"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/scss/_icons.scss",
    "chars": 118118,
    "preview": "/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen\nreaders do not read off random characters that "
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/scss/_larger.scss",
    "chars": 393,
    "preview": "// Icon Sizes\n// -------------------------\n\n// makes the font 33% larger relative to the icon container\n.#{$fa-css-prefi"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/scss/_list.scss",
    "chars": 322,
    "preview": "// List Icons\n// -------------------------\n\n.#{$fa-css-prefix}-ul {\n  list-style-type: none;\n  margin-left: $fa-li-width"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/scss/_mixins.scss",
    "chars": 1266,
    "preview": "// Mixins\n// --------------------------\n\n@mixin fa-icon {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothi"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/scss/_rotated-flipped.scss",
    "chars": 833,
    "preview": "// Rotated & Flipped Icons\n// -------------------------\n\n.#{$fa-css-prefix}-rotate-90  { @include fa-icon-rotate(90deg, "
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/scss/_screen-reader.scss",
    "chars": 130,
    "preview": "// Screen Readers\n// -------------------------\n\n.sr-only { @include sr-only; }\n.sr-only-focusable { @include sr-only-foc"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/scss/_shims.scss",
    "chars": 65388,
    "preview": ".#{$fa-css-prefix}.#{$fa-css-prefix}-glass:before { content: fa-content($fa-var-glass-martini); }\n\n.#{$fa-css-prefix}.#{"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/scss/_stacked.scss",
    "chars": 505,
    "preview": "// Stacked Icons\n// -------------------------\n\n.#{$fa-css-prefix}-stack {\n  display: inline-block;\n  height: 2em;\n  line"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/scss/_variables.scss",
    "chars": 39157,
    "preview": "// Variables\n// --------------------------\n\n$fa-font-path:         \"../webfonts\" !default;\n$fa-font-size-base:    16px !"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/scss/brands.scss",
    "chars": 803,
    "preview": "/*!\n * Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com\n * License - https://fontawesome.com/license/f"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/scss/fontawesome.scss",
    "chars": 433,
    "preview": "/*!\n * Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com\n * License - https://fontawesome.com/license/f"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/scss/regular.scss",
    "chars": 805,
    "preview": "/*!\n * Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com\n * License - https://fontawesome.com/license/f"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/scss/solid.scss",
    "chars": 798,
    "preview": "/*!\n * Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com\n * License - https://fontawesome.com/license/f"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/fontawesome/scss/v4-shims.scss",
    "chars": 224,
    "preview": "/*!\n * Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com\n * License - https://fontawesome.com/license/f"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/index.html",
    "chars": 20203,
    "preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/js/bootstrap.bundle.js",
    "chars": 236515,
    "preview": "/*!\n  * Bootstrap v4.5.3 (https://getbootstrap.com/)\n  * Copyright 2011-2020 The Bootstrap Authors (https://github.com/t"
  },
  {
    "path": "03-bootstrap-kategorisi/bolum-sonu-projesi/js/bootstrap.js",
    "chars": 143686,
    "preview": "/*!\n  * Bootstrap v4.5.3 (https://getbootstrap.com/)\n  * Copyright 2011-2020 The Bootstrap Authors (https://github.com/t"
  },
  {
    "path": "04-javascript-kategorisi/README.MD",
    "chars": 0,
    "preview": ""
  },
  {
    "path": "04-javascript-kategorisi/data/settings.json",
    "chars": 154,
    "preview": "{\n  \"userName\": \"fakeUser\",\n  \"password\": 1234,\n  \"serverIP\": \"127.0.0.1\", \n  \"serverName\": \"kodluyoruz.org\",\n  \"isAuth\""
  },
  {
    "path": "04-javascript-kategorisi/index.html",
    "chars": 6595,
    "preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-widt"
  },
  {
    "path": "04-javascript-kategorisi/js/001-hello-world.js",
    "chars": 277,
    "preview": "// ********** Merhaba Dunya Ornekleri ********** \n\n// Dokumana(document) Yazdirma Islemi ile Merhaba Dunya:\n// document."
  },
  {
    "path": "04-javascript-kategorisi/js/002-degisken-tanimlama.js",
    "chars": 1344,
    "preview": "// ********** let ve const ile Degisken Tanimlama ********** \n\n// var ile degisken tanimlamak:\n// var serverName = \"api."
  },
  {
    "path": "04-javascript-kategorisi/js/003-degisken-tanimlama-kurallari.js",
    "chars": 1616,
    "preview": "// ********** Degisken Tanimlama Kurallari  ********** \n// https://www.w3schools.com/js/js_conventions.asp\n// https://go"
  },
  {
    "path": "04-javascript-kategorisi/js/004-number-veri-turu-ile-calismak.js",
    "chars": 1475,
    "preview": "// ********** Number Veri Turu ile Calismak ********** \n// number veri turu tanimlamak:\nlet price = 100\nlet tax = 0.18\nl"
  },
  {
    "path": "04-javascript-kategorisi/js/005-boolean-veri-turu-ile-calismak.js",
    "chars": 580,
    "preview": "// ********** Boolean Veri Turu ile Calismak ********** \n\n// 0 ve 1'i Anlamak ->\nlet isActive = false // 0\nisActive = tr"
  },
  {
    "path": "04-javascript-kategorisi/js/006-veri-turu-ve-veri-turu-donusumleri.js",
    "chars": 934,
    "preview": "// ********** Veri Turunu Ogrenmek ve Veri Turu Donusumleri ********** \n\n// veri turunu ogrenmek typeof:\nlet price = 111"
  },
  {
    "path": "04-javascript-kategorisi/js/007-template-literals-kullanimi.js",
    "chars": 564,
    "preview": "// ********** Template Literals Kullanimi ********** \n// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Referen"
  },
  {
    "path": "04-javascript-kategorisi/js/008-string-veri-turu-islemleri.js",
    "chars": 1433,
    "preview": "// ********** String Veri Turu Islemleri ********** \n// https://www.w3schools.com/jsref/jsref_obj_string.asp\n\nlet email "
  },
  {
    "path": "04-javascript-kategorisi/js/009-document-object-model.js",
    "chars": 493,
    "preview": "// DOM\n// https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model\n\n// pathname\nconsole.log(document.locat"
  },
  {
    "path": "04-javascript-kategorisi/js/010-dom-icerisinden-oge-secimi.js",
    "chars": 490,
    "preview": "// ********** DOM Icinden Oge Secimi **********\n\n// https://developer.mozilla.org/en-US/docs/Web/API/Document/getElement"
  },
  {
    "path": "04-javascript-kategorisi/js/011-prompt-ile-kullanicidan-bilgi-almak.js",
    "chars": 320,
    "preview": "// ********** prompt ile Kullanicidan Bilgi Almak **********\n// https://developer.mozilla.org/en-US/docs/Web/API/Window/"
  },
  {
    "path": "04-javascript-kategorisi/js/012-liste-icindeki-ogeye-ulasmak-veya-yeni-oge-eklemek.js",
    "chars": 500,
    "preview": "// ********** liste icerisindeki son elemana ulasmak veya eleman eklemek **********\n\nlet lastChild = document.querySelec"
  },
  {
    "path": "04-javascript-kategorisi/js/013-css-class-eklemek-veya-cikartmak.js",
    "chars": 407,
    "preview": "// ********** css class eklemek veya cikartmak **********\n\nlet greeting = document.querySelector(\"#greeting\")\n\ngreeting."
  },
  {
    "path": "04-javascript-kategorisi/js/014-karsilastirma-operatorleri-ve-mantiksal-operatorler.js",
    "chars": 858,
    "preview": "// ********** Karsilastirma Operatorleri ve Mantiksal Operatorler **********\n// https://www.w3schools.com/js/js_comparis"
  },
  {
    "path": "04-javascript-kategorisi/js/015-kosullarla-calismak.js",
    "chars": 561,
    "preview": "// ********** Kosullarla Calismak **********\n// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statem"
  },
  {
    "path": "04-javascript-kategorisi/js/016-coklu-kosullar-ile-calismak.js",
    "chars": 408,
    "preview": "// ********** Coklu Kosullarla Calismak **********\n\nlet userName = prompt(\"Kullanici Adiniz:\")\nlet age = prompt(\"Yasiniz"
  },
  {
    "path": "04-javascript-kategorisi/js/017-ternary-operator-ile-short-if-kullanimi.js",
    "chars": 439,
    "preview": "// ********** ternary operator ile short if kullanimi **********\n\n// eger kullanici adin varsa yazdir yoksa kullanici bi"
  },
  {
    "path": "04-javascript-kategorisi/js/018-kosullarla-calismak-bolum-sonu-egzersizi.js",
    "chars": 2670,
    "preview": "// Kosullarla Calismak Bolum Sonu Egzersizi:\n\n/* \n1- prompt ile aldigin bilgiye gore asagidaki yapiyi kullanarak notun b"
  },
  {
    "path": "04-javascript-kategorisi/js/019-fonksiyonlar-neden-fonksiyonlara-ihtiyac-duyariz-ve-ilk-fonksiyonumuz.js",
    "chars": 529,
    "preview": "// ** Ilk Fonksiyonumuzu Tanimlamak:\n\nfunction helloWorld() {\n    console.log(\"Hello World\")\n}\n\nfunction hello() {\n    c"
  },
  {
    "path": "04-javascript-kategorisi/js/020-fonksiyona-parametre-atamak-ve-geridonus-almak.js",
    "chars": 1198,
    "preview": "// ********** Fonksiyonlara Parametreler Atamak ve Fonksiyondan Geridonus Almak **********\n\n// Temel Kurallar:\n// 1: Bir"
  },
  {
    "path": "04-javascript-kategorisi/js/021-arrow-function-kullanimi.js",
    "chars": 805,
    "preview": "// Arrow function Kullanimi\n// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functio"
  },
  {
    "path": "04-javascript-kategorisi/js/022-dom-etkinlikleriyle-calismak.js",
    "chars": 386,
    "preview": "// DOM Etkinlikleriyle Calismak\n// https://www.w3schools.com/jsref/dom_obj_event.asp\n// https://developer.mozilla.org/en"
  },
  {
    "path": "04-javascript-kategorisi/js/023-functions-bolum-sonu-egzersizi.js",
    "chars": 487,
    "preview": "// Functions Bolum Sonu Egzersizi\n\nlet counter = 0\nlet counterDOM = document.querySelector('#counter')\nlet increaseDOM ="
  },
  {
    "path": "04-javascript-kategorisi/js/024-localStorage-icerisine-veri-eklemek-duzenlemek-ve-silmek.js",
    "chars": 617,
    "preview": "// Local Storage:\n// https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage\n\n\n// localStorage icerisine bi"
  },
  {
    "path": "04-javascript-kategorisi/js/025-localStorage-icerisinde-farkli-turde-bilgilerin-saklanmasi.js",
    "chars": 659,
    "preview": "// Local Storage Islemleri:\n// Eger tutacagimiz bilgi object ise JSON.stringify ile objeyi string yapiya cevirebiliriz.\n"
  },
  {
    "path": "04-javascript-kategorisi/js/026-localStorage-bolum-sonu-egzersizi.js",
    "chars": 586,
    "preview": "// localStorage Bolum Sonu Egzersizi\n\nlet counter = localStorage.getItem('counter') ? Number(localStorage.getItem('count"
  },
  {
    "path": "04-javascript-kategorisi/js/027-form-submit-yonetimi.js",
    "chars": 241,
    "preview": "// FORM SUBMIT:\n\nlet formDOM = document.querySelector(\"#userForm\")\nformDOM.addEventListener('submit', formSubmit)\n\nfunct"
  },
  {
    "path": "04-javascript-kategorisi/js/028-input-icerisindeki-veriyi-almak.js",
    "chars": 418,
    "preview": "// INPUT icindeki degeri(value) almak\n\nlet formDOM = document.querySelector(\"#userForm\")\nformDOM.addEventListener('submi"
  },
  {
    "path": "04-javascript-kategorisi/js/029-formlarla-calismak-bolum-sonu-egzersizi.js",
    "chars": 1943,
    "preview": "// FORMLARLA CALISMAK: Bolum Sonu Egzersizi\n\n/*\n1: Formu Sec\n2: Input Bilgisini UL icerisine Ekle\n3: Form icindeki bilgi"
  },
  {
    "path": "04-javascript-kategorisi/js/030-dizi-olusturmak-ve-dizi-icindeki-ilk-son-elemana-ulasmak.js",
    "chars": 990,
    "preview": "// array - dizilerle calismak\n\n// Array olusturmak\nlet domain = \"kodluyoruz\"\nlet isActive = false\nlet items = [15, 25, 3"
  },
  {
    "path": "04-javascript-kategorisi/js/031-array-yapisina-oge-eklemek-cikartmak-ve-guncellemek.js",
    "chars": 995,
    "preview": "// Array yapisina oge eklemek ve Array icerisinden istenilen ogenin cikarilmasi\n// https://developer.mozilla.org/en-US/d"
  },
  {
    "path": "04-javascript-kategorisi/js/032-cok-kullanilan-array-dizi-metotlari.js",
    "chars": 1889,
    "preview": "// Cok Kullanilan Array(Dizi) Metotlari ve Array icinde Array\n// https://developer.mozilla.org/en-US/docs/Web/JavaScript"
  },
  {
    "path": "04-javascript-kategorisi/js/033-for-dongusu-kullanimi.js",
    "chars": 606,
    "preview": "// For Dongusu\n// https://developer.mozilla.org/tr/docs/Web/JavaScript/Guide/Loops_and_iteration\n\n// for ([başlangıçAtam"
  },
  {
    "path": "04-javascript-kategorisi/js/034-break-ve-continue-kullanimi.js",
    "chars": 872,
    "preview": "// Break & Continue\n// https://www.w3schools.com/js/js_break.asp\n\nconst LOREM_LIST = [\n  'lorem', 'ipsum', 'dolor', 'ame"
  },
  {
    "path": "04-javascript-kategorisi/js/035-while-dongusu-kullanimi.js",
    "chars": 278,
    "preview": "// While Dongusu\n// https://www.w3schools.com/js/js_loop_while.asp\n\n// let counter = 0;\n\n// while ( counter < 10 ) {\n// "
  },
  {
    "path": "04-javascript-kategorisi/js/036-array-forEach-kullanimi.js",
    "chars": 899,
    "preview": "// Array forEach Metotu\n// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/f"
  },
  {
    "path": "04-javascript-kategorisi/js/037-array-filter-kullanimi.js",
    "chars": 713,
    "preview": "// array filter kullanimi\n// https://developer.mozilla.org/tr/docs/Web/JavaScript/Reference/Global_Objects/Array/filter\n"
  },
  {
    "path": "04-javascript-kategorisi/js/038-array-map-kullanimi.js",
    "chars": 817,
    "preview": "// array map kullanimi\n// https://developer.mozilla.org/tr/docs/Web/JavaScript/Reference/Global_Objects/Array/map\n\nconst"
  },
  {
    "path": "04-javascript-kategorisi/js/039-object-nedir-nasil-olusturulur.js",
    "chars": 473,
    "preview": "// Object(Nesne) Nedir ? Nasıl Oluşturulur?\n// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_"
  },
  {
    "path": "04-javascript-kategorisi/js/040-object-key-ve-value-yapisinin-kullanimi.js",
    "chars": 1215,
    "preview": "// Object Key - Value:\n// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects\n\n// [key1:1"
  },
  {
    "path": "04-javascript-kategorisi/js/041-object-icinde-metot-nasil-ekleriz.js",
    "chars": 285,
    "preview": "// Object icinde metot nasil ekleriz\n\nlet user1 = {\n  firstName: \"Bilgin\",\n  lastName: \"Uzman\",\n  score: [1, 2, 3, 4], \n"
  },
  {
    "path": "04-javascript-kategorisi/js/042-09-042-object-ve-array-destructuring-nasil-kullanilir.js",
    "chars": 1543,
    "preview": "// Object ve Array Destructuring Nasil Kullanilir\n// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/O"
  },
  {
    "path": "04-javascript-kategorisi/js/043-hata-yonetimi-icin-try-catch-kullanimi.js",
    "chars": 467,
    "preview": "// hata-yonetimi-icin-try-catch-kullanimi\n// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statement"
  },
  {
    "path": "04-javascript-kategorisi/js/044-fetch-api-ile-calismak.js",
    "chars": 639,
    "preview": "// fetch api ile calismak\n// https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch\n\n// JSON dosyadan ve"
  },
  {
    "path": "README.md",
    "chars": 3138,
    "preview": "# Kodluyoruz - FrontEnd 101 Eğitimi\n> Hakan Yalçınkaya \n> > [LinkedIn](https://www.linkedin.com/in/hakanyalcinkaya/) - ["
  }
]

About this extraction

This page contains the full source code of the hakanyalcinkaya/kodluyoruz-frontend-101-egitimi GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 155 files (7.3 MB), approximately 1.9M tokens, and a symbol index with 393 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.

Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.

Copied to clipboard!