templates/cards/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  5.                             <!-- PAGE-HEADER -->
  6.                             <div class="page-header">
  7.                                 <div>
  8.                                     <h1 class="page-title">Cards</h1>
  9.                                 </div>
  10.                                 <div class="ms-auto pageheader-btn">
  11.                                     <ol class="breadcrumb">
  12.                                         <li class="breadcrumb-item"><a href="javascript:void(0);">Advanced UI</a></li>
  13.                                         <li class="breadcrumb-item active" aria-current="page">Cards</li>
  14.                                     </ol>
  15.                                 </div>
  16.                             </div>
  17.                             <!-- PAGE-HEADER END -->
  19.                             <!-- ROW-1 OPEN -->
  20.                             <div class="row row-deck">
  21.                                 <div class="col-xl-4 col-md-12">
  22.                                     <div class="card">
  23.                                         <div class="card-body">
  24.                                             <h5 class="card-title">Card title</h5>
  25.                                             <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
  26.                                             <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  27.                                             <a href="#" class="card-link">Card link</a>
  28.                                             <a href="#" class="card-link">Another link</a>
  29.                                         </div>
  30.                                     </div>
  31.                                 </div><!-- COL END -->
  32.                                 <div class="col-xl-4 col-md-12">
  33.                                     <div class="card">
  34.                                         <div class="card-header border-bottom">
  35.                                             <div class="card-title">Card-Header</div>
  36.                                         </div>
  37.                                         <div class="card-body">
  38.                                             <p>With supporting text below as a natural lead-in to additional content.</p>
  39.                                             <a href="#" class="btn btn-primary">Go somewhere</a>
  40.                                         </div>
  41.                                     </div>
  42.                                 </div><!-- COL END -->
  43.                                 <div class="col-xl-4 col-md-12">
  44.                                     <div class="card">
  45.                                         <div class="card-body">
  46.                                             <p>With supporting text below as a natural lead-in to additional content.</p>
  47.                                             <a href="#" class="btn btn-primary">Go somewhere</a>
  48.                                         </div>
  49.                                         <div class="card-footer">
  50.                                             <div class="card-title">Card-footer</div>
  51.                                         </div>
  52.                                     </div>
  53.                                 </div><!-- COL END -->
  54.                             </div>
  55.                             <!-- ROW-1 CLOSED -->
  57.                             <!-- ROW-2 OPEN -->
  58.                             <div class="row">
  59.                                 <div class="col-md-12 col-xl-4">
  60.                                     <div class="card text-white bg-primary">
  61.                                         <div class="card-body">
  62.                                             <h4 class="card-title">Primary card title</h4>
  63.                                             <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  64.                                         </div>
  65.                                     </div>
  66.                                 </div><!-- COL END -->
  67.                                 <div class="col-md-12 col-xl-4">
  68.                                     <div class="card text-white bg-secondary">
  69.                                         <div class="card-body">
  70.                                             <h4 class="card-title">Secondary card title</h4>
  71.                                             <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  72.                                         </div>
  73.                                     </div>
  74.                                 </div><!-- COL END -->
  75.                                 <div class="col-md-12 col-xl-4">
  76.                                     <div class="card text-white bg-success">
  77.                                         <div class="card-body">
  78.                                             <h4 class="card-title">Success card title</h4>
  79.                                             <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  80.                                         </div>
  81.                                     </div>
  82.                                 </div><!-- COL END -->
  83.                                 <div class="col-md-12 col-xl-4">
  84.                                     <div class="card text-white bg-danger">
  85.                                         <div class="card-body">
  86.                                             <h4 class="card-title">Danger card title</h4>
  87.                                             <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  88.                                         </div>
  89.                                     </div>
  90.                                 </div><!-- COL END -->
  91.                                 <div class="col-md-12 col-xl-4">
  92.                                     <div class="card text-white bg-info">
  93.                                         <div class="card-body">
  94.                                             <h4 class="card-title">Info card title</h4>
  95.                                             <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  96.                                         </div>
  97.                                     </div>
  98.                                 </div><!-- COL END -->
  99.                                 <div class="col-md-12  col-xl-4">
  100.                                     <div class="card text-white bg-warning">
  101.                                         <div class="card-body">
  102.                                             <h4 class="card-title">Warning card title</h4>
  103.                                             <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  104.                                         </div>
  105.                                     </div>
  106.                                 </div><!-- COL END -->
  107.                             </div>
  108.                             <!-- ROW-2 CLOSED -->
  110.                             <!-- ROW-3 OPEN -->
  111.                             <div class="row row-deck">
  112.                                 <div class="col-md-12 col-xl-4">
  113.                                     <div class="card">
  114.                                         <div class="card-header border-bottom">
  115.                                             <h3 class="card-title">Basic card</h3>
  116.                                             <div class="card-options">
  117.                                                 <a href="#" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
  118.                                                 <a href="#" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a>
  119.                                             </div>
  120.                                         </div>
  121.                                         <div class="card-body">
  122.                                         Lorem aliquyam consetetur ea sed sit eirmod. Lorem et sadipscing ipsum erat sit. Et et est eos et dolore est,.Labore labore duo labore at est ipsum sed labore dolores. Erat diam eirmod sadipscing ea tempor erat diam. Dolor dolores.
  123.                                         </div>
  124.                                         <div class="card-footer">
  125.                                             This is Basic card footer
  126.                                         </div>
  127.                                     </div>
  128.                                 </div><!-- COL END -->
  129.                                 <div class="col-md-12 col-xl-4">
  130.                                     <div class="card">
  131.                                         <div class="card-header bg-primary br-tr-3 br-tl-3">
  132.                                             <h3 class="card-title text-white">Basic color card-header</h3>
  133.                                             <div class="card-options ">
  134.                                                 <a href="#" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up text-white"></i></a>
  135.                                                 <a href="#" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x text-white"></i></a>
  136.                                             </div>
  137.                                         </div>
  138.                                         <div class="card-body">
  139.                                             No elitr justo diam dolor lorem amet. Accusam sadipscing nonumy rebum amet nonumy. Labore kasd sadipscing et dolor lorem aliquyam sadipscing amet. Erat et eirmod ipsum ea ipsum eos invidunt est ipsum. Dolor gubergren dolor.
  140.                                         </div>
  141.                                         <div class="card-footer">
  142.                                             This is Basic card footer
  143.                                         </div>
  144.                                     </div>
  145.                                 </div><!-- COL END -->
  146.                                 <div class="col-md-12 col-xl-4">
  147.                                     <div class="card">
  148.                                         <div class="card-header border-bottom">
  149.                                             <h3 class="card-title">Basic color card-footer</h3>
  150.                                             <div class="card-options">
  151.                                                 <a href="#" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
  152.                                                 <a href="#" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a>
  153.                                             </div>
  154.                                         </div>
  155.                                         <div class="card-body">
  156.                                             Sit labore ea ipsum duo et lorem lorem tempor ut, kasd dolor diam amet lorem. Ut sanctus sed erat et gubergren labore magna ut. Est invidunt amet diam kasd magna sed et..
  157.                                         </div>
  158.                                         <div class="card-footer bg-danger br-br-3 br-bl-3">
  159.                                             <div class="text-white">Basic card footer</div>
  160.                                         </div>
  161.                                     </div>
  162.                                 </div><!-- COL END -->
  163.                             </div>
  164.                             <!-- ROW-3 CLOSED -->
  166.                             <!-- ROW-4 OPEN -->
  167.                             <div class="row">
  168.                                 <div class="col-md-12  col-xl-6">
  169.                                     <div class="card">
  170.                                         <div class="card-header border-bottom">
  171.                                             <h3 class="card-title">Panel with custom buttons</h3>
  172.                                             <div class="card-options">
  173.                                                 <a href="#" class="btn btn-primary btn-sm">Action 1</a>
  174.                                                 <a href="#" class="btn btn-secondary btn-sm ms-2">Action 2</a>
  175.                                             </div>
  176.                                         </div>
  177.                                         <div class="card-body">
  178.                                             No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful actual teachings of the great explorer
  179.                                             Sed amet ut accusam dolor sit, diam rebum sanctus est et est amet, et tempor et duo est accusam. Justo.
  180.                                         </div>
  181.                                     </div>
  182.                                 </div><!-- COL END -->
  183.                                 <div class="col-md-12  col-xl-6">
  184.                                     <div class="card">
  185.                                         <div class="card-header border-bottom">
  186.                                             <h3 class="card-title">Card with search form</h3>
  187.                                             <div class="card-options w-40">
  188.                                                 <form class="w-100">
  189.                                                     <div class="input-group mb-3">
  190.                                                         <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
  191.                                                         <button class="btn btn-primary" type="button" id="button-addon2">Button</button>
  192.                                                     </div>
  193.                                                 </form>
  194.                                             </div>
  195.                                         </div>
  196.                                         <div class="card-body">
  197.                                             No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful actual teachings of the great explorer
  198.                                         </div>
  199.                                     </div>
  200.                                 </div><!-- COL END -->
  201.                                 <div class="col-md-12  col-xl-6">
  202.                                     <div class="card">
  203.                                         <div class="card-header border-bottom">
  204.                                             <h3 class="card-title">Card with alert</h3>
  205.                                             <div class="card-options">
  206.                                                 <a href="#" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
  207.                                                 <a href="#" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a>
  208.                                             </div>
  209.                                         </div>
  210.                                         <div class="card-alert alert  alert-success mb-0">
  211.                                             Adding action was successful
  212.                                         </div>
  213.                                         <div class="card-body">
  214.                                             Voluptua nonumy erat et ipsum elitr dolor erat invidunt dolor sed. Tempor dolor et vero sed gubergren ut ut. Et ipsum magna kasd eos dolore est lorem amet justo. Diam ut lorem amet diam.
  215.                                         </div>
  216.                                     </div>
  217.                                 </div><!-- COL END -->
  218.                                 <div class="col-md-12  col-xl-6">
  219.                                     <div class="card">
  220.                                         <div class="card-header border-bottom">
  221.                                             <h3 class="card-title">Card with alert</h3>
  222.                                             <div class="card-options">
  223.                                                 <a href="#" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
  224.                                                 <a href="#" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a>
  225.                                             </div>
  226.                                         </div>
  227.                                         <div class="card-alert alert alert-danger mb-0">
  228.                                             Adding action failed
  229.                                         </div>
  230.                                         <div class="card-body">
  231.                                             Et sanctus amet et gubergren magna et dolore. Sed justo et et voluptua, dolor magna tempor et dolore aliquyam no clita lorem at. Est rebum invidunt sea voluptua dolores diam. Stet.
  232.                                         </div>
  233.                                     </div>
  234.                                 </div><!-- COL END -->
  235.                             </div>
  236.                             <!-- ROW-4 CLOSED -->
  238.                             <!-- ROW-5 OPEN -->
  239.                             <div class="row">
  240.                                 <div class="col-md-12 col-xl-4">
  241.                                     <div class="card ">
  242.                                         <div class="card-header ">
  243.                                             <h3 class="card-title ">Employee card</h3>
  244.                                             <div class="card-options">
  245.                                                 <a href="#" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
  246.                                                 <a href="#" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x "></i></a>
  247.                                             </div>
  248.                                         </div>
  249.                                         <div class="card-body text-center">
  250.                                             <span class="avatar avatar-xxl brround cover-image cover-image" data-bs-image-src="{{absolute_url(asset('build/images/users/18.jpg'))}}"></span>
  251.                                             <h4 class="h4 mb-0 mt-3">James Thomas</h4>
  252.                                             <p class="card-text">Web designer</p>
  253.                                         </div>
  254.                                         <div class="card-footer text-center">
  255.                                             <div class="row user-social-detail">
  256.                                                 <a href="#" class="social-profile me-4 rounded d-f-ai-c-jc-c"><i class="fa fa-facebook" aria-hidden="true"></i></a>
  257.                                                 <a href="#" class="social-profile me-4 rounded d-f-ai-c-jc-c"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
  258.                                                 <a href="#" class="social-profile me-4 rounded d-f-ai-c-jc-c"><i class="fa fa-twitter" aria-hidden="true"></i></a>
  259.                                             </div>
  260.                                         </div>
  261.                                     </div>
  262.                                 </div><!-- COL END -->
  263.                                 <div class="col-md-12 col-xl-4">
  264.                                     <div class="card ">
  265.                                         <div class="card-header ">
  266.                                             <h3 class="card-title ">Employee card</h3>
  267.                                             <div class="card-options">
  268.                                                 <a href="#" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
  269.                                                 <a href="#" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x "></i></a>
  270.                                             </div>
  271.                                         </div>
  272.                                         <div class="card-body text-center">
  273.                                             <span class="avatar avatar-xxl brround cover-image" data-bs-image-src="{{absolute_url(asset('build/images/users/18.jpg'))}}"></span>
  274.                                             <h4 class="h4 mb-0 mt-3">Rebacca Thomas</h4>
  275.                                             <p class="card-text">Web designer</p>
  276.                                         </div>
  277.                                         <div class="card-footer text-center">
  278.                                             <div class="row user-social-detail">
  279.                                                 <a href="#" class="social-profile me-4 rounded d-f-ai-c-jc-c"><i class="fa fa-facebook" aria-hidden="true"></i></a>
  280.                                                 <a href="#" class="social-profile me-4 rounded d-f-ai-c-jc-c"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
  281.                                                 <a href="#" class="social-profile me-4 rounded d-f-ai-c-jc-c"><i class="fa fa-twitter" aria-hidden="true"></i></a>
  282.                                             </div>
  283.                                         </div>
  284.                                     </div>
  285.                                 </div><!-- COL END -->
  286.                                 <div class="col-md-12 col-xl-4">
  287.                                     <div class="card ">
  288.                                         <div class="card-header ">
  289.                                             <h3 class="card-title ">Employee card</h3>
  290.                                             <div class="card-options">
  291.                                                 <a href="#" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
  292.                                                 <a href="#" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x "></i></a>
  293.                                             </div>
  294.                                         </div>
  295.                                         <div class="card-body text-center">
  296.                                             <span class="avatar avatar-xxl brround cover-image" data-bs-image-src="{{absolute_url(asset('build/images/users/8.jpg'))}}"></span>
  297.                                             <h4 class="h4 mb-0 mt-3"> Thomas symson</h4>
  298.                                             <p class="card-text">Web designer</p>
  299.                                         </div>
  300.                                         <div class="card-footer text-center">
  301.                                             <div class="row user-social-detail">
  302.                                                 <a href="#" class="social-profile me-4 rounded d-f-ai-c-jc-c"><i class="fa fa-facebook" aria-hidden="true"></i></a>
  303.                                                 <a href="#" class="social-profile me-4 rounded d-f-ai-c-jc-c"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
  304.                                                 <a href="#" class="social-profile me-4 rounded d-f-ai-c-jc-c"><i class="fa fa-twitter" aria-hidden="true"></i></a>
  305.                                             </div>
  306.                                         </div>
  307.                                     </div>
  308.                                 </div><!-- COL END -->
  309.                             </div>
  310.                             <!-- ROW-5 CLOSED -->
  312.                             <!-- ROW-6 OPEN -->
  313.                             <div class="row row-deck">
  314.                                 <div class="col-md-12 col-xl-4">
  315.                                     <div class="card ">
  316.                                         <div class="card-body text-start">
  317.                                             <blockquote class="quote">
  318.                                                 <p>Amet sanctus dolore sit stet ipsum et consetetur et amet.</p>
  319.                                                     <small class="text-muted">
  320.                                                         this title is soo awesome<cite title="Source Title">-Kasd aliquyam</cite>
  321.                                                     </small>
  322.                                             </blockquote>
  323.                                         </div>
  324.                                     </div>
  325.                                 </div><!-- COL END -->
  326.                                 <div class="col-md-12 col-xl-4">
  327.                                     <div class="card ">
  328.                                         <div class="card-body text-center">
  329.                                             <blockquote class="quote">
  330.                                                 <p>Dolor voluptua dolore dolores sed ipsum labore tempor. No tempor nonumy nonumy.</p>
  331.                                                     <small class="text-muted">
  332.                                                         this title is soo awesome<cite title="Source Title">-Kasd aliquyam</cite>
  333.                                                     </small>
  334.                                             </blockquote>
  335.                                         </div>
  336.                                     </div>
  337.                                 </div><!-- COL END -->
  338.                                 <div class="col-md-12 col-xl-4">
  339.                                     <div class="card ">
  340.                                         <div class="card-body text-end">
  341.                                             <blockquote class="quote">
  342.                                                 <p>Amet rebum consetetur est labore sea erat erat amet sadipscing invidunt.</p>
  343.                                                     <small class="text-muted">
  344.                                                         this title is soo awesome<cite title="Source Title">-Kasd aliquyam</cite>
  345.                                                     </small>
  346.                                             </blockquote>
  347.                                         </div>
  348.                                     </div>
  349.                                 </div><!-- COL END -->
  350.                             </div>
  351.                             <!-- ROW-6 CLOSED -->
  353.                             <!-- ROW-7 OPEN -->
  354.                             <div class="row">
  355.                                 <div class=" col-xl-4 col-md-12 ">
  356.                                     <div class="card m-b-20">
  357.                                         <div class="card-header border-bottom">
  358.                                             <h3 class="card-title">Card With List</h3>
  359.                                             <div class="card-options">
  360.                                                 <a href="#" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
  361.                                                 <a href="#" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a>
  362.                                             </div>
  363.                                         </div>
  364.                                         <div class="card-body">
  365.                                             <div class="visitor-list">
  366.                                                 <div class="media m-0 mt-0 border-bottom">
  367.                                                     <img class="avatar brround avatar-md me-3" alt="avatra-img" src="{{absolute_url(asset('build/images/users/18.jpg'))}}">
  368.                                                     <div class="media-body">
  369.                                                         <a href="javascript:void(0)" class="fw-semibold">John Paige</a>
  370.                                                         <p class="text-muted ">Uploaded new invoices for RedBus</p>
  371.                                                     </div>
  372.                                                 </div>
  373.                                                 <div class="media mt-2 border-bottom">
  374.                                                     <img class="avatar brround avatar-md me-3" alt="avatra-img" src="{{absolute_url(asset('build/images/users/20.jpg'))}}">
  375.                                                     <div class="media-body">
  376.                                                         <a href="javascript:void(0)" class="fw-semibold">Lillian Quinn</a>
  377.                                                         <p class="text-muted">Created new work flow for the current</p>
  378.                                                     </div>
  379.                                                 </div>
  380.                                                 <div class="media mt-2">
  381.                                                     <img class="avatar brround avatar-md me-3" alt="avatra-img" src="{{absolute_url(asset('build/images/users/18.jpg'))}}">
  382.                                                     <div class="media-body">
  383.                                                         <a href="javascript:void(0)" class="fw-semibold">Irene Harris</a>
  384.                                                         <p class="text-muted mb-0">Submitted the project schedule to the manager</p>
  385.                                                     </div>
  386.                                                 </div>
  387.                                             </div>
  388.                                         </div>
  389.                                     </div>
  390.                                 </div><!-- COL END -->
  391.                                 <div class="col-xl-4 col-md-12">
  392.                                     <div class="card m-b-20">
  393.                                         <div class="card-header border-bottom">
  394.                                             <h3 class="card-title">Sample card</h3>
  395.                                             <div class="card-options">
  396.                                                 <a href="#" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
  397.                                                 <a href="#" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a>
  398.                                             </div>
  399.                                         </div>
  400.                                         <div class="card-body">
  401.                                             <p>Put toy mouse in food bowl run out of litter box at full speed drool but pee in Put toy mouse Put toy mouse the shoe purr when being pet but chew foot.</p>
  402.                                             <p class="mb-0">Scratch the postman wake up lick paw Duis aute irure dolor in reprehenderit wake up owner meow meow lick plastic bags  Scratch the postman wake up lick paw wake Duis aute irure dolor  having their mate disturbing sleeping humans.</p>
  403.                                         </div>
  404.                                     </div>
  405.                                 </div><!-- COL END -->
  406.                                 <div class="col-xl-4 col-md-12">
  407.                                     <div class="card d-flex m-b-20">
  408.                                         <div class="card-header border-bottom">
  409.                                             <h3 class="card-title">Card with Toolbar</h3>
  410.                                             <div class="card-options">
  411.                                                 <a class="text-gray" href="javascript:void(0)">
  412.                                                     <i class="mdi mdi-refresh"></i>
  413.                                                 </a>
  414.                                                 <a class="text-gray" href="javascript:void(0)">
  415.                                                     <i class="mdi mdi-bookmark-outline"></i>
  416.                                                 </a>
  417.                                                 <a class="text-gray" href="javascript:void(0)">
  418.                                                     <i class="mdi mdi-dots-vertical"></i>
  419.                                                 </a>
  420.                                             </div>
  421.                                         </div>
  422.                                         <div class="card-body">
  423.                                             <p>Put toy mouse in food bowl run out of litter box at full speed drool but pee in Put toy mouse Put toy mouse the shoe purr when being pet but chew foot.</p>
  424.                                             <p class="mb-0">Duis aute irure dolor in reprehenderit in voluptate velit Scratch the postman wake up lick paw wake up owner meow meow lick plastic bags  Scratch the postman wake up lick paw wake  having their mate disturbing sleeping humans.</p>
  425.                                         </div>
  426.                                     </div>
  427.                                 </div><!-- COL END -->
  428.                             </div>
  429.                             <!-- ROW-7 CLOSED -->
  431.                             <!-- ROW-8 OPEN -->
  432.                             <div class="row ">
  433.                                 <div class="col-md-12 col-xl-4">
  434.                                     <div class="card card-blog-overlay1">
  435.                                         <div class="card-body  text-white">
  436.                                             <h3 class="card-title text-white">card-with image</h3>
  437.                                             Accusam rebum vero sed at sea at takimata dolores lorem. Dolores ipsum aliquyam erat takimata. Ut stet amet sed amet diam ipsum diam diam ipsum, rebum invidunt diam sit sea dolor.
  438.                                         </div>
  439.                                         <div class="card-footer text-white z-index2 border-transparent">
  440.                                             This is Basic card footer
  441.                                         </div>
  442.                                     </div>
  443.                                 </div><!-- COL END -->
  444.                                 <div class="col-md-12 col-xl-4">
  445.                                     <div class="card card-blog-overlay2">
  446.                                         <div class="card-body  text-white">
  447.                                             <h3 class="card-title text-white">card-with image</h3>
  448.                                             Diam amet amet at lorem stet rebum ut. Est eirmod et takimata ipsum stet at nonumy voluptua, sit ea nonumy dolor tempor amet. Justo sit ipsum dolor at sit, lorem ut ipsum accusam amet sadipscing.
  449.                                         </div>
  450.                                         <div class="card-footer text-white z-index2 border-transparent">
  451.                                             This is Basic card footer
  452.                                         </div>
  453.                                     </div>
  454.                                 </div><!-- COL END -->
  455.                                 <div class="col-md-12 col-xl-4">
  456.                                     <div class="card card-blog-overlay">
  457.                                         <div class="card-header z-index2  border-transparent">
  458.                                             <h3 class="card-title text-white ">card-with image</h3>
  459.                                             <div class="card-options">
  460.                                                 <a href="#" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up text-white"></i></a>
  461.                                                 <a href="#" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x text-white"></i></a>
  462.                                             </div>
  463.                                         </div>
  464.                                         <div class="card-body  text-white">
  465.                                             Dolor eirmod ea eirmod erat voluptua dolore at. Est et sed clita et diam accusam amet magna sadipscing, clita eos gubergren invidunt consetetur et, lorem diam justo amet rebum diam lorem diam.
  466.                                         </div>
  467.                                     </div>
  468.                                 </div><!-- COL END -->
  469.                                 <div class="col-md-6 col-xl-6">
  470.                                     <div class="card card-aside">
  471.                                         <div class="card-body d-flex flex-column">
  472.                                             <h4><a href="#">Play Music</a></h4>
  473.                                             <div class="text-muted">Some quick example text to build on the card title and make up the bulk of the card's</div>
  474.                                             <div class="d-flex align-items-center pt-5 mt-auto text-center ">
  475.                                                 <div class="text-muted">
  476.                                                     <a href="javascript:void(0)" class="icon d-md-inline-block ms-3"><i class="fa fa-step-backward"></i></a>
  477.                                                     <a href="javascript:void(0)" class="icon d-md-inline-block ms-3"><i class="fa fa-play "></i></a>
  478.                                                     <a href="javascript:void(0)" class="icon d-md-inline-block ms-3"><i class="fa fa-step-forward"></i></a>
  479.                                                 </div>
  480.                                             </div>
  481.                                         </div>
  483.                                     </div>
  484.                                 </div><!-- COL END -->
  485.                                 <div class="col-md-6 col-xl-6">
  486.                                     <div class="card card-aside bg-primary">
  487.                                         <div class="card-body d-flex flex-column">
  488.                                             <h4><a href="#" class="text-white">Play Music</a></h4>
  489.                                             <div class="text-muted text-white">Some quick example text to build on the card title and make up the bulk of the card's </div>
  490.                                             <div class="d-flex align-items-center pt-5 mt-auto text-center ">
  491.                                                 <div class="text-muted">
  492.                                                     <a href="javascript:void(0)" class="icon d-md-inline-block ms-3"><i class="fa fa-step-backward text-white"></i></a>
  493.                                                     <a href="javascript:void(0)" class="icon d-md-inline-block ms-3"><i class="fa fa-play text-white "></i></a>
  494.                                                     <a href="javascript:void(0)" class="icon d-md-inline-block ms-3"><i class="fa fa-step-forward text-white"></i></a>
  495.                                                 </div>
  496.                                             </div>
  497.                                         </div>
  499.                                     </div>
  500.                                 </div><!-- COL END -->
  501.                                 <div class="col-md-12 col-xl-4">
  502.                                     <div class="card text-white bg-primary">
  503.                                         <div class="card-header border-primary">
  504.                                             <h3 class="card-title ">primary card title</h3>
  505.                                             <div class="card-options">
  506.                                                 <a href="#" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up text-white"></i></a>
  507.                                                 <a href="#" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x text-white "></i></a>
  508.                                             </div>
  509.                                         </div>
  510.                                         <div class="card-body">
  511.                                             <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  512.                                         </div>
  513.                                     </div>
  514.                                 </div><!-- COL END -->
  515.                                 <div class="col-md-12 col-xl-4">
  516.                                     <div class="card text-white bg-secondary">
  517.                                         <div class="card-header border-secondary">
  518.                                             <h3 class="card-title ">Secondary card title</h3>
  519.                                             <div class="card-options">
  520.                                                 <a href="#" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up text-white"></i></a>
  521.                                                 <a href="#" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x text-white "></i></a>
  522.                                             </div>
  523.                                         </div>
  524.                                         <div class="card-body">
  525.                                             <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  526.                                         </div>
  527.                                     </div>
  528.                                 </div><!-- COL END -->
  529.                                 <div class="col-md-12 col-xl-4">
  530.                                     <div class="card text-white bg-success">
  531.                                         <div class="card-header border-success">
  532.                                             <h3 class="card-title ">Success card title</h3>
  533.                                             <div class="card-options">
  534.                                                 <a href="#" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up text-white"></i></a>
  535.                                                 <a href="#" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x text-white "></i></a>
  536.                                             </div>
  537.                                         </div>
  538.                                         <div class="card-body">
  539.                                             <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  540.                                         </div>
  541.                                     </div>
  542.                                 </div><!-- COL END -->
  543.                                 <div class="col-md-12 col-xl-4">
  544.                                     <div class="card">
  545.                                         <div class="card-header border-bottom">
  546.                                             <h3 class="card-title">Card with loader</h3>
  547.                                             <div class="card-options">
  548.                                                 <a href="#" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
  549.                                                 <a href="#" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a>
  550.                                             </div>
  551.                                         </div>
  552.                                         <div class="card-body">
  553.                                             <div class="dimmer active">
  554.                                                 <div class="spinner"></div>
  555.                                             </div>
  556.                                         </div>
  557.                                     </div>
  558.                                 </div><!-- COL END -->
  559.                                 <div class="col-md-12  col-xl-4">
  560.                                     <div class="card">
  561.                                         <div class="card-header border-bottom">
  562.                                             <h3 class="card-title">Card with loader</h3>
  563.                                             <div class="card-options">
  564.                                                 <a href="#" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
  565.                                                 <a href="#" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a>
  566.                                             </div>
  567.                                         </div>
  568.                                         <div class="card-body">
  569.                                             <div class="dimmer active">
  570.                                                 <div class="spinner1">
  571.                                                 <div class="double-bounce1"></div>
  572.                                                 <div class="double-bounce2"></div>
  573.                                                 </div>
  574.                                             </div>
  575.                                         </div>
  576.                                     </div>
  577.                                 </div><!-- COL END -->
  578.                                 <div class="col-md-12  col-xl-4">
  579.                                     <div class="card">
  580.                                         <div class="card-header border-bottom">
  581.                                             <h3 class="card-title">Card with loader</h3>
  582.                                             <div class="card-options">
  583.                                                 <a href="#" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
  584.                                                 <a href="#" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a>
  585.                                             </div>
  586.                                         </div>
  587.                                         <div class="card-body">
  588.                                             <div class="dimmer active">
  589.                                                 <div class="spinner2">
  590.                                                 <div class="cube1"></div>
  591.                                                 <div class="cube2"></div>
  592.                                                 </div>
  593.                                             </div>
  594.                                         </div>
  595.                                     </div>
  596.                                 </div>
  597.                             </div><!-- COL END -->
  598.                             <!-- ROW-8 CLOSED -->
  600.                             <!-- ROW-9 OPEN -->
  601.                             <div class="row">
  602.                                 <div class="col-md-12  col-xl-6">
  603.                                     <div class="card">
  604.                                         <div class="card-header border-bottom">
  605.                                             <h3 class="card-title">fullscreen button</h3>
  606.                                             <div class="card-options">
  607.                                                 <a href="#" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
  608.                                                 <a href="#" class="card-options-fullscreen" data-bs-toggle="card-fullscreen"><i class="fe fe-maximize"></i></a>
  609.                                                 <a href="#" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a>
  610.                                             </div>
  611.                                         </div>
  612.                                         <div class="card-body">
  613.                                             Takimata sea diam et amet et nonumy et diam. Eos accusam voluptua lorem justo sadipscing sed. Dolor dolore eirmod dolor takimata diam. Diam sadipscing stet et est et erat rebum eirmod..
  614.                                         </div>
  615.                                     </div>
  616.                                 </div><!-- COL END -->
  617.                                 <div class="col-md-12 col-xl-6">
  618.                                     <div class="card">
  619.                                         <div class="card-header border-bottom">
  620.                                             <h3 class="card-title">Card with switch</h3>
  621.                                             <div class="card-options">
  622.                                                 <label class="custom-switch m-0">
  623.                                                     <input type="checkbox" value="1" class="custom-switch-input" checked>
  624.                                                     <span class="custom-switch-indicator"></span>
  625.                                                 </label>
  626.                                             </div>
  627.                                         </div>
  628.                                         <div class="card-body">
  629.                                             Sanctus sanctus est consetetur dolor sit dolor ipsum kasd. Rebum sadipscing elitr duo sed lorem. Dolor diam nonumy voluptua magna.Labore accusam vero et aliquyam at lorem lorem, diam lorem accusam sit elitr sed amet kasd, et aliquyam.
  630.                                         </div>
  631.                                     </div>
  632.                                 </div><!-- COL END -->
  633.                                 <div class="col-md-12 col-xl-6">
  634.                                     <div class="card card-collapsed">
  635.                                         <div class="card-header border-bottom">
  636.                                             <h3 class="card-title">Initial collapsed card</h3>
  637.                                             <div class="card-options">
  638.                                                 <a href="#" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
  639.                                                 <a href="#" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a>
  640.                                             </div>
  641.                                         </div>
  642.                                         <div class="card-body">
  643.                                             Ea dolor ipsum voluptua sadipscing sanctus justo et, voluptua et et ea dolores dolores ipsum elitr, lorem sadipscing lorem sea sanctus et dolor magna. Est sadipscing kasd dolores erat invidunt. Dolores clita ea rebum elitr, sea.
  644.                                         </div>
  645.                                     </div>
  646.                                 </div><!-- COL END -->
  647.                                 <div class="col-md-12  col-xl-6">
  648.                                     <div class="card">
  649.                                         <div class="card-header border-bottom">
  650.                                             <h3 class="card-title">Built card</h3>
  651.                                             <div class="card-options">
  652.                                                 <a href="#" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
  653.                                                 <a href="#" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a>
  654.                                             </div>
  655.                                         </div>
  656.                                         <div class="card-body">
  657.                                             Dolor ut justo amet est clita diam consetetur voluptua, et magna lorem dolores dolor ipsum labore sea lorem erat, eirmod et duo labore ut at. Clita nonumy dolore at tempor, et et tempor clita amet..
  658.                                         </div>
  659.                                     </div>
  660.                                 </div><!-- COL END -->
  661.                                 <div class="col-md-12  col-xl-6">
  662.                                     <div class="card">
  663.                                         <div class="card-status bg-blue br-tr-7 br-tl-7"></div>
  664.                                         <div class="card-header border-bottom">
  665.                                             <h3 class="card-title">Card blue</h3>
  666.                                             <div class="card-options">
  667.                                                 <a href="#" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
  668.                                                 <a href="#" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a>
  669.                                             </div>
  670.                                         </div>
  671.                                         <div class="card-body">
  672.                                             Est eos sea sanctus et nonumy lorem amet rebum et. Dolores magna sadipscing lorem kasd ea ipsum dolor sed, et accusam diam et eos at, ut ipsum consetetur consetetur diam amet.
  673.                                         </div>
  674.                                     </div>
  675.                                 </div><!-- COL END -->
  676.                                 <div class="col-md-12 col-xl-6">
  677.                                     <div class="card">
  678.                                         <div class="card-status card-status-left bg-red br-bl-7 br-tl-7"></div>
  679.                                         <div class="card-header border-bottom">
  680.                                             <h3 class="card-title">Card status on left side</h3>
  681.                                             <div class="card-options">
  682.                                                 <a href="#" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
  683.                                                 <a href="#" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a>
  684.                                             </div>
  685.                                         </div>
  686.                                         <div class="card-body">
  687.                                             Voluptua dolore stet erat et gubergren accusam et clita stet, voluptua et invidunt erat et, tempor tempor ea erat rebum gubergren vero consetetur dolore, lorem elitr justo sea sea no et justo.
  688.                                         </div>
  689.                                     </div>
  690.                                 </div><!-- COL END -->
  691.                             </div>
  692.                             <!-- ROW-9 CLOSED -->
  693. {% endblock %}