templates/background/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  4.                             <!-- PAGE-HEADER -->
  5.                             <div class="page-header">
  6.                                 <div>
  7.                                     <h1 class="page-title">Background</h1>
  8.                                 </div>
  9.                                 <div class="ms-auto pageheader-btn">
  10.                                     <ol class="breadcrumb">
  11.                                         <li class="breadcrumb-item"><a href="javascript:void(0);">Utilities</a></li>
  12.                                         <li class="breadcrumb-item active" aria-current="page">Background</li>
  13.                                     </ol>
  14.                                 </div>
  15.                             </div>
  16.                             <!-- PAGE-HEADER END -->
  18.                             <!-- ROW-1 OPEN -->
  19.                             <div class="row">
  20.                                 <div class="col-md-12 col-xl-12 col-xs-12 col-sm-12">
  21.                                     <!--div-->
  22.                                     <div class="card">
  23.                                         <div class="card-header border-bottom">
  24.                                             <h3 class="card-title">Gray Set</h3>
  25.                                         </div>
  26.                                         <div class="card-body h-100">
  27.                                             <p class="text-muted">It is Very Easy to Customize and it uses in website apllication.</p>
  28.                                             <div class="example">
  29.                                                 <div class="gray-set d-flex flex-wrap align-items-center justify-content-center justify-content-sm-start">
  30.                                                     <div class="bg-gray-100 hpx-50 lh-2 text-center m-1 p-3 br-5">.bg-gray-100</div>
  31.                                                     <div class="bg-gray-200 hpx-50 lh-2 text-center m-1 p-3 br-5">.bg-gray-200</div>
  32.                                                     <div class="bg-gray-300 hpx-50 lh-2 text-center m-1 p-3 br-5">.bg-gray-300</div>
  33.                                                     <div class="bg-gray-400 hpx-50 lh-2 text-center m-1 p-3 br-5">.bg-gray-400</div>
  34.                                                     <div class="bg-gray-500 hpx-50 lh-2 text-center m-1 p-3 br-5">.bg-gray-500</div>
  35.                                                     <div class="bg-gray-600 hpx-50 lh-2 text-center m-1 p-3 br-5">.bg-gray-600</div>
  36.                                                     <div class="bg-gray-700 hpx-50 lh-2 text-center m-1 p-3 br-5 text-white">.bg-gray-700</div>
  37.                                                     <div class="bg-gray-800 hpx-50 lh-2 text-center m-1 p-3 br-5 text-white">.bg-gray-800</div>
  38.                                                     <div class="bg-gray-900 hpx-50 lh-2 text-center m-1 p-3 br-5 text-white  br5">.bg-gray-900</div>
  39.                                                 </div>
  40.                                             </div>
  41.                                             <div class="table-responsive mt-2 mb-0">
  42.                                                 <table class="table table-bordered text-nowrap">
  43.                                                     <tbody>
  44.                                                         <tr>
  45.                                                             <td class="">Classes</td>
  46.                                                             <td><code>class="bg-gray-[value]"</code></td>
  47.                                                         </tr>
  48.                                                         <tr>
  49.                                                             <td class="">Values</td>
  50.                                                             <td>900 | 800 | 700 | 600 | 500 | 400 | 300 | 200 | 100</td>
  51.                                                         </tr>
  52.                                                     </tbody>
  53.                                                 </table>
  54.                                             </div>
  55.                                         </div>
  56.                                     </div>
  57.                                 </div><!--/div-->
  58.                                 <!--div-->
  59.                                 <div class="col-md-12 col-xl-12 col-xs-12 col-sm-12">
  60.                                     <div class="card">
  61.                                         <div class="card-header border-bottom">
  62.                                             <h3 class="card-title">Solid Background Set</h3>
  63.                                         </div>
  64.                                         <div class="card-body h-100">
  65.                                             <p class="text-muted">It is Very Easy to Customize and it uses in website apllication.</p>
  66.                                             <div class="example">
  67.                                                 <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-sm-start">
  68.                                                     <div class="bg-primary lh-2 text-center ht-50 m-1 p-3 text-white  br-5">.bg-primary</div>
  69.                                                     <div class="bg-secondary lh-2 text-center ht-50 m-1 p-3 text-white br-5">.bg-secondary</div>
  70.                                                     <div class="bg-success lh-2 text-center  ht-50 m-1 p-3 text-white br-5">.bg-success</div>
  71.                                                     <div class="bg-warning lh-2 text-center ht-50 m-1 p-3 text-white br-5">.bg-warning</div>
  72.                                                     <div class="bg-danger lh-2 text-center ht-50 m-1 p-3 text-white br-5">.bg-danger</div>
  73.                                                     <div class="bg-info lh-2 text-center ht-50 m-1 p-3 text-white br-5">.bg-info</div>
  74.                                                     <div class="bg-indigo lh-2 text-center ht-50 m-1 p-3 text-white br-5">.bg-indigo</div>
  75.                                                     <div class="bg-purple lh-2 text-center ht-50 m-1 p-3 text-white br-5">.bg-purple</div>
  76.                                                     <div class="bg-pink lh-2 text-center ht-50 m-1 p-3 text-white br-5">.bg-pink</div>
  77.                                                     <div class="bg-teal lh-2 text-center ht-50 m-1 p-3 text-white br-5">.bg-teal</div>
  78.                                                     <div class="bg-orange lh-2 text-center ht-50 m-1 p-3 text-white br-5">.bg-orange</div>
  79.                                                 </div>
  80.                                             </div>
  81.                                             <div class="table-responsive mt-2 mb-0">
  82.                                                 <table class="table table-bordered text-nowrap">
  83.                                                     <tbody>
  84.                                                         <tr>
  85.                                                             <td class="">Classes</td>
  86.                                                             <td><code>class="bg-[value]"</code></td>
  87.                                                         </tr>
  88.                                                         <tr>
  89.                                                             <td class="">Values</td>
  90.                                                             <td>primary | secondary | success | warning | danger | info | indigo | purple | pink | teal | orange</td>
  91.                                                         </tr>
  92.                                                     </tbody>
  93.                                                 </table>
  94.                                             </div>
  95.                                         </div>
  96.                                     </div>
  97.                                 </div><!--/div-->
  98.                                 <!--div-->
  99.                                 <div class="col-md-12 col-xl-12 col-xs-12 col-sm-12">
  100.                                     <div class="card">
  101.                                         <div class="card-header border-bottom">
  102.                                             <h3 class="card-title">Solid Gradient Background Set</h3>
  103.                                         </div>
  104.                                         <div class="card-body h-100">
  105.                                             <p class="text-muted">It is Very Easy to Customize and it uses in website apllication.</p>
  106.                                             <div class="example">
  107.                                                 <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-sm-start">
  108.                                                     <div class="bg-primary-gradient  ht-50 lh-2 p-3 text-white br-5 m-1">.bg-primary-gradient</div>
  109.                                                     <div class="bg-secondary-gradient ht-50 lh-2 p-3 text-white br-5 m-1">.bg-secondary-gradient</div>
  110.                                                     <div class="bg-success-gradient ht-50 lh-2 p-3 text-white br-5 m-1">.bg-success-gradient</div>
  111.                                                     <div class="bg-warning-gradient ht-50 lh-2 p-3 text-white br-5 m-1">.bg-warning-gradient</div>
  112.                                                     <div class="bg-danger-gradient ht-50 lh-2 p-3 text-white br-5 m-1">.bg-danger-gradient</div>
  113.                                                     <div class="bg-info-gradient ht-50 lh-2 p-3 text-white br-5 m-1">.bg-info-gradient</div>
  114.                                                     <div class="bg-purple-gradient ht-50 lh-2 p-3 text-white br-5 m-1">.bg-purple-gradient</div>
  115.                                                     <div class="bg-pink-gradient ht-50 lh-2 p-3 text-white br-5 m-1">.bg-pink-gradient</div>
  116.                                                     <div class="bg-teal-gradient ht-50 lh-2 p-3 text-white br-5 m-1">.bg-teal-gradient</div>
  117.                                                 </div>
  118.                                             </div>
  119.                                             <div class="table-responsive mt-2 mb-0">
  120.                                                 <table class="table table-bordered text-nowrap">
  121.                                                     <tbody>
  122.                                                         <tr>
  123.                                                             <td class="">Classes</td>
  124.                                                             <td><code>class="bg-[value]"</code></td>
  125.                                                         </tr>
  126.                                                         <tr>
  127.                                                             <td class="">Values</td>
  128.                                                             <td>primary-gradient | secondary-gradient | success-gradient | warning-gradient | dange-gradientr | info-gradient | purple-gradient | pink-gradient | teal-gradient</td>
  129.                                                         </tr>
  130.                                                     </tbody>
  131.                                                 </table>
  132.                                             </div>
  133.                                         </div>
  134.                                     </div>
  135.                                 </div><!--/div-->
  136.                                 <div class="col-md-12 col-xl-12 col-xs-12 col-sm-12">
  137.                                     <!--div-->
  138.                                     <div class="card">
  139.                                         <div class="card-header border-bottom">
  140.                                             <h3 class="card-title">Transparent White Set</h3>
  141.                                         </div>
  142.                                         <div class="card-body h-100">
  143.                                             <div class="example">
  144.                                                 <div class="d-sm-flex">
  145.                                                     <div class="flex-1 ps-relative">
  146.                                                         <img alt="" class="br-xs-tl-5 br-xs-tr-5 br-tl-sm-5 br-bl-sm-5" src="{{absolute_url(asset('build/images/photos/5.jpg'))}}">
  147.                                                         <div class="ps-absolute a-0 bg-white-1 br-xs-tl-5 br-xs-tr-5 br-tl-sm-5 br-bl-sm-5"></div>
  148.                                                     </div>
  149.                                                     <div class="flex-1 ps-relative">
  150.                                                         <img alt="" src="{{absolute_url(asset('build/images/photos/5.jpg'))}}">
  151.                                                         <div class="ps-absolute a-0 bg-white-2"></div>
  152.                                                     </div>
  153.                                                     <div class="flex-1 ps-relative">
  154.                                                         <img alt="" src="{{absolute_url(asset('build/images/photos/5.jpg'))}}">
  155.                                                         <div class="ps-absolute a-0 bg-white-3"></div>
  156.                                                     </div>
  157.                                                     <div class="flex-1 ps-relative">
  158.                                                         <img alt="" src="{{absolute_url(asset('build/images/photos/5.jpg'))}}">
  159.                                                         <div class="ps-absolute a-0 bg-white-4"></div>
  160.                                                     </div>
  161.                                                     <div class="flex-1 ps-relative">
  162.                                                         <img alt="" src="{{absolute_url(asset('build/images/photos/5.jpg'))}}">
  163.                                                         <div class="ps-absolute a-0 bg-white-5"></div>
  164.                                                     </div>
  165.                                                     <div class="flex-1 ps-relative">
  166.                                                         <img alt="" src="{{absolute_url(asset('build/images/photos/5.jpg'))}}">
  167.                                                         <div class="ps-absolute a-0 bg-white-6"></div>
  168.                                                     </div>
  169.                                                     <div class="flex-1 ps-relative">
  170.                                                         <img alt="" src="{{absolute_url(asset('build/images/photos/5.jpg'))}}">
  171.                                                         <div class="ps-absolute a-0 bg-white-7"></div>
  172.                                                     </div>
  173.                                                     <div class="flex-1 ps-relative">
  174.                                                         <img alt="" src="{{absolute_url(asset('build/images/photos/5.jpg'))}}">
  175.                                                         <div class="ps-absolute a-0 bg-white-8"></div>
  176.                                                     </div>
  177.                                                     <div class="flex-1 ps-relative">
  178.                                                         <img alt="" class="br-xs-bl-5 br-xs-br-5 br-tr-sm-5 br-br-sm-5" src="{{absolute_url(asset('build/images/photos/5.jpg'))}}">
  179.                                                         <div class="ps-absolute a-0 bg-white-9 br-xs-bl-5 br-xs-br-5 br-tr-sm-5 br-br-sm-5"></div>
  180.                                                     </div>
  181.                                                 </div>
  182.                                             </div>
  183.                                             <div class="table-responsive mt-2 mb-0">
  184.                                                 <table class="table table-bordered text-nowrap">
  185.                                                     <tbody>
  186.                                                         <tr>
  187.                                                             <td class="">Classes</td>
  188.                                                             <td><code>class="bg-white-[value]"</code></td>
  189.                                                         </tr>
  190.                                                         <tr>
  191.                                                             <td class="">Values</td>
  192.                                                             <td>1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9</td>
  193.                                                         </tr>
  194.                                                     </tbody>
  195.                                                 </table>
  196.                                             </div>
  197.                                         </div>
  198.                                     </div>
  199.                                 </div><!--/div-->
  200.                                 <div class="col-md-12 col-xl-12 col-xs-12 col-sm-12">
  201.                                     <!--div-->
  202.                                     <div class="card">
  203.                                         <div class="card-header border-bottom">
  204.                                             <h3 class="card-title">Transpraent Black Set</h3>
  205.                                         </div>
  206.                                         <div class="card-body h-100">
  207.                                             <p class="text-muted">It is Very Easy to Customize and it uses in website apllication.</p>
  208.                                             <div class="example">
  209.                                                 <div class="d-sm-flex">
  210.                                                     <div class="flex-1 ps-relative">
  211.                                                         <img alt="" class="br-xs-tl-5 br-xs-tr-5 br-tl-sm-5 br-bl-sm-5" src="{{absolute_url(asset('build/images/photos/5.jpg'))}}">
  212.                                                         <div class="ps-absolute a-0 bg-black-1 br-xs-tl-5 br-xs-tr-5 br-tl-sm-5 br-bl-sm-5"></div>
  213.                                                     </div>
  214.                                                     <div class="flex-1 ps-relative">
  215.                                                         <img alt="" src="{{absolute_url(asset('build/images/photos/5.jpg'))}}">
  216.                                                         <div class="ps-absolute a-0 bg-black-2"></div>
  217.                                                     </div>
  218.                                                     <div class="flex-1 ps-relative">
  219.                                                         <img alt="" src="{{absolute_url(asset('build/images/photos/5.jpg'))}}">
  220.                                                         <div class="ps-absolute a-0 bg-black-3"></div>
  221.                                                     </div>
  222.                                                     <div class="flex-1 ps-relative">
  223.                                                         <img alt="" src="{{absolute_url(asset('build/images/photos/5.jpg'))}}">
  224.                                                         <div class="ps-absolute a-0 bg-black-4"></div>
  225.                                                     </div>
  226.                                                     <div class="flex-1 ps-relative">
  227.                                                         <img alt="" src="{{absolute_url(asset('build/images/photos/5.jpg'))}}">
  228.                                                         <div class="ps-absolute a-0 bg-black-5"></div>
  229.                                                     </div>
  230.                                                     <div class="flex-1 ps-relative">
  231.                                                         <img alt="" src="{{absolute_url(asset('build/images/photos/5.jpg'))}}">
  232.                                                         <div class="ps-absolute a-0 bg-black-6"></div>
  233.                                                     </div>
  234.                                                     <div class="flex-1 ps-relative">
  235.                                                         <img alt="" src="{{absolute_url(asset('build/images/photos/5.jpg'))}}">
  236.                                                         <div class="ps-absolute a-0 bg-black-7"></div>
  237.                                                     </div>
  238.                                                     <div class="flex-1 ps-relative">
  239.                                                         <img alt="" src="{{absolute_url(asset('build/images/photos/5.jpg'))}}">
  240.                                                         <div class="ps-absolute a-0 bg-black-8"></div>
  241.                                                     </div>
  242.                                                     <div class="flex-1 ps-relative">
  243.                                                         <img alt="" class=" br-xs-bl-5 br-xs-br-5 br-tr-sm-5 br-br-sm-5" src="{{absolute_url(asset('build/images/photos/5.jpg'))}}">
  244.                                                         <div class="ps-absolute a-0 bg-black-9 br-xs-bl-5 br-xs-br-5 br-tr-sm-5 br-br-sm-5"></div>
  245.                                                     </div>
  246.                                                 </div>
  247.                                             </div>
  248.                                             <div class="table-responsive mt-2 mb-0">
  249.                                                 <table class="table table-bordered text-nowrap">
  250.                                                     <tbody>
  251.                                                         <tr>
  252.                                                             <td class="">Classes</td>
  253.                                                             <td><code>class="bg-black-[value]"</code></td>
  254.                                                         </tr>
  255.                                                         <tr>
  256.                                                             <td class="">Values</td>
  257.                                                             <td>1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9</td>
  258.                                                         </tr>
  259.                                                     </tbody>
  260.                                                 </table>
  261.                                             </div>
  262.                                         </div>
  263.                                     </div>
  264.                                 </div>
  265.                             </div>
  266.                             <!-- ROW-1 CLOSED -->
  267.                             
  268. {% endblock %}