​

<header>

  <section>

    <div class="bg-image-vertical h-100" style="

          background-image: url(https://mdbootstrap.com/img/Photos/new-templates/coty/img1.jpg);

        ">

      <div class="mask d-flex align-items-center h-100">

        <div class="container">

          <div class="row justify-content-center">

            <div class="col-md-12">

              <h2 class="display-1 text-uppercase mb-5 mb-lg-0">

                <span data-mdb-toggle="animation" data-mdb-animation-start="onLoad" data-mdb-animation="fade-in"

                  data-mdb-animation-duration="1000" data-mdb-animation-delay="200">Color</span>

                <span data-mdb-toggle="animation" data-mdb-animation-start="onLoad" data-mdb-animation="fade-in"

                  data-mdb-animation-duration="1000" data-mdb-animation-delay="400">

                  of</span>

                <span data-mdb-toggle="animation" data-mdb-animation-start="onLoad" data-mdb-animation="fade-in"

                  data-mdb-animation-duration="1000" data-mdb-animation-delay="600">

                  the</span>

                <span data-mdb-toggle="animation" data-mdb-animation-start="onLoad" data-mdb-animation="fade-in"

                  data-mdb-animation-duration="1000" data-mdb-animation-delay="800">

                  year</span>

                <span data-mdb-toggle="animation" data-mdb-animation-start="onLoad" data-mdb-animation="fade-in"

                  data-mdb-animation-duration="1000" data-mdb-animation-delay="1000">

                  2021</span>

              </h2>

            </div>

          </div>

        </div>

      </div>

    </div>

  </section>

</header>