<div class="container-fluid mt-3 mb-5">

​

  <!-- Section: Block Content -->

  <section class="mb-4">

​

    <style>

      .map-container {

        overflow: hidden;

        position: relative;

        height: 0;

      }

​

      .map-container iframe {

        left: 0;

        top: 0;

        height: 100%;

        width: 100%;

        position: absolute;

      }

    </style>

​

    <div class="card">

​

      <div class="row">

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

​

          <!-- Google Maps -->

          <div id="map-within-card-2" class="map-container rounded-left" style="height: 400px">

            <iframe src="https://maps.google.com/maps?q=Seattle&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0"

              style="border:0" allowfullscreen></iframe>

          </div>

          <!-- Google Maps -->

​

        </div>

​

        <div class="col-10 col-md-4 mx-auto align-self-center py-4">

​

          <h6 class="font-weight-bold grey-text text-uppercase small">Head Office</h6>

          <h5 class="font-weight-normal mb-4">Seattle, WA</h5>

          <p class="text-muted font-weight-light">2651 Main Street, Suit 124<br>Seattle, WA, 98101</p>

          <p class="text-muted font-weight-light mb-0">Phone: +1 987 123 6548<br>Email: hello@thetheme.io</p>

​

        </div>

      </div>

​

    </div>

​

  </section>

  <!-- Section: Block Content -->

​

</div>

​

​