@extends('user.layout.header_footer')

@section('title')
    Fv_Lms Category
@endsection

@section('cssfile')
    <link href="{!! asset('theme/user_theme/css/category.css') !!}" rel="stylesheet">
@endsection

@section('content')
    <section>
        <div class="bannerarea">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="bannerareadata">
                            <h1>What do you want to learn?</h1>
                            <h3>Grow your skill with the most reliable online courses and certifications</h3>
                            <div class="row">
                                <div class="col-sm-3"></div>
                                <div class="col-sm-5">
                                    <div class="newsformdata">
                                        <input type="text" class="form-control" placeholder="Enter Your Email">
                                    </div>
                                </div>
                                <div class="col-sm-1">
                                    <button type="button" class="btn btn-primary newssub">Submit</button>
                                </div>
                                <div class="col-sm-3"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="catarea">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="catareadata">
                            <h2>Choose a Categories</h2>
                            <h5>Perceived end knowledge certainly day sweetness why cordially</h5>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-3">
                        <div class="catbox green">
                            <img src="{!! asset('theme/user_theme/images/cData-Science.png') !!}" class="img-responsive" />
                            <h4>Data Science</h4>
                            <p>15 Courses</p>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="catbox peach">
                            <img src="{!! asset('theme/user_theme/images/cIT-&-Software.png') !!}" class="img-responsive" />
                            <h4>IT & Software</h4>
                            <p>22 Courses</p>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="catbox pink">
                            <img src="{!! asset('theme/user_theme/images/cEngineering.png') !!}" class="img-responsive" />
                            <h4>Engineering</h4>
                            <p>53 Courses</p>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="catbox purple">
                            <img src="{!! asset('theme/user_theme/images/cWeb-Development.png') !!}" class="img-responsive" />
                            <h4>Web Development</h4>
                            <p>25 Courses</p>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-3">
                        <div class="catbox see">
                            <img src="{!! asset('theme/user_theme/images/cFinance.png') !!}" class="img-responsive" />
                            <h4>Finance</h4>
                            <p>20 Courses</p>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="catbox gray">
                            <img src="{!! asset('theme/user_theme/images/cMedical.png') !!}" class="img-responsive" />
                            <h4>Medical</h4>
                            <p>10 Courses</p>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="catbox peach">
                            <img src="{!! asset('theme/user_theme/images/cArchitecture.png') !!}" class="img-responsive" />
                            <h4>Architecture</h4>
                            <p>30 Courses</p>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="catbox gray">
                            <img src="{!! asset('theme/user_theme/images/cArt-&-Design.png') !!}" class="img-responsive" />
                            <h4>Art & Design</h4>
                            <p>35 Courses</p>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-3">
                        <div class="catbox purple">
                            <img src="{!! asset('theme/user_theme/images/cphotpgraphy.png') !!}" class="img-responsive" />
                            <h4>Photography</h4>
                            <p>20 Courses</p>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="catbox pink">
                            <img src="{!! asset('theme/user_theme/images/cmusic.png') !!}" class="img-responsive" />
                            <h4>Music</h4>
                            <p>10 Courses</p>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="catbox green">
                            <img src="{!! asset('theme/user_theme/images/cmarketing.png') !!}" class="img-responsive" />
                            <h4>Marketing</h4>
                            <p>30 Courses</p>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="catbox see">
                            <img src="{!! asset('theme/user_theme/images/caccounting.png') !!}" class="img-responsive" />
                            <h4>Accounting</h4>
                            <p>35 Courses</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="catarea">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="catareadataa">
                            <h2>Choose Languages</h2>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-3">
                        <div class="flagbox">
                            <img src="{!! asset('theme/user_theme/images/cFrench.png') !!}" class="img-responsive" />
                            <h4>French</h4>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="flagbox">
                            <img src="{!! asset('theme/user_theme/images/cgerman.png') !!}" class="img-responsive" />
                            <h4>German</h4>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="flagbox">
                            <img src="{!! asset('theme/user_theme/images/cespanol.png') !!}" class="img-responsive" />
                            <h4>Español</h4>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="flagbox">
                            <img src="{!! asset('theme/user_theme/images/cenglish.png') !!}" class="img-responsive" />
                            <h4>English</h4>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-3">
                        <div class="flagbox">
                            <img src="{!! asset('theme/user_theme/images/chindi.png') !!}" class="img-responsive" />
                            <h4>Hindi</h4>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="flagbox">
                            <img src="{!! asset('theme/user_theme/images/citilian.png') !!}" class="img-responsive" />
                            <h4>Italian</h4>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="flagbox">
                            <img src="{!! asset('theme/user_theme/images/carabic.png') !!}" class="img-responsive" />
                            <h4>Arabic</h4>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="flagbox">
                            <img src="{!! asset('theme/user_theme/images/cenglish.png') !!}" class="img-responsive" />
                            <h4>English</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="cardarea">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="cardareabox">
                            <h3>Earn a Certificate</h3>
                            <p>Get the right professional <br> certificate
                                program for you.</p>
                            <button type="button" class="btn btn-primary viecard">View Program</button>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="cardareaboxx">
                            <h3>Best Rated Courses</h3>
                            <p>Enroll now in the most popular <br> and best
                                rated courses.</p>
                            <button type="button" class="btn btn-primary viecard">View Courses</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection