AAI - animirana hero slika

This commit is contained in:
Nejc Kovač 2022-07-21 13:08:42 +02:00
parent 88618321ab
commit 7205e9de93
4 changed files with 59 additions and 69 deletions

View File

@ -498,7 +498,17 @@ class DisplayController{
echo '</div>';
echo '<img src="public/img/icons/hero.svg" alt="hero image">';
// STARA SLIKA
// echo '<img src="public/img/icons/hero.svg" alt="hero image">';
// NOVA SLIKA - TEST
echo '<div class= "hero_image">';
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>';
@ -506,14 +516,14 @@ class DisplayController{
// HERO - animiran ------------------------------------------
echo '<div class="section kvs">';
echo '<div class="div-block-10">';
echo '<div class="kv-right-col">';
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>';
// echo '<div class="section kvs">';
// echo '<div class="div-block-10">';
// echo '<div class="kv-right-col">';
// 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>';
echo '<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=60f9932f0024f1393a09a367" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>';
echo '<script src="frontend/simple/script/enka-21.js" type="text/javascript"></script>';

View File

@ -134,7 +134,6 @@ header nav span.lang_switch img {
margin: auto;
}
.hero-container img {
max-width: 50%;
max-height: 476px;
}
.hero-container .text {
@ -183,25 +182,17 @@ header nav span.lang_switch img {
max-width: auto;
}
.section {
.hero_image {
position: relative;
padding-top: 70px;
padding-bottom: 70px;
}
.section.kvs {
z-index: 1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
height: 480px;
width: 50%;
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;
justify-content: center;
}
.hero_image img {
width: 100%;
height: auto;
}
.div-block-10 {
@ -245,14 +236,13 @@ header nav span.lang_switch img {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
border: 1px solid red;
}
.kv-image-3 {
position: absolute;
z-index: 3;
width: 100%;
height: 100%;
z-index: 0;
width: 399;
height: auto;
-o-object-fit: contain;
object-fit: contain;
}
@ -587,8 +577,9 @@ input[type=button]:hover,
padding-bottom: 50px;
height: auto;
}
.hero-container img {
max-width: 65%;
.hero-container .hero_image {
width: 100%;
position: unset;
}
.hero-container .text {
margin: auto;
@ -833,6 +824,7 @@ input[type=button]:hover,
width: 100%;
height: 700px;
background-color: rgb(255, 255, 255);
z-index: 1;
}
#links .menu_item {
font-size: 30px;

View File

@ -34,7 +34,7 @@
/********** BODY **********/
echo '<body class="'.($_GET['a'] == '' ? 'landing_page' : $_GET['a']).'">';
echo '<body class="'.($_GET['a'] == '' ? 'landing_page body-2' : $_GET['a']).'">';
echo '<div id="content" '.(isAAI() ? 'class="aai"' : '').'>';

View File

@ -162,7 +162,7 @@ header {
img {
max-width: 50%;
// max-width: 50%;
max-height: 476px;
}
@ -227,28 +227,25 @@ header {
// HERO IMG - ANIMATED --------------------------------
.section {
.hero_image {
position: relative;
padding-top: 70px;
padding-bottom: 70px;
}
height: 480px;
width: 50%;
.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;
justify-content: center;
img{
width: 100%;
height: auto;
}
}
.div-block-10 {
z-index: 121;
display: -webkit-box;
@ -290,21 +287,16 @@ header {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
border: 1px solid red;
}
.kv-image-3 {
position: absolute;
z-index: 3;
width: 100%;
height: 100%;
z-index: 0;
width: 399;
height: auto;
-o-object-fit: contain;
object-fit: contain;
object-fit: contain;
}
.kv-image-3.l1 {
display: block;
}
@ -313,16 +305,8 @@ header {
display: block;
}
// -----------------------------------------------------
.povezave_container {
max-width: 100%;
background-color: #FCFCFC;
@ -707,8 +691,10 @@ input[type=button],
height: auto;
img {
max-width: 65%;
.hero_image {
width: 100%;
position: unset;
}
.text{
@ -1016,6 +1002,8 @@ input[type=button],
width: 100%;
height: 700px;
background-color: rgb(255, 255, 255);
z-index: 1;
}
#links .menu_item {