course_graphic.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title> Graphic Design</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/font-awesome.css">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/style.css">
  <link rel="stylesheet" href="./css/responsive.css">
  <link rel="stylesheet" class="js-color-style" href="css/colors/color-1.css">
  <link rel="stylesheet" class="js-glass-style" href="./css/glass.css" disabled>
</head>
<body>
    
  <!-- page loader start -->
  <div class="page-loader js-page-loader">
    <div></div>
  </div>
  <!-- page loader end -->

    <!--main warpper start-->
<div class="main-wrapper">

  <!-- header start-- -->
  <header class="header">
    <div class="container">
      <div class="header-main d-flex justify-content-between align-items-center">
       <div class="header-logo">
        <a href="./index.html">LMS<span>POINT</span></a>
       </div>
       <button type="button" class="header-hamburger-btn js-header-manu-toggler">
        <span></span>
       </button>
       <div class="header-backdrop js-header-backdrop"></div>
       <nav class="header-menu js-header-manu">
        <button type="button " class="header-close-btn js-header-manu-toggler">
          <i class="fas fa-times"></i>
        </button>
        <ul class="menu">
          <li class="menu-item"><a href="./index.html">Home</a></li>
          <li class="menu-item"><a href="./courses.html">Courses</a></li>
          <li class="menu-item menu-item menu-item-has-children">
            
            <a href="#" class="js-toggle-sub-menu">registration / login<i class="fas fa-chevron-down"></i></a>
            <ul class="sub-menu js-sub-menu">
              <li class="sub-menu-item"><a href="log-in.html">Log in</a></li>
              <li class="sub-menu-item"><a href="sign-up.html">Sign up</a></li>

            </ul>
          </li>
          <li class="menu-item"><a href="./contact.html">Contact</a></li>
        </ul>
       </nav>
      </div>
    </div>
  </header>
  <!-- header end-- -->

    <!-- breadcrumb start -->
    <div class="breadcrumb-nav">
      <div class="container">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="./index.html">Home</a></li>
            <li class="breadcrumb-item"><a href="./courses.html">Courses</a></li>
            <li class="breadcrumb-item active" aria-current="page">Courses details</li>
          </ol>
        </nav>
      </div>
    </div>
    <!-- breadcrumb end -->

    <!-- courses details section start -->
    <section class="courses-details section-padding">
      <div class="container">
        <div class="row">
          <div class="col-lg-8">
            <!-- course header start -->
            <div class="course-header box">
              <h2 class="text-capitalize">Graphic Design Masterclass - Learn GREAT Design</h2>
              <div class="rating">
                <span class="average-rating">(4.5)</span>
                <span class="average-stars">
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star-half-alt"></i>
                </span>
                <span class="reviews">(230 Reviews)</span>
              </div>
              <ul>
                <li>enrolled students - <span>2200</span></li>
                <li>created by - <span><a href="#">Akhi</a></span></li>
                <li>last updated - <span>10/10/2023</span></li>
                <li>language - <span>english</span></li>
              </ul>
            </div>
            <!-- course header end -->


            <!-- course tabs start -->
            <nav class="course-tabs">
              <div class="nav nav-tabs border-0" id="nav-tab" role="tablist">
                <button class="nav-link active" id="course-curriculum-tab" data-bs-toggle="tab" data-bs-target="#course-curriculum" type="button" role="tab" aria-controls="course-curriculum" aria-selected="true">curriculum</button>
                <button class="nav-link" id="course-description-tab" data-bs-toggle="tab" data-bs-target="#course-description" type="button" role="tab" aria-controls="course-description" aria-selected="false">description</button>
                <button class="nav-link" id="course-instructor-tab" data-bs-toggle="tab" data-bs-target="#course-instructor" type="button" role="tab" aria-controls="course-instructor" aria-selected="false">instructor</button>
                <button class="nav-link" id="course-reviews-tab" data-bs-toggle="tab" data-bs-target="#course-reviews" type="button" role="tab" aria-controls="course-reviews" aria-selected="false">reviews</button>
              </div>
            </nav>
            <!-- course tabs end -->

            <!-- tab panes start -->
            <div class="tab-content" id="nav-tabContent">

              <!-- course curriculum start -->
              <div class="tab-pane fade show active" id="course-curriculum" role="tabpanel" aria-labelledby="course-curriculum-tab">
                <div class="course-curriculum box">
                  <h3 class="text-capitalize mb-4">curriculum</h3>

                  <!-- accordion start -->
                  <div class="accordion" id="accordion">
                    <!-- accordion item start  -->
                    <div class="accordion-item">
                      <h2 class="accordion-header" id="heading-1">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="true" aria-controls="collapse-1">
                          Language basics <span>2 lesseons | 20minit</span>
                        </button>
                      </h2>
                      <div id="collapse-1" class="accordion-collapse collapse show" aria-labelledby="heading-1" data-bs-parent="#accordion">
                        <div class="accordion-body">
                          <ul>
                            <li>
                              <i class="fas fa-play-circle"></i>
                              lexical Structure
                              <span>06:00</span>
                            </li>
                            <li>
                              <i class="fas fa-play-circle"></i>
                              Values
                              <span>06:00</span>
                            </li><li>
                              <i class="fas fa-play-circle"></i>
                              Types
                              <span>06:00</span>
                            </li>
                            <li>
                              <i class="fas fa-play-circle"></i>
                              Variables
                              <span>06:00</span>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                    <!-- accordion item end  -->
                    <!-- accordion item start  -->
                    <div class="accordion-item">
                      <h2 class="accordion-header" id="heading-2">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-2" aria-expanded="false" aria-controls="collapse-2">
                          Types <span>2 lesseons | 20minit</span>
                        </button>
                      </h2>
                      <div id="collapse-2" class="accordion-collapse" aria-labelledby="heading-2" data-bs-parent="#accordion">
                        <div class="accordion-body">
                          <ul>
                            <li>
                             <i class="fas fa-play-circle"></i>
                             Strings
                              <span>06:00</span>
                           </li>
                            <li>
                             <i class="fas fa-play-circle"></i>
                             Booleans
                              <span>06:00</span>
                           </li>
                            <li>
                             <i class="fas fa-play-circle"></i>
                             Null and undefined
                              <span>06:00</span>
                           </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                    <!-- accordion item end  -->
                    <!-- accordion item start  -->
                    <div class="accordion-item">
                      <h2 class="accordion-header" id="heading-3">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-3" aria-expanded="false" aria-controls="collapse-3">
                          Control Structure <span>2 lesseons | 20minit</span>
                        </button>
                      </h2>
                      <div id="collapse-3" class="accordion-collapse" aria-labelledby="heading-3" data-bs-parent="#accordion">
                        <div class="accordion-body">
                          <ul>
                            <li>
                              <i class="fas fa-play-circle"></i>
                              If / else 
                               <span>06:00</span>
                            </li>
                            <li>
                              <i class="fas fa-play-circle"></i>
                              Switch
                               <span>06:00</span>
                            </li>
                            <li>
                              <i class="fas fa-play-circle"></i>
                              Loops
                               <span>06:00</span>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                    <!-- accordion item end  -->
                    <!-- accordion item start  -->
                    <div class="accordion-item">
                      <h2 class="accordion-header" id="heading-4">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-4" aria-expanded="false" aria-controls="collapse-4">
                          Function <span>2 lesseons | 20minit</span>
                        </button>
                      </h2>
                      <div id="collapse-4" class="accordion-collapse" aria-labelledby="heading-4" data-bs-parent="#accordion">
                        <div class="accordion-body">
                          <ul>
                            <li>
                              <i class="fas fa-play-circle"></i>
                              Arrow Function
                               <span>06:00</span>
                            </li>
                            <li>
                              <i class="fas fa-play-circle"></i>
                              Parameters
                               <span>06:00</span>
                            </li>
                            <li>
                              <i class="fas fa-play-circle"></i>
                              Return Value
                               <span>06:00</span>
                            </li>
                            <li>
                              <i class="fas fa-play-circle"></i>
                              Recursion
                               <span>06:00</span>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                    <!-- accordion item end  -->
                    

                  </div>
                  <!-- accordion end -->

                </div>
              </div>
              <!-- course curriculum end -->              


              <!-- course description start -->
              <div class="tab-pane fade" id="course-description" role="tabpanel" aria-labelledby="course-description-tab">
                <div class="course-description box">
                  <h3 class="text-capitalize mb-4">description</h3>
                  <p>Learn with the world’s English experts
                    Live online private 1-1 or group classes
                    Available 24/7</p>
                  <h4>For Who is this course designed ?</h4>
                  <p>Target your goals with an English online course designed around your needs</p>
                  <h4>Why should you take this course ?</h4>
                  <p>We help you gain confidence and improve your speaking, pronunciation and vocabulary.</p>
                </div>
              </div>
              <!-- course description end --> 

              <!-- course instructor start -->
              <div class="tab-pane fade" id="course-instructor" role="tabpanel" aria-labelledby="course-instructor-tab">
                <div class="course-instructor box">
                  <h3 class="mb-3 text-capitalize
                  "></h3>
                  <div class="instructor-details">
                    <div class="details-wrap d-flex align-items-center flex-wrap">
                      <div class="left-box me-4">
                        <div class="img-box">
                          <img src="./img/team-members/akhi.jpeg" class="rounded-circle" alt="instructor img">
                        </div>
                      </div>
                      <div class="right-box">
                        <h4>Akhi <span>(Graphic Designer)</span></h4>
                        <ul>
                          <li><i class="fas fa-star"></i> 4.5 Rating</li>
                          <li><i class="fas fa-play-circle"></i> 10 Courses</li>
                          <li><i class="fas fa-certificate"></i> 3000 Reviews</li>
                        </ul>
                      </div>
                    </div>
                    <div class="text">
                      <p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime cumque eaque nulla eos quae veritatis nobis quia possimus autem ex vitae voluptatem alias veniam doloribus laudantium, officiis deserunt facilis similique eveniet soluta! In vel dolor, esse, voluptatem soluta, consequatur ipsum molestias quam modi natus nemo magni sit culpa iure voluptas!</p>
                    </div>
                  </div>
                </div>
              </div>
              <!-- course instructor end --> 

              <!-- course reviews start -->
              <div class="tab-pane fade" id="course-reviews" role="tabpanel" aria-labelledby="course-reviews-tab">
                <div class="course-reviews box">
                  <!-- rating summary start -->
                  <div class="rating-summary">
                    <h3 class="mb-4 text-capitalize">students feedback</h3>
                    <div class="row">
                      <div class="col-md-4 d-flex align-items-center justify-content-center text-center">
                        <div class="rating-box">
                          <div class="average-rating">4.5</div>
                          <div class="average-stars"></div>
                          <i class="fas fa-star"></i>
                          <i class="fas fa-star"></i>
                          <i class="fas fa-star"></i>
                          <i class="fas fa-star"></i>
                          <i class="fas fa-star-half-alt"></i>
                          <div class="reviews">230 Reviews</div>
                        </div>
                      </div>
                      <div class="col-md-8">
                        <div class="rating-bars">
                          <!-- rating bars item start -->
                          <div class="rating-bars-item">
                            <div class="star-text">5 Star</div>
                            <div class="progress">
                              <div class="progress-bar" style="width: 50%;"></div>
                            </div>
                            <div class="percent">50%</div>
                          </div>
                          <!-- rating bars item end -->
                          <!-- rating bars item start -->
                          <div class="rating-bars-item">
                            <div class="star-text">4 Star</div>
                            <div class="progress">
                              <div class="progress-bar" style="width: 30%;"></div>
                            </div>
                            <div class="percent">30%</div>
                          </div>
                          <!-- rating bars item end -->
                          <!-- rating bars item start -->
                          <div class="rating-bars-item">
                            <div class="star-text">3 Star</div>
                            <div class="progress">
                              <div class="progress-bar" style="width: 10%;"></div>
                            </div>
                            <div class="percent">10%</div>
                          </div>
                          <!-- rating bars item end -->
                          <!-- rating bars item start -->
                          <div class="rating-bars-item">
                            <div class="star-text">2 Star</div>
                            <div class="progress">
                              <div class="progress-bar" style="width: 5%;"></div>
                            </div>
                            <div class="percent">5%</div>
                          </div>
                          <!-- rating bars item end -->
                          <!-- rating bars item start -->
                          <div class="rating-bars-item">
                            <div class="star-text">1 Star</div>
                            <div class="progress">
                              <div class="progress-bar" style="width: 3%;"></div>
                            </div>
                            <div class="percent">3%</div>
                          </div>
                          <!-- rating bars item end -->
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- rating summary end -->

                  <!-- reviews filter start -->
                  <div class="reviews-filter">
                    <h3 class="mb-4 text-capitalize">reviews</h3>
                    <form action="">
                      <div class="form-group">
                        <i class="fas fa-chevron-down select-icon"></i>
                        <select class="form-control">
                          <option value="">All Reviews</option>
                          <option value="1">1 Star</option>
                          <option value="2">2 Star</option>
                          <option value="3">3 Star</option>
                          <option value="4">4 Star</option>
                          <option value="5">5 Star</option>
                        </select>
                      </div>
                    </form>
                  </div>
                  <!-- reviews filter end -->

                  <!-- reviews list start -->
                  <div class="reviews-list">
                      <!-- reviews item start -->
                      <div class="reviews-item">
                        <div class="img-box">
                          <img src="./img/review/1.png" alt="reviews img">
                        </div>
                        <h4>Mr. Das</h4>
                        <div class="star-rating">
                          <i class="fas fa-star"></i>
                          <i class="fas fa-star"></i>
                          <i class="fas fa-star"></i>
                          <i class="fas fa-star"></i>
                          <i class="fas fa-star-half-alt"></i>
                          <span class="date">1 week ago</span>
                        </div>
                        <p>Great work. i learnt lot of things about javascript in this course.</p>
                      </div>
                      <!-- reviews item end -->
                      <!-- reviews item start -->
                      <div class="reviews-item">
                        <div class="img-box">
                          <img src="./img/review/1.png" alt="reviews img">
                        </div>
                        <h4>Mr. Das</h4>
                        <div class="star-rating">
                          <i class="fas fa-star"></i>
                          <i class="fas fa-star"></i>
                          <i class="fas fa-star"></i>
                          <i class="fas fa-star"></i>
                          <i class="fas fa-star-half-alt"></i>
                          <span class="date">1 week ago</span>
                        </div>
                        <p>Great work. i learnt lot of things about javascript in this course.</p>
                      </div>
                      <!-- reviews item end -->
                      <!-- reviews item start -->
                      <div class="reviews-item">
                        <div class="img-box">
                          <img src="./img/review/1.png" alt="reviews img">
                        </div>
                        <h4>Mr. Das</h4>
                        <div class="star-rating">
                          <i class="fas fa-star"></i>
                          <i class="fas fa-star"></i>
                          <i class="fas fa-star"></i>
                          <i class="fas fa-star"></i>
                          <i class="fas fa-star-half-alt"></i>
                          <span class="date">1 week ago</span>
                        </div>
                        <p>Great work. i learnt lot of things about javascript in this course.</p>
                      </div>
                      <!-- reviews item end -->
                      
                  </div>
                  <!-- reviews list end -->
                  <button type="button" class="btn btn-theme">More reviews</button>
                </div>
              </div>
              <!-- course reviews end --> 
            </div>
            <!-- tab panes end -->

          </div>
          <div class="col-lg-4">
            <!-- course sidebar start -->
            <div class="course-sidebar box">
              <div class="img-box position-relative" data-bs-toggle="modal" data-bs-target="#video-modal">
                <img src="./img/courses/web-development/Hmtl, CSS Bootstarp Thumbnail.png" class="w-100" alt="course img">
                <div class="play-icon">
                  <i class="fas fa-play"></i>
                </div>
                <p class="text-center">Course Priviews</p>
              </div>
              <div class="price d-flex align-items-center mb-3">
                <span class="price-old text-decoration-line-through">$100</span>
                <span class="price-new">$49</span>
                <span class="price-discount">$51 off</span>
              </div>
              <h3 class="mb-3">Course Features</h3>
              <ul class="features-list">
                <li>Total 15 Less</li>
                <li> Other Feature</li>
                <li>Other Feature</li>
                <li>Other Feature</li>
                <li>Other Feature</li>
              </ul> 
              <div class="btn-wrap">
                <button type="button" class="btn btn-theme btn-block"> Enroll now</button>
              </div>
            </div>
            <!-- course sidebar end -->
          </div>
        </div>
      </div>
    </section>
    <!-- courses details section end -->


  <!-- footer start -->
  <footer>
    <div class="footer">
      <div class="footer-top">
      <div class="container">
        <div class="row">
          <div class="col-sm-6 col-lg-3">
            <div class="footer-item">
              <h3 class="footer-logo"><span>LMS</span>POINT</h3>
              <ul>
                <li><a href="#">about</a></li>
                <li><a href="#">what we offer</a></li>
                <li><a href="#">careers</a></li>
                <li><a href="#">cartificates</a></li>
                <li><a href="#">blog</a></li>
              </ul>
            </div>
          </div>
          <div class="col-sm-6 col-lg-3">
            <div class="footer-item">
              <h3>learning</h3>
              <ul>
                <li><a href="#">get the app</a></li>
                <li><a href="#">testimonials</a></li>
                <li><a href="#">pricing</a></li>
                <li><a href="#">faq</a></li>
              </ul>
            </div>
          </div>
          <div class="col-sm-6 col-lg-3">
            <div class="footer-item">
              <h3>more</h3>
              <ul>
                <li><a href="#">affiliates</a></li>
                <li><a href="#">become a course creater</a></li>
                <li><a href="#">traing webinars</a></li>
                <li><a href="#">free personality test</a></li>
                <li><a href="#">help and support</a></li>
              </ul>
            </div>
          </div>
          <div class="col-sm-6 col-lg-3">
            <div class="footer-item">
              <h3>get in touch</h3>
              <ul>
                <li><a href="https://www.facebook.com/shuvo.das.74886"><i class="fab fa-facebook social-icon"></i> facebook</a></li>
                <li><a href="https://engrshuvodas.github.io/SHUVO-_portfolio/"><i class="fab fa-twitter social-icon"></i> twitter</a></li>
                <li><a href="https://engrshuvodas.github.io/SHUVO-_portfolio/"><i class="fab fa-instagram social-icon"></i> instagram</a></li>
                <li><a href="https://www.youtube.com/channel/UCEJ0R871tF2PLT27q9azYWg"><i class="fab fa-youtube social-icon"></i> youtube</a></li>
                <li><a href="https://www.linkedin.com/in/engr-shuvo-das-a28085260/"><i class="fab fa-linkedin social-icon"></i> linkedin</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer-bottom">
      <div class="container">
        <p class="m-0 py-4 text-center">copyright &copy;2023 <a href="https://engrshuvodas.github.io/SHUVO-_portfolio/">Engr. Shuvo Das</a></p>
      </div>
    </div>
  </footer>
  <!-- footer end -->

</div>
    <!--main warpper end-->

    <!-- course preview modal start -->
    <div class="modal fade video-modal js-course-preview-modal" id="video-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-body p-0">
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
              <i class="fas fa-times"></i>
            </button>
            <div class="ratio ratio-16x9">
              <video controls class="js-course-preview-video">
                <source src="video/Welcome To My Channel Youtube Opening Video.mp4"> type="video/mp4"
              </video>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- course preview modal end -->


    <!-- style switcher start -->
<div class="style-switcher js-style-switcher">
  <div class="style-switcher-toggler js-style-switcher-toggler">
    <i class="fas fa-cog"></i>
  </div>
  <h3>Style Switcher</h3>
  <div class="style-switcher-item">
    <p class="mb-2">Theme Colors</p>
    <!-- theme colors  -->
    <div class="theme-colors js-theme-colors">
      <button type="button" data-js-theme-color="color-1" class="js-theme-color-item color-1"></button>
      <button type="button" data-js-theme-color="color-2" class="js-theme-color-item color-2"></button>
      <button type="button" data-js-theme-color="color-3" class="js-theme-color-item color-3"></button>
      <button type="button" data-js-theme-color="color-4" class="js-theme-color-item color-4"></button>
      <button type="button" data-js-theme-color="color-5" class="js-theme-color-item color-5"></button>
    </div>
  </div>
  <div class="style-switcher-item">
    <div class="form-check form-switch">
      <input class="form-check-input js-dark-mode" type="checkbox" role="switch" id="dark-mode">
      <label class="form-check-label" for="dark-mode">Dark Mode</label>
    </div>
  </div>
  <div class="style-switcher-item">
    <div class="form-check form-switch">
      <input class="form-check-input js-glass-effect" type="checkbox" role="switch" id="glass-effect">
      <label class="form-check-label" for="glass-effect">Glass Effect</label>
    </div>
  </div>
</div>
<!-- style switcher end -->


<script src="js/bootstrap.bundle.min.js"></script>  
<script src="js/main.js"></script>
</body>
</html>