Teenuste vaade

Templiit 20

Example

Markup

<div class="container-body-vp container">
  <div class="horizontal-tab-container-vp w-100">
    <nav>
      <div class="nav nav-tabs nav-fill" id="nav-tab-horizontal" role="tablist">
        <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab"
          aria-controls="nav-home" aria-selected="true">Sündmuse ülevaade</a>
        <a class="nav-item nav-link" id="nav-events-tab" data-toggle="tab" href="#nav-events" role="tab"
          aria-controls="nav-events" aria-selected="false">Päevakava</a>
        <a class="nav-item nav-link" id="nav-register-tab" data-toggle="tab" href="#nav-register" role="tab"
          aria-controls="nav-register" aria-selected="false">Registreerimine</a>
        <a class="nav-item nav-link" id="nav-materials-tab" data-toggle="tab" href="#nav-materials" role="tab"
          aria-controls="nav-materials" aria-selected="false">Materjalid</a>
        <a class="nav-item nav-link" id="nav-feedback-tab" data-toggle="tab" href="#nav-feedback" role="tab"
          aria-controls="nav-feedback" aria-selected="false">Tagasiside</a>
      </div>
    </nav>
    <div id="content-horizontal" class="tab-content" role="tablist">
      <div id="nav-home" class="card tab-pane fade show active" role="tabpanel" aria-labelledby="nav-home-tab">
        <div class="card-header" role="tab" id="heading-4">
          <h5 class="mb-0">
            <a class="collapsed btn-link" data-toggle="collapse" href="#collapse-4" aria-expanded="false"
              aria-controls="collapse-4">
              Sündmuse ülevaade
            </a>
          </h5>
        </div>
        <div id="collapse-4" class="collapse" role="tabpanel" data-parent="#content-horizontal"
          aria-labelledby="heading-4">
          <div class="card-body">
            <div class="row row-large-gutters-vp">
              <div class="col-lg-6 col-xl-8 mb-3">
                <h3>Mehitamata õhusõidukid</h3>
                <div class="row no-gutters flex-row no-hover">
                    <div class="col-xl-6 pr-3 mb-2">
                        <img src="/static/images/card_bg.jpg" alt="" class="w-100">
                    </div>
                    <div class="card-body col-xl-6 py-0">
                        <p class="card-text">
                            Mehitamata õhusõiduk on õhusõiduk, mille pardal ei ole pilooti ning mille juhtimine toimub
                            tehniliste abivahendite
                            vahendusel või eelnevalt programmeeritud lennuna ilma piloodi juhtimiseta autonoomselt.
                        </p>
                        <div class="list-group list-group-vp">
                            <a href="#" class="list-group-item list-group-item-action">Kasutustingimused</a>
                            <a href="#" class="list-group-item list-group-item-action">Privaatsussätted</a>
                        </div>
                    </div>
                </div>              </div>
              <div class="col-lg-6 col-xl-4 mb-3">
                <h3>Kontakt</h3>
                <p class="font-weight-bold text-secondary mb-2">
                  Olga Petrjaševa
                </p>
                <ul class="list-unstyled list-vp text-secondary">
                  <li class="mb-1">
                    <svg class="c-icon ">
                      <use href="/spritemap.svg#sprite-icon_phone"></use>
                    </svg>                    <a href="#" class="text-dark font-weight-normal">+372 735 0222</a>
                  </li>
                  <li>
                    <svg class="c-icon ">
                      <use href="/spritemap.svg#sprite-icon_email"></use>
                    </svg>                    <a href="#" class="text-dark font-weight-normal">hm@hm.ee</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="nav-events" class="card tab-pane" role="tabpanel" aria-labelledby="nav-events-tab">
        <div class="card-header" role="tab" id="heading-5">
          <h5 class="mb-0">
            <a class="collapsed btn-link" data-toggle="collapse" href="#collapse-5" aria-expanded="false"
              aria-controls="collapse-5">
              Päevakava
            </a>
          </h5>
        </div>
        <div id="collapse-5" class="collapse" role="tabpanel" data-parent="#content-horizontal"
          aria-labelledby="heading-5">
          <div class="card-body">
            [ ... ]
          </div>
        </div>
      </div>
      <div id="nav-register" class="card tab-pane fade" role="tabpanel" aria-labelledby="nav-register-tab">
        <div class="card-header" role="tab" id="heading-3">
          <h5 class="mb-0">
            <a class="collapsed btn-link" data-toggle="collapse" href="#collapse-6" aria-expanded="false"
              aria-controls="collapse-3">
              Registreerimine
            </a>
          </h5>
        </div>
        <div id="collapse-3" class="collapse" role="tabpanel" data-parent="#content-horizontal"
          aria-labelledby="heading-3">
          <div class="card-body">
            <div class="card-body">
              [ ... ]
            </div>
          </div>
        </div>
        <div id="nav-materials" class="card tab-pane" role="tabpanel" aria-labelledby="nav-materials-tab">
          <div class="card-header" role="tab" id="heading-5">
            <h5 class="mb-0">
              <a class="collapsed btn-link" data-toggle="collapse" href="#collapse-5" aria-expanded="false"
                aria-controls="collapse-5">
                Materjalid
              </a>
            </h5>
          </div>
          <div id="collapse-5" class="collapse" role="tabpanel" data-parent="#content-horizontal"
            aria-labelledby="heading-5">
            <div class="card-body">
              [ ... ]
            </div>
          </div>
        </div>
        <div id="nav-profile" class="card tab-pane" role="tabpanel" aria-labelledby="nav-profile-tab">
          <div class="card-header" role="tab" id="heading-5">
            <h5 class="mb-0">
              <a class="collapsed btn-link" data-toggle="collapse" href="#collapse-5" aria-expanded="false"
                aria-controls="collapse-5">
                Õppekulude hüvitamine
              </a>
            </h5>
          </div>
          <div id="collapse-5" class="collapse" role="tabpanel" data-parent="#content-horizontal"
            aria-labelledby="heading-5">
            <div class="card-body">
              [ ... ]
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>