templates/landing.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="de">
  3. <head>
  5.     <!-- Basic -->
  6.     <meta charset="utf-8">
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.     <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
  9.     <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
  10.     <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
  11.     <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
  12.     <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
  13.     <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
  14.     <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
  15.     <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
  16.     <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
  17.     <link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
  18.     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  19.     <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
  20.     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  21.     
  22.     <meta name="msapplication-TileColor" content="#ffffff">
  23.     <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
  24.     <meta name="theme-color" content="#ffffff">
  25.     <title>Verwaltungs Portal</title>
  27.     <meta name="keywords" content="Energie, Berater, Hausverwaltung, Vermieter, Kundenverwaltung, Lieferstellenverwaltung" />
  28.     <meta name="description" content="Portal für Energie Berater und Hausverwaltungen">
  29.     <meta name="author" content="Axel Obermann">
  31.     <!-- Favicon -->
  32.     <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
  33.     <link rel="apple-touch-icon" href="img/apple-touch-icon.png">
  35.     <!-- Mobile Metas -->
  36.     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no">
  38.     <!-- Web Fonts  -->
  39.     <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800%7CShadows+Into+Light%7CPlayfair+Display:400" rel="stylesheet" type="text/css">
  41.     <!-- Vendor CSS -->
  42.     <link rel="stylesheet" href="/landing/vendor/bootstrap/css/bootstrap.min.css">
  43.     <link rel="stylesheet" href="/landing/vendor/fontawesome-free/css/all.min.css">
  44.     <link rel="stylesheet" href="/landing/vendor/animate/animate.min.css">
  45.     <link rel="stylesheet" href="/landing/vendor/simple-line-icons/css/simple-line-icons.min.css">
  46.     <link rel="stylesheet" href="/landing/vendor/owl.carousel/assets/owl.carousel.min.css">
  47.     <link rel="stylesheet" href="/landing/vendor/owl.carousel/assets/owl.theme.default.min.css">
  48.     <link rel="stylesheet" href="/landing/vendor/magnific-popup/magnific-popup.min.css">
  52.     <!-- Theme CSS -->
  53.     <link rel="stylesheet" href="/landing/css/theme.css">
  54.     <link rel="stylesheet" href="/landing/css/theme-elements.css">
  55.     <link rel="stylesheet" href="/landing/css/theme-blog.css">
  56.     <link rel="stylesheet" href="/landing/css/theme-shop.css">
  58.     <!-- Current Page CSS -->
  59.     <link rel="stylesheet" href="/landing/vendor/rs-plugin/css/settings.css">
  60.     <link rel="stylesheet" href="/landing/vendor/rs-plugin/css/layers.css">
  61.     <link rel="stylesheet" href="/landing/vendor/rs-plugin/css/navigation.css">
  63.     <!-- Demo CSS -->
  66.     <!-- Skin CSS -->
  67.     <link rel="stylesheet" href="/landing/css/skins/default.css">
  69.     <!-- Theme Custom CSS -->
  70.     <link rel="stylesheet" href="/landing/css/custom.css">
  72.     <!-- Head Libs -->
  73.     <script src="/landing/vendor/modernizr/modernizr.min.js"></script>
  75. </head>
  76. <body class="one-page" data-target="#header" data-spy="scroll" data-offset="100">
  78. <div class="body">
  80.     <header id="header" class="header-transparent header-effect-shrink" data-plugin-options="{'stickyEnabled': true, 'stickyEffect': 'shrink', 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': true, 'stickyChangeLogo': true, 'stickyStartAt': 30, 'stickyHeaderContainerHeight': 70}">
  81.         <div class="header-body border-top-0 bg-dark box-shadow-none">
  82.             <div class="header-container container">
  83.                 <div class="header-row">
  84.                     <div class="header-column">
  85.                         <div class="header-row">
  86.                             <div class="header-logo">
  87.                                 <a href="index.html">
  88.                                     <img alt="Porto" width="82" height="40" src="/landing/img/EBPLogoWhite.png">
  89.                                 </a>
  90.                             </div>
  91.                         </div>
  92.                     </div>
  93.                     <div class="header-column justify-content-end">
  94.                         <div class="header-row">
  95.                             <div class="header-nav header-nav-links header-nav-dropdowns-dark header-nav-light-text order-2 order-lg-1">
  96.                                 <div class="header-nav-main header-nav-main-mobile-dark header-nav-main-square header-nav-main-dropdown-no-borders header-nav-main-effect-2 header-nav-main-sub-effect-1">
  97.                                     <nav class="collapse">
  98.                                         <ul class="nav nav-pills" id="mainNav">
  99.                                             <li class="dropdown">
  100.                                                 <a data-hash class="dropdown-item dropdown-toggle active" href="/login">
  101.                                                     Login
  102.                                                 </a>
  103.                                             </li>
  104.                                             <li>
  105.                                                 <a class="dropdown-item" data-hash data-hash-offset="68" href="#services">Anmelden</a>
  106.                                             </li>
  107.                                             <!--<li>
  108.                                                 <a class="dropdown-item" data-hash data-hash-offset="68" href="#projects">Projects</a>
  109.                                             </li>
  110.                                             <li>
  111.                                                 <a class="dropdown-item" data-hash data-hash-offset="68" href="#clients">Clients</a>
  112.                                             </li>
  113.                                             <li>
  114.                                                 <a class="dropdown-item" data-hash data-hash-offset="68" href="#team">Meet the Team</a>
  115.                                             </li>
  116.                                             <li>
  117.                                                 <a class="dropdown-item" data-hash data-hash-offset="68" href="#contact">Contact Us</a>
  118.                                             </li>-->
  119.                                         </ul>
  120.                                     </nav>
  121.                                 </div>
  122.                                 <button class="btn header-btn-collapse-nav" data-toggle="collapse" data-target=".header-nav-main nav">
  123.                                     <i class="fas fa-bars"></i>
  124.                                 </button>
  125.                             </div>
  126.                         </div>
  127.                     </div>
  128.                 </div>
  129.             </div>
  130.         </div>
  131.     </header>
  133.     <div role="main" class="main" id="home">
  134.         <div class="slider-container rev_slider_wrapper" style="height: 100vh;">
  135.             <div id="revolutionSlider" class="slider rev_slider" data-version="5.4.8" data-plugin-revolution-slider data-plugin-options="{'sliderLayout': 'fullscreen', 'delay': 9000, 'gridwidth': 1140, 'gridheight': 800, 'responsiveLevels': [4096,1200,992,500]}">
  136.                 <ul>
  137.                     <li class="slide-overlay" data-transition="fade">
  138.                         <img src="/landing/img/slides/business-woman-white-shirt-at-table-in-front-of-laptop-finance-office.jpg"
  139.                              alt=""
  140.                              data-bgposition="center center"
  141.                              data-bgfit="cover"
  142.                              data-bgrepeat="no-repeat"
  143.                              class="rev-slidebg">
  145.                         <div class="tp-caption tp-resizeme"
  146.                              data-frames='[{"delay":1500,"speed":2000,"frame":"0","from":"opacity:0;x:-100%;y:-100%;","to":"o:1;x:0;y:0;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;fb:0;","ease":"Power3.easeInOut"}]'
  147.                              data-type="image"
  148.                              data-x="left" data-hoffset="['90','-150','-200','-200']"
  149.                              data-y="top" data-voffset="['240','-150','-200','-200']"
  150.                              data-width="['auto']"
  151.                              data-height="['auto']"
  152.                              data-basealign="slide"><img src="/landing/img/slides/Slide1.png" alt=""></div>
  154.                         <div class="tp-caption tp-resizeme"
  155.                              data-frames='[{"delay":1500,"speed":2000,"frame":"0","from":"opacity:0;x:100%;y:-100%;","to":"o:1;x:0;y:0;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;fb:0;","ease":"Power3.easeInOut"}]'
  156.                              data-type="image"
  157.                              data-x="right" data-hoffset="['0','-150','-200','-200']"
  158.                              data-y="top" data-voffset="['-100','-150','-200','-200']"
  159.                              data-width="['auto']"
  160.                              data-height="['auto']"
  161.                              data-basealign="slide"><img src="img/slides/slide-one-page-1-3.jpg" alt=""></div>
  163.                         <div class="tp-caption tp-resizeme"
  164.                              data-frames='[{"delay":1500,"speed":2000,"frame":"0","from":"opacity:0;x:-100%;y:100%;","to":"o:1;x:0;y:0;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;fb:0;","ease":"Power3.easeInOut"}]'
  165.                              data-type="image"
  166.                              data-x="left" data-hoffset="['0','-150','-200','-200']"
  167.                              data-y="bottom" data-voffset="['-100','-150','-200','-200']"
  168.                              data-width="['auto']"
  169.                              data-height="['auto']"
  170.                              data-basealign="slide"><img src="img/slides/Slide1.png" alt=""></div>
  172.                         <div class="tp-caption tp-resizeme"
  173.                              data-frames='[{"delay":1500,"speed":2000,"frame":"0","from":"opacity:0;x:100%;y:100%;","to":"o:1;x:0;y:0;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;fb:0;","ease":"Power3.easeInOut"}]'
  174.                              data-type="image"
  175.                              data-x="right" data-hoffset="['0','-150','-200','-200']"
  176.                              data-y="bottom" data-voffset="['-100','-150','-200','-200']"
  177.                              data-width="['auto']"
  178.                              data-height="['auto']"
  179.                              data-basealign="slide"><img src="img/slides/Slide1.png" alt=""></div>
  181.                         <div class="tp-caption"
  182.                              data-x="center" data-hoffset="['-170','-170','-170','-365']"
  183.                              data-y="center" data-voffset="['-80','-80','-80','-105']"
  184.                              data-start="1000"
  185.                              data-transform_in="x:[-300%];opacity:0;s:500;"
  186.                              data-transform_idle="opacity:0.2;s:500;"><img src="img/slides/slide-title-border.png" alt=""></div>
  188.                         <div class="tp-caption text-color-light font-weight-normal"
  189.                              data-x="center"
  190.                              data-y="center" data-voffset="['-80','-80','-80','-105']"
  191.                              data-start="700"
  192.                              data-fontsize="['16','16','16','40']"
  193.                              data-lineheight="['25','25','25','45']"
  194.                              data-transform_in="y:[-50%];opacity:0;s:500;">Wir arbeiten ständig an</div>
  196.                         <div class="tp-caption"
  197.                              data-x="center" data-hoffset="['170','170','170','365']"
  198.                              data-y="center" data-voffset="['-80','-80','-80','-105']"
  199.                              data-start="1000"
  200.                              data-transform_in="x:[300%];opacity:0;s:500;"
  201.                              data-transform_idle="opacity:0.2;s:500;"><img src="img/slides/slide-title-border.png" alt=""></div>
  203.                         <h1 class="tp-caption font-weight-extra-bold text-color-light negative-ls-1"
  204.                             data-frames='[{"delay":1000,"speed":2000,"frame":"0","from":"sX:1.5;opacity:0;fb:20px;","to":"o:1;fb:0;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;fb:0;","ease":"Power3.easeInOut"}]'
  205.                             data-x="center"
  206.                             data-y="center" data-voffset="['-30','-30','-30','-30']"
  207.                             data-fontsize="['50','50','50','90']"
  208.                             data-lineheight="['55','55','55','95']">Neuen Funktionen</h1>
  210.                         <div class="tp-caption"
  211.                              data-frames='[{"delay":2000,"speed":500,"frame":"0","from":"opacity:0;x:10%;","to":"opacity:1;x:0;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;fb:0;","ease":"Power3.easeInOut"}]'
  212.                              data-x="center" data-hoffset="['-40','-40','-40','-40']"
  213.                              data-y="center" data-voffset="['2','2','2','15']"><img src="img/slides/slide-blue-line-big.png" alt=""></div>
  215.                         <div class="tp-caption font-weight-light ws-normal text-center"
  216.                              data-frames='[{"from":"opacity:0;","speed":300,"to":"o:1;","delay":2000,"split":"chars","splitdelay":0.03,"ease":"Power2.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"}]'
  217.                              data-x="center"
  218.                              data-y="center" data-voffset="['53','53','53','105']"
  219.                              data-width="['530','530','530','1100']"
  220.                              data-fontsize="['18','18','18','40']"
  221.                              data-lineheight="['26','26','26','45']"
  222.                              style="color: #b5b5b5;">Die die <strong class="text-color-light">Verwaltung</strong> Deiner Daten und Verträge noch einfacher machen</div>
  224.                         <a class="tp-caption btn btn-primary btn-rounded font-weight-semibold"
  225.                            data-frames='[{"delay":2500,"speed":2000,"frame":"0","from":"opacity:0;y:50%;","to":"o:1;y:0;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;fb:0;","ease":"Power3.easeInOut"}]'
  226.                            data-hash
  227.                            data-hash-offset="85"
  228.                            href="#contact"
  229.                            data-x="center" data-hoffset="0"
  230.                            data-y="center" data-voffset="['133','133','133','255']"
  231.                            data-whitespace="nowrap"
  232.                            data-fontsize="['14','14','14','33']"
  233.                            data-paddingtop="['15','15','15','40']"
  234.                            data-paddingright="['45','45','45','110']"
  235.                            data-paddingbottom="['15','15','15','40']"
  236.                            data-paddingleft="['45','45','45','110']">Verbessere jetzt mit!</a>
  238.                     </li>
  239.                    <!-- <li class="slide-overlay" data-transition="fade">
  240.                         <img src="img/slides/slide-bg-2.jpg"
  241.                              alt=""
  242.                              data-bgposition="center center"
  243.                              data-bgfit="cover"
  244.                              data-bgrepeat="no-repeat"
  245.                              class="rev-slidebg">
  247.                         <div class="tp-caption"
  248.                              data-x="center" data-hoffset="['-170','-170','-170','-350']"
  249.                              data-y="center" data-voffset="['-50','-50','-50','-75']"
  250.                              data-start="1000"
  251.                              data-transform_in="x:[-300%];opacity:0;s:500;"
  252.                              data-transform_idle="opacity:0.2;s:500;"><img src="img/slides/slide-title-border.png" alt=""></div>
  254.                         <div class="tp-caption text-color-light font-weight-normal"
  255.                              data-x="center"
  256.                              data-y="center" data-voffset="['-50','-50','-50','-75']"
  257.                              data-start="700"
  258.                              data-fontsize="['16','16','16','40']"
  259.                              data-lineheight="['25','25','25','45']"
  260.                              data-transform_in="y:[-50%];opacity:0;s:500;">WE WORK HARD AND PORTO HAS</div>
  262.                         <div class="tp-caption"
  263.                              data-x="center" data-hoffset="['170','170','170','350']"
  264.                              data-y="center" data-voffset="['-50','-50','-50','-75']"
  265.                              data-start="1000"
  266.                              data-transform_in="x:[300%];opacity:0;s:500;"
  267.                              data-transform_idle="opacity:0.2;s:500;"><img src="img/slides/slide-title-border.png" alt=""></div>
  269.                         <div class="tp-caption font-weight-extra-bold text-color-light negative-ls-1"
  270.                              data-frames='[{"delay":1000,"speed":2000,"frame":"0","from":"sX:1.5;opacity:0;fb:20px;","to":"o:1;fb:0;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;fb:0;","ease":"Power3.easeInOut"}]'
  271.                              data-x="center"
  272.                              data-y="center"
  273.                              data-fontsize="['50','50','50','90']"
  274.                              data-lineheight="['55','55','55','95']">THE BEST DESIGN</div>
  276.                         <div class="tp-caption font-weight-light ws-normal text-center"
  277.                              data-frames='[{"from":"opacity:0;","speed":300,"to":"o:1;","delay":2000,"split":"chars","splitdelay":0.05,"ease":"Power2.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"}]'
  278.                              data-x="center"
  279.                              data-y="center" data-voffset="['60','60','60','105']"
  280.                              data-width="['530','530','530','1100']"
  281.                              data-fontsize="['18','18','18','40']"
  282.                              data-lineheight="['26','26','26','45']"
  283.                              style="color: #b5b5b5;">Trusted by over <strong class="text-color-light">30,000</strong> satisfied users, Porto is a huge success in the one of largest world's MarketPlace.</div>
  285.                     </li>
  286.                     <li class="slide-overlay slide-overlay-dark" data-transition="fade">
  287.                         <img src="img/slides/slide-bg-6.jpg"
  288.                              alt=""
  289.                              data-bgposition="center center"
  290.                              data-bgfit="cover"
  291.                              data-bgrepeat="no-repeat"
  292.                              class="rev-slidebg">
  294.                         <div class="tp-caption"
  295.                              data-x="center" data-hoffset="['-145','-145','-145','-320']"
  296.                              data-y="center" data-voffset="['-80','-80','-80','-130']"
  297.                              data-start="1000"
  298.                              data-transform_in="x:[-300%];opacity:0;s:500;"
  299.                              data-transform_idle="opacity:0.2;s:500;"><img src="img/slides/slide-title-border.png" alt=""></div>
  301.                         <div class="tp-caption text-color-light font-weight-normal"
  302.                              data-x="center"
  303.                              data-y="center" data-voffset="['-80','-80','-80','-130']"
  304.                              data-start="700"
  305.                              data-fontsize="['16','16','16','40']"
  306.                              data-lineheight="['25','25','25','45']"
  307.                              data-transform_in="y:[-50%];opacity:0;s:500;">WE CREATE DESIGNS, WE ARE</div>
  309.                         <div class="tp-caption"
  310.                              data-x="center" data-hoffset="['145','145','145','320']"
  311.                              data-y="center" data-voffset="['-80','-80','-80','-130']"
  312.                              data-start="1000"
  313.                              data-transform_in="x:[300%];opacity:0;s:500;"
  314.                              data-transform_idle="opacity:0.2;s:500;"><img src="img/slides/slide-title-border.png" alt=""></div>
  316.                         <div class="tp-caption font-weight-extra-bold text-color-light"
  317.                              data-frames='[{"delay":1300,"speed":1000,"frame":"0","from":"opacity:0;x:-50%;","to":"opacity:0.7;x:0;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;fb:0;","ease":"Power3.easeInOut"}]'
  318.                              data-x="center" data-hoffset="['-155','-155','-155','-255']"
  319.                              data-y="center"
  320.                              data-fontsize="['145','145','145','250']"
  321.                              data-lineheight="['150','150','150','260']">P</div>
  323.                         <div class="tp-caption font-weight-extra-bold text-color-light"
  324.                              data-frames='[{"delay":1500,"speed":1000,"frame":"0","from":"opacity:0;x:-50%;","to":"opacity:0.7;x:0;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;fb:0;","ease":"Power3.easeInOut"}]'
  325.                              data-x="center" data-hoffset="['-80','-80','-80','-130']"
  326.                              data-y="center"
  327.                              data-fontsize="['145','145','145','250']"
  328.                              data-lineheight="['150','150','150','260']">O</div>
  330.                         <div class="tp-caption font-weight-extra-bold text-color-light"
  331.                              data-frames='[{"delay":1700,"speed":1000,"frame":"0","from":"opacity:0;x:-50%;","to":"opacity:0.7;x:0;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;fb:0;","ease":"Power3.easeInOut"}]'
  332.                              data-x="center"
  333.                              data-y="center"
  334.                              data-fontsize="['145','145','145','250']"
  335.                              data-lineheight="['150','150','150','260']">R</div>
  337.                         <div class="tp-caption font-weight-extra-bold text-color-light"
  338.                              data-frames='[{"delay":1900,"speed":1000,"frame":"0","from":"opacity:0;x:-50%;","to":"opacity:0.7;x:0;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;fb:0;","ease":"Power3.easeInOut"}]'
  339.                              data-x="center" data-hoffset="['65','65','65','115']"
  340.                              data-y="center"
  341.                              data-fontsize="['145','145','145','250']"
  342.                              data-lineheight="['150','150','150','260']">T</div>
  344.                         <div class="tp-caption font-weight-extra-bold text-color-light"
  345.                              data-frames='[{"delay":2100,"speed":1000,"frame":"0","from":"opacity:0;x:-50%;","to":"opacity:0.7;x:0;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;fb:0;","ease":"Power3.easeInOut"}]'
  346.                              data-x="center" data-hoffset="['139','139','139','240']"
  347.                              data-y="center"
  348.                              data-fontsize="['145','145','145','250']"
  349.                              data-lineheight="['150','150','150','260']">O</div>
  351.                         <div class="tp-caption font-weight-light text-color-light"
  352.                              data-frames='[{"from":"opacity:0;","speed":300,"to":"o:1;","delay":2300,"split":"chars","splitdelay":0.05,"ease":"Power2.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"}]'
  353.                              data-x="center"
  354.                              data-y="center" data-voffset="['85','85','85','140']"
  355.                              data-fontsize="['18','18','18','40']"
  356.                              data-lineheight="['26','26','26','45']">The best choice for your new website</div>
  358.                     </li>
  359.                     <li class="slide-overlay" data-transition="fade">
  360.                         <img src="img/blank.gif"
  361.                              alt=""
  362.                              data-bgposition="center center"
  363.                              data-bgfit="cover"
  364.                              data-bgrepeat="no-repeat"
  365.                              class="rev-slidebg">
  367.                         <div class="rs-background-video-layer"
  368.                              data-forcerewind="on"
  369.                              data-volume="mute"
  370.                              data-videowidth="100%"
  371.                              data-videoheight="100%"
  372.                              data-videomp4="video/memory-of-a-woman.mp4"
  373.                              data-videopreload="preload"
  374.                              data-videoloop="loop"
  375.                              data-forceCover="1"
  376.                              data-aspectratio="16:9"
  377.                              data-autoplay="true"
  378.                              data-autoplayonlyfirsttime="false"
  379.                              data-nextslideatend="false">
  380.                         </div>
  382.                         <div class="tp-caption"
  383.                              data-x="center" data-hoffset="['-170','-170','-170','-350']"
  384.                              data-y="center" data-voffset="['-50','-50','-50','-75']"
  385.                              data-start="1000"
  386.                              data-transform_in="x:[-300%];opacity:0;s:500;"
  387.                              data-transform_idle="opacity:0.2;s:500;" style="z-index: 5;"><img src="img/slides/slide-title-border.png" alt=""></div>
  389.                         <div class="tp-caption text-color-light font-weight-normal"
  390.                              data-x="center"
  391.                              data-y="center" data-voffset="['-50','-50','-50','-75']"
  392.                              data-start="700"
  393.                              data-fontsize="['16','16','16','40']"
  394.                              data-lineheight="['25','25','25','45']"
  395.                              data-transform_in="y:[-50%];opacity:0;s:500;" style="z-index: 5;">WE WORK HARD AND PORTO HAS</div>
  397.                         <div class="tp-caption"
  398.                              data-x="center" data-hoffset="['170','170','170','350']"
  399.                              data-y="center" data-voffset="['-50','-50','-50','-75']"
  400.                              data-start="1000"
  401.                              data-transform_in="x:[300%];opacity:0;s:500;"
  402.                              data-transform_idle="opacity:0.2;s:500;" style="z-index: 5;"><img src="img/slides/slide-title-border.png" alt=""></div>
  404.                         <div class="tp-caption font-weight-extra-bold text-color-light negative-ls-1"
  405.                              data-frames='[{"delay":1000,"speed":2000,"frame":"0","from":"sX:1.5;opacity:0;fb:20px;","to":"o:1;fb:0;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;fb:0;","ease":"Power3.easeInOut"}]'
  406.                              data-x="center"
  407.                              data-y="center"
  408.                              data-fontsize="['50','50','50','90']"
  409.                              data-lineheight="['55','55','55','95']" style="z-index: 5;">PERFECT VIDEOS</div>
  411.                         <div class="tp-caption font-weight-light ws-normal text-center"
  412.                              data-frames='[{"from":"opacity:0;","speed":300,"to":"o:1;","delay":2000,"split":"chars","splitdelay":0.05,"ease":"Power2.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"}]'
  413.                              data-x="center"
  414.                              data-y="center" data-voffset="['60','60','60','105']"
  415.                              data-width="['530','530','530','1100']"
  416.                              data-fontsize="['18','18','18','40']"
  417.                              data-lineheight="['26','26','26','45']"
  418.                              style="color: #b5b5b5; z-index: 5;">Trusted by over <strong class="text-color-light">30,000</strong> satisfied users, Porto is a huge success in the one of largest world's MarketPlace.</div>
  420.                         <div class="tp-dottedoverlay tp-opacity-overlay"></div>
  421.                     </li>-->
  422.                 </ul>
  423.             </div>
  424.         </div>
  425.         <section id="services" class="section section-height-3 bg-primary border-0 m-0 appear-animation" data-appear-animation="fadeIn">
  426.             <div class="container my-3">
  427.                 <div class="row mb-5">
  428.                     <div class="col text-center appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">
  429.                         <h2 class="font-weight-bold text-color-light mb-2">Module</h2>
  430.                         <p class="text-color-light opacity-7">Verschiedene Module individuell für Deine Bedürfnisse</p>
  431.                     </div>
  432.                 </div>
  433.                 <div class="row mb-lg-4">
  434.                     <div class="col-lg-4 appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="300">
  435.                         <div class="feature-box feature-box-style-2">
  436.                             <div class="feature-box-icon">
  437.                                 <i class="icons icon-support text-color-light"></i>
  438.                             </div>
  439.                             <div class="feature-box-info">
  440.                                 <h4 class="font-weight-bold text-color-light text-4 mb-2">Benutzerverwaltung</h4>
  441.                                 <p class="text-color-light opacity-7">Lorem ipsum dolor sit amet, consectetur adipiscing <span class="alternative-font text-color-light">metus.</span> elit. Quisque rutrum pellentesque imperdiet.</p>
  442.                             </div>
  443.                         </div>
  444.                     </div>
  445.                     <div class="col-lg-4 appear-animation" data-appear-animation="fadeInUpShorter">
  446.                         <div class="feature-box feature-box-style-2">
  447.                             <div class="feature-box-icon">
  448.                                 <i class="icons icon-layers text-color-light"></i>
  449.                             </div>
  450.                             <div class="feature-box-info">
  451.                                 <h4 class="font-weight-bold text-color-light text-4 mb-2">Kundenverwaltung</h4>
  452.                                 <p class="text-color-light opacity-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia iaculis nulla.</p>
  453.                             </div>
  454.                         </div>
  455.                     </div>
  456.                     <div class="col-lg-4 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="300">
  457.                         <div class="feature-box feature-box-style-2">
  458.                             <div class="feature-box-icon">
  459.                                 <i class="icons icon-menu text-color-light"></i>
  460.                             </div>
  461.                             <div class="feature-box-info">
  462.                                 <h4 class="font-weight-bold text-color-light text-4 mb-2">Vertragsverwaltung</h4>
  463.                                 <p class="text-color-light opacity-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia iaculis nulla.</p>
  464.                             </div>
  465.                         </div>
  466.                     </div>
  467.                 </div>
  468.                 <div class="row">
  469.                     <div class="col-lg-4 appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="300">
  470.                         <div class="feature-box feature-box-style-2">
  471.                             <div class="feature-box-icon">
  472.                                 <i class="icons icon-doc text-color-light"></i>
  473.                             </div>
  474.                             <div class="feature-box-info">
  475.                                 <h4 class="font-weight-bold text-color-light text-4 mb-2">Immobilienverwaltung</h4>
  476.                                 <p class="text-color-light opacity-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia iaculis nulla.</p>
  477.                             </div>
  478.                         </div>
  479.                     </div>
  480.                     <div class="col-lg-4 appear-animation" data-appear-animation="fadeInUpShorter">
  481.                         <div class="feature-box feature-box-style-2">
  482.                             <div class="feature-box-icon">
  483.                                 <i class="icons icon-user text-color-light"></i>
  484.                             </div>
  485.                             <div class="feature-box-info">
  486.                                 <h4 class="font-weight-bold text-color-light text-4 mb-2">Lieferstellenverwaltung</h4>
  487.                                 <p class="text-color-light opacity-7">Lorem ipsum dolor sit amet, consectetur adipiscing <span class="alternative-font text-color-light">metus.</span> elit. Quisque rutrum pellentesque imperdiet.</p>
  488.                             </div>
  489.                         </div>
  490.                     </div>
  491.                     <div class="col-lg-4 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="300">
  492.                         <div class="feature-box feature-box-style-2">
  493.                             <div class="feature-box-icon">
  494.                                 <i class="icons icon-screen-desktop text-color-light"></i>
  495.                             </div>
  496.                             <div class="feature-box-info">
  497.                                 <h4 class="font-weight-bold text-color-light text-4 mb-2">Projektverwaltung</h4>
  498.                                 <p class="text-color-light opacity-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia iaculis nulla.</p>
  499.                             </div>
  500.                         </div>
  501.                     </div>
  502.                 </div>
  503.             </div>
  504.         </section>
  506.         <div id="projects" class="container">
  507.             <div class="row justify-content-center pt-5 mt-5">
  508.                 <div class="col-lg-9 text-center">
  509.                     <div class="appear-animation" data-appear-animation="fadeInUpShorter">
  510.                         <h2 class="font-weight-bold mb-2">Projects</h2>
  511.                         <p class="mb-4">LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT</p>
  512.                     </div>
  513.                     <p class="pb-3 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce elementum, nulla vel pellentesque consequat, ante nulla hendrerit arcu, ac tincidunt mauris lacus sed leo. vamus suscipit molestie vestibulum.</p>
  514.                 </div>
  515.             </div>
  516.             <div class="row pb-5 mb-5">
  517.                 <div class="col">
  519.                     <div class="appear-animation popup-gallery-ajax" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">
  520.                         <div class="owl-carousel owl-theme mb-0" data-plugin-options="{'items': 4, 'margin': 35, 'loop': false}">
  523.                             <div class="portfolio-item">
  524.                                 <a href="ajax/portfolio-ajax-project.html" data-ajax-on-modal>
  525.                                             <span class="thumb-info thumb-info-lighten">
  526.                                                 <span class="thumb-info-wrapper">
  527.                                                     <img src="img/projects/project.jpg" class="img-fluid border-radius-0" alt="">
  528.                                                     <span class="thumb-info-title">
  529.                                                         <span class="thumb-info-inner">Presentation</span>
  530.                                                         <span class="thumb-info-type">Brand</span>
  531.                                                     </span>
  532.                                                     <span class="thumb-info-action">
  533.                                                         <span class="thumb-info-action-icon bg-dark opacity-8"><i class="fas fa-plus"></i></span>
  534.                                                     </span>
  535.                                                 </span>
  536.                                             </span>
  537.                                 </a>
  538.                             </div>
  540.                             <div class="portfolio-item">
  541.                                 <a href="ajax/portfolio-ajax-project-1.html" data-ajax-on-modal>
  542.                                             <span class="thumb-info thumb-info-lighten">
  543.                                                 <span class="thumb-info-wrapper">
  544.                                                     <span class="owl-carousel owl-theme dots-inside m-0" data-plugin-options="{'items': 1, 'margin': 20, 'animateOut': 'fadeOut', 'autoplay': true, 'autoplayTimeout': 3000}"><span><img src="img/projects/project-1.jpg" class="img-fluid border-radius-0" alt=""></span><span><img src="img/projects/project-1-2.jpg" class="img-fluid border-radius-0" alt=""></span></span>
  545.                                                     <span class="thumb-info-title">
  546.                                                         <span class="thumb-info-inner">Porto Watch</span>
  547.                                                         <span class="thumb-info-type">Media</span>
  548.                                                     </span>
  549.                                                     <span class="thumb-info-action">
  550.                                                         <span class="thumb-info-action-icon bg-dark opacity-8"><i class="fas fa-plus"></i></span>
  551.                                                     </span>
  552.                                                 </span>
  553.                                             </span>
  554.                                 </a>
  555.                             </div>
  557.                             <div class="portfolio-item">
  558.                                 <a href="ajax/portfolio-ajax-project-2.html" data-ajax-on-modal>
  559.                                             <span class="thumb-info thumb-info-lighten">
  560.                                                 <span class="thumb-info-wrapper">
  561.                                                     <img src="img/projects/project-2.jpg" class="img-fluid border-radius-0" alt="">
  562.                                                     <span class="thumb-info-title">
  563.                                                         <span class="thumb-info-inner">Identity</span>
  564.                                                         <span class="thumb-info-type">Logo</span>
  565.                                                     </span>
  566.                                                     <span class="thumb-info-action">
  567.                                                         <span class="thumb-info-action-icon bg-dark opacity-8"><i class="fas fa-plus"></i></span>
  568.                                                     </span>
  569.                                                 </span>
  570.                                             </span>
  571.                                 </a>
  572.                             </div>
  574.                             <div class="portfolio-item">
  575.                                 <a href="ajax/portfolio-ajax-project-3.html" data-ajax-on-modal>
  576.                                             <span class="thumb-info thumb-info-lighten">
  577.                                                 <span class="thumb-info-wrapper">
  578.                                                     <img src="img/projects/project-27.jpg" class="img-fluid border-radius-0" alt="">
  579.                                                     <span class="thumb-info-title">
  580.                                                         <span class="thumb-info-inner">Porto Screens</span>
  581.                                                         <span class="thumb-info-type">Website</span>
  582.                                                     </span>
  583.                                                     <span class="thumb-info-action">
  584.                                                         <span class="thumb-info-action-icon bg-dark opacity-8"><i class="fas fa-plus"></i></span>
  585.                                                     </span>
  586.                                                 </span>
  587.                                             </span>
  588.                                 </a>
  589.                             </div>
  591.                             <div class="portfolio-item">
  592.                                 <a href="ajax/portfolio-ajax-project-4.html" data-ajax-on-modal>
  593.                                             <span class="thumb-info thumb-info-lighten">
  594.                                                 <span class="thumb-info-wrapper">
  595.                                                     <img src="img/projects/project-4.jpg" class="img-fluid border-radius-0" alt="">
  596.                                                     <span class="thumb-info-title">
  597.                                                         <span class="thumb-info-inner">Three Bottles</span>
  598.                                                         <span class="thumb-info-type">Logo</span>
  599.                                                     </span>
  600.                                                     <span class="thumb-info-action">
  601.                                                         <span class="thumb-info-action-icon bg-dark opacity-8"><i class="fas fa-plus"></i></span>
  602.                                                     </span>
  603.                                                 </span>
  604.                                             </span>
  605.                                 </a>
  606.                             </div>
  608.                             <div class="portfolio-item">
  609.                                 <a href="ajax/portfolio-ajax-project-5.html" data-ajax-on-modal>
  610.                                             <span class="thumb-info thumb-info-lighten">
  611.                                                 <span class="thumb-info-wrapper">
  612.                                                     <img src="img/projects/project-5.jpg" class="img-fluid border-radius-0" alt="">
  613.                                                     <span class="thumb-info-title">
  614.                                                         <span class="thumb-info-inner">Company T-Shirt</span>
  615.                                                         <span class="thumb-info-type">Brand</span>
  616.                                                     </span>
  617.                                                     <span class="thumb-info-action">
  618.                                                         <span class="thumb-info-action-icon bg-dark opacity-8"><i class="fas fa-plus"></i></span>
  619.                                                     </span>
  620.                                                 </span>
  621.                                             </span>
  622.                                 </a>
  623.                             </div>
  625.                             <div class="portfolio-item">
  626.                                 <a href="ajax/portfolio-ajax-project-6.html" data-ajax-on-modal>
  627.                                             <span class="thumb-info thumb-info-lighten">
  628.                                                 <span class="thumb-info-wrapper">
  629.                                                     <img src="img/projects/project-6.jpg" class="img-fluid border-radius-0" alt="">
  630.                                                     <span class="thumb-info-title">
  631.                                                         <span class="thumb-info-inner">Mobile Mockup</span>
  632.                                                         <span class="thumb-info-type">Website</span>
  633.                                                     </span>
  634.                                                     <span class="thumb-info-action">
  635.                                                         <span class="thumb-info-action-icon bg-dark opacity-8"><i class="fas fa-plus"></i></span>
  636.                                                     </span>
  637.                                                 </span>
  638.                                             </span>
  639.                                 </a>
  640.                             </div>
  642.                             <div class="portfolio-item">
  643.                                 <a href="ajax/portfolio-ajax-project-7.html" data-ajax-on-modal>
  644.                                             <span class="thumb-info thumb-info-lighten">
  645.                                                 <span class="thumb-info-wrapper">
  646.                                                     <img src="img/projects/project-7.jpg" class="img-fluid border-radius-0" alt="">
  647.                                                     <span class="thumb-info-title">
  648.                                                         <span class="thumb-info-inner">Porto Label</span>
  649.                                                         <span class="thumb-info-type">Media</span>
  650.                                                     </span>
  651.                                                     <span class="thumb-info-action">
  652.                                                         <span class="thumb-info-action-icon bg-dark opacity-8"><i class="fas fa-plus"></i></span>
  653.                                                     </span>
  654.                                                 </span>
  655.                                             </span>
  656.                                 </a>
  657.                             </div>
  659.                             <div class="portfolio-item">
  660.                                 <a href="" data-ajax-on-modal>
  661.                                             <span class="thumb-info thumb-info-lighten">
  662.                                                 <span class="thumb-info-wrapper">
  663.                                                     <img src="img/projects/project-23.jpg" class="img-fluid border-radius-0" alt="">
  664.                                                     <span class="thumb-info-title">
  665.                                                         <span class="thumb-info-inner">Business Folders</span>
  666.                                                         <span class="thumb-info-type">Logo</span>
  667.                                                     </span>
  668.                                                     <span class="thumb-info-action">
  669.                                                         <span class="thumb-info-action-icon bg-dark opacity-8"><i class="fas fa-plus"></i></span>
  670.                                                     </span>
  671.                                                 </span>
  672.                                             </span>
  673.                                 </a>
  674.                             </div>
  676.                             <div class="portfolio-item">
  677.                                 <a href="" data-ajax-on-modal>
  678.                                             <span class="thumb-info thumb-info-lighten">
  679.                                                 <span class="thumb-info-wrapper">
  680.                                                     <img src="img/projects/project-24.jpg" class="img-fluid border-radius-0" alt="">
  681.                                                     <span class="thumb-info-title">
  682.                                                         <span class="thumb-info-inner">Tablet Screen</span>
  683.                                                         <span class="thumb-info-type">Website</span>
  684.                                                     </span>
  685.                                                     <span class="thumb-info-action">
  686.                                                         <span class="thumb-info-action-icon bg-dark opacity-8"><i class="fas fa-plus"></i></span>
  687.                                                     </span>
  688.                                                 </span>
  689.                                             </span>
  690.                                 </a>
  691.                             </div>
  693.                             <div class="portfolio-item">
  694.                                 <a href="" data-ajax-on-modal>
  695.                                             <span class="thumb-info thumb-info-lighten">
  696.                                                 <span class="thumb-info-wrapper">
  697.                                                     <img src="img/projects/project-25.jpg" class="img-fluid border-radius-0" alt="">
  698.                                                     <span class="thumb-info-title">
  699.                                                         <span class="thumb-info-inner">Black Watch</span>
  700.                                                         <span class="thumb-info-type">Media</span>
  701.                                                     </span>
  702.                                                     <span class="thumb-info-action">
  703.                                                         <span class="thumb-info-action-icon bg-dark opacity-8"><i class="fas fa-plus"></i></span>
  704.                                                     </span>
  705.                                                 </span>
  706.                                             </span>
  707.                                 </a>
  708.                             </div>
  710.                             <div class="portfolio-item">
  711.                                 <a href="" data-ajax-on-modal>
  712.                                             <span class="thumb-info thumb-info-lighten">
  713.                                                 <span class="thumb-info-wrapper">
  714.                                                     <img src="img/projects/project-26.jpg" class="img-fluid border-radius-0" alt="">
  715.                                                     <span class="thumb-info-title">
  716.                                                         <span class="thumb-info-inner">Monitor Mockup</span>
  717.                                                         <span class="thumb-info-type">Website</span>
  718.                                                     </span>
  719.                                                     <span class="thumb-info-action">
  720.                                                         <span class="thumb-info-action-icon bg-dark opacity-8"><i class="fas fa-plus"></i></span>
  721.                                                     </span>
  722.                                                 </span>
  723.                                             </span>
  724.                                 </a>
  725.                             </div>
  727.                         </div>
  728.                     </div>
  730.                 </div>
  731.             </div>
  732.         </div>
  734.         <section id="clients" class="section section-background section-height-4 overlay overlay-show overlay-op-9 border-0 m-0" style="background-image: url(img/bg-one-page-1-1.jpg); background-size: cover; background-position: center;">
  735.             <div class="container">
  736.                 <div class="row">
  737.                     <div class="col text-center">
  738.                         <h2 class="font-weight-bold text-color-light mb-2">We’re excited about Porto Template</h2>
  739.                         <p class="text-color-light opacity-7">30,000 CUSTOMERS IN 100 COUNTRIES USE PORTO TEMPLATE. MEET OUR CUSTOMERS.</p>
  740.                     </div>
  741.                 </div>
  742.                 <div class="row text-center py-3 my-4">
  743.                     <div class="owl-carousel owl-theme carousel-center-active-item carousel-center-active-item-style-2 mb-0" data-plugin-options="{'responsive': {'0': {'items': 1}, '476': {'items': 1}, '768': {'items': 5}, '992': {'items': 7}, '1200': {'items': 7}}, 'autoplay': true, 'autoplayTimeout': 3000, 'dots': false}">
  744.                         <div>
  745.                             <img class="img-fluid" src="img/logos/logo-light-1.png" alt="">
  746.                         </div>
  747.                         <div>
  748.                             <img class="img-fluid" src="img/logos/logo-light-2.png" alt="">
  749.                         </div>
  750.                         <div>
  751.                             <img class="img-fluid" src="img/logos/logo-light-3.png" alt="">
  752.                         </div>
  753.                         <div>
  754.                             <img class="img-fluid" src="img/logos/logo-light-4.png" alt="">
  755.                         </div>
  756.                         <div>
  757.                             <img class="img-fluid" src="img/logos/logo-light-5.png" alt="">
  758.                         </div>
  759.                         <div>
  760.                             <img class="img-fluid" src="img/logos/logo-light-6.png" alt="">
  761.                         </div>
  762.                         <div>
  763.                             <img class="img-fluid" src="img/logos/logo-light-4.png" alt="">
  764.                         </div>
  765.                         <div>
  766.                             <img class="img-fluid" src="img/logos/logo-light-2.png" alt="">
  767.                         </div>
  768.                     </div>
  769.                 </div>
  770.                 <div class="row">
  771.                     <div class="col">
  773.                         <div class="owl-carousel owl-theme nav-bottom rounded-nav mb-0" data-plugin-options="{'items': 1, 'loop': true, 'autoHeight': true}">
  774.                             <div>
  775.                                 <div class="testimonial testimonial-style-2 testimonial-light testimonial-with-quotes testimonial-quotes-primary mb-0">
  776.                                     <blockquote>
  777.                                         <p class="text-5 line-height-5 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget risus porta, tincidunt turpis at, interdum tortor. Suspendisse potenti.</p>
  778.                                     </blockquote>
  779.                                     <div class="testimonial-author">
  780.                                         <p><strong class="font-weight-extra-bold text-2">- John Smith. Okler</strong></p>
  781.                                     </div>
  782.                                 </div>
  783.                             </div>
  784.                             <div>
  785.                                 <div class="testimonial testimonial-style-2 testimonial-light testimonial-with-quotes testimonial-quotes-primary mb-0">
  786.                                     <blockquote>
  787.                                         <p class="text-5 line-height-5 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget risus porta, tincidunt turpis at, interdum tortor. Suspendisse potenti.</p>
  788.                                     </blockquote>
  789.                                     <div class="testimonial-author">
  790.                                         <p><strong class="font-weight-extra-bold text-2">- John Smith. Okler</strong></p>
  791.                                     </div>
  792.                                 </div>
  793.                             </div>
  794.                         </div>
  796.                     </div>
  797.                 </div>
  798.             </div>
  799.         </section>
  801.         <div id="team" class="container pb-4">
  802.             <div class="row pt-5 mt-5 mb-4">
  803.                 <div class="col text-center appear-animation" data-appear-animation="fadeInUpShorter">
  804.                     <h2 class="font-weight-bold mb-1">Team</h2>
  805.                     <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT</p>
  806.                 </div>
  807.             </div>
  808.             <div class="row pb-5 mb-5 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">
  809.                 <div class="col-sm-6 col-lg-3 mb-4 mb-lg-0">
  810.                             <span class="thumb-info thumb-info-hide-wrapper-bg thumb-info-no-zoom">
  811.                                 <span class="thumb-info-wrapper">
  812.                                     <a href="about-me.html">
  813.                                         <img src="img/team/team-1.jpg" class="img-fluid" alt="">
  814.                                     </a>
  815.                                 </span>
  816.                                 <span class="thumb-info-caption">
  817.                                     <h3 class="font-weight-extra-bold text-color-dark text-4 line-height-1 mt-3 mb-0">John Doe</h3>
  818.                                     <span class="text-2 mb-0">CEO</span>
  819.                                     <span class="thumb-info-caption-text pt-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac ligula mi, non suscipitaccumsan</span>
  820.                                     <span class="thumb-info-social-icons">
  821.                                         <a target="_blank" href="http://www.facebook.com"><i class="fab fa-facebook-f"></i><span>Facebook</span></a>
  822.                                         <a href="http://www.twitter.com"><i class="fab fa-twitter"></i><span>Twitter</span></a>
  823.                                         <a href="http://www.linkedin.com"><i class="fab fa-linkedin-in"></i><span>Linkedin</span></a>
  824.                                     </span>
  825.                                 </span>
  826.                             </span>
  827.                 </div>
  828.                 <div class="col-sm-6 col-lg-3 mb-4 mb-lg-0">
  829.                             <span class="thumb-info thumb-info-hide-wrapper-bg thumb-info-no-zoom">
  830.                                 <span class="thumb-info-wrapper">
  831.                                     <a href="about-me.html">
  832.                                         <img src="img/team/team-2.jpg" class="img-fluid" alt="">
  833.                                     </a>
  834.                                 </span>
  835.                                 <span class="thumb-info-caption">
  836.                                     <h3 class="font-weight-extra-bold text-color-dark text-4 line-height-1 mt-3 mb-0">Jessica Doe</h3>
  837.                                     <span class="text-2 mb-0">DESIGNER</span>
  838.                                     <span class="thumb-info-caption-text pt-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac ligula mi, non suscipitaccumsan</span>
  839.                                     <span class="thumb-info-social-icons">
  840.                                         <a target="_blank" href="http://www.facebook.com"><i class="fab fa-facebook-f"></i><span>Facebook</span></a>
  841.                                         <a href="http://www.twitter.com"><i class="fab fa-twitter"></i><span>Twitter</span></a>
  842.                                         <a href="http://www.linkedin.com"><i class="fab fa-linkedin-in"></i><span>Linkedin</span></a>
  843.                                     </span>
  844.                                 </span>
  845.                             </span>
  846.                 </div>
  847.                 <div class="col-sm-6 col-lg-3 mb-4 mb-sm-0">
  848.                             <span class="thumb-info thumb-info-hide-wrapper-bg thumb-info-no-zoom">
  849.                                 <span class="thumb-info-wrapper">
  850.                                     <a href="about-me.html">
  851.                                         <img src="img/team/team-3.jpg" class="img-fluid" alt="">
  852.                                     </a>
  853.                                 </span>
  854.                                 <span class="thumb-info-caption">
  855.                                     <h3 class="font-weight-extra-bold text-color-dark text-4 line-height-1 mt-3 mb-0">Ricki Doe</h3>
  856.                                     <span class="text-2 mb-0">DEVELOPER</span>
  857.                                     <span class="thumb-info-caption-text pt-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac ligula mi, non suscipitaccumsan</span>
  858.                                     <span class="thumb-info-social-icons">
  859.                                         <a target="_blank" href="http://www.facebook.com"><i class="fab fa-facebook-f"></i><span>Facebook</span></a>
  860.                                         <a href="http://www.twitter.com"><i class="fab fa-twitter"></i><span>Twitter</span></a>
  861.                                         <a href="http://www.linkedin.com"><i class="fab fa-linkedin-in"></i><span>Linkedin</span></a>
  862.                                     </span>
  863.                                 </span>
  864.                             </span>
  865.                 </div>
  866.                 <div class="col-sm-6 col-lg-3">
  867.                             <span class="thumb-info thumb-info-hide-wrapper-bg thumb-info-no-zoom">
  868.                                 <span class="thumb-info-wrapper">
  869.                                     <a href="about-me.html">
  870.                                         <img src="img/team/team-4.jpg" class="img-fluid" alt="">
  871.                                     </a>
  872.                                 </span>
  873.                                 <span class="thumb-info-caption">
  874.                                     <h3 class="font-weight-extra-bold text-color-dark text-4 line-height-1 mt-3 mb-0">Melinda Doe</h3>
  875.                                     <span class="text-2 mb-0">SEO ANALYST</span>
  876.                                     <span class="thumb-info-caption-text pt-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac ligula mi, non suscipitaccumsan</span>
  877.                                     <span class="thumb-info-social-icons">
  878.                                         <a target="_blank" href="http://www.facebook.com"><i class="fab fa-facebook-f"></i><span>Facebook</span></a>
  879.                                         <a href="http://www.twitter.com"><i class="fab fa-twitter"></i><span>Twitter</span></a>
  880.                                         <a href="http://www.linkedin.com"><i class="fab fa-linkedin-in"></i><span>Linkedin</span></a>
  881.                                     </span>
  882.                                 </span>
  883.                             </span>
  884.                 </div>
  885.             </div>
  886.         </div>
  888.         <section id="contact" class="section bg-color-grey-scale-1 border-0 py-0 m-0">
  889.             <div class="container-fluid">
  890.                 <div class="row">
  891.                     <div class="col-md-6">
  893.                         <!-- Google Maps - Settings on footer -->
  894.                         <div id="googlemaps" class="google-ma h-100 mb-0" style="min-height: 400px;"></div>
  896.                     </div>
  897.                     <div class="col-md-6 p-5 my-5">
  899.                         <div class="px-4">
  900.                             <h2 class="font-weight-bold line-height-1 mb-2">Fragen?</h2>
  901.                             <p class="text-3 mb-4">Wir helfen gerne weiter!</p>
  902.                             <form class="contact-form form-style-2 pr-xl-5" action="/contactform" method="POST">
  903.                                 <div class="contact-form-success alert alert-success d-none mt-4" id="contactSuccess">
  904.                                     <strong>Success!</strong> Your message has been sent to us.
  905.                                 </div>
  907.                                 <div class="contact-form-error alert alert-danger d-none mt-4" id="contactError">
  908.                                     <strong>Error!</strong> There was an error sending your message.
  909.                                     <span class="mail-error-message text-1 d-block" id="mailErrorMessage"></span>
  910.                                 </div>
  912.                                 <div class="form-row">
  913.                                     <div class="form-group col-xl-4">
  914.                                         <input type="text" value="" data-msg-required="Please enter your name." maxlength="100" class="form-control" name="name" id="name" placeholder="Name" required>
  915.                                     </div>
  916.                                     <div class="form-group col-xl-8">
  917.                                         <input type="email" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." maxlength="100" class="form-control" name="email" id="email" placeholder="E-Mail Adresse" required>
  918.                                     </div>
  919.                                 </div>
  920.                                 <div class="form-row">
  921.                                     <div class="form-group col">
  922.                                         <input type="text" value="" data-msg-required="Please enter the subject." maxlength="100" class="form-control" name="subject" id="subject" placeholder="Betreff" required>
  923.                                     </div>
  924.                                 </div>
  925.                                 <div class="form-row">
  926.                                     <div class="form-group col">
  927.                                         <textarea maxlength="5000" data-msg-required="Please enter your message." rows="4" class="form-control" name="message" id="message" placeholder="Nachricht" required></textarea>
  928.                                     </div>
  929.                                 </div>
  930.                                 <div class="form-row">
  931.                                     <div class="form-group col">
  932.                                         <input type="submit" value="SUBMIT" class="btn btn-primary btn-rounded font-weight-semibold px-5 btn-py-2 text-2" data-loading-text="Loading...">
  933.                                     </div>
  934.                                 </div>
  935.                             </form>
  936.                         </div>
  938.                     </div>
  939.                 </div>
  940.             </div>
  941.         </section>
  943.         <section class="section bg-primary border-0 m-0">
  944.             <div class="container">
  945.                 <div class="row justify-content-center text-center text-lg-left py-4">
  946.                     <div class="col-lg-auto appear-animation" data-appear-animation="fadeInRightShorter">
  947.                         <div class="feature-box feature-box-style-2 d-block d-lg-flex mb-4 mb-lg-0">
  948.                             <div class="feature-box-icon">
  949.                                 <i class="icon-location-pin icons text-color-light"></i>
  950.                             </div>
  951.                             <div class="feature-box-info pl-1">
  952.                                 <h5 class="font-weight-light text-color-light opacity-7 mb-0">ADDRESSE</h5>
  953.                                 <p class="text-color-light font-weight-semibold mb-0">MO - FR: 09:00 - 17:00 Uhr</p>
  954.                             </div>
  955.                         </div>
  956.                     </div>
  957.                     <div class="col-lg-auto appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="200">
  958.                         <div class="feature-box feature-box-style-2 d-block d-lg-flex mb-4 mb-lg-0 px-xl-4 mx-lg-5">
  959.                             <div class="feature-box-icon">
  960.                                 <i class="icon-call-out icons text-color-light"></i>
  961.                             </div>
  962.                             <div class="feature-box-info pl-1">
  963.                                 <h5 class="font-weight-light text-color-light opacity-7 mb-0">Rufen Sie uns an</h5>
  964.                                 <a href="tel:+8001234567" class="text-color-light font-weight-semibold text-decoration-none">026829682990</a>
  965.                             </div>
  966.                         </div>
  967.                     </div>
  968.                     <div class="col-lg-auto appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="400">
  969.                         <div class="feature-box feature-box-style-2 d-block d-lg-flex">
  970.                             <div class="feature-box-icon">
  971.                                 <i class="icon-share icons text-color-light"></i>
  972.                             </div>
  973.                             <div class="feature-box-info pl-1">
  974.                                 <h5 class="font-weight-light text-color-light opacity-7 mb-0">FOLLOW US</h5>
  975.                                 <p class="mb-0">
  976.                                     <span class="social-icons-facebook"><a href="http://www.facebook.com/" target="_blank" class="text-color-light font-weight-semibold" title="Facebook"><i class="mr-1 fab fa-facebook-f"></i> FACEBOOK</a></span>
  977.                                     <span class="social-icons-twitter pl-3"><a href="http://www.twitter.com/" target="_blank" class="text-color-light font-weight-semibold" title="Twitter"><i class="mr-1 fab fa-twitter"></i> TWITTER</a></span>
  978.                                     <span class="social-icons-instagram pl-3"><a href="http://www.linkedin.com/" target="_blank" class="text-color-light font-weight-semibold" title="Linkedin"><i class="mr-1 fab fa-instagram"></i> INSTAGRAM</a></span>
  979.                                 </p>
  980.                             </div>
  981.                         </div>
  982.                     </div>
  983.                 </div>
  984.             </div>
  985.         </section>
  986.     </div>
  988.     <footer id="footer" class="mt-0">
  989.         <div class="footer-copyright">
  990.             <div class="container py-2">
  991.                 <div class="row py-4">
  992.                     <div class="col d-flex align-items-center justify-content-center">
  993.                         <p><strong>Verwaltungs Portal</strong> - © Copyright 2021. All Rights Reserved.</p>
  994.                     </div>
  995.                 </div>
  996.             </div>
  997.         </div>
  998.     </footer>
  1000. </div>
  1002. <!-- Vendor -->
  1003. <script src="/landing/vendor/jquery/jquery.min.js"></script>
  1004. <script src="/landing/vendor/jquery.appear/jquery.appear.min.js"></script>
  1005. <script src="/landing/vendor/jquery.easing/jquery.easing.min.js"></script>
  1006. <script src="/landing/vendor/jquery.cookie/jquery.cookie.min.js"></script>
  1007. <script src="/landing/vendor/popper/umd/popper.min.js"></script>
  1008. <script src="/landing/vendor/bootstrap/js/bootstrap.min.js"></script>
  1009. <script src="/landing/vendor/common/common.min.js"></script>
  1010. <script src="/landing/vendor/jquery.validation/jquery.validate.min.js"></script>
  1011. <script src="/landing/vendor/jquery.easy-pie-chart/jquery.easypiechart.min.js"></script>
  1012. <script src="/landing/vendor/jquery.gmap/jquery.gmap.min.js"></script>
  1013. <script src="/landing/vendor/jquery.lazyload/jquery.lazyload.min.js"></script>
  1014. <script src="/landing/vendor/isotope/jquery.isotope.min.js"></script>
  1015. <script src="/landing/vendor/owl.carousel/owl.carousel.min.js"></script>
  1016. <script src="/landing/vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
  1017. <script src="/landing/vendor/vide/jquery.vide.min.js"></script>
  1019. <!-- Theme Base, Components and Settings -->
  1020. <script src="/landing/js/theme.js"></script>
  1022. <!-- Current Page Vendor and Views -->
  1023. <script src="/landing/vendor/rs-plugin/js/jquery.themepunch.tools.min.js"></script>
  1024. <script src="/landing/vendor/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
  1026. <!-- Theme Custom -->
  1027. <script src="/landing/js/custom.js"></script>
  1029. <!-- Theme Initialization Files -->
  1030. <script src="/landing/js/theme.init.js"></script>
  1032. <!-- Examples -->
  1033. <script src="/landing/js/examples/examples.portfolio.js"></script>
  1035. <!-- Google Analytics: Change UA-XXXXX-X to be your site's ID. Go to http://www.google.com/analytics/ for more information.
  1036. <script>
  1037.     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  1038.     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  1039.     m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  1040.     })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  1042.     ga('create', 'UA-12345678-1', 'auto');
  1043.     ga('send', 'pageview');
  1044. </script>
  1045.  -->
  1050. </body>
  1051. </html>