绿色欧美风格的在线学习教育整站网站源码下载



60 238 80



模板描述:绿色欧美风格 在线学习教育 整站网站,绿色欧美风格的在线学习教育整站网站源码下载html模板下载

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/fontawesome-all.min.css">
<link rel="stylesheet" href="css/aos.css">
<link rel="stylesheet" href="css/nice-select.css">
<link rel="stylesheet" href="css/meanmenu.css">
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/default.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">

2. 引入JS

<script src="js/vendor/jquery-1.12.4.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/isotope.pkgd.min.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/jquery.meanmenu.min.js"></script>
<script src="js/ajax-form.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/aos.js"></script>
<script src="js/jquery.nice-select.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.scrollUp.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

3. HTML代码

        <!-- preloader -->
        <div id="preloader">
            <div id="loading-center">
                <div id="loading-center-absolute">
                    <div class="object" id="object_one"></div>
                    <div class="object" id="object_two"></div>
                    <div class="object" id="object_three"></div>
                </div>
            </div>
        </div>
        <!-- preloader-end -->
        <!-- header -->
        <header>
            <div class="header-top-wrap d-none d-md-block">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-6 col-md-7">
                            <div class="header-top-menu">
                                <ul>
                                    <li><a href="#">About</a></li>
                                    <li><a href="#">Pricing</a></li>
                                    <li><a href="#">Blog</a></li>
                                    <li><a href="#">Support</a></li>
                                    <li><a href="#">Contact</a></li>
                                    <li><a href="#">Career</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-5">
                            <div class="header-sign-btn text-right">
                                <a href="#">Log In</a>
                                <a href="#">Sign Up</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="header-sticky" class="main-header-area">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-lg-3 col-md-4">
                            <div class="logo">
                                <a href="index.html"><img src="img/logo/logo.png" alt="logo"></a>
                            </div>
                        </div>
                        <div class="col-lg-5 col-md-6 d-none d-md-block">
                            <div class="header-search-bar">
                                <form action="#">
                                    <input type="text" placeholder="Search Courses ..">
                                    <button><i class="fas fa-search"></i></button>
                                </form>
                            </div>
                        </div>
                        <div class="col-lg-4 text-right d-none d-lg-block">
                            <div class="main-menu d-inline-block">
                                <nav id="mobile-menu">
                                    <ul>
                                        <li class="menu-item-has-children"><a href="#">Home</a>
                                            <ul class="submenu">
                                                <li><a href="index.html">Home Style One</a></li>
                                                <li><a href="index-2.html">Home Style Two</a></li>
                                                <li><a href="index-3.html">Home Style Three</a></li>
                                                <li><a href="index-4.html">Home Style Four</a></li>
                                                <li><a href="index-5.html">Home Style Five</a></li>
                                            </ul>
                                        </li>
                                        <li class="menu-item-has-children"><a href="#">Pages</a>
                                            <ul class="submenu">
                                                <li><a href="events.html">Our Events</a></li>
                                                <li><a href="event-details.html">Event Details</a></li>
                                                <li><a href="instructor.html">Instructor Page</a></li>
                                                <li><a href="instructor-single.html">Instructor Single</a></li>
                                                <li><a href="pricing.html">Pricing Plan</a></li>
                                                <li><a href="blog.html">Blog Page</a></li>
                                                <li><a href="blog-details.html">Blog Details</a></li>
                                                <li><a href="shop.html">Shop Page</a></li>
                                                <li><a href="shop-details.html">Shop Details</a></li>
                                                <li><a href="contact-us.html">Contact Page</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="#">Courses</a>
                                            <ul class="submenu">
                                                <li><a href="our-courses.html">Our Courses</a></li>
                                                <li><a href="courses-details.html">Courses Details</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                            <div class="shop-cart-icon d-none d-xl-inline-block">
                                <a href="#"><img src="img/icon/shop_cart.png" alt="icon"></a>
                                <span>0</span>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mobile-menu"></div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- header-end -->
        <!-- main-area -->
        <main>
            <!-- slider-area -->
            <section class="slider-area slider-one-bg" data-background="img/slider/slider_bg01.jpg">
                <div class="container">
                    <div class="row">
                        <div class="col-xl-6 col-lg-7 col-md-10">
                            <div class="slider-content slider-content-p">
                                <h2 class="wow fadeInUp" data-wow-delay=".2s">Get skills from our top class courses</h2>
                                <p class="wow fadeInUp" data-wow-delay=".4s">Our on-demand videos and interactive code challenges are there for you when you need them.</p>
                                <a href="#" class="btn wow fadeInUp" data-wow-delay=".6s">Learn More</a>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- slider-area-end -->
            <!-- features-area -->
            <section class="features-area features-mt">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-4 col-md-6">
                            <div class="single-features mb-30">
                                <div class="features-top">
                                    <div class="features-icon">
                                        <img src="img/icon/features_icon01.png" alt="icon">
                                    </div>
                                    <h3>Expert Instructor</h3>
                                </div>
                                <div class="features-content">
                                    <p>Online learning program threat designed to prepare you.</p>
                                </div>
                                <div class="features-check"><i class="fas fa-check"></i></div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <div class="single-features mb-30">
                                <div class="features-top">
                                    <div class="features-icon">
                                        <img src="img/icon/features_icon02.png" alt="icon">
                                    </div>
                                    <h3>Unlimited Access</h3>
                                </div>
                                <div class="features-content">
                                    <p>Online learning program threat designed to prepare you.</p>
                                </div>
                                <div class="features-check"><i class="fas fa-check"></i></div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <div class="single-features mb-30">
                                <div class="features-top">
                                    <div class="features-icon">
                                        <img src="img/icon/features_icon03.png" alt="icon">
                                    </div>
                                    <h3>3,10,109 Courses</h3>
                                </div>
                                <div class="features-content">
                                    <p>Online learning program threat designed to prepare you.</p>
                                </div>
                                <div class="features-check"><i class="fas fa-check"></i></div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- features-area-end -->
            <!-- fact-area -->
            <section class="fact-area pt-105">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-xl-10">
                            <div class="fact-title text-center mb-60">
                                <h2>Online learning program that will prepare you for a career in the industry</h2>
                            </div>
                        </div>
                    </div>
                    <div class="row justify-content-around">
                        <div class="col-lg-3 col-md-4 col-sm-6">
                            <div class="single-fact-area text-center mb-50">
                                <h2><span class="count">50</span>k+</h2>
                                <span>Current Student</span>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-4 col-sm-6">
                            <div class="single-fact-area text-center mb-50">
                                <h2><span class="count">100</span>k+</h2>
                                <span>Special Courses</span>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-4 col-sm-6">
                            <div class="single-fact-area text-center mb-50">
                                <h2><span class="count">31</span>k+</h2>
                                <span>Successful Stories</span>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- fact-area-end -->
            <!-- learn-area -->
            <section class="learn-area p-relative pt-95 pb-180">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-xl-5 col-lg-6">
                            <div class="section-title mb-25">
                                <h2>Best place for learn everything</h2>
                            </div>
                            <div class="learn-content">
                                <p>Online learning program designed to prepare you for a career. Courses include recorded video lectures, auto-graded and
                                peer-reviewed assignments, and community discussion.</p>
                                <div class="row learn-wrap">
                                    <div class="single-learn-box">
                                        <a href="#"><i class="fab fa-codepen"></i><span>Engineering</span></a>
                                    </div>
                                    <div class="single-learn-box">
                                        <a href="#"><i class="far fa-building"></i><span>Architecture</span></a>
                                    </div>
                                    <div class="single-learn-box">
                                        <a href="#"><i class="fas fa-chart-pie"></i><span>Economics</span></a>
                                    </div>
                                    <div class="single-learn-box">
                                        <a href="#"><i class="far fa-edit"></i><span>Mathematic</span></a>
                                    </div>
                                    <div class="single-learn-box">
                                        <a href="#"><i class="fas fa-dollar-sign"></i><span>Business</span></a>
                                    </div>
                                    <div class="single-learn-box">
                                        <a href="#"><i class="fas fa-laptop"></i><span>Computer</span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-4 offset-xl-2 col-lg-5 col-md-6 offset-md-3 margin-left-lg">
                            <div class="trial-wrap">
                                <div class="trial-form text-center">
                                    <h2>7 Days Free Trial</h2>
                                    <form action="#">
                                        <input type="text" placeholder="Your Name">
                                        <input type="email" placeholder="Your Mail">
                                        <input type="text" placeholder="Your Phone">
                                        <textarea name="message" id="message" placeholder="Your Message"></textarea>
                                        <button class="btn">Claim Your Free Trial</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="trial-bg-img"><img src="img/images/trial_img.png" alt="img"></div>
            </section>
            <!-- learn-area-end -->
            <!-- courses-area -->
            <section class="courses-area gray-bg pt-137 pb-120">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-xl-6 col-lg-8">
                            <div class="section-title text-center mb-35">
                                <h2>Popular Courses</h2>
                                <p>Online learning program designed to prepare you for a career</p>
                            </div>
                        </div>
                    </div>
                    <div class="row courses-active">
                        <div class="col-xl-3">
                            <div class="single-courses mb-30">
                                <div class="courses-thumb">
                                    <img src="img/courses/course_img01.jpg" alt="img">
                                    <div class="courses-avatar">
                                        <div class="courses-avatar-img">
                                            <img src="img/courses/courses_avatar.png" alt="img">
                                        </div>
                                        <p>Andrew Hemer</p>
                                    </div>
                                </div>
                                <div class="courses-content p-relative">
                                    <p class="courses-price">$10</p>
                                    <span><i class="far fa-bookmark"></i> Javascript</span>
                                    <h4><a href="#">Introduction to basic javascript</a></h4>
                                    <div class="courses-meta">
                                        <ul>
                                            <li class="courses-user"><i class="far fa-user"></i> 10,455</li>
                                            <li class="courses-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"></i>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3">
                            <div class="single-courses mb-30">
                                <div class="courses-thumb">
                                    <img src="img/courses/course_img02.jpg" alt="img">
                                    <div class="courses-avatar">
                                        <div class="courses-avatar-img">
                                            <img src="img/courses/courses_avatar.png" alt="img">
                                        </div>
                                        <p>Andrew Hemer</p>
                                    </div>
                                </div>
                                <div class="courses-content p-relative">
                                    <p class="courses-price">$10</p>
                                    <span><i class="far fa-bookmark"></i> Javascript</span>
                                    <h4><a href="#">Introduction to basic javascript</a></h4>
                                    <div class="courses-meta">
                                        <ul>
                                            <li class="courses-user"><i class="far fa-user"></i> 10,455</li>
                                            <li class="courses-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"></i>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3">
                            <div class="single-courses mb-30">
                                <div class="courses-thumb">
                                    <img src="img/courses/course_img03.jpg" alt="img">
                                    <div class="courses-avatar">
                                        <div class="courses-avatar-img">
                                            <img src="img/courses/courses_avatar.png" alt="img">
                                        </div>
                                        <p>Andrew Hemer</p>
                                    </div>
                                </div>
                                <div class="courses-content p-relative">
                                    <p class="courses-price">$10</p>
                                    <span><i class="far fa-bookmark"></i> Javascript</span>
                                    <h4><a href="#">Introduction to basic javascript</a></h4>
                                    <div class="courses-meta">
                                        <ul>
                                            <li class="courses-user"><i class="far fa-user"></i> 10,455</li>
                                            <li class="courses-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"></i>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3">
                            <div class="single-courses mb-30">
                                <div class="courses-thumb">
                                    <img src="img/courses/course_img04.jpg" alt="img">
                                    <div class="courses-avatar">
                                        <div class="courses-avatar-img">
                                            <img src="img/courses/courses_avatar.png" alt="img">
                                        </div>
                                        <p>Andrew Hemer</p>
                                    </div>
                                </div>
                                <div class="courses-content p-relative">
                                    <p class="courses-price">$10</p>
                                    <span><i class="far fa-bookmark"></i> Javascript</span>
                                    <h4><a href="#">Introduction to basic javascript</a></h4>
                                    <div class="courses-meta">
                                        <ul>
                                            <li class="courses-user"><i class="far fa-user"></i> 10,455</li>
                                            <li class="courses-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"></i>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3">
                            <div class="single-courses mb-30">
                                <div class="courses-thumb">
                                    <img src="img/courses/course_img02.jpg" alt="img">
                                    <div class="courses-avatar">
                                        <div class="courses-avatar-img">
                                            <img src="img/courses/courses_avatar.png" alt="img">
                                        </div>
                                        <p>Andrew Hemer</p>
                                    </div>
                                </div>
                                <div class="courses-content p-relative">
                                    <p class="courses-price">$10</p>
                                    <span><i class="far fa-bookmark"></i> Javascript</span>
                                    <h4><a href="#">Introduction to basic javascript</a></h4>
                                    <div class="courses-meta">
                                        <ul>
                                            <li class="courses-user"><i class="far fa-user"></i> 10,455</li>
                                            <li class="courses-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"></i>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3">
                            <div class="single-courses mb-30">
                                <div class="courses-thumb">
                                    <img src="img/courses/course_img01.jpg" alt="img">
                                    <div class="courses-avatar">
                                        <div class="courses-avatar-img">
                                            <img src="img/courses/courses_avatar.png" alt="img">
                                        </div>
                                        <p>Andrew Hemer</p>
                                    </div>
                                </div>
                                <div class="courses-content p-relative">
                                    <p class="courses-price">$10</p>
                                    <span><i class="far fa-bookmark"></i> Javascript</span>
                                    <h4><a href="#">Introduction to basic javascript</a></h4>
                                    <div class="courses-meta">
                                        <ul>
                                            <li class="courses-user"><i class="far fa-user"></i> 10,455</li>
                                            <li class="courses-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"></i>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- courses-area-end -->
            <!-- testimonial-area -->
            <section class="testimonial-area testimonial-padding theme-bg pt-150 pb-150">
                <div class="container">
                    <div class="row justify-content-between">
                        <div class="col-lg-6 pt-30 pt-md-none">
                            <div class="section-title white-title mb-35">
                                <h2>Testimonial</h2>
                            </div>
                            <div class="testimonial-active">
                                <div class="single-testimonial">
                                    <p>Vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra nequeac
                                    eleifend.....</p>
                                    <div class="testi-author">
                                        <h5>Martin Hedges</h5>
                                        <span>Student - Math</span>
                                    </div>
                                </div>
                                <div class="single-testimonial">
                                    <p>Vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra nequeac
                                    eleifend.....</p>
                                    <div class="testi-author">
                                        <h5>Tanvu Redges</h5>
                                        <span>Student - Math</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-5 col-lg-6 d-none d-lg-block">
                            <div class="testimonial-img">
                                <i class="fas fa-quote-right"></i>
                                <img src="img/images/testimonial_img01.jpg" alt="img">
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- testimonial-area-end -->
            <!-- brand-area -->
            <div class="brand-area brand-padding pt-145 pb-140">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-lg-10">
                            <div class="brand-title text-center mb-40">
                                <h5>Top Thought Leaders Run Their Business On Edugain</h5>
                            </div>
                        </div>
                    </div>
                    <div class="row justify-content-center">
                        <div class="col-xl-10 col-lg-11">
                            <div class="brand-active">
                                <div class="single-barnd text-center">
                                    <img src="img/brand/brand_05.png" alt="img">
                                </div>
                                <div class="single-barnd text-center">
                                    <img src="img/brand/brand_02.png" alt="img">
                                </div>
                                <div class="single-barnd text-center">
                                    <img src="img/brand/brand_03.png" alt="img">
                                </div>
                                <div class="single-barnd text-center">
                                    <img src="img/brand/brand_04.png" alt="img">
                                </div>
                                <div class="single-barnd text-center">
                                    <img src="img/brand/brand_01.png" alt="img">
                                </div>
                                <div class="single-barnd text-center">
                                    <img src="img/brand/brand_03.png" alt="img">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- brand-area-end -->
            <!-- courses-create -->
            <section class="courses-create courses-create-p">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-xl-9 col-lg-11">
                            <div class="section-title text-center mb-65">
                                <h2>Our powerful platform are easy <br> & useful for create courses</h2>
                            </div>
                        </div>
                    </div>
                    <div class="row align-items-center">
                        <div class="col-lg-3 col-sm-6">
                            <div class="single-c-create mb-40">
                                <h4>Create Quizzes</h4>
                                <p>Online learning program that is designed to prepare your courses</p>
                            </div>
                            <div class="single-c-create mb-40">
                                <h4>Students Feedback</h4>
                                <p>Online learning program that is designed to prepare your courses</p>
                            </div>
                            <div class="single-c-create mb-40">
                                <h4>Multimedia Lectures</h4>
                                <p>Online learning program that is designed to prepare your courses</p>
                            </div>
                            <div class="single-c-create mb-40">
                                <h4>List Segmentation</h4>
                                <p>Online learning program that is designed to prepare your courses</p>
                            </div>
                        </div>
                        <div class="col-lg-6 d-none d-lg-block">
                            <div class="c-create-img text-center">
                                <img src="img/images/courses_create_img.png" alt="img">
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6">
                            <div class="single-c-create mb-40">
                                <h4>Promotions</h4>
                                <p>Online learning program that is designed to prepare your courses</p>
                            </div>
                            <div class="single-c-create mb-40">
                                <h4>Tools Integrations</h4>
                                <p>Online learning program that is designed to prepare your courses</p>
                            </div>
                            <div class="single-c-create mb-40">
                                <h4>Easy Builder</h4>
                                <p>Online learning program that is designed to prepare your courses</p>
                            </div>
                            <div class="single-c-create mb-40">
                                <h4>Page Editor</h4>
                                <p>Online learning program that is designed to prepare your courses</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- courses-create-end -->
            <!-- instructor-area -->
            <section class="instructor-area gray-bg pt-137">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-xl-6 col-lg-8">
                            <div class="section-title text-center mb-65">
                                <h2>Top Instructor</h2>
                                <p>Online learning program designed to prepare you for a career</p>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-3 col-sm-6">
                            <div class="single-instructor text-center mb-30">
                                <div class="instructor-thumb">
                                    <a href="#"><img src="img/instructor/instructor_img01.jpg" alt="img"></a>
                                </div>
                                <div class="instructor-content">
                                    <h4><a href="#">David Haul</a></h4>
                                    <span>Mathematics</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6">
                            <div class="single-instructor text-center mb-30">
                                <div class="instructor-thumb">
                                    <a href="#"><img src="img/instructor/instructor_img02.jpg" alt="img"></a>
                                </div>
                                <div class="instructor-content">
                                    <h4><a href="#">Rabeya Lauren</a></h4>
                                    <span>Mathematics</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6">
                            <div class="single-instructor text-center mb-30">
                                <div class="instructor-thumb">
                                    <a href="#"><img src="img/instructor/instructor_img03.jpg" alt="img"></a>
                                </div>
                                <div class="instructor-content">
                                    <h4><a href="#">Niki Jafrin</a></h4>
                                    <span>Mathematics</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6">
                            <div class="single-instructor text-center mb-30">
                                <div class="instructor-thumb">
                                    <a href="#"><img src="img/instructor/instructor_img04.jpg" alt="img"></a>
                                </div>
                                <div class="instructor-content">
                                    <h4><a href="#">Shampn Khati</a></h4>
                                    <span>Mathematics</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- instructor-area-end -->
            <!-- cta-area -->
            <section class="cta-area gray-bg pt-107 pb-150">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-xl-8 col-lg-10">
                            <div class="section-title text-center mb-40">
                                <h2>Become An Instructor</h2>
                                <p>Online learning program designed to prepare you for a career that can change
                                your life from before. Register for instructor</p>
                            </div>
                            <div class="cta-btn text-center">
                                <a href="#" class="btn">Apply for An Instructor</a>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- cta-area-end -->
            <!-- event-area -->
            <section class="event-area theme-bg pt-137">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-xl-6 col-lg-8">
                            <div class="section-title white-title text-center mb-65">
                                <h2>Latest Event</h2>
                                <p>Online learning program designed to prepare you for a career</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container-fluid event-container-p">
                    <div class="row event-active">
                        <div class="col-xl-4">
                            <div class="single-event mb-50">
                                <div class="event-thumb p-relative">
                                    <img src="img/event/event_img01.jpg" alt="img">
                                    <div class="event-overlay">
                                        <div class="event-date">
                                            <h4>02<span>Dec</span></h4>
                                        </div>
                                        <div class="event-content">
                                            <div class="event-meta mb-10">
                                                <ul>
                                                    <li><i class="far fa-clock"></i> 09:00 AM</li>
                                                    <li><i class="fas fa-map-marker-alt"></i> Nc Auditorium, Lous</li>
                                                </ul>
                                            </div>
                                            <h5><a href="#">Business development ceremony for BBA student</a></h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-4">
                            <div class="single-event mb-50">
                                <div class="event-thumb p-relative">
                                    <img src="img/event/event_img02.jpg" alt="img">
                                    <div class="event-overlay">
                                        <div class="event-date">
                                            <h4>02<span>Dec</span></h4>
                                        </div>
                                        <div class="event-content">
                                            <div class="event-meta mb-10">
                                                <ul>
                                                    <li><i class="far fa-clock"></i> 09:00 AM</li>
                                                    <li><i class="fas fa-map-marker-alt"></i> Nc Auditorium, Lous</li>
                                                </ul>
                                            </div>
                                            <h5><a href="#">Business development ceremony for BBA student</a></h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-4">
                            <div class="single-event mb-50">
                                <div class="event-thumb p-relative">
                                    <img src="img/event/event_img03.jpg" alt="img">
                                    <div class="event-overlay">
                                        <div class="event-date">
                                            <h4>02<span>Dec</span></h4>
                                        </div>
                                        <div class="event-content">
                                            <div class="event-meta mb-10">
                                                <ul>
                                                    <li><i class="far fa-clock"></i> 09:00 AM</li>
                                                    <li><i class="fas fa-map-marker-alt"></i> Nc Auditorium, Lous</li>
                                                </ul>
                                            </div>
                                            <h5><a href="#">Business development ceremony for BBA student</a></h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-4">
                            <div class="single-event mb-50">
                                <div class="event-thumb p-relative">
                                    <img src="img/event/event_img01.jpg" alt="img">
                                    <div class="event-overlay">
                                        <div class="event-date">
                                            <h4>02<span>Dec</span></h4>
                                        </div>
                                        <div class="event-content">
                                            <div class="event-meta mb-10">
                                                <ul>
                                                    <li><i class="far fa-clock"></i> 09:00 AM</li>
                                                    <li><i class="fas fa-map-marker-alt"></i> Nc Auditorium, Lous</li>
                                                </ul>
                                            </div>
                                            <h5><a href="#">Business development ceremony for BBA student</a></h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- event-area-end -->
            <!-- enrolling-area -->
            <section class="enrolling-area enrolling-bg" data-background="img/images/map_bg.png">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-xl-8 col-lg-10">
                            <div class="section-title text-center mb-45">
                                <h2>Thousands of Students are enrolling in everyday</h2>
                            </div>
                            <div class="enrolling-btn text-center">
                                <a href="#" class="btn">Start A Course</a>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="enrolling-img mt-45">
                                <img src="img/images/enrolling_img.png" alt="img">
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- enrolling-area-end -->
        </main>
        <!-- main-area-end -->
        <!-- footer -->
        <footer class="footer-area black-bg">
            <div class="footer-top-wrap pt-95 pb-40">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-3 col-sm-6">
                            <div class="footer-widget mb-50">
                                <div class="fw-logo mb-15">
                                    <a href="index.html"><img src="img/logo/w_logo.png" alt="Logo"></a>
                                </div>
                                <div class="footer-text">
                                    <p>We provides universal access to the world’s best education, partnering with top universities and make with top students
                                    with great result.</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 pr-50">
                            <div class="footer-widget mb-50">
                                <div class="fw-title mb-20">
                                    <h4>Useful Links</h4>
                                </div>
                                <div class="fw-link">
                                    <ul>
                                        <li><a href="#"><i class="fas fa-angle-right"></i> Home</a></li>
                                        <li><a href="#"><i class="fas fa-angle-right"></i> About</a></li>
                                        <li><a href="#"><i class="fas fa-angle-right"></i> Courses</a></li>
                                        <li><a href="#"><i class="fas fa-angle-right"></i> Instructor</a></li>
                                        <li><a href="#"><i class="fas fa-angle-right"></i> Blog</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 pr-40">
                            <div class="footer-widget mb-50">
                                <div class="fw-title mb-20">
                                    <h4>Latest News</h4>
                                </div>
                                <div class="fw-blog">
                                    <ul>
                                        <li>
                                            <div class="fw-blog-thumb">
                                                <a href="#"><img src="img/blog/f_blog01.jpg" alt="img"></a>
                                            </div>
                                            <div class="fw-blog-content">
                                                <h6><a href="#">Students are more heretic then before</a></h6>
                                                <span>04 jun, 2019</span>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="fw-blog-thumb">
                                                <a href="#"><img src="img/blog/f_blog02.jpg" alt="img"></a>
                                            </div>
                                            <div class="fw-blog-content">
                                                <h6><a href="#">Don't be silly in taking action in life</a></h6>
                                                <span>04 jun, 2019</span>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 pr-40">
                            <div class="footer-widget mb-50">
                                <div class="fw-title mb-20">
                                    <h4>Contact Us</h4>
                                </div>
                                <div class="fw-contact">
                                    <ul>
                                        <li><i class="fas fa-phone"></i> 545 - 123 - 467</li>
                                        <li><i class="far fa-envelope"></i> ourmail@infomail.com</li>
                                        <li><i class="fas fa-map-marker-alt"></i> Northern East, USA</li>
                                        <li><i class="fas fa-fax"></i> 123 456 789 0</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="copyright-wrap">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <div class="copyright-text">
                                <p>&copy; Copyrights 2019 TUTOHUB Designed By Love. All rights reserved.</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="copyright-social text-center text-md-right">
                                <ul>
                                    <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                                    <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                                    <li><a href="#"><i class="fab fa-instagram"></i></a></li>
                                    <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
                                    <li><a href="#"><i class="fab fa-pinterest-p"></i></a></li>
                                    <li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- footer-end -->
		<!-- JS here -->
        <script src="js/vendor/jquery-1.12.4.min.js"></script>
        <script src="js/popper.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/isotope.pkgd.min.js"></script>
        <script src="js/slick.min.js"></script>
        <script src="js/jquery.meanmenu.min.js"></script>
        <script src="js/ajax-form.js"></script>
        <script src="js/wow.min.js"></script>
        <script src="js/aos.js"></script>
        <script src="js/jquery.nice-select.min.js"></script>
        <script src="js/jquery.counterup.min.js"></script>
        <script src="js/jquery.waypoints.min.js"></script>
        <script src="js/jquery.scrollUp.min.js"></script>
        <script src="js/imagesloaded.pkgd.min.js"></script>
        <script src="js/jquery.magnific-popup.min.js"></script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 扁平化 养生会馆 植物花草 游戏 黑色 bootstrap自适应 IT网络科技 蓝色 普通自适应 欧美风 旅游 红色 中国风 金融理财保险 绿色 韩系 高校 灰色 日系 简洁简约 工业产品 黄色 炫酷 家居装饰 紫色 卡通动画 橙色 招聘猎头 精美 实用通用 艺术创意 粉色 政府 婚庆 大气 白色 新闻资讯 婚纱摄影 棕色 清新 教育培训 彩色 绘画 设计 餐饮美食 其他风格 外贸 服装服饰 建筑 化工企业 医药器械 美容美发 动漫 电影视频 包装印刷 机械 汽车4S店 农业产品 咨询管理 酒店 健身房 化妆品 食品 花卉 房地产 协会组织 快递货运 数码电器 搬家 珠宝首饰 酒业 文化传媒 装修装饰 医院医疗 律师 酒吧音乐 图书 动物宠物 航空航天 股票 能源 公益 饮品 生活用品 家政保洁 体育 房屋租赁 商务 电力公司 打车租车 环保 宗教寺庙 工具文具 企业行业 自适应响应式 风格类型 颜色色彩

×
×
51前端

注册

官方QQ群
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到