AMPERION_Webpage/layouts/partials/page-title.html

<section class="page-title gif-background">
  <div class="container1">
    <div class="row">
      <div class="col-md-12 text-center">
        <div class="servie-title fade-in">
          <h1>{{ .Title }}</h1>
        </div>
        {{ with .Params.description }}
        </div>
        {{ end }}
      </div>
    </div>
  </div>
</section>

<style>

.fade-in {
  animation: fadeInUp 1s ease-out
}

.container1 {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>