@extends('userend/layouts.main')

@section('main-section')

<div class="progress_course">
    <div class="title">
        <h1>Complete Web Development Bootcamp 2024</h1>
        <div class="define_user">
            <div class="user">
                <div class="icon">
                    <img src="assets/images/users_icon.svg" alt="">
                </div>
                <p>by John Smith</p>
            </div>
            <div class="total_hour">
                <div class="icon">
                    <img src="assets/images/wall-clock.svg" alt="">
                </div>
                <p>8 hours total</p>
            </div>
        </div>
    </div>
    <div class="complate">
        <div class="icon">
            <img src="assets/images/graph.svg" alt="">
        </div>
        <p>17% Complete</p>
    </div>
</div>

<section class="video_section">
    <div class="course_show">
        <div class="video">
            <iframe
                src="https://player.vimeo.com/video/828537440?title=0&amp;byline=0&amp;portrait=0&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479"
                frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
                title="Webside Front Video"></iframe>
        </div>
        <script src="https://player.vimeo.com/api/player.js"></script>

        <div class="Introduction">
            <div class="title">
                <h1>Introduction to the Course</h1>
                <div class="define_user">
                    <div class="user">
                        <div class="icon">
                            <img src="assets/images/wall-clock-gray.svg" alt="">
                        </div>
                        <p>5:30</p>
                    </div>
                </div>
            </div>
            <div class="complate">
                <select name="" id="" class="form-control">
                    <option value="" selected>English</option>
                    <option value="">Hindi</option>
                </select>
            </div>
        </div>

        <div class="about_lessons">
            <h4>About This Lesson</h4>
            <p>In this comprehensive lesson, you'll dive deep into introduction to the course. We'll explore practical examples, best practices, and real-world applications that will help you master these concepts and apply them confidently in your projects.applications that will help you master these concepts and apply them confidently in your projects.In this comprehensive lesson, you'll dive deep into introduction </p>

            <div class="lists">
                <h5>What You'll Learn:</h5>
                <div class="icon">
                    <div class="image">
                        <img src="assets/images/check-icon.svg" alt="">
                    </div>
                    <p>Core concepts and fundamental principles</p>
                </div>
                <div class="icon">
                    <div class="image">
                        <img src="assets/images/check-icon.svg" alt="">
                    </div>
                    <p>Industry best practices and proven patterns</p>
                </div>
                <div class="icon">
                    <div class="image">
                        <img src="assets/images/check-icon.svg" alt="">
                    </div>
                    <p>Hands-on examples and practical exercises</p>
                </div>
                <div class="icon">
                    <div class="image">
                        <img src="assets/images/check-icon.svg" alt="">
                    </div>
                    <p>Real-world applications and use cases</p>
                </div>
            </div>
        </div>
    </div>
    <div class="playlist">
        <div class="your_progress">
            <div class="title">
                <h5>Course Content</h5>
            </div>
            <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="17" aria-valuemin="0" aria-valuemax="100">
                <div class="progress-bar" style="width: 17%">
                    <p>Your Progress <span>17%</span></p>
                </div>
            </div>
            <span>2 of 12 lessons completed</span>
        </div>

        <div class="lists">
            <a href="javascript:void(0)">
                <div class="list_details active">
                    <div class="icon">
                        <img src="assets/images/course-check.svg" alt="">
                    </div>
                    <div class="text">
                        <p>Introduction to the Course</p>
                        <div class="course_hours">
                            <div class="icon">
                                <img src="assets/images/wall-clock-gray.svg" alt="">
                            </div>
                            <p>5:30</p>
                        </div>
                    </div>
                </div>
            </a>

            <a href="javascript:void(0)">
                <div class="list_details">
                    <div class="icon">
                        <img src="assets/images/play-course-icon.svg" alt="">
                    </div>
                    <div class="text">
                        <p>HTML Structure and Syntax</p>
                        <div class="course_hours">
                            <div class="icon">
                                <img src="assets/images/wall-clock-gray.svg" alt="">
                            </div>
                            <p>15:30</p>
                        </div>
                    </div>
                </div>
            </a>

            <a href="javascript:void(0)">
                <div class="list_details">
                    <div class="icon">
                        <img src="assets/images/play-course-icon.svg" alt="">
                    </div>
                    <div class="text">
                        <p>HTML Structure and Syntax</p>
                        <div class="course_hours">
                            <div class="icon">
                                <img src="assets/images/wall-clock-gray.svg" alt="">
                            </div>
                            <p>15:30</p>
                        </div>
                    </div>
                </div>
            </a>

            <a href="javascript:void(0)">
                <div class="list_details">
                    <div class="icon">
                        <img src="assets/images/play-course-icon.svg" alt="">
                    </div>
                    <div class="text">
                        <p>HTML Structure and Syntax</p>
                        <div class="course_hours">
                            <div class="icon">
                                <img src="assets/images/wall-clock-gray.svg" alt="">
                            </div>
                            <p>15:30</p>
                        </div>
                    </div>
                </div>
            </a>

            <a href="javascript:void(0)">
                <div class="list_details">
                    <div class="icon">
                        <img src="assets/images/play-course-icon.svg" alt="">
                    </div>
                    <div class="text">
                        <p>HTML Structure and Syntax</p>
                        <div class="course_hours">
                            <div class="icon">
                                <img src="assets/images/wall-clock-gray.svg" alt="">
                            </div>
                            <p>15:30</p>
                        </div>
                    </div>
                </div>
            </a>

            <a href="javascript:void(0)">
                <div class="list_details">
                    <div class="icon">
                        <img src="assets/images/play-course-icon.svg" alt="">
                    </div>
                    <div class="text">
                        <p>HTML Structure and Syntax</p>
                        <div class="course_hours">
                            <div class="icon">
                                <img src="assets/images/wall-clock-gray.svg" alt="">
                            </div>
                            <p>15:30</p>
                        </div>
                    </div>
                </div>
            </a>

            <a href="javascript:void(0)">
                <div class="list_details">
                    <div class="icon">
                        <img src="assets/images/play-course-icon.svg" alt="">
                    </div>
                    <div class="text">
                        <p>HTML Structure and Syntax</p>
                        <div class="course_hours">
                            <div class="icon">
                                <img src="assets/images/wall-clock-gray.svg" alt="">
                            </div>
                            <p>15:30</p>
                        </div>
                    </div>
                </div>
            </a>

            <a href="javascript:void(0)">
                <div class="list_details">
                    <div class="icon">
                        <img src="assets/images/play-course-icon.svg" alt="">
                    </div>
                    <div class="text">
                        <p>HTML Structure and Syntax</p>
                        <div class="course_hours">
                            <div class="icon">
                                <img src="assets/images/wall-clock-gray.svg" alt="">
                            </div>
                            <p>15:30</p>
                        </div>
                    </div>
                </div>
            </a>

            <a href="javascript:void(0)">
                <div class="list_details">
                    <div class="icon">
                        <img src="assets/images/play-course-icon.svg" alt="">
                    </div>
                    <div class="text">
                        <p>HTML Structure and Syntax</p>
                        <div class="course_hours">
                            <div class="icon">
                                <img src="assets/images/wall-clock-gray.svg" alt="">
                            </div>
                            <p>15:30</p>
                        </div>
                    </div>
                </div>
            </a>

            <a href="javascript:void(0)">
                <div class="list_details">
                    <div class="icon">
                        <img src="assets/images/play-course-icon.svg" alt="">
                    </div>
                    <div class="text">
                        <p>HTML Structure and Syntax</p>
                        <div class="course_hours">
                            <div class="icon">
                                <img src="assets/images/wall-clock-gray.svg" alt="">
                            </div>
                            <p>15:30</p>
                        </div>
                    </div>
                </div>
            </a>

        </div>
    </div>
</section>

@endsection