Tabs - Sections

Tab #1

Preview
HTML

Marketing Tutorials Entreprise

Give your product team a unique marketing tool.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

A new way to Communicate.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima quae asperiores, ex eligendi voluptatibus, placeat sit, delectus repellat assumenda sint recusandae pariatur doloribus excepturi facilis numquam omnis sequi quaerat tempore.

A new way to Communicate.

<section class="overflow-hidden">
  <div class="container">
    <div class="row justify-content-between gutter-3 gutter-md-6">
      <div class="col-lg-4">
        <div class="nav flex-column nav-tabs" id="v-pills-tab" role="tablist" aria-orientation="vertical">
          <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Marketing</a>
          <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Tutorials</a>
          <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Entreprise</a>
        </div>
      </div>
      <div class="col-lg-8">
        <div class="tab-content" id="v-pills-tabContent">
          <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
            <div class="row">
              <div class="col">
                <h2 class="font-weight-bold">Give your product team a unique marketing tool.</h2>
                <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
              </div>
            </div>
            <div class="row gutter-1 gutter-md-2 masonry gallery">
              <div class="col-6" data-aos="fade-up">
                <figure class="figure hover-opacity equal">
                  <a href="assets/images/startup-2.jpg" class="image" title="Image caption" style="background-image: url('assets/images/startup-2.jpg')">
                  </a>
                </figure>
              </div>
              <div class="col-6" data-aos="fade-up">
                <figure class="figure hover-opacity equal equal-16-10">
                  <a href="assets/images/startup-3.jpg" class="image" title="Image caption" style="background-image: url('assets/images/startup-3.jpg')">
                  </a>
                </figure>
              </div>
              <div class="col-4" data-aos="fade-up">
                <figure class="figure hover-opacity equal equal-3-4">
                  <a href="assets/images/startup-4.jpg" class="image" title="Image caption" style="background-image: url('assets/images/startup-4.jpg')">
                  </a>
                </figure>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
            <div class="row">
              <div class="col">
                <h2 class="font-weight-bold">A new way to Communicate.</h2>
                <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima quae asperiores, ex eligendi voluptatibus, placeat sit, delectus repellat assumenda sint recusandae pariatur doloribus excepturi facilis numquam omnis sequi quaerat tempore.</p>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
            <div class="row">
              <div class="col">
                <h2 class="font-weight-bold">A new way to Communicate.</h2>
                <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima quae asperiores, ex eligendi voluptatibus, placeat sit, delectus repellat assumenda sint recusandae pariatur doloribus excepturi facilis numquam omnis sequi quaerat tempore.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Give your product team a unique marketing tool.

First Tab
Second Tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe dignissimos illum quisquam repellendus, laboriosam perspiciatis aliquid, possimus hic sunt omnis iusto enim ratione quod natus doloribus optio, recusandae eius laudantium.

<section class="overflow-hidden">
  <div class="container">
    <div class="row align-items-md-end">
      <div class="col-md-6 mb-1 mb-md-0">
        <h2 class="font-weight-bold">Give your product team a unique marketing tool.</h2>
      </div>
      <div class="col-md-6 text-md-right">
        <ul class="nav nav-pills" id="component-1" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#component-1-1" role="tab" aria-controls="component-1-1" aria-selected="true">First Tab</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#component-1-2" role="tab" aria-controls="component-1-2" aria-selected="false">Second Tab</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="row ">
      <div class="col-12">
        <div class="tab-content" id="component-1-content">
          <div class="tab-pane fade show active" id="component-1-1" role="tabpanel" aria-labelledby="component-1-1">
            <div class="row justify-content-lg-between gutter-4 gutter-lg-6">
              <div class="col-lg-4">
                <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
              </div>
              <div class="col-lg-8">
                <div class="row gutter-1 gutter-md-2 masonry gallery">
                  <div class="col-6" data-aos="fade-up">
                    <figure class="figure hover-opacity equal">
                      <a href="assets/images/startup-2.jpg" class="image" title="Image caption" style="background-image: url('assets/images/startup-2.jpg')">
                      </a>
                    </figure>
                  </div>
                  <div class="col-6" data-aos="fade-up">
                    <figure class="figure hover-opacity equal equal-16-10">
                      <a href="assets/images/startup-3.jpg" class="image" title="Image caption" style="background-image: url('assets/images/startup-3.jpg')">
                      </a>
                    </figure>
                  </div>
                  <div class="col-4" data-aos="fade-up">
                    <figure class="figure hover-opacity equal equal-3-4">
                      <a href="assets/images/startup-4.jpg" class="image" title="Image caption" style="background-image: url('assets/images/startup-4.jpg')">
                      </a>
                    </figure>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="component-1-2" role="tabpanel" aria-labelledby="component-1-2">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe dignissimos illum quisquam repellendus, laboriosam perspiciatis aliquid, possimus hic sunt omnis iusto enim ratione quod natus doloribus optio, recusandae eius laudantium.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>