AAI - hero animirana slika

frontend/simple/classes/DisplayController.php

@@ -484,31 +484,33 @@ class DisplayController{
         global $site_url;
 		
 
-        // HERO
+        // HERO  - stara verzija -----------------------
-        // echo '<div class= "hero-container"> ';
+        
+        
+        echo '<div class= "hero-container"> ';
 
-        //     echo '<div class="text">';
+            echo '<div class="text">';
-        //         echo '<h1>'.$lang["hero_heading"].'</h1>';
+                echo '<h1>'.$lang["hero_heading"].'</h1>';
-        //         echo '<p>'.$lang["hero_text"].'</p>';
+                echo '<p>'.$lang["hero_text"].'</p>';
                 
-        //         echo '<a href="'.$site_url.'/aai"> '.$lang["AAI_prijava"].' <img src="public/img/icons/chevron.svg"></a>';
+                echo '<a href="'.$site_url.'/aai"> '.$lang["AAI_prijava"].' <img src="public/img/icons/chevron.svg"></a>';
                 
         
-        //     echo '</div>';
+            echo '</div>';
 
-        //     echo '<img src="public/img/icons/hero.svg" alt="hero image">';
+            echo '<img src="public/img/icons/hero.svg" alt="hero image">';
                 
-        // echo '</div>';
+        echo '</div>';
 
 
-        // HERO - animiran 
+        // HERO - animiran ------------------------------------------
 
 
         echo '<div class="section kvs">';
             echo '<div class="div-block-10">';
                 echo '<div class="kv-right-col">';
-                    echo'<img src="images/enka-kv3-02.svg" loading="lazy" alt="" class="kv-image-3 l1">';
+                    echo'<img src="public/img/icons/enka-kv3-02.svg" loading="lazy" alt="" class="kv-image-3 l1">';
-                    echo'<img src="images/enka-kv3-03.svg" loading="lazy" alt="" class="kv-image-3 i2">';
+                    echo'<img src="public/img/icons/enka-kv3-03.svg" loading="lazy" alt="" class="kv-image-3 i2">';
                 echo'</div>';
             echo '</div>';
         echo '</div>';
@@ -517,6 +519,8 @@ class DisplayController{
         echo '<script src="frontend/simple/script/enka-21.js" type="text/javascript"></script>';
 
 
+        // ---------------------------------------------------------
+
         // POMEMBNE POVEZAVE
         echo '<div class=povezave_container>';
             echo '<div class="pomembne_povezave">';

frontend/simple/css/aai.css

@@ -183,6 +183,88 @@ header nav span.lang_switch img {
   max-width: auto;
 }
 
+.section {
+  position: relative;
+  padding-top: 70px;
+  padding-bottom: 70px;
+}
+
+.section.kvs {
+  z-index: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 70vh;
+  padding-top: 45px;
+  padding-bottom: 45px;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.div-block-10 {
+  z-index: 121;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 100%;
+  max-width: 1240px;
+  margin-right: auto;
+  margin-left: auto;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: reverse;
+  -webkit-flex-direction: row-reverse;
+  -ms-flex-direction: row-reverse;
+  flex-direction: row-reverse;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  background-color: #fff;
+  text-align: left;
+}
+
+.kv-right-col {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  border: 1px solid red;
+}
+
+.kv-image-3 {
+  position: absolute;
+  z-index: 3;
+  width: 100%;
+  height: 100%;
+  -o-object-fit: contain;
+  object-fit: contain;
+}
+
+.kv-image-3.l1 {
+  display: block;
+}
+
+.kv-image-3.i2 {
+  display: block;
+}
+
 .povezave_container {
   max-width: 100%;
   background-color: #FCFCFC;

resources/sass/frontend_simple/aai.scss

@@ -224,6 +224,105 @@ header {
     }
 }
 
+
+// HERO IMG - ANIMATED --------------------------------
+
+.section {
+    position: relative;
+    padding-top: 70px;
+    padding-bottom: 70px;
+}
+
+
+.section.kvs {
+    z-index: 1;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    height: 70vh;
+    padding-top: 45px;
+    padding-bottom: 45px;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+}
+
+.div-block-10 {
+    z-index: 121;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    height: 100%;
+    max-width: 1240px;
+    margin-right: auto;
+    margin-left: auto;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: reverse;
+    -webkit-flex-direction: row-reverse;
+    -ms-flex-direction: row-reverse;
+    flex-direction: row-reverse;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    background-color: #fff;
+    text-align: left;
+}
+
+.kv-right-col {
+    position: relative;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+
+    border: 1px solid red;
+
+
+}
+
+.kv-image-3 {
+    position: absolute;
+    z-index: 3;
+    width: 100%;
+    height: 100%;
+    -o-object-fit: contain;
+    object-fit: contain;
+}
+
+.kv-image-3.l1 {
+    display: block;
+}
+  
+  .kv-image-3.i2 {
+    display: block;
+}
+
+
+
+
+// -----------------------------------------------------
+
+
+
+
+
+
 .povezave_container {
     max-width: 100%;
     background-color: #FCFCFC;