happychin-web/pages/team/detail.vue

<template>
  <Preloader></Preloader>
  <FixArea></FixArea>
  <Header-top-section sectionClass="header-top-section-4" />
  <TopHeader headerClass="header-4" />
  <div class="search-wrap">
    <div class="search-inner">
      <i class="fas fa-times search-close" id="search-close"></i>
      <div class="search-cell">
        <form method="get">
          <div class="search-field-holder">
            <input type="search" class="main-search-input" placeholder="Search..." />
          </div>
        </form>
      </div>
    </div>
  </div>
  <div class="breadcrumb-wrapper bg-cover" style="background-image: url('/image/breadcrumb.svg')">
    <div class="line-shape">
      <img src="/picture/line1.png" alt="shape-img" />
    </div>
    <div class="plane-shape float-bob-y">
      <img src="/picture/plane2.png" alt="shape-img" />
    </div>
    <div class="doll-shape float-bob-x">
      <img src="/picture/doll.png" alt="shape-img" />
    </div>
    <div class="parasuit-shape float-bob-y">
      <img src="/picture/parasuit1.png" alt="shape-img" />
    </div>
    <div class="frame-shape">
      <img src="/picture/frame3.png" alt="shape-img" />
    </div>
    <div class="bee-shape float-bob-x">
      <img src="/picture/bee1.png" alt="shape-img" />
    </div>
    <div class="container">
      <div class="page-heading">
        <h1 class="wow fadeInUp" data-wow-delay=".3s">Teacher Details</h1>
        <ul class="breadcrumb-items wow fadeInUp" data-wow-delay=".5s">
          <li>
            <a href="p9wfc14694.html">Home</a>
          </li>
          <li>
            <i class="fas fa-chevron-right"></i>
          </li>
          <li>Teacher Details</li>
        </ul>
      </div>
    </div>
  </div>
  <section class="team-details-section fix section-padding pb-0">
    <div class="container">
      <div class="team-details-wrapper">
        <div class="team-author-items">
          <div class="thumb">
            <img src="/picture/p-author.jpg" alt="img" />
          </div>
          <div class="content">
            <h2>Savannah Nguyen</h2>
            <span>Children Diet</span>
            <p>
              Adipiscing elit. Mauris viverra nisl quis mollis laoreet. Ut eget lacus a felis
              accumsan pharetra in dignissim enim. In amet odio mollis urna aliquet volutpat. Sed
              bibendum nisl vehicula imperdiet imperdiet, augue massa fringilla.
            </p>
            <ul>
              <li>Experience: 10 Years</li>
              <li>
                <i class="fas fa-user"></i>
                188 Students
              </li>
              <li>
                <i class="fa-solid fa-star color-star"></i>
                454 (36 Review)
              </li>
            </ul>
            <div class="social-icon d-flex align-items-center">
              <a href="#"><i class="fab fa-facebook-f"></i></a>
              <a href="#"><i class="fab fa-twitter"></i></a>
              <a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
              <a href="#"><i class="fa-brands fa-youtube"></i></a>
            </div>
          </div>
        </div>
        <div class="details-info-items">
          <div class="row g-5 align-items-center">
            <div class="col-lg-6">
              <div class="info-content">
                <h2>Professional Info</h2>
                <p class="mb-3">
                  Consectetur adipisicing elit, sed do eiusmod tempor is incididunt ut labore et
                  dolore of magna aliqua. Ut enim ad minim veniam, made of owl the quis nostrud
                  exercitation ullamco laboris nisi ut aliquip
                </p>
                <p>
                  The is ipsum dolor sit amet consectetur adipiscing elit. Fusce eleifend porta arcu
                  In hac augu ehabitasse the is platea augue thelorem turpoi dictumst. In lacus
                  libero faucibus
                </p>
              </div>
            </div>
            <div class="col-lg-6">
              <div class="progress-area">
                <div class="progress-wrap">
                  <div class="pro-items">
                    <div class="pro-head">
                      <h6 class="title">Creativity</h6>
                      <span class="point">90%</span>
                    </div>
                    <div class="progress">
                      <div class="progress-value"></div>
                    </div>
                  </div>
                  <div class="pro-items">
                    <div class="pro-head">
                      <h6 class="title">Time Management</h6>
                      <span class="point">70%</span>
                    </div>
                    <div class="progress">
                      <div class="progress-value style-two"></div>
                    </div>
                  </div>
                  <div class="pro-items">
                    <div class="pro-head">
                      <h6 class="title">Art and Carft</h6>
                      <span class="point">55%</span>
                    </div>
                    <div class="progress">
                      <div class="progress-value style-three"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="team-section-4 fix section-padding pt-80">
    <div class="container">
      <div class="section-title-area">
        <div class="section-title">
          <h2 class="fz-40 wow fadeInUp" data-wow-delay=".3s">Related Teacher</h2>
        </div>
        <div class="array-button wow fadeInUp" data-wow-delay=".5s">
          <button class="array-prev border-array-style"><i class="fal fa-arrow-left"></i></button>
          <button class="array-next"><i class="fal fa-arrow-right"></i></button>
        </div>
      </div>
      <div class="swiper team-slider">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="team-items">
              <div class="team-image">
                <div class="shape-img">
                  <img src="/picture/team-shape.png" alt="img" />
                </div>
                <img src="/picture/01.jpg" alt="team-img" />
                <div class="social-profile">
                  <span class="plus-btn"><i class="fas fa-share-alt"></i></span>
                  <ul>
                    <li>
                      <a href="#"><i class="fab fa-facebook-f"></i></a>
                    </li>
                    <li>
                      <a href="#"><i class="fa-brands fa-instagram"></i></a>
                    </li>
                    <li>
                      <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="team-content">
                <h3>
                  <a href="">Brooklyn Simmons</a>
                </h3>
                <p>Instructors</p>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="team-items">
              <div class="team-image">
                <div class="shape-img">
                  <img src="/picture/team-shape.png" alt="img" />
                </div>
                <img src="/picture/02.jpg" alt="team-img" />
                <div class="social-profile">
                  <span class="plus-btn"><i class="fas fa-share-alt"></i></span>
                  <ul>
                    <li>
                      <a href="#"><i class="fab fa-facebook-f"></i></a>
                    </li>
                    <li>
                      <a href="#"><i class="fa-brands fa-instagram"></i></a>
                    </li>
                    <li>
                      <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="team-content">
                <h3>
                  <a href="">Leslie Alexander</a>
                </h3>
                <p>Instructors</p>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="team-items">
              <div class="team-image">
                <div class="shape-img">
                  <img src="/picture/team-shape.png" alt="img" />
                </div>
                <img src="/picture/03.jpg" alt="team-img" />
                <div class="social-profile">
                  <span class="plus-btn"><i class="fas fa-share-alt"></i></span>
                  <ul>
                    <li>
                      <a href="#"><i class="fab fa-facebook-f"></i></a>
                    </li>
                    <li>
                      <a href="#"><i class="fa-brands fa-instagram"></i></a>
                    </li>
                    <li>
                      <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="team-content">
                <h3>
                  <a href="">Ronald Richards</a>
                </h3>
                <p>Instructors</p>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="team-items">
              <div class="team-image">
                <div class="shape-img">
                  <img src="/picture/team-shape.png" alt="img" />
                </div>
                <img src="/picture/04.jpg" alt="team-img" />
                <div class="social-profile">
                  <span class="plus-btn"><i class="fas fa-share-alt"></i></span>
                  <ul>
                    <li>
                      <a href="#"><i class="fab fa-facebook-f"></i></a>
                    </li>
                    <li>
                      <a href="#"><i class="fa-brands fa-instagram"></i></a>
                    </li>
                    <li>
                      <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="team-content">
                <h3>
                  <a href="">Kristin Watson</a>
                </h3>
                <p>Instructors</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <FooterSection></FooterSection>
</template>