templates/thumbnails/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">Thumbnails</h1>
  9.                                 </div>
  10.                                 <div class="ms-auto pageheader-btn">
  11.                                     <ol class="breadcrumb">
  12.                                         <li class="breadcrumb-item"><a href="javascript:void(0);">UI Elements</a></li>
  13.                                         <li class="breadcrumb-item active" aria-current="page">Thumbnails</li>
  14.                                     </ol>
  15.                                 </div>
  16.                             </div>
  17.                             <!-- PAGE-HEADER END -->
  19.                             <!-- ROW-1 OPEN -->
  20.                             <div class="row">
  21.                                 <div class="col-md-12 col-lg-12">
  22.                                     <div class="card">
  23.                                         <div class="card-header border-bottom">
  24.                                             <h3 class="card-title">Basic Thumbnails</h3>
  25.                                         </div>
  26.                                         <div class="card-body">
  27.                                             <div class="example">
  28.                                                 <div class="row mt-4">
  29.                                                     <div class="col-md-6 col-xl-3">
  30.                                                         <a href="#" class="thumbnail ">
  31.                                                             <img src="{{absolute_url(asset('build/images/media/16.jpg'))}}" alt="thumb1" class="thumbimg">
  32.                                                         </a>
  33.                                                     </div>
  34.                                                     <div class="col-md-6 col-xl-3">
  35.                                                         <a href="#" class="thumbnail">
  36.                                                             <img src="{{absolute_url(asset('build/images/media/media2.jpg'))}}" alt="thumb1" class="thumbimg">
  37.                                                         </a>
  38.                                                     </div>
  39.                                                     <div class="col-md-6 col-xl-3">
  40.                                                         <a href="#" class="thumbnail">
  41.                                                             <img src="{{absolute_url(asset('build/images/media/media3.jpg'))}}" alt="thumb1" class="thumbimg">
  42.                                                         </a>
  43.                                                     </div>
  44.                                                     <div class="col-md-6 col-xl-3">
  45.                                                         <a href="#" class="thumbnail">
  46.                                                             <img src="{{absolute_url(asset('build/images/media/media4.jpg'))}}" alt="thumb1" class="thumbimg">
  47.                                                         </a>
  48.                                                     </div>
  49.                                                 </div>
  50.                                             </div>
  51.                                         </div>
  52.                                     </div>
  53.                                 </div>
  54.                             </div>
  55.                             <!-- ROW-1 CLOSED -->
  57.                             <!-- ROW-2 OPEN -->
  58.                             <div class="row">
  59.                                 <div class="col-md-12 col-lg-12">
  60.                                     <div class="card">
  61.                                         <div class="card-header border-bottom">
  62.                                             <h3 class="card-title">Custom content Thumbnails</h3>
  63.                                         </div>
  64.                                         <div class="card-body">
  65.                                             <div class="example">
  66.                                                 <div class="row mt-4">
  67.                                                     <div class="col-md-12 col-xl-4">
  68.                                                         <div class="thumbnail">
  69.                                                             <a href="#">
  70.                                                                 <img src="{{absolute_url(asset('build/images/media/21.jpg'))}}" alt="thumb1" class="thumbimg">
  71.                                                             </a>
  72.                                                             <div class="caption">
  73.                                                                 <h4>Thumbnail label</h4>
  74.                                                                 <p class="text-muted">Sadipscing labore eos nonumy est no nonumy, lorem sed stet et tempor sed sed. Amet magna eos dolores sadipscing sed erat at, et sed et sit et justo.</p>
  75.                                                                 <p>
  76.                                                                     <a href="javascript:void(0)" class="btn btn-primary my-1" role="button">Button</a>
  77.                                                                     <a href="javascript:void(0)" class="btn btn-secondary my-1" role="button">Button</a>
  78.                                                                 </p>
  79.                                                             </div>
  80.                                                         </div>
  81.                                                     </div><!-- COL-END -->
  82.                                                     <div class="col-md-12 col-xl-4">
  83.                                                         <div class="thumbnail">
  84.                                                             <a href="#">
  85.                                                                 <img src="{{absolute_url(asset('build/images/media/12.jpg'))}}" alt="thumb1" class="thumbimg">
  86.                                                             </a>
  87.                                                             <div class="caption">
  88.                                                                 <h4>Thumbnail label</h4>
  89.                                                                 <p class="text-muted">Sanctus sit magna labore et elitr diam. Sed tempor amet no elitr clita no. Voluptua est sit sadipscing diam sea lorem vero invidunt aliquyam. Dolores ipsum elitr erat.</p>
  90.                                                                 <p>
  91.                                                                     <a href="javascript:void(0)" class="btn btn-primary my-1" role="button">Button</a>
  92.                                                                     <a href="javascript:void(0)" class="btn btn-secondary my-1" role="button">Button</a>
  93.                                                                 </p>
  94.                                                             </div>
  95.                                                         </div>
  96.                                                     </div><!-- COL-END -->
  97.                                                     <div class="col-md-12 col-xl-4">
  98.                                                         <div class="thumbnail">
  99.                                                             <a href="#">
  100.                                                                 <img src="{{absolute_url(asset('build/images/media/13.jpg'))}}" alt="thumb1" class="thumbimg">
  101.                                                             </a>
  102.                                                             <div class="caption">
  103.                                                                 <h4>Thumbnail label</h4>
  104.                                                                 <p class="text-muted">Et sit clita ipsum sed erat ut stet sed diam, invidunt duo nonumy sadipscing invidunt elitr no, dolores sit lorem et ut amet kasd justo sed, duo.</p>
  105.                                                                 <p>
  106.                                                                     <a href="javascript:void(0)" class="btn btn-primary my-1" role="button">Button</a>
  107.                                                                     <a href="javascript:void(0)" class="btn btn-secondary my-1" role="button">Button</a>
  108.                                                                 </p>
  109.                                                             </div>
  110.                                                         </div>
  111.                                                     </div><!-- COL-END -->
  112.                                                 </div>
  113.                                             </div>
  114.                                         </div>
  115.                                     </div>
  116.                                 </div><!-- COL-END -->
  117.                             </div>
  118.                             <!-- ROW-2 CLOSED -->
  120.                             <!-- ROW-3 OPEN -->
  121.                             <div class="row">
  122.                                 <div class="col-md-12 col-lg-12">
  123.                                     <div class="card">
  124.                                         <div class="card-header border-bottom">
  125.                                             <h3 class="card-title">Custom content Thumbnails</h3>
  126.                                         </div>
  127.                                         <div class="card-body">
  128.                                             <div class="example">
  129.                                                 <div class="row mt-4">
  130.                                                     <div class="col-md-12 col-lg-6 col-xl-3">
  131.                                                         <div class="thumbnail">
  132.                                                             <a href="#">
  133.                                                                 <img src="{{absolute_url(asset('build/images/media/4.jpg'))}}" alt="thumb1" class="thumbimg">
  134.                                                             </a>
  135.                                                             <div class="caption">
  136.                                                                 <h4>Thumbnail label</h4>
  137.                                                                 <p class="text-muted">Consetetur sadipscing dolores stet dolor et accusam, vero lorem sit amet dolor eirmod. Et ipsum eirmod eirmod consetetur aliquyam, dolor amet elitr gubergren ipsum at gubergren, ipsum.</p>
  138.                                                             </div>
  139.                                                         </div>
  140.                                                     </div>
  141.                                                     <div class="col-md-12 col-lg-6 col-xl-3">
  142.                                                         <div class="thumbnail">
  143.                                                             <a href="#">
  144.                                                                 <img src="{{absolute_url(asset('build/images/media/5.jpg'))}}" alt="thumb1" class="thumbimg">
  145.                                                             </a>
  146.                                                             <div class="caption">
  147.                                                                 <h4>Thumbnail label</h4>
  148.                                                                 <p class="text-muted">Eirmod labore duo lorem dolore et at dolore et. Duo diam diam amet labore gubergren, voluptua sea justo sed vero vero, clita et et justo eirmod labore.</p>
  149.                                                             </div>
  150.                                                         </div>
  151.                                                     </div>
  152.                                                     <div class="col-md-12 col-lg-6 col-xl-3">
  153.                                                         <div class="thumbnail">
  154.                                                             <div class="caption">
  155.                                                                 <h4>Thumbnail label</h4>
  156.                                                                 <p class="text-muted">Consetetur lorem at sanctus eos dolore takimata lorem, nonumy duo sadipscing stet ipsum eos dolor, erat sanctus tempor sed ipsum invidunt clita eos sea sea, lorem invidunt.</p>
  157.                                                             </div>
  158.                                                             <a href="#">
  159.                                                                 <img src="{{absolute_url(asset('build/images/media/6.jpg'))}}" alt="thumb1" class="thumbimg">
  160.                                                             </a>
  161.                                                         </div>
  162.                                                     </div>
  163.                                                     <div class="col-md-12 col-lg-6 col-xl-3">
  164.                                                         <div class="thumbnail">
  165.                                                             <div class="caption">
  166.                                                                 <h4>Thumbnail label</h4>
  167.                                                                 <p class="text-muted">Et sadipscing ipsum nonumy consetetur vero justo sadipscing ut ipsum, sadipscing voluptua et takimata et lorem dolore clita ipsum voluptua. Est diam dolor elitr clita diam dolor.</p>
  168.                                                             </div>
  169.                                                             <a href="#">
  170.                                                                 <img src="{{absolute_url(asset('build/images/media/7.jpg'))}}" alt="thumb1" class="thumbimg">
  171.                                                             </a>
  172.                                                         </div>
  173.                                                     </div>
  174.                                                 </div>
  175.                                             </div>
  176.                                         </div>
  177.                                     </div>
  178.                                 </div><!-- COL-END -->
  179.                             </div>
  180.                             <!-- ROW-3 CLOSED -->
  182.                             <!-- ROW-4 OPEN -->
  183.                             <div class="row">
  184.                                 <div class="col-md-12 col-lg-12">
  185.                                     <div class="card">
  186.                                         <div class="card-header border-bottom">
  187.                                             <h3 class="card-title">Aligning Thumbnails</h3>
  188.                                         </div>
  189.                                         <div class="card-body">
  190.                                             <div class="example">
  191.                                                 <p class="text-muted">Align Start</p>
  192.                                                 <div class="row mt-4 justify-content-start">
  193.                                                     <div class="col-md-12 col-lg-6 col-xl-3">
  194.                                                         <div class="thumbnail">
  195.                                                             <a href="#">
  196.                                                                 <img src="{{absolute_url(asset('build/images/media/14.jpg'))}}" alt="thumb1" class="thumbimg">
  197.                                                             </a>
  198.                                                             <div class="caption">
  199.                                                                 <h4>Thumbnail label</h4>
  200.                                                                 <p>Rebum ipsum voluptua no invidunt voluptua eos nonumy sea et. Et sanctus et kasd eos dolores. Invidunt no clita sed at amet, gubergren et dolores dolor diam..</p>
  201.                                                             </div>
  202.                                                         </div>
  203.                                                     </div>
  204.                                                     <div class="col-md-12 col-lg-6 col-xl-3">
  205.                                                         <div class="thumbnail">
  206.                                                             <a href="#">
  207.                                                                 <img src="{{absolute_url(asset('build/images/media/15.jpg'))}}" alt="thumb1" class="thumbimg">
  208.                                                             </a>
  209.                                                             <div class="caption">
  210.                                                                 <h4>Thumbnail label</h4>
  211.                                                                 <p>No sadipscing eirmod vero aliquyam est aliquyam diam amet et. Dolores dolore kasd tempor sed aliquyam sadipscing et, clita dolor amet eirmod lorem, sanctus lorem sed duo.</p>
  212.                                                             </div>
  213.                                                         </div>
  214.                                                     </div>
  215.                                                 </div>
  216.                                             </div>
  217.                                             <div class="example mt-3">
  218.                                                 <p class="text-muted">Align End</p>
  219.                                                 <div class="row mt-4 justify-content-end">
  220.                                                     <div class="col-md-12 col-lg-6 col-xl-3">
  221.                                                         <div class="thumbnail">
  222.                                                             <a href="#">
  223.                                                                 <img src="{{absolute_url(asset('build/images/media/14.jpg'))}}" alt="thumb1" class="thumbimg">
  224.                                                             </a>
  225.                                                             <div class="caption">
  226.                                                                 <h4>Thumbnail label</h4>
  227.                                                                 <p>Rebum ipsum voluptua no invidunt voluptua eos nonumy sea et. Et sanctus et kasd eos dolores. Invidunt no clita sed at amet, gubergren et dolores dolor diam..</p>
  228.                                                             </div>
  229.                                                         </div>
  230.                                                     </div>
  231.                                                     <div class="col-md-12 col-lg-6 col-xl-3">
  232.                                                         <div class="thumbnail">
  233.                                                             <a href="#">
  234.                                                                 <img src="{{absolute_url(asset('build/images/media/15.jpg'))}}" alt="thumb1" class="thumbimg">
  235.                                                             </a>
  236.                                                             <div class="caption">
  237.                                                                 <h4>Thumbnail label</h4>
  238.                                                                 <p>No sadipscing eirmod vero aliquyam est aliquyam diam amet et. Dolores dolore kasd tempor sed aliquyam sadipscing et, clita dolor amet eirmod lorem, sanctus lorem sed duo.</p>
  239.                                                             </div>
  240.                                                         </div>
  241.                                                     </div>
  242.                                                 </div>
  243.                                             </div>
  244.                                             <div class="example mt-3">
  245.                                                 <p class="text-muted">Align Center</p>
  246.                                                 <div class="row mt-4 justify-content-center">
  247.                                                     <div class="col-md-12 col-lg-6 col-xl-3">
  248.                                                         <div class="thumbnail">
  249.                                                             <a href="#">
  250.                                                                 <img src="{{absolute_url(asset('build/images/media/14.jpg'))}}" alt="thumb1" class="thumbimg">
  251.                                                             </a>
  252.                                                             <div class="caption">
  253.                                                                 <h4>Thumbnail label</h4>
  254.                                                                 <p>Rebum ipsum voluptua no invidunt voluptua eos nonumy sea et. Et sanctus et kasd eos dolores. Invidunt no clita sed at amet, gubergren et dolores dolor diam..</p>
  255.                                                             </div>
  256.                                                         </div>
  257.                                                     </div>
  258.                                                     <div class="col-md-12 col-lg-6 col-xl-3">
  259.                                                         <div class="thumbnail">
  260.                                                             <a href="#">
  261.                                                                 <img src="{{absolute_url(asset('build/images/media/15.jpg'))}}" alt="thumb1" class="thumbimg">
  262.                                                             </a>
  263.                                                             <div class="caption">
  264.                                                                 <h4>Thumbnail label</h4>
  265.                                                                 <p>No sadipscing eirmod vero aliquyam est aliquyam diam amet et. Dolores dolore kasd tempor sed aliquyam sadipscing et, clita dolor amet eirmod lorem, sanctus lorem sed duo.</p>
  266.                                                             </div>
  267.                                                         </div>
  268.                                                     </div>
  269.                                                 </div>
  270.                                             </div>
  271.                                             <div class="example mt-3">
  272.                                                 <p class="text-muted">Align Between</p>
  273.                                                 <div class="row mt-4 justify-content-between">
  274.                                                     <div class="col-md-12 col-lg-6 col-xl-3">
  275.                                                         <div class="thumbnail">
  276.                                                             <a href="#">
  277.                                                                 <img src="{{absolute_url(asset('build/images/media/14.jpg'))}}" alt="thumb1" class="thumbimg">
  278.                                                             </a>
  279.                                                             <div class="caption">
  280.                                                                 <h4>Thumbnail label</h4>
  281.                                                                 <p>Rebum ipsum voluptua no invidunt voluptua eos nonumy sea et. Et sanctus et kasd eos dolores. Invidunt no clita sed at amet, gubergren et dolores dolor diam..</p>
  282.                                                             </div>
  283.                                                         </div>
  284.                                                     </div>
  285.                                                     <div class="col-md-12 col-lg-6 col-xl-3">
  286.                                                         <div class="thumbnail">
  287.                                                             <a href="#">
  288.                                                                 <img src="{{absolute_url(asset('build/images/media/15.jpg'))}}" alt="thumb1" class="thumbimg">
  289.                                                             </a>
  290.                                                             <div class="caption">
  291.                                                                 <h4>Thumbnail label</h4>
  292.                                                                 <p>No sadipscing eirmod vero aliquyam est aliquyam diam amet et. Dolores dolore kasd tempor sed aliquyam sadipscing et, clita dolor amet eirmod lorem, sanctus lorem sed duo.</p>
  293.                                                             </div>
  294.                                                         </div>
  295.                                                     </div>
  296.                                                 </div>
  297.                                             </div>
  298.                                         </div>
  299.                                     </div>
  300.                                 </div><!-- COL-END -->
  301.                             </div>
  302.                             <!-- ROW-4 CLOSED -->
  303. {% endblock %}