<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>German Workshop</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

  <style>
    @import url('https://fonts.cdnfonts.com/css/euclid-circular-a');

    * {
      font-family: 'Euclid Circular A', sans-serif;

    }

    body {
      color: #141414;
      padding: 0 auto;

    }
    
    .container {
      max-width: 1380px;

    }

    section {
      padding: 15px 60px;
      background-color: #F9F9F9;
    }

    .business-box {
      background-color: #ffffff;
      padding: 30px;
      border-radius: 7px;
    }

    .business-name a {
      font-weight: 500;
      font-size: 25px;
      text-decoration: none;
      margin-bottom: 20px;
      color: #080D17;
    }

    .business-text {
      font-weight: 400;
      font-size: 16px;
      line-height: 26px;
      margin: 20px 0;

    }

    span {
      font-weight: 400;
      font-size: 16px;
      line-height: 36px;
      letter-spacing: 0%;
      color: #AB0635;
    }

    .business-text-1 {
      margin-bottom: 30px;

    }

    .business-btn a {
      font-weight: 500;
      font-size: 17px;
      color: #AB0635;
      text-decoration: none;
      padding: 10px 15px;
      border: 1px solid var(--Secondary-color, #AB0635);
      border-radius: 5px;
      line-height: 30px;
    }
     .business-btn a:hover{
        background-color: #AB0635;
        color: #ffffff;
      }

    /* pagination */
    .pagination {
      justify-content: center;
      padding: 50px 0;
    }

    .page-item {
      margin: 0 5px;
    }

    .page-link {
      border-radius: 6px;
      border: 1px solid #AB0635;
      color: #AB0635;
      padding: 3px 10px;
    }

    .page-link:hover {
      color: #AB0635;
      background-color: #ffffff;

    }

    .next {
      color: #666D76;
    }

    .next:hover {
      color: #666D76;
    }

    .page-link.active {
      color: #AB0635 !important;
    }

    .workshop-wrapper {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 20px;
      padding-top: 30px;
      padding-bottom: 20px;
      align-items: center;
    }

    .workshop-group {
      color: #080D17;
      font-size: 24px;
      gap: 20px;
      margin: 0;
      font-weight: 500;
    }

    .workshop-group-1 {
      background: #fff;
      border-radius: 8px;
      padding: 5px 20px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 20px;
      margin: 0;
    }

    .form-select {
      border: 1px solid #b3003b;
      border-radius: 6px;
      padding: 10px 70px 10px 10px;
      font-size: 19px;
      color: #333;
      min-width: 180px;
    }

    #select-1 {
      border: 1px solid #b3003b;
      border-radius: 6px;
      padding: 12px 25px 12px 25px !important;
      font-size: 16px;
      color: #333;
      min-width: 100px;
      font-weight: 500;
    }

    .btn-search {
      background-color: #b3003b;
      color: white;
      border: none;
      padding: 18px 18px;
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .btn-search i {
      font-size: 24px;
    }

    .listing-text {
      font-size: 19px;
      color: #212529;
    }

    .listing-text strong {
      font-weight: 500;
    }
    @media only screen and (max-width:768px){
      section{
        padding: 15px 20px;
      }
    }
    .editor-content li{
    gap:25px;
    }
    .Toastify{
        padding:0;
        }
  </style>

  <script type="text/javascript" class="flasher-js">(function () {
        var rootScript = 'https://cdn.jsdelivr.net/npm/@flasher/flasher@1.3.2/dist/flasher.min.js'; var
          []
            = {}; var options = mergeOptions([],
              []
            ); function mergeOptions(first, second) { return { context: merge(first.context || {}, second.context || {}), envelopes: merge(first.envelopes || [], second.envelopes || []), options: merge(first.options || {}, second.options || {}), scripts: merge(first.scripts || [], second.scripts || []), styles: merge(first.styles || [], second.styles || []), }; } function merge(first, second) { if (Array.isArray(first) && Array.isArray(second)) { return first.concat(second).filter(function (item, index, array) { return array.indexOf(item) === index; }); } return Object.assign({}, first, second); } function renderOptions(options) { if (!window.hasOwnProperty('flasher')) { console.error('Flasher is not loaded'); return; } requestAnimationFrame(function () { window.flasher.render(options); }); } function render(options) { if ('loading' !== document.readyState) { renderOptions(options); return; } document.addEventListener('DOMContentLoaded', function () { renderOptions(options); }); } if (1 === document.querySelectorAll('script.flasher-js').length) { document.addEventListener('flasher:render', function (event) { render(event.detail); }); } if (window.hasOwnProperty('flasher') || !rootScript || document.querySelector('script[src="' + rootScript + '"]')) { render(options); } else { var tag = document.createElement('script'); tag.setAttribute('src', rootScript); tag.setAttribute('type', 'text/javascript'); tag.onload = function () { render(options); }; document.head.appendChild(tag); }
      })();</script>
  <script src="https://cdn.jsdelivr.net/npm/@flasher/flasher@1.3.2/dist/flasher.min.js" type="text/javascript"></script>
  <script src="https://cdn.jsdelivr.net/npm/@flasher/flasher@1.3.2/dist/flasher.min.js" type="text/javascript"></script>

  <script type="text/javascript" class="flasher-js">(function () { var rootScript = 'https://cdn.jsdelivr.net/npm/@flasher/flasher@1.3.2/dist/flasher.min.js'; var 
[]
 = {}; var options = mergeOptions([], 
[]
); function mergeOptions(first, second) { return { context: merge(first.context || {}, second.context || {}), envelopes: merge(first.envelopes || [], second.envelopes || []), options: merge(first.options || {}, second.options || {}), scripts: merge(first.scripts || [], second.scripts || []), styles: merge(first.styles || [], second.styles || []), }; } function merge(first, second) { if (Array.isArray(first) && Array.isArray(second)) { return first.concat(second).filter(function (item, index, array) { return array.indexOf(item) === index; }); } return Object.assign({}, first, second); } function renderOptions(options) { if (!window.hasOwnProperty('flasher')) { console.error('Flasher is not loaded'); return; } requestAnimationFrame(function () { window.flasher.render(options); }); } function render(options) { if ('loading' !== document.readyState) { renderOptions(options); return; } document.addEventListener('DOMContentLoaded', function () { renderOptions(options); }); } if (1 === document.querySelectorAll('script.flasher-js').length) { document.addEventListener('flasher:render', function (event) { render(event.detail); }); } if (window.hasOwnProperty('flasher') || !rootScript || document.querySelector('script[src="' + rootScript + '"]')) { render(options); } else { var tag = document.createElement('script'); tag.setAttribute('src', rootScript); tag.setAttribute('type', 'text/javascript'); tag.onload = function () { render(options); }; document.head.appendChild(tag); } })();</script>

<script type="text/javascript" class="flasher-js">(function() {    var rootScript = 'https://cdn.jsdelivr.net/npm/@flasher/flasher@1.3.2/dist/flasher.min.js';    var 
[]
 = {};    var options = mergeOptions([], 
[]
);    function mergeOptions(first, second) {        return {            context: merge(first.context || {}, second.context || {}),            envelopes: merge(first.envelopes || [], second.envelopes || []),            options: merge(first.options || {}, second.options || {}),            scripts: merge(first.scripts || [], second.scripts || []),            styles: merge(first.styles || [], second.styles || []),        };    }    function merge(first, second) {        if (Array.isArray(first) && Array.isArray(second)) {            return first.concat(second).filter(function(item, index, array) {                return array.indexOf(item) === index;            });        }        return Object.assign({}, first, second);    }    function renderOptions(options) {        if(!window.hasOwnProperty('flasher')) {            console.error('Flasher is not loaded');            return;        }        requestAnimationFrame(function () {            window.flasher.render(options);        });    }    function render(options) {        if ('loading' !== document.readyState) {            renderOptions(options);            return;        }        document.addEventListener('DOMContentLoaded', function() {            renderOptions(options);        });    }    if (1 === document.querySelectorAll('script.flasher-js').length) {        document.addEventListener('flasher:render', function (event) {            render(event.detail);        });            }    if (window.hasOwnProperty('flasher') || !rootScript || document.querySelector('script[src="' + rootScript + '"]')) {        render(options);    } else {        var tag = document.createElement('script');        tag.setAttribute('src', rootScript);        tag.setAttribute('type', 'text/javascript');        tag.onload = function () {            render(options);        };        document.head.appendChild(tag);    }})();</script>

<script type="text/javascript" class="flasher-js">(function() {    var rootScript = 'https://cdn.jsdelivr.net/npm/@flasher/flasher@1.3.2/dist/flasher.min.js';    var 
[]
 = {};    var options = mergeOptions([], 
[]
);    function mergeOptions(first, second) {        return {            context: merge(first.context || {}, second.context || {}),            envelopes: merge(first.envelopes || [], second.envelopes || []),            options: merge(first.options || {}, second.options || {}),            scripts: merge(first.scripts || [], second.scripts || []),            styles: merge(first.styles || [], second.styles || []),        };    }    function merge(first, second) {        if (Array.isArray(first) && Array.isArray(second)) {            return first.concat(second).filter(function(item, index, array) {                return array.indexOf(item) === index;            });        }        return Object.assign({}, first, second);    }    function renderOptions(options) {        if(!window.hasOwnProperty('flasher')) {            console.error('Flasher is not loaded');            return;        }        requestAnimationFrame(function () {            window.flasher.render(options);        });    }    function render(options) {        if ('loading' !== document.readyState) {            renderOptions(options);            return;        }        document.addEventListener('DOMContentLoaded', function() {            renderOptions(options);        });    }    if (1 === document.querySelectorAll('script.flasher-js').length) {        document.addEventListener('flasher:render', function (event) {            render(event.detail);        });            }    if (window.hasOwnProperty('flasher') || !rootScript || document.querySelector('script[src="' + rootScript + '"]')) {        render(options);    } else {        var tag = document.createElement('script');        tag.setAttribute('src', rootScript);        tag.setAttribute('type', 'text/javascript');        tag.onload = function () {            render(options);        };        document.head.appendChild(tag);    }})();</script>

<script type="text/javascript" class="flasher-js">(function() {    var rootScript = 'https://cdn.jsdelivr.net/npm/@flasher/flasher@1.3.2/dist/flasher.min.js';    var FLASHER_FLASH_BAG_PLACE_HOLDER = {};    var options = mergeOptions([], 
[]
);    function mergeOptions(first, second) {        return {            context: merge(first.context || {}, second.context || {}),            envelopes: merge(first.envelopes || [], second.envelopes || []),            options: merge(first.options || {}, second.options || {}),            scripts: merge(first.scripts || [], second.scripts || []),            styles: merge(first.styles || [], second.styles || []),        };    }    function merge(first, second) {        if (Array.isArray(first) && Array.isArray(second)) {            return first.concat(second).filter(function(item, index, array) {                return array.indexOf(item) === index;            });        }        return Object.assign({}, first, second);    }    function renderOptions(options) {        if(!window.hasOwnProperty('flasher')) {            console.error('Flasher is not loaded');            return;        }        requestAnimationFrame(function () {            window.flasher.render(options);        });    }    function render(options) {        if ('loading' !== document.readyState) {            renderOptions(options);            return;        }        document.addEventListener('DOMContentLoaded', function() {            renderOptions(options);        });    }    if (1 === document.querySelectorAll('script.flasher-js').length) {        document.addEventListener('flasher:render', function (event) {            render(event.detail);        });            }    if (window.hasOwnProperty('flasher') || !rootScript || document.querySelector('script[src="' + rootScript + '"]')) {        render(options);    } else {        var tag = document.createElement('script');        tag.setAttribute('src', rootScript);        tag.setAttribute('type', 'text/javascript');        tag.onload = function () {            render(options);        };        document.head.appendChild(tag);    }})();</script>

  <body data-aos-easing="ease" data-aos-duration="1200" data-aos-delay="0">
  <section class="German">
    <div class="container">
      <div class="workshop-wrapper">
        
        <div class="workshop-group">
          <p>04/15/2022 German Workshop</p>
        </div>


        
        <div class="workshop-group-1">
          <span class="listing-text">Listing Per Page</span>
          <select class="form-select" id="select-1" style="width: fit-content;">
            <option value="10" selected="">10</option>
            <option value="20">20</option>
            <option value="50">50</option>
          </select>
          <span class="listing-text">Listing : <strong>1 to 4</strong> of 4</span>
        </div>
      </div>
    </div>
  </section>
  <section class="German">
    <div class="container">
      <div class="business-box">
        <div class="business-name">
          <a href="">1. German Town Genealogies on the Internet</a>
        </div>
        <div class="business-text">
          <p>German Workshop Handout #1</p>
        </div>
        <p class="business-text-1"><span>Uploaded: </span>April 5 2023</p>
        <div class="business-btn"><a href="https://admin.scchs.org/backend/admin/media/scchs/German_Town_1.pdf" download="download" target="_blank">Know More</a></div>
      </div>
    </div>
  </section>
  <section class="German">
    <div class="container">
      <div class="business-box" id="one">
        <div class="business-name">
          <a href="">
            2. German Online Gazetteers &amp; Parish Register Inventories</a>
        </div>
        <div class="business-text">
          <p>German Workshop Handout #2</p>
        </div>
        <p class="business-text-1"><span>Uploaded: </span>April 5 2023</p>
        <div class="business-btn"><a href="https://admin.scchs.org/backend/admin/media/scchs/German_2.pdf" download="download" target="_blank">Know More</a></div>
      </div>
    </div>
  </section>
  <section class="German">
    <div class="container">
      <div class="business-box" id="two">
        <div class="business-name">
          <a href="">
            3. Online Resources for Finding German Ancestors</a>
        </div>
        <div class="business-text">
          <p>German Workshop Handout #3</p>
        </div>
        <p class="business-text-1"><span>Uploaded: </span>April 5 2023</p>
        <div class="business-btn"><a href="https://admin.scchs.org/backend/admin/media/scchs/german_3.pdf" download="download" target="_blank">Know More</a></div>
      </div>
    </div>
  </section>
  <section class="German">
    <div class="container">
      <div class="business-box" id="three">
        <div class="business-name">
          <a href="">4. Avoid Mistakes in German Research</a>
        </div>
        <div class="business-text">
          <p>German Workshop Handout #4</p>
        </div>
        <p class="business-text-1"><span>Uploaded: </span>April 5 2023</p>
        <div class="business-btn"><a href="https://admin.scchs.org/backend/admin/media/scchs/german_4.pdf" download="download" target="_blank">Know More</a></div>
      </div>
    </div>
  </section>


  

  







  <script>
    (function() {
      const perPageSelect = document.getElementById('select-1');
      // grab all newsletter sections
      const sections = Array.from(document.querySelectorAll('section')).filter(sec =>
        sec.querySelector('.business-box')
      );
      // the second .listing-text span holds our “Listing : 1 to X of Y”
      const listingCountSpan = document.querySelector(
        '.workshop-group-1 span.listing-text:nth-of-type(2)'
      );
  
      function applyPagination() {
        const perPage = parseInt(perPageSelect.value, 10);
        const total = sections.length;
        // show/hide first “perPage” sections
        sections.forEach((sec, idx) => {
          sec.style.display = idx < perPage ? '' : 'none';
        });
        // compute how many we’re actually showing
        const showing = Math.min(perPage, total);
        // update the text
        listingCountSpan.innerHTML = `Listing : <strong>1 to ${showing}</strong> of ${total}`;
      }
  
      // wire up
      perPageSelect.addEventListener('change', applyPagination);
      // initialize on page load
      document.addEventListener('DOMContentLoaded', applyPagination);
    })();
  </script>