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

AAI - animirana hero slika

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -498,7 +498,17 @@ class DisplayController{
echo '</div>'; 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>'; echo '</div>';
@ -506,14 +516,14 @@ class DisplayController{
// HERO - animiran ------------------------------------------ // HERO - animiran ------------------------------------------
echo '<div class="section kvs">'; // echo '<div class="section kvs">';
echo '<div class="div-block-10">'; // echo '<div class="div-block-10">';
echo '<div class="kv-right-col">'; // 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-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'<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>';
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="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>'; echo '<script src="frontend/simple/script/enka-21.js" type="text/javascript"></script>';

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

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

2
frontend/simple/index.php
View File

@ -34,7 +34,7 @@
/********** BODY **********/ /********** 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"' : '').'>'; echo '<div id="content" '.(isAAI() ? 'class="aai"' : '').'>';

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

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