happychin-web/pages/program/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">Programs 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>Programs Details</li>
        </ul>
      </div>
    </div>
  </div>
  <section class="program-details-section fix section-padding">
    <div class="container">
      <div class="program-details-wrapper">
        <div class="row g-5">
          <div class="col-lg-8">
            <div class="program-details-items">
              <div class="details-image">
                <img src="/picture/details-1.jpg" alt="img" />
              </div>
              <div class="details-content">
                <div class="post">
                  <span>Kindergarten</span>
                </div>
                <h2 class="mb-0">Drawing Classes</h2>
                <div class="details-author-area">
                  <div class="author-items">
                    <img src="/picture/author2.png" alt="img" />
                    <p>Savannah Nguyen</p>
                  </div>
                  <ul class="class-list">
                    <li>
                      <i class="fa-regular fa-circle-play me-2"></i>
                      30 Classes
                    </li>
                    <li>
                      <i class="fas fa-star me-2"></i>
                      3.4 (36 Review)
                    </li>
                  </ul>
                </div>
                <h2>Descriptions</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 ex ea dolor commodo consequat. Duis
                  aute irure and dolor in reprehenderit.
                </p>
                <p class="mb-4">
                  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 at malesuada sagittis placerat eros sed istincidunt augue ac ante
                  rutrum sed the is sodales augue consequat.
                </p>
                <h2>Requirements for The Classes</h2>
                <p>
                  Nulla facilisi. Vestibulum tristique sem in eros eleifend imperdiet. Donec quis
                  convallis neque. In id lacus pulvinar lacus, eget vulputate lectus. Ut viverra
                  bibendum lorem, at tempus nibh mattis in. Sed a massa eget lacus consequat auctor.
                </p>
                <ul class="list-items">
                  <li>
                    <i class="fa-solid fa-check"></i>
                    Ut viverra bibendum lorem, at tempus nibh mattis
                  </li>
                  <li>
                    <i class="fa-solid fa-check"></i>
                    quis nostrud exercitation ullamco laboris nisi
                  </li>
                  <li>
                    <i class="fa-solid fa-check"></i>
                    Duis aute irure and dolor in reprehenderit.
                  </li>
                  <li>
                    <i class="fa-solid fa-check"></i>
                    ante rutrum sed the is sodales augue consequat.
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="col-lg-4">
            <div class="details-list-area">
              <h3>Classes includes:</h3>
              <ul class="details-list">
                <li>
                  <span>
                    <img src="/picture/08.svg" alt="img" class="me-2" />
                    Age
                  </span>
                  3-5 year
                </li>
                <li>
                  <span>
                    <img src="/picture/09.svg" alt="img" class="me-2" />
                    Duration:
                  </span>
                  9:00-11:00
                </li>
                <li>
                  <span>
                    <img src="/picture/10.svg" alt="img" class="me-2" />
                    Lessons:
                  </span>
                  15
                </li>
                <li>
                  <span>
                    <img src="/picture/11.svg" alt="img" class="me-2" />
                    Students:
                  </span>
                  50
                </li>
                <li>
                  <span>
                    <img src="/picture/14.svg" alt="img" class="me-2" />
                    Certifications:
                  </span>
                  Yes
                </li>
                <li>
                  <span>
                    <img src="/picture/13.svg" alt="img" class="me-2" />
                    Language
                  </span>
                  English
                </li>
              </ul>
              <a href="" class="theme-btn w-100 border-style mb-3">This course Free $49.00</a>
              <a href="" class="theme-btn w-100">
                Enroll Your Kid
                <i class="fa-solid fa-arrow-right-long"></i>
              </a>
              <div class="social-icon d-flex align-items-center">
                <span>Share:</span>
                <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="col-lg-12">
            <div class="program-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>
        </div>
      </div>
    </div>
  </section>
  <FooterSection></FooterSection>
</template>