{% assign base = '.' %}
---
layout: default
---
    <!-- Breadcumb area start -->
    <section class="breadcumb_area">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <div class="breadcumb_section">
                        <!-- Breadcumb page title start -->
                        <div class="page_title">
                            <h3 class="course-title">Course Detail</h3>
                        </div>
                        <!-- Breadcumb page pagination start -->
                        <div class="page_pagination">
                            <ul>
                                <li><a href="index.html">Home</a></li>
                                <li><i class="fa fa-angle-right" aria-hidden="true"></i></li>
                                <li><a href="course-list.html">Courses</a></li>
                                <li><i class="fa fa-angle-right" aria-hidden="true"></i></li>
                                <li class="course-title">Course detail</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Breadcumb area end -->

    <!-- ============================== Courses Details Area Start ============================== -->
    <section class="courses_details_area">
        <div class="container">
            <div class="row">
                <div class="col-sm-7 col-md-8 col-xs-12">

                    <!-- Courses Details Thumb Area Start -->
                    <div class="courses_details_thumb">
                        <img src="img/course-img/softwareengineer-2.jpg" alt="">
                        <!-- Courses Details Thumb Caption Area Start -->
                    </div>
                    <!-- Courses Details Thumb Area End -->
                    <!-- Courses Overview -->
                    <div class="courses_overview">
                        <h5 class="course-title">Course Overview</h5>
                    </div>

                    <!-- Courses Overview Content -->
                    <div class="couress_overview_content">
                    </div>

                    <!-- Courses Description -->
                    <div class="courses_description">
                        <h5>Course Description</h5>
                    </div>

                    <!-- Courses Description Content -->
                    <div class="courses_description_content">
                    </div>

                </div>

                <!-- ==================== Sidebar Area Start ==================== -->
                <div class="col-sm-5 col-md-4 col-xs-12">
                    <div class="sidebar_area">

                        <!-- Single Sidebar Content Start -->
                        <div class="single_sidebar_content">
                            <div class="row">

                                <!-- Single Option -->
                                <div class="col-xs-6 clearfix">
                                    <div class="single_option clearfix">
                                        <i class="fa fa-gbp" aria-hidden="true"></i>
                                        <p>Cost</p>
                                        <p id="course-price"></p>
                                    </div>
                                </div>
                                <div class="col-xs-6 clearfix">
                                    <div class="single_option clearfix">
                                        <i class="fa fa-calendar" aria-hidden="true"></i>
                                        <p>Duration :</p>
                                        <p id="course-duration"></p>
                                    </div>
                                </div>

                                <!-- Single Option -->
                                <div class="col-xs-12 clearfix">
                                    <div class="single_option clearfix">
                                        <i class="fa fa-download" aria-hidden="true"></i>
                                        <h5><a id="course-resources" href="#" target="_blank">View course resources</a></h5>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <!-- Single Sidebar Content End -->
                    </div>
                </div>
                <!-- ==================== Sidebar Area End ==================== -->
            </div>
            <!-- .end row -->
        </div>
        <!-- .end container -->
    </section>
    <!-- =============== Courses Details Area End =============== -->
    <script src="js/single-course.js"></script>