may/1KA_F2F
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

AAI - hero animirana slika

Browse Source
This commit is contained in:
Nejc Kovač 2022-07-21 12:02:27 +02:00
parent f9c5321bf3
commit 88618321ab
3 changed files with 197 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/simple/classes/DisplayController.php
View File

@ -484,31 +484,33 @@ class DisplayController{
global $site_url;
// HERO
// echo '<div class= "hero-container"> ';
// HERO - stara verzija -----------------------
echo '<div class= "hero-container"> ';
// echo '<div class="text">';
// echo '<h1>'.$lang["hero_heading"].'</h1>';
// echo '<p>'.$lang["hero_text"].'</p>';
echo '<div class="text">';
echo '<h1>'.$lang["hero_heading"].'</h1>';
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="images/enka-kv3-03.svg" loading="lazy" alt="" class="kv-image-3 i2">';
echo'<img src="public/img/icons/enka-kv3-02.svg" loading="lazy" alt="" class="kv-image-3 l1">';
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">';

82
frontend/simple/css/aai.css
View File

@ -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;

99
resources/sass/frontend_simple/aai.scss
View File

@ -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;