templates/st/base.html.twig line 1

  2. <!DOCTYPE html>
  3. <html lang="en"> 
  4.   <head>
  5.     <!-- Title -->
  6.     <title>The Brightlight - quality bespoke led light from belgium</title>
  8.     <meta name="description" content="The Bright light designs, develops & produces bespoke led light and components in belgium">
  9.     <meta name="keywords" content="Led light the bright light ledline thebrightstripe aureola">
  12.     <!-- Required Meta Tags Always Come First -->
  13.     <meta charset="utf-8">
  14.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  15.     <meta http-equiv="x-ua-compatible" content="ie=edge">
  17.     <!-- Favicon -->
  18.     <link rel="shortcut icon" href="/dc/favicon.ico">
  20.     <!-- Google Fonts -->
  21.     <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto+Slab:300,400,700%7COpen+Sans:400,600,700">
  22.     <link href="https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,700" rel="stylesheet">
  23.     <!-- CSS Global Compulsory -->
  24.     <link rel="stylesheet" href="/thebrightlight/assets/vendor/bootstrap/bootstrap.min.css">
  26.     <!-- CSS Implementing Plugins -->
  27.     <link rel="stylesheet" href="/thebrightlight/assets/vendor/icon-awesome/css/font-awesome.min.css">
  28.     <link rel="stylesheet" href="/thebrightlight/assets/vendor/icon-line/css/simple-line-icons.css">
  29.     <link rel="stylesheet" href="/thebrightlight/assets/vendor/icon-line-pro/style.css">
  30.     <link rel="stylesheet" href="/thebrightlight/assets/vendor/icon-hs/style.css">
  31.     <link rel="stylesheet" href="/thebrightlight/assets/vendor/animate.css">
  32.     <link rel="stylesheet" href="/thebrightlight/assets/vendor/hs-megamenu/src/hs.megamenu.css">
  33.     <link rel="stylesheet" href="/thebrightlight/assets/vendor/hamburgers/hamburgers.min.css">
  34.     <link rel="stylesheet" href="/thebrightlight/assets/vendor/slick-carousel/slick/slick.css">
  35.     <link rel="stylesheet" href="/thebrightlight/assets/vendor/fancybox/jquery.fancybox.css">
  37.     <!-- Revolution Slider -->
  38.     <link rel="stylesheet" href="/thebrightlight/assets/vendor/revolution-slider/revolution/fonts/pe-icon-7-stroke/css/pe-icon-7-stroke.css">
  39.     <link rel="stylesheet" href="/thebrightlight/assets/vendor/revolution-slider/revolution/css/settings.css">
  42.     <!-- CSS  Theme -->
  43.     <link rel="stylesheet" href="/thebrightlight/assets/css/styles.bm-classic.css">
  45.     <!-- CSS Customization -->
  46.     <link rel="stylesheet" href="/thebrightlight/assets/css/custom.css"><style></style>
  47.   </head>
  50.   <body>
  51.     <main>        <header id="js-header" class=" u-header u-header--static u-header--change-appearance u-header--toggle-section  " data-header-fix-moment="300">
  52.       <!-- Top Bar -->
  53.       <div class="u-header__section u-header__section--hidden u-header__section--light g-bg-white g-transition-0_3 g-py-10">
  54.         <div class="container">
  55.           <div class="row flex-column flex-sm-row justify-content-between align-items-center text-uppercase g-font-weight-400 g-color-black g-font-size-12 g-mx-0--lg">
  56.             <div class="col-auto">            </div>
  57.             <!-- menubalk topbar -->
  58.             <div class="col-auto g-pos-rel">
  59.               <ul class="list-inline g-overflow-hidden g-pt-1 g-mx-minus-4 mb-0">                                   <li class="list-inline-item g-mx-4">
  60.                                         <a href="https://www.thebrightlight.be/nl/contact"
  61.                                                  class="g-color-black g-color-primary--hover g-text-underline--none--hover">contact
  62.                                                   </a>
  63.                                 </li>                                   <li class="list-inline-item g-mx-4">
  64.                                         <a href="https://www.thebrightlight.be/nl/press"
  65.                                                  class="g-color-black g-color-primary--hover g-text-underline--none--hover">press
  66.                                                   </a>
  67.                                 </li>
  71.                 <li class="list-inline-item g-mx-4">|</li>
  72.                 <li class="list-inline-item g-mx-4">                                   <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="https://www.thebrightlight.be/nl/login">Login</a>                </li><li class="list-inline-item g-mx-4">|</li>                <li class="list-inline-item g-mx-4">
  73.                         <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="http://www.thebrightlight.be/nl/">NL
  74.                         </a>
  75.                  </li>                <li class="list-inline-item g-mx-4">
  76.                         <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="http://www.thebrightlight.be/fr/">FR
  77.                         </a>
  78.                  </li>                <li class="list-inline-item g-mx-4">
  79.                         <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="http://www.thebrightlight.be/en/">EN
  80.                         </a>
  81.                  </li>
  83.               </ul>
  84.             </div>
  85.             <!-- menubalk topbar end -->
  86.           </div>
  87.         </div>
  88.       </div>
  89.       <!-- End Top Bar -->
  91.       <div class="u-header__section u-header__section--light g-bg-white g-py-10" data-header-fix-moment-exclude="g-bg-white g-py-10" data-header-fix-moment-classes="g-bg-white u-shadow-v18 g-py-0">
  94.           <!--strat nav -->
  95.           <nav class="js-mega-menu navbar navbar-expand-lg g-px-0  g-bg-white">
  96.             <div class="container g-px-15">
  97.               <!-- Logo -->
  98.               <a class="navbar-brand" href="https://www.thebrightlight.be">
  99.                 <img src="https://www.thebrightlight.be/thebrightlight/logo_thebrightlight.png" alt="Logo the bright light">
  100.               </a>
  101.               <!-- End Logo -->
  103.               <!-- Responsive Toggle Button -->
  104.               <button class="navbar-toggler navbar-toggler-right btn g-line-height-1 g-brd-none g-pa-0 ml-auto" type="button"
  105.                       aria-label="Toggle navigation"
  106.                       aria-expanded="false"
  107.                       aria-controls="navBar"
  108.                       data-toggle="collapse"
  109.                       data-target="#navBar">
  110.                 <span class="hamburger hamburger--slider g-pa-0">
  111.                   <span class="hamburger-box">
  112.                     <span class="hamburger-inner"></span>
  113.                   </span>
  114.                 </span>
  115.               </button>
  116.               <!-- End Responsive Toggle Button -->
  118.               <!-- Navigation -->
  119.               <div class="collapse navbar-collapse align-items-center flex-sm-row g-pt-10 g-pt-5--lg" id="navBar">
  122.                 <ul class="navbar-nav g-font-weight-600">                         <li class="nav-item g-mx-10--lg g-mx-20--xl">                         
  123.                         
  124.                                       <a id="nav-link--pages" class="nav-link text-uppercase g-color-primary--hover g-px-0 menu2"
  125.                        aria-haspopup="true"
  126.                        aria-expanded="false"
  127.                        aria-controls="nav-submenu--pages" href="https://www.thebrightlight.be/nl/about-us">about us
  128.                                                   </a>
  129.                                 </li>                         <li class="nav-item g-mx-10--lg g-mx-20--xl">                         
  130.                         
  131.                                       <a id="nav-link--pages" class="nav-link text-uppercase g-color-primary--hover g-px-0 menu2"
  132.                        aria-haspopup="true"
  133.                        aria-expanded="false"
  134.                        aria-controls="nav-submenu--pages" href="https://www.thebrightlight.be/nl/products">products
  135.                                                   </a>
  136.                                 </li>                         <li class="nav-item g-mx-10--lg g-mx-20--xl">                         
  137.                         
  138.                                       <a id="nav-link--pages" class="nav-link text-uppercase g-color-primary--hover g-px-0 menu2"
  139.                        aria-haspopup="true"
  140.                        aria-expanded="false"
  141.                        aria-controls="nav-submenu--pages" href="https://www.thebrightlight.be/nl/realisations">realisations
  142.                                                   </a>
  143.                                 </li>                         <li class="nav-item g-mx-10--lg g-mx-20--xl">                         
  144.                         
  145.                                       <a id="nav-link--pages" class="nav-link text-uppercase g-color-primary--hover g-px-0 menu2"
  146.                        aria-haspopup="true"
  147.                        aria-expanded="false"
  148.                        aria-controls="nav-submenu--pages" href="https://www.thebrightlight.be/nl/dealers">dealers
  149.                                                   </a>
  150.                                 </li>                         <li class="nav-item g-mx-10--lg g-mx-20--xl" style="margin-right:0px !important;">                         
  151.                         
  152.                                       <a id="nav-link--pages" class="nav-link text-uppercase g-color-primary--hover g-px-0 menu2"
  153.                        aria-haspopup="true"
  154.                        aria-expanded="false"
  155.                        aria-controls="nav-submenu--pages" href="https://www.thebrightlight.be/nl/maatwerk">maatwerk
  156.                                                   </a>
  157.                                 </li>                </ul>
  158.               </div>
  159.               <!-- End Navigation -->
  160.             </div>
  161.           </nav>
  163.           <!--start nav end-->
  165.       </div>
  166.     </header>
  167.     <!-- End Header -->
  170.       <!-- Revolution Slider --><!-- Revolution Slider --><div class="u-rev-slider-v1">
  171.   <div id="revSliderWrapper" class="rev_slider_wrapper fullwidthbanner-container" style="margin: 0 auto; background: #000000; padding: 0; margin-top: 0;margin-bottom: 0;"
  172.      data-alias="carousel-gallery"
  173.      data-source="gallery">
  174.     <!-- START REVOLUTION SLIDER 5.4.1 fullwidth mode -->
  175.     <div id="revSlider" class="rev_slider fullwidthabanner" style="display: none;"
  176.          data-version="5.4.1">
  177.       <ul>
  181.         <!-- SLIDE  -->
  182.         <li data-index="rs-41"
  183.             data-transition="fade"
  184.             data-slotamount="default"
  185.             data-hideafterloop="0"
  186.             data-hideslideonmobile="off"
  187.             data-easein="default"
  188.             data-easeout="default"
  189.             data-masterspeed="300"
  190.             data-thumb="/thebrightlight/bannr_thebrightlight.jpg"
  191.             data-rotate="0"
  192.             data-saveperformance="off"
  193.             data-param1=""
  194.             data-title="">
  195.           <!-- MAIN IMAGE -->
  196.           <img class="rev-slidebg" src="/thebrightlight/assets/img/bg/transparent.png" alt=""
  197.                data-lazyload="/thebrightlight/bannr_thebrightlight.jpg"
  198.                data-bgposition="center center"
  199.                data-kenburns="on"
  200.                data-duration="30000"
  201.                data-ease="Linear.easeNone"
  202.                data-scalestart="100"
  203.                data-scaleend="120"
  204.                data-rotatestart="0"
  205.                data-rotateend="0"
  206.                data-blurstart="0"
  207.                data-blurend="0"
  208.                data-offsetstart="0 0"
  209.                data-offsetend="0 0">
  212.           <!-- LAYER NR. 2 -->
  213.           <a id="slide-41-layer-1" class="tp-caption tp-resizeme" href="#" target="_self" style="z-index: 6; min-width: 600px; max-width: 600px; white-space: normal; font-size: 40px; line-height: 55px; font-weight: 500; color:rgba(255,255,255,1); font-family: Roboto Slab; text-decoration: none;"
  214.              data-x="['left','left','left','center']"
  215.              data-y="['top','top','top','top']"
  216.              data-hoffset="['150','150','90','0']"
  217.              data-voffset="['200','200','180','180']"
  218.              data-fontsize="['45','45','35','25']"
  219.              data-lineheight="['55','55','45','35']"
  220.              data-width="['600','550','350','260']"
  221.              data-height="none"
  222.              data-whitespace="normal"
  223.              data-type="text"
  224.              data-actions=""
  225.              data-basealign="slide"
  226.              data-responsive_offset="on"
  227.              data-frames='[
  228.                {"from":"y:20px;opacity:0;","speed":2000,"to":"o:1;","delay":200,"ease":"Power4.easeOut"},
  229.                {"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}
  230.              ]'
  231.              data-textAlign="['left','left','left','left']"
  232.              data-paddingtop="[0,0,0,0]"
  233.              data-paddingright="[0,0,0,0]"
  234.              data-paddingbottom="[0,0,0,0]"
  235.              data-paddingleft="[0,0,0,0]">
  236.           </a>
  239.           <!-- LAYER NR. 3 -->
  240.           <div id="slide-41-layer-3" class="tp-caption tp-resizeme" style="z-index: 7; min-width: 600px; max-width: 600px; white-space: normal; font-size: 30px; line-height: 30px; font-weight: 500; color:rgba(255,255,255,0.9); font-family: Roboto Slab;"
  241.                data-x="['left','left','left','center']"
  242.                data-y="['top','top','top','top']"
  243.                 data-hoffset="['150','150','90','0']"
  244.              data-voffset="['250','250','250','250']"
  245.              data-fontsize="['30','30','30','25']"
  246.              data-lineheight="['45','45','45','35']"
  247.              data-width="['600','550','350','260']"
  248.                data-height="none"
  249.                data-whitespace="normal"
  250.                data-type="text"
  251.                data-basealign="slide"
  252.                data-responsive_offset="on"
  253.                data-frames='[
  254.                  {"from":"y:20px;opacity:0;","speed":2000,"to":"o:1;","delay":400,"ease":"Power4.easeOut"},
  255.                  {"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}
  256.                ]'
  257.                data-textAlign="['left','left','left','left']"
  258.                data-paddingtop="[0,0,0,0]"
  259.                data-paddingright="[0,0,0,0]"
  260.                data-paddingbottom="[0,0,0,0]"
  261.                data-paddingleft="[0,0,0,0]">
  262.               <span class="g-color-white g-font-size-60"></span>
  263.           </div>        </li>
  267.         <!-- SLIDE  -->
  268.         <li data-index="rs-42"
  269.             data-transition="fade"
  270.             data-slotamount="default"
  271.             data-hideafterloop="0"
  272.             data-hideslideonmobile="off"
  273.             data-easein="default"
  274.             data-easeout="default"
  275.             data-masterspeed="300"
  276.             data-thumb="/thebrightlight/kubes.jpg"
  277.             data-rotate="0"
  278.             data-saveperformance="off"
  279.             data-param1=""
  280.             data-title="">
  281.           <!-- MAIN IMAGE -->
  282.           <img class="rev-slidebg" src="/thebrightlight/assets/img/bg/transparent.png" alt=""
  283.                data-lazyload="/thebrightlight/kubes.jpg"
  284.                data-bgposition="center center"
  285.                data-kenburns="on"
  286.                data-duration="30000"
  287.                data-ease="Linear.easeNone"
  288.                data-scalestart="100"
  289.                data-scaleend="120"
  290.                data-rotatestart="0"
  291.                data-rotateend="0"
  292.                data-blurstart="0"
  293.                data-blurend="0"
  294.                data-offsetstart="0 0"
  295.                data-offsetend="0 0">
  298.           <!-- LAYER NR. 2 -->
  299.           <a id="slide-42-layer-1" class="tp-caption tp-resizeme" href="#" target="_self" style="z-index: 6; min-width: 600px; max-width: 600px; white-space: normal; font-size: 40px; line-height: 55px; font-weight: 500; color:rgba(255,255,255,1); font-family: Roboto Slab; text-decoration: none;"
  300.              data-x="['left','left','left','center']"
  301.              data-y="['top','top','top','top']"
  302.              data-hoffset="['150','150','90','0']"
  303.              data-voffset="['200','200','180','180']"
  304.              data-fontsize="['45','45','35','25']"
  305.              data-lineheight="['55','55','45','35']"
  306.              data-width="['600','550','350','260']"
  307.              data-height="none"
  308.              data-whitespace="normal"
  309.              data-type="text"
  310.              data-actions=""
  311.              data-basealign="slide"
  312.              data-responsive_offset="on"
  313.              data-frames='[
  314.                {"from":"y:20px;opacity:0;","speed":2000,"to":"o:1;","delay":200,"ease":"Power4.easeOut"},
  315.                {"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}
  316.              ]'
  317.              data-textAlign="['left','left','left','left']"
  318.              data-paddingtop="[0,0,0,0]"
  319.              data-paddingright="[0,0,0,0]"
  320.              data-paddingbottom="[0,0,0,0]"
  321.              data-paddingleft="[0,0,0,0]">
  322.           </a>
  325.           <!-- LAYER NR. 3 -->
  326.           <div id="slide-42-layer-3" class="tp-caption tp-resizeme" style="z-index: 7; min-width: 600px; max-width: 600px; white-space: normal; font-size: 30px; line-height: 30px; font-weight: 500; color:rgba(255,255,255,0.9); font-family: Roboto Slab;"
  327.                data-x="['left','left','left','center']"
  328.                data-y="['top','top','top','top']"
  329.                 data-hoffset="['150','150','90','0']"
  330.              data-voffset="['250','250','250','250']"
  331.              data-fontsize="['30','30','30','25']"
  332.              data-lineheight="['45','45','45','35']"
  333.              data-width="['600','550','350','260']"
  334.                data-height="none"
  335.                data-whitespace="normal"
  336.                data-type="text"
  337.                data-basealign="slide"
  338.                data-responsive_offset="on"
  339.                data-frames='[
  340.                  {"from":"y:20px;opacity:0;","speed":2000,"to":"o:1;","delay":400,"ease":"Power4.easeOut"},
  341.                  {"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}
  342.                ]'
  343.                data-textAlign="['left','left','left','left']"
  344.                data-paddingtop="[0,0,0,0]"
  345.                data-paddingright="[0,0,0,0]"
  346.                data-paddingbottom="[0,0,0,0]"
  347.                data-paddingleft="[0,0,0,0]">
  348.               <span class="g-color-white g-font-size-60"></span>
  349.           </div>        </li>
  353.         <!-- SLIDE  -->
  354.         <li data-index="rs-43"
  355.             data-transition="fade"
  356.             data-slotamount="default"
  357.             data-hideafterloop="0"
  358.             data-hideslideonmobile="off"
  359.             data-easein="default"
  360.             data-easeout="default"
  361.             data-masterspeed="300"
  362.             data-thumb="/thebrightlight/thebrightblock.jpg"
  363.             data-rotate="0"
  364.             data-saveperformance="off"
  365.             data-param1=""
  366.             data-title="">
  367.           <!-- MAIN IMAGE -->
  368.           <img class="rev-slidebg" src="/thebrightlight/assets/img/bg/transparent.png" alt=""
  369.                data-lazyload="/thebrightlight/thebrightblock.jpg"
  370.                data-bgposition="center center"
  371.                data-kenburns="on"
  372.                data-duration="30000"
  373.                data-ease="Linear.easeNone"
  374.                data-scalestart="100"
  375.                data-scaleend="120"
  376.                data-rotatestart="0"
  377.                data-rotateend="0"
  378.                data-blurstart="0"
  379.                data-blurend="0"
  380.                data-offsetstart="0 0"
  381.                data-offsetend="0 0">
  384.           <!-- LAYER NR. 2 -->
  385.           <a id="slide-43-layer-1" class="tp-caption tp-resizeme" href="#" target="_self" style="z-index: 6; min-width: 600px; max-width: 600px; white-space: normal; font-size: 40px; line-height: 55px; font-weight: 500; color:rgba(255,255,255,1); font-family: Roboto Slab; text-decoration: none;"
  386.              data-x="['left','left','left','center']"
  387.              data-y="['top','top','top','top']"
  388.              data-hoffset="['150','150','90','0']"
  389.              data-voffset="['200','200','180','180']"
  390.              data-fontsize="['45','45','35','25']"
  391.              data-lineheight="['55','55','45','35']"
  392.              data-width="['600','550','350','260']"
  393.              data-height="none"
  394.              data-whitespace="normal"
  395.              data-type="text"
  396.              data-actions=""
  397.              data-basealign="slide"
  398.              data-responsive_offset="on"
  399.              data-frames='[
  400.                {"from":"y:20px;opacity:0;","speed":2000,"to":"o:1;","delay":200,"ease":"Power4.easeOut"},
  401.                {"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}
  402.              ]'
  403.              data-textAlign="['left','left','left','left']"
  404.              data-paddingtop="[0,0,0,0]"
  405.              data-paddingright="[0,0,0,0]"
  406.              data-paddingbottom="[0,0,0,0]"
  407.              data-paddingleft="[0,0,0,0]">
  408.           </a>
  411.           <!-- LAYER NR. 3 -->
  412.           <div id="slide-43-layer-3" class="tp-caption tp-resizeme" style="z-index: 7; min-width: 600px; max-width: 600px; white-space: normal; font-size: 30px; line-height: 30px; font-weight: 500; color:rgba(255,255,255,0.9); font-family: Roboto Slab;"
  413.                data-x="['left','left','left','center']"
  414.                data-y="['top','top','top','top']"
  415.                 data-hoffset="['150','150','90','0']"
  416.              data-voffset="['250','250','250','250']"
  417.              data-fontsize="['30','30','30','25']"
  418.              data-lineheight="['45','45','45','35']"
  419.              data-width="['600','550','350','260']"
  420.                data-height="none"
  421.                data-whitespace="normal"
  422.                data-type="text"
  423.                data-basealign="slide"
  424.                data-responsive_offset="on"
  425.                data-frames='[
  426.                  {"from":"y:20px;opacity:0;","speed":2000,"to":"o:1;","delay":400,"ease":"Power4.easeOut"},
  427.                  {"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}
  428.                ]'
  429.                data-textAlign="['left','left','left','left']"
  430.                data-paddingtop="[0,0,0,0]"
  431.                data-paddingright="[0,0,0,0]"
  432.                data-paddingbottom="[0,0,0,0]"
  433.                data-paddingleft="[0,0,0,0]">
  434.               <span class="g-color-white g-font-size-60"></span>
  435.           </div>        </li>
  437.       </ul> 
  439.       <div class="tp-bannertimer" style="height: 8px; background: rgba(255, 255, 255, 0.25);"></div>
  440.     </div>
  441.   </div>
  442. </div>
  444.  <!-- End Revolution Slider -->
  445.       <!-- End Revolution Slider -->                    <div class="container g-pb-70"><!-- section -->
  446.       <!-- ================ -->
  447.       
  448.       {% block body -%}
  449.       
  450.  
  451.  {% endblock %}
  452.     <!-- section end -->                    </div>
  453.   <!-- Footer -->
  454.       <footer class="g-bg-secondary">
  455.         <div class="g-py-50 g-mb-10">
  456.           <div class="container">
  457.           
  458.     
  459.             <!-- End Footer - Popular Stories Carousel -->
  460.           </div>
  461.         
  463.         <div class="container">
  464.           <!-- Footer - Content -->
  465.           <div class="g-brd-bottom--md g-brd-secondary-light-v2 g-pb-30--md g-mb-30">
  466.             <div class="row">
  467.               <div class="col-6 col-md-3 g-brd-right--md g-brd-secondary-light-v2 g-mb-30 g-mb-0--md">
  468.               
  469.   <b>Wil je ook LED verlichting ?</b><br><br>
  470.                   Neem dan contact op met de medewerkers van ons familiebedrijf in West-Vlaanderen en informeer je over de mogelijkheden van een ledstrip.
  471.                  <br><br>
  472.                   Je kunt steeds rekenen op onze medewerkers die je bijstaan met al hun expertise.
  473.                  
  474.                  
  477.                
  478.                 <!-- End News -->
  479.               </div>
  481.               <div class="col-6 col-md-3 g-brd-right--md g-brd-secondary-light-v2 g-mb-30 g-mb-0--md">
  482.                 <div class="g-pl-10--md">
  483.              
  484.               
  485.               
  486.               <b>The Bright Light</b><br>
  487. a brand by BVBA ASSABB+<br><br>
  490. Industrielaan 1 B<br>
  491. 8520 KUURNE<br>
  492. BELGIË<br><br>
  495. <a href="tel:+3256371456">+32 (0)56/371456</a><br>
  497. <a href="mailto:info@thebrightlight.be">info@thebrightlight.be</a>
  498.                 
  499.                 
  500.                  
  501.            
  502.                   <br><br>
  503.                   </p>
  504.                   <!-- End Opinion -->
  505.                 </div>
  506.               </div>
  509.  <div class="col-md-3 g-brd-right--md g-brd-secondary-light-v2">
  510.                 <div class="g-pl-10--md">
  511.                   <h3 class="h6 g-font-primary g-font-weight-700 text-uppercase mb-3">Nieuws</h3>
  513.          <article class="media">
  514.           <div class="media-body">
  515.             <h3 class="h6">
  516.               <a class="g-color-black-opacity-0_8 g-black-white--hover" href="https://www.thebrightlight.be/nl/post/1/Een+vernieuwde+site">Een vernieuwde site</a>
  517.             </h3>
  519.             <ul class="u-list-inline g-font-size-12">
  520.               <li class="list-inline-item">23/03/2021</li>
  521.              
  522.                
  523.               </li>
  524.             </ul>
  525.           </div>
  526.         </article>
  527.         
  529.         <hr class="g-brd-black-opacity-0_1 g-mt-20 g-mb-15">
  530.          
  531.     
  533.         <hr class="g-brd-black-opacity-0_1 g-mt-20 g-mb-15">
  534.         
  535.     
  536. </div>
  537. </div>
  538.               <div class="col-md-3">
  539.                 <div class="g-pl-10--md">
  540.                   <h3 class="h6 g-font-primary g-font-weight-700 text-uppercase mb-3">Onze catalogus</h3>
  542.                   <!-- Carousel -->
  543.                   <div class="js-carousel g-mx-minus-5"
  544.                        data-infinite="true"
  545.                        data-slides-show="1"
  546.                        data-lazy-load="ondemand"
  547.                        data-arrows-classes="u-arrow-v1 g-pos-abs g-top-minus-35 g-width-30 g-height-30 g-color-secondary-dark-v1 g-color-primary--hover"
  548.                        data-arrow-left-classes="fa fa-angle-left g-right-30"
  549.                        data-arrow-right-classes="fa fa-angle-right g-right-0"
  550.                        data-responsive='[{
  551.                          "breakpoint": 1200,
  552.                          "settings": {
  553.                            "slidesToShow": 2
  554.                          }
  555.                        }, {
  556.                          "breakpoint": 992,
  557.                          "settings": {
  558.                            "slidesToShow": 1
  559.                          }
  560.                        }, {
  561.                          "breakpoint": 768,
  562.                          "settings": {
  563.                            "slidesToShow": 2
  564.                          }
  565.                        }, {
  566.                          "breakpoint": 480,
  567.                          "settings": {
  568.                            "slidesToShow": 1
  569.                          }
  570.                        }]'>
  571.                     <div class="js-slide g-px-5">
  572.                       <!-- Magazines -->
  573.                      
  574.                       
  575.                        <figure class="u-block-hover g-pos-rel">
  576.                         <img class="img-fluid u-block-hover__main--zoom-v1 g-transition-0_5" src="https://www.thebrightlight.be/uploads/magazine/1/cover1.png" alt="Cover magazine 1">
  577.                         <figcaption class="g-color-white">
  578.                           
  579.                           <a class="u-link-v2" href="http://www.thebrightlight.be/magazine/view/1"></a>
  580.                         </figcaption>
  581.                       </figure>
  582.                       <!-- End Magazines -->
  583.                     </div>
  585.                 
  587.                  
  588.                   </div>
  589.                   <!-- End Carousel -->
  590.                 </div>
  591.               </div>
  593.          
  594.              
  595.             </div>
  596.           </div>
  597.           <!-- End Footer - Content -->
  599.           <!-- Footer - Top Section -->
  600.           <div class="g-brd-bottom g-brd-secondary-light-v2 g-mb-30">
  601.             <div class="row align-items-center">
  602.               <div class="col-md-3 g-hidden-sm-down g-mb-30">
  603.                 <!-- Logo -->
  604.                 <a href="https://www.thebrightlight.be">
  605.                   <img class="g-width-150" src="https://www.thebrightlight.be/thebrightlight/logo_thebrightlight_transparant.png" alt="Logo">
  606.                 </a>
  607.                 <!-- End Logo -->
  608.               </div>
  610.               <div class="col-md-4 ml-auto g-mb-30">
  611.                 <!-- Social Icons -->
  612.                 <ul class="list-inline mb-0">
  613.                     <li class="list-inline-item g-mx-2">
  614.                     <a class="u-icon-v2 u-icon-size--sm g-brd-secondary-light-v2 g-color-secondary-dark-v2 g-color-white--hover g-bg-primary--hover g-font-size-default rounded" href="https://www.facebook.com/thebrightlightbe/"
  615.                        data-toggle="tooltip"
  616.                        data-placement="top"
  617.                        title="Like Us on Facebook">
  618.                       <i class="fa fa-facebook"></i>
  619.                     </a>
  620.                   </li>
  623.                   <li class="list-inline-item g-mx-2">
  624.                     <a class="u-icon-v2 u-icon-size--sm g-brd-secondary-light-v2 g-color-secondary-dark-v2 g-color-white--hover g-bg-primary--hover g-font-size-default rounded" href="https://www.instagram.com/thebrightlightbe/"
  625.                        data-toggle="tooltip"
  626.                        data-placement="top"
  627.                        title="Follow Us on Instagram">
  628.                       <i class="fa fa-instagram"></i>
  629.                     </a>
  630.                   </li>
  631.                   <li class="list-inline-item g-mx-2">
  632.                     <a class="u-icon-v2 u-icon-size--sm g-brd-secondary-light-v2 g-color-secondary-dark-v2 g-color-white--hover g-bg-primary--hover g-font-size-default rounded" href="https://www.pinterest.com/thebrightlight1089/"
  633.                        data-toggle="tooltip"
  634.                        data-placement="top"
  635.                        title="Inspiration on pinterest">
  636.                       <i class="fa fa-pinterest"></i>
  637.                     </a>
  638.                   </li>
  639.                 </ul>
  640.                 <!-- End Social Icons -->
  641.               </div>
  643.               <div class="col-md-5 text-center text-md-right g-mb-30">
  644.                 <!-- Subscribe Form -->
  645.                 <form class="input-group rounded">
  646.                   <input class="form-control g-brd-secondary-light-v2 g-color-secondary-dark-v1 g-placeholder-secondary-dark-v1 g-bg-secondary-light-v3 g-font-weight-400 g-font-size-13 g-px-20 g-py-12" type="email" placeholder="Nieuwsbrief ? Geef hier uw email">
  647.                   <span class="input-group-append g-brd-none g-py-0 g-pr-0">
  648.                     <button class="btn u-btn-white g-color-primary--hover g-font-weight-600 g-font-size-13 text-uppercase g-py-12 g-px-20" type="submit">Inschrijven</button>
  649.                   </span>
  650.                 </form>
  651.                 <!-- End Subscribe Form -->
  652.               </div>
  653.             </div>
  654.           </div>
  655.           <!-- End Footer - Top Section -->
  657.           <!-- Footer - Bottom Section -->
  658.           <div class="row align-items-center">
  659.             <div class="col-md-5 g-mb-30">
  660.               <!-- Copyright -->
  661.               <p class="g-color-secondary-light-v1 g-font-size-12 mb-0">&copy; 2020 The Bright Light - BE.0820.448.368</p>
  662.               <!-- End Copyright -->
  663.             </div>
  665.             <div class="col-md-7 g-brd-right--md g-mb-30">
  666.               <!-- Links -->
  667.               <ul class="list-inline mb-0 float-right">
  668.                 <li class="list-inline-item g-pl-0 g-pr-10">
  669.                   <a class="u-link-v5 g-color-secondary-light-v1 g-font-size-12" href="https://www.vepasanitair.com/en/contact">Contact</a>
  670.                 </li>
  671.                 <li class="list-inline-item g-px-10">
  672.                   <a class="u-link-v5 g-color-secondary-light-v1 g-font-size-12" href="https://www.vepasanitair.com/en/jobs">Jobs</a>
  673.                 </li>
  674.       
  675.                 </li>
  676.                 <li class="list-inline-item g-px-10">
  677.                   <a class="u-link-v5 g-color-secondary-light-v1 g-font-size-12" href="https://www.vepasanitair.com/en/privacy">Privacy</a>
  678.                 </li>
  679.                 <li class="list-inline-item g-px-10">
  680.                   <a class="u-link-v5 g-color-secondary-light-v1 g-font-size-12" href="https://www.vepasanitair.com/en/terms">Terms of Use</a>
  681.                 </li>
  682.          
  683.               </ul>
  684.               <!-- End Links -->
  685.             </div>
  687.             
  688.           </div>
  689.           <!-- End Footer - Bottom Section -->
  690.         </div>
  691.       </footer>
  692.       <!-- End Footer -->
  693.       
  694.       
  695.       
  696.       
  697.       
  699.       <!-- Go To -->
  700.       <a class="js-go-to u-go-to-v2" href="#"
  701.          data-type="fixed"
  702.          data-position='{
  703.            "bottom": 15,
  704.            "right": 15
  705.          }'
  706.          data-offset-top="400"
  707.          data-compensation="#js-header"
  708.          data-show-effect="zoomIn">
  709.         <i class="hs-icon hs-icon-arrow-top"></i>
  710.       </a>
  711.       <!-- End Go To -->
  712.     </main>
  714.     <div class="u-outer-spaces-helper"></div>
  716.     <!-- JS Global Compulsory -->
  717.     <script src="/thebrightlight/assets/vendor/jquery/jquery.min.js"></script>
  718.     <script src="/thebrightlight/assets/vendor/jquery-migrate/jquery-migrate.min.js"></script>
  719.     <script src="/thebrightlight/assets/vendor/popper.js/index.js"></script>
  720.     <script src="/thebrightlight/assets/vendor/bootstrap/bootstrap.min.js"></script>
  722.     <!-- JS Implementing Plugins -->
  723.     <script src="/thebrightlight/assets/vendor/appear.js"></script>
  724.     <script src="/thebrightlight/assets/vendor/slick-carousel/slick/slick.js"></script>
  725.     <script src="/thebrightlight/assets/vendor/hs-megamenu/src/hs.megamenu.js"></script>
  726.     <script src="/thebrightlight/assets/vendor/fancybox/jquery.fancybox.min.js"></script>
  728.     <!-- JS Unify -->
  729.     <script src="/thebrightlight/assets/js/hs.core.js"></script>
  730.     <script src="/thebrightlight/assets/js/components/hs.header.js"></script>
  731.     <script src="/thebrightlight/assets/js/helpers/hs.hamburgers.js"></script>
  732.     <script src="/thebrightlight/assets/js/components/hs.dropdown.js"></script>
  733.     <script src="/thebrightlight/assets/js/components/hs.carousel.js"></script>
  734.     <script src="/thebrightlight/assets/js/components/hs.go-to.js"></script>
  735.     <script src="/thebrightlight/assets/js/components/hs.popup.js"></script>
  737.     <!-- JS Revolution Slider -->
  738.     <script src="/thebrightlight/assets/vendor/revolution-slider/revolution/js/jquery.themepunch.tools.min.js"></script>
  739.     <script src="/thebrightlight/assets/vendor/revolution-slider/revolution/js/jquery.themepunch.revolution.min.js"></script>
  741.     <script src="/thebrightlight/assets/vendor/revolution-slider/revolution/js/extensions/revolution.extension.actions.min.js"></script>
  742.     <script src="/thebrightlight/assets/vendor/revolution-slider/revolution/js/extensions/revolution.extension.carousel.min.js"></script>
  743.     <script src="/thebrightlight/assets/vendor/revolution-slider/revolution/js/extensions/revolution.extension.kenburn.min.js"></script>
  744.     <script src="/thebrightlight/assets/vendor/revolution-slider/revolution/js/extensions/revolution.extension.layeranimation.min.js"></script>
  745.     <script src="/thebrightlight/assets/vendor/revolution-slider/revolution/js/extensions/revolution.extension.migration.min.js"></script>
  746.     <script src="/thebrightlight/assets/vendor/revolution-slider/revolution/js/extensions/revolution.extension.navigation.min.js"></script>
  747.     <script src="/thebrightlight/assets/vendor/revolution-slider/revolution/js/extensions/revolution.extension.parallax.min.js"></script>
  748.     <script src="/thebrightlight/assets/vendor/revolution-slider/revolution/js/extensions/revolution.extension.slideanims.min.js"></script>
  749.     <script src="/thebrightlight/assets/vendor/revolution-slider/revolution/js/extensions/revolution.extension.video.min.js"></script>
  751.     <!-- JS Customization -->
  752.     <script src="/thebrightlight/assets/js/custom.js"></script>
  754.     <!-- JS Plugins Init. -->
  755.     <script>
  756.       $(document).on('ready', function () {
  757.         // initialization of header
  758.         $.HSCore.components.HSHeader.init($('#js-header'));
  759.         $.HSCore.helpers.HSHamburgers.init('.hamburger');
  761.         // initialization of MegaMenu
  762.         $('.js-mega-menu').HSMegaMenu();
  764.         // initialization of HSDropdown component
  765.         $.HSCore.components.HSDropdown.init($('[data-dropdown-target]'), {
  766.           afterOpen: function () {
  767.             $(this).find('input[type="search"]').focus();
  768.           }
  769.         });
  771.         // initialization of carousel
  772.         $.HSCore.components.HSCarousel.init('[class*="js-carousel"]');
  776.         $('#carouselCus1').slick('setOption', 'responsive', [{
  777.           breakpoint: 1200,
  778.           settings: {
  779.             slidesToShow: 2
  780.           }
  781.         }, {
  782.           breakpoint: 992,
  783.           settings: {
  784.             slidesToShow: 1
  785.           }
  786.         }, {
  787.           breakpoint: 768,
  788.           settings: {
  789.             slidesToShow: 2
  790.           }
  791.         }, {
  792.           breakpoint: 480,
  793.           settings: {
  794.             slidesToShow: 1
  795.           }
  796.         }], true);
  798.         $('#carouselCus2').slick('setOption', 'responsive', [{
  799.           breakpoint: 1200,
  800.           settings: {
  801.             slidesToShow: 4
  802.           }
  803.         }, {
  804.           breakpoint: 992,
  805.           settings: {
  806.             slidesToShow: 3
  807.           }
  808.         }, {
  809.           breakpoint: 768,
  810.           settings: {
  811.             slidesToShow: 2
  812.           }
  813.         }, {
  814.           breakpoint: 480,
  815.           settings: {
  816.             slidesToShow: 1
  817.           }
  818.         }], true);
  820.         // initialization of popups
  821.         $.HSCore.components.HSPopup.init('.js-fancybox');
  823.         // initialization of go to
  824.         $.HSCore.components.HSGoTo.init('.js-go-to');
  825.       });
  827.       // Revolution Slider
  828.       var tpj = jQuery,
  829.         revAPI;
  831.       tpj(document).ready(function () {
  832.         if (tpj('#revSlider').revolution == undefined) {
  833.           revslider_showDoubleJqueryError('#revSlider');
  834.         } else {
  835.           revAPI = tpj('#revSlider').show().revolution({
  836.             sliderType: 'carousel',
  837.             jsFileLocation: 'revolution/js/',
  838.             sliderLayout: 'fullscreen',
  839.             dottedOverlay: 'none',
  840.             delay: 9000,
  841.             navigation: {
  842.               keyboardNavigation: 'off',
  843.               keyboard_direction: 'horizontal',
  844.               mouseScrollNavigation: 'off',
  845.               mouseScrollReverse: 'default',
  846.               onHoverStop: 'on',
  847.               thumbnails: {
  848.                 style: 'gyges',
  849.                 enable: true,
  850.                 width: 50,
  851.                 height: 50,
  852.                 min_width: 50,
  853.                 wrapper_padding: 5,
  854.                 wrapper_color: 'transparent',
  855.                 tmp: '<span class="tp-thumb-img-wrap">' +
  856.                 '<span class="tp-thumb-image"></span>' +
  857.                 '</span>',
  858.                 visibleAmount: 5,
  859.                 hide_onmobile: false,
  860.                 hide_over: 992,
  861.                 hide_onleave: false,
  862.                 direction: 'horizontal',
  863.                 span: false,
  864.                 position: 'inner',
  865.                 space: 5,
  866.                 h_align: 'center',
  867.                 v_align: 'top',
  868.                 h_offset: 0,
  869.                 v_offset: 20
  870.               },
  871.               tabs: {
  872.                 style: 'gyges',
  873.                 enable: true,
  874.                 width: 270,
  875.                 height: 130,
  876.                 min_width: 270,
  877.                 wrapper_padding: 0,
  878.                 wrapper_color: 'transparent',
  879.                 tmp: '<div class="tp-tab-content">' +
  880.                 '<span class="tp-tab-date">date</span>' +
  881.                 '<span class="tp-tab-title">titel</span>' +
  882.                 '</div>' +
  883.                 '<div class="tp-tab-image"></div>',
  884.                 visibleAmount: 5,
  885.                 hide_onmobile: true,
  886.                 hide_under: 992,
  887.                 hide_onleave: false,
  888.                 hide_delay: 200,
  889.                 direction: 'vertical',
  890.                 span: true,
  891.                 position: 'inner',
  892.                 space: 0,
  893.                 h_align: 'right',
  894.                 v_align: 'center',
  895.                 h_offset: 0,
  896.                 v_offset: 0
  897.               }
  898.             },
  899.             carousel: {
  900.               horizontal_align: 'center',
  901.               vertical_align: 'center',
  902.               fadeout: 'off',
  903.               maxVisibleItems: 1,
  904.               infinity: 'on',
  905.               space: 0,
  906.               stretch: 'on',
  907.               showLayersAllTime: 'off',
  908.               easing: 'Power3.easeInOut',
  909.               speed: '800'
  910.             },
  911.             responsiveLevels: [1240, 1024, 778, 480],
  912.             visibilityLevels: [1240, 1024, 778, 480],
  913.             gridwidth: [800, 700, 400, 300],
  914.             gridheight: [600, 600, 500, 400],
  915.             lazyType: 'single',
  916.             shadow: 0,
  917.             spinner: 'off',
  918.             stopLoop: 'off',
  919.             stopAfterLoops: -1,
  920.             stopAtSlide: -1,
  921.             shuffle: 'off',
  922.             autoHeight: 'off',
  923.             hideThumbsOnMobile: 'off',
  924.             hideSliderAtLimit: 0,
  925.             hideCaptionAtLimit: 0,
  926.             hideAllCaptionAtLilmit: 0,
  927.             debugMode: false,
  928.             fallbacks: {
  929.               simplifyAll: 'off',
  930.               nextSlideOnWindowFocus: 'off',
  931.               disableFocusListener: false,
  932.             }
  933.           });
  934.         }
  935.       });
  936.     </script>
  938. <!-- Global site tag (gtag.js) - Google Analytics -->
  939. <script async src="https://www.googletagmanager.com/gtag/js?id=UA-16195216-3"></script>
  940. <script>
  941.   window.dataLayer = window.dataLayer || [];
  942.   function gtag(){dataLayer.push(arguments);}
  943.   gtag('js', new Date());
  945.   gtag('config', 'UA-16195216-3');
  946. </script>
  950.   </body>
  953. </html>