@extends('backend.master')
@section('title')
    {{ ___('common.common_helper') }}
@endsection
@section('content')
    <!--  page content start-->
    <div class="page-content">

        {{-- bradecrumb Area S t a r t --}}
        <div class="page-header">
            <div class="row">
                <div class="col-sm-6">
                        <h4 class="bradecrumb-title mb-1">{{ ___('common.helper_class') }}</h1>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="javascript:void(0)">{{ ___('common.home') }}</a></li>
                            <li class="breadcrumb-item">{{ ___('common.helper_class') }}</li>
                        </ol>
                </div>
            </div>
        </div>
        {{-- bradecrumb Area E n d --}}

        <!--  chat content start -->
            <div class="row clearfix">
                <div class="col-xxl-3 col-xl-6 col-lg-6">
                    <div class="ot-card mb-24">
                        <div class="card-title">
                            <div class="card-title mb-20">
                                <h3>Padding 0-100</h3>
                            </div>
                            <ul class="listing-calss">
                                {{-- Paddinng Left --}}
                                <li class="list">
                                    <span> padding-top: 0px</span>
                                    <code>.pt-0 </code>
                                </li>
                                <li class="list">
                                    <span> padding-top: 2px</span>
                                    <code>.pt-2 </code>
                                </li>
                                <li class="list">
                                    <span> padding-top: 4px</span>
                                    <code>.pt-4 </code>
                                </li>

                                {{-- Paddinng Left --}}
                                <li class="list">
                                    <span> padding-left: 0px</span>
                                    <code>.pl-0 </code>
                                </li>
                                <li class="list">
                                    <span> padding-left: 2px</span>
                                    <code>.pl-2 </code>
                                </li>
                                <li class="list">
                                    <span> padding-left: 4px</span>
                                    <code>.pl-4 </code>
                                </li>

                                {{-- Paddinng right --}}
                                <li class="list">
                                    <span> padding-right: 0px</span>
                                    <code>.pr-0 </code>
                                </li>
                                <li class="list">
                                    <span> padding-right: 2px</span>
                                    <code>.pr-2 </code>
                                </li>
                                <li class="list">
                                    <span> padding-right: 4px</span>
                                    <code>.pr-4 </code>
                                </li>

                                {{-- Paddinng bottom --}}
                                <li class="list">
                                    <span> padding-bottom: 0px</span>
                                    <code>.pb-0 </code>
                                </li>
                                <li class="list">
                                    <span> padding-bottom: 2px</span>
                                    <code>.pb-2 </code>
                                </li>
                                <li class="list">
                                    <span> padding-bottom: 4px</span>
                                    <code>.pb-4 </code>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-xxl-3 col-xl-6 col-lg-6">
                    <div class="ot-card mb-24">
                        <div class="card-title">
                            <div class="card-title mb-20">
                                <h3>margin 0-100</h3>
                            </div>
                            <ul class="listing-calss">


                                {{-- Paddinng Left --}}
                                <li class="list">
                                    <span> margin-top: 0px</span>
                                    <code>.mt-0 </code>
                                </li>
                                <li class="list">
                                    <span> margin-top: 2px</span>
                                    <code>.mt-2 </code>
                                </li>
                                <li class="list">
                                    <span> margin-top: 4px</span>
                                    <code>.mt-4 </code>
                                </li>


                                {{-- Paddinng Left --}}
                                <li class="list">
                                    <span> margin-left: 0px</span>
                                    <code>.ml-0 </code>
                                </li>
                                <li class="list">
                                    <span> margin-left: 2px</span>
                                    <code>.ml-2 </code>
                                </li>
                                <li class="list">
                                    <span> margin-left: 4px</span>
                                    <code>.ml-4 </code>
                                </li>


                                {{-- Paddinng right --}}
                                <li class="list">
                                    <span> margin-right: 0px</span>
                                    <code>.mr-0 </code>
                                </li>
                                <li class="list">
                                    <span> margin-right: 2px</span>
                                    <code>.mr-2 </code>
                                </li>
                                <li class="list">
                                    <span> margin-right: 4px</span>
                                    <code>.mr-4 </code>
                                </li>


                                {{-- Paddinng bottom --}}
                                <li class="list">
                                    <span> margin-bottom: 0px</span>
                                    <code>.mb-0 </code>
                                </li>
                                <li class="list">
                                    <span> margin-bottom: 2px</span>
                                    <code>.mb-2 </code>
                                </li>
                                <li class="list">
                                    <span> margin-bottom: 4px</span>
                                    <code>.mb-4 </code>
                                </li>


                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-xxl-3 col-xl-6 col-lg-6">
                    <div class="ot-card mb-24">
                        <div class="card-title">
                            <div class="card-title mb-20">
                                <h3>font-size 1-50</h3>
                            </div>
                            <ul class="listing-calss">

                                <li class="list">
                                    <span> font-size: 1px</span>
                                    <code>.font-size-1 </code>
                                </li>
                                <li class="list">
                                    <span> font-size: 2px</span>
                                    <code>.font-size-2 </code>
                                </li>
                                <li class="list">
                                    <span> font-size: 3px</span>
                                    <code>.font-size-3 </code>
                                </li>
                                <li class="list">
                                    <span> font-size: 4px</span>
                                    <code>.font-size-4 </code>
                                </li>
                                <li class="list">
                                    <span> font-size: 5px</span>
                                    <code>.font-size-5 </code>
                                </li>
                                <li class="list">
                                    <span> font-size: 6px</span>
                                    <code>.font-size-6 </code>
                                </li>
                                <li class="list">
                                    <span> font-size: 7px</span>
                                    <code>.font-size-7 </code>
                                </li>
                                <li class="list">
                                    <span> font-size: 8px</span>
                                    <code>.font-size-8 </code>
                                </li>
                                <li class="list">
                                    <span> font-size: 9px</span>
                                    <code>.font-size-9 </code>
                                </li>
                                <li class="list">
                                    <span> font-size: 10px</span>
                                    <code>.font-size-10 </code>
                                </li>
                                <li class="list">
                                    <span> font-size: 11px</span>
                                    <code>.font-size-11 </code>
                                </li>
                                <li class="list">
                                    <span> font-size: 12px</span>
                                    <code>.font-size-12 </code>
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>

                <div class="col-xxl-3 col-xl-6 col-lg-6">
                    <div class="ot-card mb-24">
                        <div class="card-title">
                            <div class="card-title mb-20">
                                <h3>font-weight 100-900</h3>
                            </div>
                            <ul class="listing-calss">
                                <li class="list">
                                    <span>font-weight: 100</span>
                                    <code>.font-weight-100 </code>
                                </li>
                                <li class="list">
                                    <span>font-weight: 200</span>
                                    <code>.font-weight-200 </code>
                                </li>
                                <li class="list">
                                    <span>font-weight: 300</span>
                                    <code>.font-weight-300 </code>
                                </li>
                                <li class="list">
                                    <span>font-weight: 400</span>
                                    <code>.font-weight-400 </code>
                                </li>
                                <li class="list">
                                    <span>font-weight: 500</span>
                                    <code>.font-weight-500 </code>
                                </li>
                                <li class="list">
                                    <span>font-weight: 600</span>
                                    <code>.font-weight-600 </code>
                                </li>
                                <li class="list">
                                    <span>font-weight: 700</span>
                                    <code>.font-weight-700 </code>
                                </li>
                                <li class="list">
                                    <span>font-weight: 800</span>
                                    <code>.font-weight-800 </code>
                                </li>
                                <li class="list">
                                    <span>font-weight: 900</span>
                                    <code>.font-weight-900 </code>
                                </li>
                                <li class="list">
                                    <span>font-weight: 300</span>
                                    <code>.font-weight-300 </code>
                                </li>
                                <li class="list">
                                    <span>font-weight: 400</span>
                                    <code>.font-weight-400 </code>
                                </li>
                                <li class="list">
                                    <span>font-weight: 500</span>
                                    <code>.font-weight-500 </code>
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>

                <div class="col-xxl-3 col-xl-6 col-lg-6">
                    <div class="ot-card mb-24">
                        <div class="card-title">
                            <div class="card-title mb-20">
                                <h3>label-color</h3>
                            </div>
                            <ul class="listing-calss">
                                <ul class="listing-calss">
                                    <li class="list">
                                        <span class="label-primary">label-primary</span>
                                        <code>.label-primary</code>
                                    </li>
                                    <li class="list">
                                        <span class="label-secondary">label-secondary</span>
                                        <code>.label-secondary</code>
                                    </li>
                                    <li class="list">
                                        <span class="label-success">label-success</span>
                                        <code>.label-success</code>
                                    </li>
                                    <li class="list">
                                        <span class="label-danger">label-danger</span>
                                        <code>.label-danger</code>
                                    </li>
                                    <li class="list">
                                        <span class="label-info">label-info</span>
                                        <code>.label-info</code>
                                    </li>
                                    <li class="list">
                                        <span class="label-dark">label-dark</span>
                                        <code>l.abel-dark</code>
                                    </li>
                                    <li class="list">
                                        <span class="label-warning">label-warning</span>
                                        <code>.label-warning</code>
                                    </li>

                                </ul>

                            </ul>
                        </div>
                    </div>
                </div>

                <div class="col-xxl-3 col-xl-6 col-lg-6">
                    <div class="ot-card mb-24">
                        <div class="card-title">
                            <div class="card-title mb-20">
                                <h3>font-color</h3>
                            </div>
                            <ul class="listing-calss">
                                <li class="list">
                                    <span class="font-primary">font-primary</span>
                                    <code>.font-primary</code>
                                </li>
                                <li class="list">
                                    <span class="font-secondary">font-secondary</span>
                                    <code>.font-secondary</code>
                                </li>
                                <li class="list">
                                    <span class="font-success">font-success</span>
                                    <code>.font-success</code>
                                </li>
                                <li class="list">
                                    <span class="font-danger">font-danger</span>
                                    <code>.font-danger</code>
                                </li>
                                <li class="list">
                                    <span class="font-info">font-info</span>
                                    <code>.font-info</code>
                                </li>
                                <li class="list">
                                    <span class="font-dark">font-dark</span>
                                    <code>.font-dark</code>
                                </li>
                                <li class="list">
                                    <span class="font-warning">font-warning</span>
                                    <code>.font-warning</code>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="col-xxl-3 col-xl-6 col-lg-6">
                    <div class="ot-card mb-24">
                        <div class="card-title">
                            <div class="card-title mb-20">
                                <h3>background color</h3>
                            </div>
                            <ul class="listing-calss">
                                <li class="list">
                                    <span>bg-primary</span>
                                    <code>.bg-primary</code>
                                </li>
                                <li class="list">
                                    <span>bg-secondary</span>
                                    <code>.bg-secondary</code>
                                </li>
                                <li class="list">
                                    <span>bg-success</span>
                                    <code>.bg-success</code>
                                </li>
                                <li class="list">
                                    <span>bg-danger</span>
                                    <code>.bg-danger</code>
                                </li>
                                <li class="list">
                                    <span>bg-info</span>
                                    <code>.bg-info</code>
                                </li>
                                <li class="list">
                                    <span>bg-dark</span>
                                    <code>.bg-dark</code>
                                </li>
                                <li class="list">
                                    <span>bg-warning</span>
                                    <code>.bg-warning</code>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-xxl-3 col-xl-6 col-lg-6">
                    <div class="ot-card mb-24">
                        <div class="card-title">
                            <div class="card-title mb-20">
                                <h3>weight & height</h3>
                            </div>
                            <ul class="listing-calss">
                                <li class="list">
                                    <span>height:1px</span>
                                    <code>.height-1</code>
                                </li>
                                <li class="list">
                                    <span>weight:1px</span>
                                    <code>.weight-1</code>
                                </li>
                                <li class="list">
                                    <span>height:2px</span>
                                    <code>.height-2</code>
                                </li>
                                <li class="list">
                                    <span>weight:2px</span>
                                    <code>.weight-2</code>
                                </li>
                                <li class="list">
                                    <span>height:3px</span>
                                    <code>.height-3</code>
                                </li>
                                <li class="list">
                                    <span>weight:3px</span>
                                    <code>.weight-3</code>
                                </li>
                                <li class="list">
                                    <span>height:4px</span>
                                    <code>.height-4</code>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        <!--  chat content end -->
    </div>
    <!--  page content end -->
@endsection