New logo + animation

layout/style-scss/style.scss

@@ -661,6 +661,100 @@ a {
 				height: 47px;
 			}
 		}
+
+		.header-logo {
+			min-height: 48px;
+			min-width: 120px;
+
+			.box-logo-relative {
+				position: relative;
+				transform-style: preserve-3d;
+				width: 100%;
+				height: 100%;
+
+				.box-logo-absolute {
+					position: absolute;
+					top: 0;
+					left: 0;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					width: 120px;
+					height: 48px;
+					object-fit: contain;
+					backface-visibility: hidden;
+					-webkit-backface-visibility: hidden;
+					-moz-animation: action-logo 4s linear infinite alternate;
+					-webkit-animation: action-logo 4s linear infinite alternate;
+					-ms-animation: none;
+
+					&.box-logo-absolute-front {
+					}
+					&.box-logo-absolute-back {
+						transform: rotateY(180deg);
+						-moz-animation: action-logo-back 4s linear infinite alternate;
+						-webkit-animation: action-logo-back 4s linear infinite alternate;
+						-ms-animation: none;
+					}
+
+					img {
+						width: 100%;
+						height: 48px;
+						object-fit: contain;
+					}
+				}
+			}
+		}
+		@keyframes action-logo {
+			0% {
+				transform: rotateY(0);
+				backface-visibility: hidden;
+				-webkit-backface-visibility: hidden;
+			}
+
+			40% {
+				transform: rotateY(0);
+				backface-visibility: hidden;
+				-webkit-backface-visibility: hidden;
+			}
+
+			61% {
+				transform: rotateY(180deg);
+				backface-visibility: hidden;
+				-webkit-backface-visibility: hidden;
+			}
+
+			100% {
+				transform: rotateY(180deg);
+				backface-visibility: hidden;
+				-webkit-backface-visibility: hidden;
+			}
+		}
+		@keyframes action-logo-back {
+			0% {
+				transform: rotateY(180deg);
+				backface-visibility: hidden;
+				-webkit-backface-visibility: hidden;
+			}
+
+			40% {
+				transform: rotateY(180deg);
+				backface-visibility: hidden;
+				-webkit-backface-visibility: hidden;
+			}
+
+			61% {
+				transform: rotateY(0);
+				backface-visibility: hidden;
+				-webkit-backface-visibility: hidden;
+			}
+
+			100% {
+				transform: rotateY(0);
+				backface-visibility: hidden;
+				-webkit-backface-visibility: hidden;
+			}
+		}
 	}
 
 	div[class^='col-']:last-child {

templates_user/components/nav-menu.php

@@ -4,10 +4,24 @@
   <div class="container">
     <div class="row">
       <div class="col-md-12 col-xl-2">
-        <a href="<?= \front\factory\Pages::lang_url(\front\factory\Pages::main_page_id(), $lang_id, \S::get_domain( $_SERVER['HTTP_HOST'] ), \front\factory\Languages::default_domain()); ?>">
+        <!-- <a href="<?= \front\factory\Pages::lang_url(\front\factory\Pages::main_page_id(), $lang_id, \S::get_domain( $_SERVER['HTTP_HOST'] ), \front\factory\Languages::default_domain()); ?>">
           <img alt="" src="/upload/filemanager/images/logo.png" />
+        </a> -->
+        <div class="header-logo">
+          <div class="box-logo-relative">
+            <div class="box-logo-absolute box-logo-absolute-front">
+              <a href="/">
+                <img src="/upload/filemanager/logos/VIDOK-logo-new.png" alt="logo">
               </a>
             </div>
+            <div class="box-logo-absolute box-logo-absolute-back">
+              <a href="/">
+                <img src="/upload/filemanager/logos/VIDOK-COM_IT.png" alt="logo">
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
       <div class="col-md-12 col-xl-10">
         <div>
           <?= \front\view\Menu::main_menu(\front\factory\Menu::menu_details( 1 ), $page['id']); ?>