<header>

  <div class="view">

    <div class="mask rgba-stylish-light align-items-center">

      <div id=cover class="container-fluid px-sm-5 py-sm-3 ">

        <div class="row d-flex justify-content-start">

          <img id="logo" src="https://mdbootstrap.com/img/Others/documentation/1.jpg" alt="John Doe" class="img-fluid " style="max-width: 50%;">

        </div>

        <div class="row align-items-center h-75">

          <div id='col1'class="col-sm-6">

            <div class="pr-0 mx-auto">

              <h1 id="title" class="animated fadeInUp">text text text</h1>

              <hr id="hori-rule">

              <h4 id='sub-title'class="animated fadeInUp delay-1s">MORE TEXT HERE</h4>

            </div>

          </div>

          <div id='col2'class="col-sm-6">

            <div id='card' class="card border-0 rounded py-sm-4 text-white animated slideInRight">

              <div class="card-header py-sm-0">

                <div id="demo" class="carousel slide " data-ride="carousel">

                  <!-- Indicators -->

                  <ul class="carousel-indicators">

                    <li data-target="#demo" data-slide-to="0" class="active"></li>

                    <li data-target="#demo" data-slide-to="1"></li>

                    <li data-target="#demo" data-slide-to="2"></li>

                  </ul>

                  <!-- The slideshow -->

                  <div class="carousel-inner">

                    <div class="carousel-item active">

                      <img class="img-fluid" src="https://mdbootstrap.com/img/Others/documentation/1.jpg" alt="Lotus Peyzaj">

                    </div>

                    <div class="carousel-item">

                      <img class="img-fluid" src="https://mdbootstrap.com/img/Others/documentation/1.jpg" alt="Lotus Peyzaj">

                    </div>

                    <div class="carousel-item">

                      <img class="img-fluid" src="https://mdbootstrap.com/img/Others/documentation/1.jpg" alt="Lotus Peyzaj">

                    </div>

                  </div>

                  <!-- Left and right controls -->

                  <a class="carousel-control-prev" href="#demo" data-slide="prev">

                    <span class="carousel-control-prev-icon"></span>

                  </a>

                  <a class="carousel-control-next" href="#demo" data-slide="next">

                    <span class="carousel-control-next-icon"></span>

                  </a>

                </div>

              </div>

              <div class="card-body py-sm-0">

                <h2 id="cardtitle" class="card-title mt-sm-2 mb-0">About Us</h2>

                <hr id="card-h-rule" class="mx-auto pt-0">

                <h3 id="cardtext" class="card-text">BUNCH OF TEXT </h3>

              </div>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</header>

html,

body,

header,

.view {

  height: 100%;

}

​

​