{% extends 'base.html' %}
{% load static %}
{% block headblock %}
<title>About Us</title>
<meta name="description" content="Creative Schools, your learning journey reinvented!">
<link rel="canonical" href="{% url 'main:home' %}" />


{% endblock %}

{% block content %}

   <!-- breadcrumb start-->
    <section class="breadcrumb"><img class="img-fluid img-src" src="{% static 'main/assets/images/herointro/3.webp' %}" alt="">
        <div class="container">
            <div class="grid grid-cols-12">
                <div class="col-span-12">
                    <div class="breadcrumb-contain">
                        <h1 data-sal-delay="100" data-sal="slide-up" data-sal-duration="800">About Us</h1>
                        <ul data-sal-delay="200" data-sal="slide-up" data-sal-duration="800">
                            <li><a href="{% url 'main:home' %}">Home<i class="bi bi-chevron-right"></i></a></li>
                            <li><a href="#">About Us</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- breadcrumb end-->
    <!-- about start-->
    <section class="about-us two space-py-100">
        <div class="container">
            <div class="grid grid-cols-12 cdx-grid">
                <div class="col-start-auto col-span-12 xl:col-span-10 xl:col-start-2" data-sal-delay="100" data-sal="fade-in" data-sal-duration="800">
                    <div class="about-contain">
                        <h4>Who we are</h4>
                        <h2>We Are Providing The Best Qualification Services And Better Skills. Our All Instructors Are High Expert </h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
                    </div>
                </div>
                <div class="col-start-auto col-span-12 xl:col-span-10 xl:col-start-2" data-sal-delay="100" data-sal="fade-in" data-sal-duration="800">
                    <div class="swiper aboutslider">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="img-wrap"><img class="img-fluid" src="{% static 'main/assets/images/about/1.webp' %}" alt=""></div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img-wrap"><img class="img-fluid" src="{% static 'main/assets/images/about/2.webp' %}" alt=""></div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img-wrap"><img class="img-fluid" src="{% static 'main/assets/images/about/3.webp' %}" alt=""></div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img-wrap"><img class="img-fluid" src="{% static 'main/assets/images/about/4.webp' %}" alt=""></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-start-auto col-span-12 xl:col-span-10 xl:col-start-2" data-sal-delay="100" data-sal="fade-in" data-sal-duration="800">
                    <div class="grid grid-cols-12 about-counter cdx-gap justify-center">
                        <div class="col-span-12 lg:col-span-4 sm:col-span-6" data-sal-delay="100" data-sal="slide-up" data-sal-duration="800">
                            <div class="counter-grid three text-center">
                                <h2><span class="count-num">125,600</span>+
                                </h2>
                                <p>Students Enrolled</p>
                            </div>
                        </div>
                        <div class="col-span-12 lg:col-span-4 sm:col-span-6" data-sal-delay="200" data-sal="slide-up" data-sal-duration="800">
                            <div class="counter-grid three text-center">
                                <h2><span class="count-num">200</span>+
                                </h2>
                                <p>Skilled Instructors</p>
                            </div>
                        </div>
                        <div class="col-span-12 lg:col-span-4 sm:col-span-6" data-sal-delay="300" data-sal="slide-up" data-sal-duration="800">
                            <div class="counter-grid three text-center">
                                <h2><span class="count-num">100</span>%
                                </h2>
                                <p>SATISFACTION RATE</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- about end-->
    <!-- why choose start-->
    <section class="why-choose three bg-light space-py-100">
        <div class="container">
            <div class="grid">
                <div class="col-span-12">
                    <div class="title text-center">
                        <h4>Best learning platform </h4>
                        <h2>Why We Are The Best </h2>
                    </div>
                </div>
            </div>
            <div class="grid grid-cols-12 cdx-gap justify-content-center">
                <div class="col-span-12 lg:col-span-4 md:col-span-6" data-sal-delay="100" data-sal="slide-up" data-sal-duration="800">
                    <div class="whychoose-grid three text-center">
                        <div class="icon-wrap"><img class="img-fluid" src="{% static 'main/assets/images/why-choose/icons/1.webp' %}" alt="image"></div>
                        <div class="whychoose-detail">
                            <h3>Best Quality Courses</h3>
                            <p>Eiusmod Lorem ipsum dolor consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. </p>
                        </div>
                    </div>
                </div>
                <div class="col-span-12 lg:col-span-4 md:col-span-6" data-sal-delay="200" data-sal="slide-up" data-sal-duration="800">
                    <div class="whychoose-grid three text-center">
                        <div class="icon-wrap"><img class="img-fluid" src="{% static 'main/assets/images/why-choose/icons/2.webp' %}" alt="image"></div>
                        <div class="whychoose-detail">
                            <h3>Skilled Instructors</h3>
                            <p>Eiusmod Lorem ipsum dolor consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. </p>
                        </div>
                    </div>
                </div>
                <div class="col-span-12 lg:col-span-4 md:col-span-6" data-sal-delay="300" data-sal="slide-up" data-sal-duration="800">
                    <div class="whychoose-grid three text-center">
                        <div class="icon-wrap"><img class="img-fluid" src="{% static 'main/assets/images/why-choose/icons/3.webp' %}" alt="image"></div>
                        <div class="whychoose-detail">
                            <h3>Any Time Access</h3>
                            <p>Eiusmod Lorem ipsum dolor consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- why choose end-->
    <!-- testimonial start-->
    <section class="cdx-testimonial arrow-dot space-py-100">
        <div class="container" data-sal-delay="100" data-sal="fade-in" data-sal-duration="800">
            <div class="grid grid-cols-12">
                <div class="col-span-12">
                    <div class="title text-center">
                        <h4>testimonial</h4>
                        <h2>What Says Our Students</h2>
                    </div>
                </div>
                <div class="col-span-12">
                    <div class="swiper testimonialslider">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="testi-grid testi-two">
                                    <div class="media">
                                        <div class="img-wrap"><img class="img-fluid" src="{% static 'main/assets/images/avtar/1.webp' %}" alt=""></div>
                                        <div class="media-body">
                                            <h4>Adam Smith</h4>
                                            <h6>Graphics Designer</h6>
                                        </div>
                                    </div>
                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis.</p>
                                    <ul class="rating-list">
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                    </ul>
                                    <div class="testiquote"><i class="bi bi-quote"></i></div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="testi-grid testi-two">
                                    <div class="media">
                                        <div class="img-wrap"><img class="img-fluid" src="{% static 'main/assets/images/avtar/2.webp' %}" alt=""></div>
                                        <div class="media-body">
                                            <h4>Adam Smith</h4>
                                            <h6>Graphics Designer</h6>
                                        </div>
                                    </div>
                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis.</p>
                                    <ul class="rating-list">
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                    </ul>
                                    <div class="testiquote"><i class="bi bi-quote"></i></div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="testi-grid testi-two">
                                    <div class="media">
                                        <div class="img-wrap"><img class="img-fluid" src="{% static 'main/assets/images/avtar/3.webp' %}" alt=""></div>
                                        <div class="media-body">
                                            <h4>Adam Smith</h4>
                                            <h6>Graphics Designer</h6>
                                        </div>
                                    </div>
                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis.</p>
                                    <ul class="rating-list">
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                    </ul>
                                    <div class="testiquote"><i class="bi bi-quote"></i></div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="testi-grid testi-two">
                                    <div class="media">
                                        <div class="img-wrap"><img class="img-fluid" src="{% static 'main/assets/images/avtar/4.webp' %}" alt=""></div>
                                        <div class="media-body">
                                            <h4>Adam Smith</h4>
                                            <h6>Graphics Designer</h6>
                                        </div>
                                    </div>
                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis.</p>
                                    <ul class="rating-list">
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                    </ul>
                                    <div class="testiquote"><i class="bi bi-quote"></i></div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- testimonial end-->
    <!-- team start-->
    <section class="space-py-100 bg-light">
        <div class="container">
            <div class="grid grid-cols-12">
                <div class="col-span-12">
                    <div class="title text-center">
                        <h4>Instructors</h4>
                        <h2>Our Skilled Instructors</h2>
                    </div>
                </div>
            </div>
            <div class="grid grid-cols-12 cdx-gap">
                <div class="col-span-12 lg:col-span-3 sm:col-span-6" data-sal-delay="100" data-sal="slide-up" data-sal-duration="800">
                    <div class="team-grid">
                        <div class="img-wrap"><a href="instructor-profile.html"><img class="img-fluid" src="{% static 'main/assets/images/team/1.webp' %}" alt="image"></a>
                            <div class="social-link">
                                <ul>
                                    <li><a href="https://www.linkedin.com/"><i class="bi bi-linkedin"></i></a></li>
                                    <li><a href="https://www.facebook.com/"><i class="bi bi-facebook"></i></a></li>
                                    <li><a href="https://twitter.com/"><i class="bi bi-instagram"></i></a></li>
                                    <li><a href="https://www.youtube.com/"><i class="bi bi-youtube"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="team-detail">
                            <h4><a href="instructor-profile.html">David Wickman</a></h4>
                            <p>Instructor</p>
                        </div>
                    </div>
                </div>
                <div class="col-span-12 lg:col-span-3 sm:col-span-6" data-sal-delay="200" data-sal="slide-up" data-sal-duration="800">
                    <div class="team-grid">
                        <div class="img-wrap"><a href="instructor-profile.html"><img class="img-fluid" src="{% static 'main/assets/images/team/2.webp' %}" alt="image"></a>
                            <div class="social-link">
                                <ul>
                                    <li><a href="https://www.linkedin.com/"><i class="bi bi-linkedin"></i></a></li>
                                    <li><a href="https://www.facebook.com/"><i class="bi bi-facebook"></i></a></li>
                                    <li><a href="https://twitter.com/"><i class="bi bi-instagram"></i></a></li>
                                    <li><a href="https://www.youtube.com/"><i class="bi bi-youtube"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="team-detail">
                            <h4><a href="instructor-profile.html">Marco  Tolliver</a></h4>
                            <p>Instructor</p>
                        </div>
                    </div>
                </div>
                <div class="col-span-12 lg:col-span-3 sm:col-span-6" data-sal-delay="300" data-sal="slide-up" data-sal-duration="800">
                    <div class="team-grid">
                        <div class="img-wrap"><a href="instructor-profile.html"><img class="img-fluid" src="{% static 'main/assets/images/team/3.webp' %}" alt="image"></a>
                            <div class="social-link">
                                <ul>
                                    <li><a href="https://www.linkedin.com/"><i class="bi bi-linkedin"></i></a></li>
                                    <li><a href="https://www.facebook.com/"><i class="bi bi-facebook"></i></a></li>
                                    <li><a href="https://twitter.com/"><i class="bi bi-instagram"></i></a></li>
                                    <li><a href="https://www.youtube.com/"><i class="bi bi-youtube"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="team-detail">
                            <h4><a href="instructor-profile.html">Claude Remley</a></h4>
                            <p>Instructor</p>
                        </div>
                    </div>
                </div>
                <div class="col-span-12 lg:col-span-3 sm:col-span-6" data-sal-delay="400" data-sal="slide-up" data-sal-duration="800">
                    <div class="team-grid">
                        <div class="img-wrap"><a href="instructor-profile.html"><img class="img-fluid" src="{% static 'main/assets/images/team/4.webp' %}" alt="image"></a>
                            <div class="social-link">
                                <ul>
                                    <li><a href="https://www.linkedin.com/"><i class="bi bi-linkedin"></i></a></li>
                                    <li><a href="https://www.facebook.com/"><i class="bi bi-facebook"></i></a></li>
                                    <li><a href="https://twitter.com/"><i class="bi bi-instagram"></i></a></li>
                                    <li><a href="https://www.youtube.com/"><i class="bi bi-youtube"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="team-detail">
                            <h4><a href="instructor-profile.html">Steven  Davis</a></h4>
                            <p>Instructor</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- team end-->

{% endblock %}