{% extends 'base.html' %}
{% load static %}
{% block headblock %}
<title>Membership Plans</title>
<meta name="description" content="Subscribe now and start your reinvented learning journey!" >

{% endblock %}
{% block content %}

    <!-- breadcrumb start-->
    <section class="breadcrumb"><img class="img-fluid img-src" src="{% static  'main/assets/images/herointro/3.webp' %}" alt="herointro image">
        <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">Membership Plans</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="contact.html">Membership Plans</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- breadcrumb end-->
    <!-- pricing paln start-->
    <section class="space-py-100">
        <div class="container">
            <div class="grid grid-cols-12">
                <div class="col-span-12">
                    <div class="title text-center">
                        <h4>Our Plans</h4>
                        <h2>Membership Levels</h2>
                    </div>
                </div>
            </div>
            <div class="grid grid-cols-12 cdx-gap">
                <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="pricing-grid">
                        <div class="pricing-header">
                            <h2>Basic</h2><span class="pricing-currency">$</span><span class="pricing-price">19.99</span><span class="month">/ Month</span>
                        </div>
                        <div class="pricing-body">
                            <ul>
                                <li><i data-feather="check"></i>20 Courses Access
                                </li>
                                <li><i data-feather="check"></i>Course Certificate</li>
                                <li><i data-feather="check"></i>Exercise File</li>
                                <li><i data-feather="check"></i>Lifetime Access</li>
                                <li><i data-feather="check"></i>Dedicated Support</li>
                            </ul>
                        </div>
                        <button class="btn btn-primary" type="submit">Get started now</button>
                    </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="pricing-grid">
                        <div class="price-lable">popular</div>
                        <div class="pricing-header">
                            <h2>Standard</h2><span class="pricing-currency">$</span><span class="pricing-price">29.99</span><span class="month">/ Month</span>
                        </div>
                        <div class="pricing-body">
                            <ul>
                                <li><i data-feather="check"></i>50 Courses Access
                                </li>
                                <li><i data-feather="check"></i>Course Certificate</li>
                                <li><i data-feather="check"></i>Exercise File</li>
                                <li><i data-feather="check"></i>Lifetime Access</li>
                                <li><i data-feather="check"></i>Dedicated Support</li>
                            </ul>
                        </div>
                        <button class="btn btn-primary" type="submit">Get started now</button>
                    </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="pricing-grid">
                        <div class="pricing-header">
                            <h2>Premium</h2><span class="pricing-currency">$</span><span class="pricing-price">49.99</span><span class="month">/ Month</span>
                        </div>
                        <div class="pricing-body">
                            <ul>
                                <li><i data-feather="check"></i>all Courses Access
                                </li>
                                <li><i data-feather="check"></i>Course Certificate</li>
                                <li><i data-feather="check"></i>Exercise File</li>
                                <li><i data-feather="check"></i>Lifetime Access</li>
                                <li><i data-feather="check"></i>Dedicated Support</li>
                            </ul>
                        </div>
                        <button class="btn btn-primary" type="submit">Get started now</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- pricing paln end-->
   

   {% endblock %}}