<main>

  <div class="container my-5">

    <div class="row">

      <div class="col-md-4 blue">

        <h3 class="my-4 pb-2">Contact information</h3>

          <ul class="text-lg-left list-unstyled ml-4">

          <li>

            <p><i class="fa fa-map-marker pr-2"></i>New York, 94126, USA</p>

          </li>

          <li>

            <p><i class="fa fa-phone pr-2"></i>+ 01 234 567 89</p>

          </li>

          <li>

            <p><i class="fa fa-envelope pr-2"></i>contact@example.com</p>

          </li>

        </ul>

        <hr class="hr-light my-4">

        <ul class="list-inline text-center list-unstyled">

          <li class="list-inline-item">

            <a class="p-2 fa-lg tw-ic">

              <i class="fa fa-twitter"></i>

            </a>

          </li>

          <li class="list-inline-item">

            <a class="p-2 fa-lg li-ic">

              <i class="fa fa-linkedin"> </i>

            </a>

          </li>

          <li class="list-inline-item">

            <a class="p-2 fa-lg ins-ic">

              <i class="fa fa-instagram"> </i>

            </a>

          </li>

        </ul>

      </div>

​

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

        <div class="card green h-100">

          <h3 class="my-4 pb-2">Contact information</h3>

          <ul class="list-inline text-center list-unstyled">

            <li class="list-inline-item">

              <a class="p-2 fa-lg tw-ic">

                <i class="fa fa-twitter"></i>

              </a>

            </li>

            <li class="list-inline-item">

              <a class="p-2 fa-lg li-ic">

                <i class="fa fa-linkedin"> </i>

              </a>

            </li>

            <li class="list-inline-item">

              <a class="p-2 fa-lg ins-ic">

                <i class="fa fa-instagram"> </i>

              </a>

            </li>

          </ul>

        </div>

      </div>

      <div class="col-md-4 black white-text">

        <h3 class="my-4 pb-2">Contact information</h3>

        <ul class="text-lg-left list-unstyled ml-4">

          <li>

            <p><i class="fa fa-map-marker pr-2"></i>New York, 94126, USA</p>

          </li>

          <li>

            <p><i class="fa fa-phone pr-2"></i>+ 01 234 567 89</p>

          </li>

          <li>

            <p><i class="fa fa-envelope pr-2"></i>contact@example.com</p>

          </li>

        </ul>

        <hr class="hr-light my-4">

        <ul class="list-inline text-center list-unstyled">

          <li class="list-inline-item">

            <a class="p-2 fa-lg tw-ic">

              <i class="fa fa-twitter"></i>

            </a>

          </li>

          <li class="list-inline-item">

            <a class="p-2 fa-lg li-ic">

              <i class="fa fa-linkedin"> </i>

            </a>

          </li>

          <li class="list-inline-item">

            <a class="p-2 fa-lg ins-ic">

              <i class="fa fa-instagram"> </i>

            </a>

          </li>

        </ul>

​

      </div>

    </div>

  </div>

​

</main>