index.hbs

{{!-- This block preloads specific assets for the index page --}}
{{#contentFor "preload"}}
  <link rel="preload" href="{{asset "css/home.css"}}" as="style" />
  <link rel="preload" href="{{asset "css/listing.css"}}" as="style" />
  <link rel="preload" href="{{asset "js/home.js"}}" as="script" />
  <link rel="stylesheet" type="text/css" href="{{asset "css/bootstrapClasses.css"}}" media="screen" />
{{/contentFor}}

{{!-- This block loads specific styles for the index page --}}
{{#contentFor "styles"}}
  <link rel="stylesheet" type="text/css" href="{{asset "css/home.css"}}" media="screen" />
  <link rel="stylesheet" type="text/css" href="{{asset "css/listing.css"}}" media="screen" />
{{/contentFor}}

{{!-- The tag below means: insert everything in this file
into the {body} of the default.hbs template --}}
{{!< default}}

{{!-- Special header.hbs partial to generate the <header> tag --}}
{{> header background=@site.cover_image }}

<style>
  .textCounters{
    font-weight: 600;
    font-size: 1.5rem;
  }

  @media screen and (max-width: 768px) {
    .textCounters{
      font-size: 0.8rem;
    }
  }
</style>

<main class="main-wrap">
  <div class="l-content">
    {{> intro}}
    <!-- Scirti e PR -->
    <div class="l-wrapper" style="margin-bottom: 4%; margin-top:4%">
      <section class="bg-dark text-white py-5 ">
      <div class="container">
        <div class="row justify-content-center text-center" >
        <div class="col-md-4" style = "margin-top: 3%;">
            <span id="count1" class="display-4" ></span><span class="display-4">+</span>
            <br />
            <span class="textCounters">Participanți</span>    
        </div>
        <div class="col-md-4" style = "margin-top: 3%; ">
          <span id="count2" class="display-4"></span><span class="display-4">+</span>
          <br />
          <span class="textCounters">Voluntari</span>
        </div>
        <div class="col-md-4" style = "margin-top: 3%;">
          <span id="count3" class="display-4"></span>
          <br />
          <span class="textCounters">Zile</span>
        </div>
        </div>
      </div>
      </section>
    </div>
    <div class="video-container" style="margin-top: 10px;">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/WQGNFJuFBdI" frameborder="0" allowfullscreen></iframe>
    </div>
    <div>
      {{> carouselTestiomonials }}
    </div>

    <div class="row" style="padding-right: 10%; padding-left: 10%; margin-top: 4rem; margin-bottom: 4rem;">
      <div class="col-md-4" style="display:flex; justify-content: center; align-items:center;"> 
        <img class="toBeDeletedMobile" style="object-fit: contain; max-width: 125%; margin: 0 auto;" src="assets/images/Ghid/partea1nou.png">
      </div>
      <div class="col-md-8" style="display:flex; justify-content: center; align-items:center;">
        <img class="imgStyle" style="object-fit: contain;" src="assets/images/Ghid/partea2nou.png">
      </div>
    </div>

    <div class="l-wrapper" style="margin-bottom: 20px; margin-top: 20px;"> 
      {{> colapseCards }}
    </div>
  </div>
</main>

<style>
  
.video-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.video-container iframe {
  max-width: 100%;
  max-height: 100%;
}

.col-md-8{flex:0 0 auto;width:66.66666667%}
.col-md-4{flex:0 0 auto;width:33.33333333%}

@media only screen and (max-width: 600px) {
  .row, .col-md-8, .col-md-4,{
    width: 100%;
    display: flex;
    margin: auto;
  }
}
</style>

<script>
  document.addEventListener("DOMContentLoaded", () => {
  function counter(id, start, end, duration) {
    let obj = document.getElementById(id),
    current = start,
    range = end - start,
    increment = end > start ? 1 : -1,
    step = Math.abs(Math.floor(duration / range)),
    timer = setInterval(() => {
      current += increment;
      obj.textContent = current;
      if (current == end) {
      clearInterval(timer);
      }
    }, step);
  }
  counter("count1", 1674, 1800, 5000);
  counter("count2", 573, 700, 5000);
  counter("count3", 0, 14, 3000);
  });

</script>


<style>
    .imgStyle{
      max-width: 70%; 
    }
  @media only screen and (max-width: 768px) {
    .toBeDeletedMobile{
      display: none;
    }

    .col-md-8{
      width: 100%;
    }

    .imgStyle{
      max-width: 100%;
    }
  }
</style>
{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
{{#contentFor "scripts"}}
  <script defer src="{{asset "js/home.js"}}"></script>
{{/contentFor}}