New logo + animation

layout/style-scss/style.scss

@@ -61,7 +61,7 @@ a {
 				position: relative;
 
 				&.parent {
-          >a {
+					> a {
 						@include respond-above(xs) {
 							pointer-events: none;
 						}
@@ -97,17 +97,17 @@ a {
 			.level-0 {
 				justify-content: space-between;
 
-        >li {
+				> li {
 					display: flex;
 					align-items: center;
 
-          >a {
+					> a {
 						color: $cTxtGray;
 						text-transform: uppercase;
 					}
 
 					&#link-8 {
-            >a {
+						> a {
 							color: $cTxtWhite;
 							font-weight: 800;
 							font-size: 23px;
@@ -618,6 +618,100 @@ header {
 					max-width: 150px;
 				}
 			}
+
+			.header-logo {
+				min-height: 52px;
+				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: 52px;
+						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: 52px;
+							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;
+				}
+			}
 		}
 
 		.header_right {
@@ -675,14 +769,14 @@ header {
 						li {
 							&.parent {
 								&:hover {
-                  >a {
+									> a {
 										&::before {
 											width: calc(100% - 23px);
 										}
 									}
 								}
 
-                >a {
+								> a {
 									&::after {
 										content: url('/upload/filemanager/Icons/mini_arrow_bottom_new.svg');
 										display: inline-block;
@@ -698,7 +792,7 @@ header {
 				@include respond-below(md) {
 					li {
 						&.parent {
-              >a {
+							> a {
 								display: flex;
 								flex-direction: row;
 								justify-content: space-between;
@@ -722,7 +816,7 @@ header {
 
 				li {
 					&.parent {
-            >a {
+						> a {
 							width: fit-content;
 
 							@include respond-above(md) {
@@ -732,7 +826,7 @@ header {
 					}
 
 					&:hover {
-            >a {
+						> a {
 							&::before {
 								width: 100%;
 							}
@@ -814,7 +908,7 @@ header {
 					padding-right: 15px;
 				}
 
-        >li {
+				> li {
 					position: relative;
 
 					@include respond-below(md) {
@@ -877,10 +971,10 @@ header {
 							display: none;
 						}
 
-            >li {
+						> li {
 							@include respond-above(md) {
 								&:hover {
-                  >a {
+									> a {
 										&::after {
 											transform: rotate(-90deg);
 										}
@@ -924,7 +1018,7 @@ header {
 								}
 							}
 
-              >a {
+							> a {
 								padding: 5px 0;
 							}
 
@@ -1003,7 +1097,7 @@ header {
 		height: 400px;
 	}
 
-  >div {
+	> div {
 		width: 100%;
 	}
 
@@ -1272,7 +1366,7 @@ header {
 					background-color: $cSandDarker;
 				}
 
-        >.row {
+				> .row {
 					align-items: center;
 				}
 
@@ -1290,7 +1384,8 @@ header {
 					}
 				}
 
-        .col-right {}
+				.col-right {
+				}
 
 				@include respond-below(md) {
 					&::before {
@@ -2036,7 +2131,7 @@ header {
 
 		li {
 			a {
-        border: 1px solid #D4D4D4;
+				border: 1px solid #d4d4d4;
 				display: flex;
 				flex-wrap: wrap;
 				align-items: center;
@@ -2057,11 +2152,11 @@ header {
 					top: -2px;
 					content: '';
 					display: flex;
-          background: url('/upload/filemanager/Icons/icon-file.svg') no-repeat center;
+					background: url('/upload/filemanager/Icons/icon-file.svg') no-repeat
+						center;
 					height: 20px;
 					width: 20px;
 					background-size: contain;
-
 				}
 
 				&:hover {

templates_user/components/NavMenu.php

@@ -6,10 +6,24 @@
   <div class="container">
     <div class="header__wrapper">
       <div class="header_left">
-        <a href="/">
+        <!-- <a href="/">
           <img src="/upload/filemanager/Logos/logo-black.svg" alt="">
+        </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_ENG.png" alt="logo">
+                  </a>
+              </div>
+          </div>
+      </div>
+      </div>
       <div class="header_right">
         <nav id="advance_menu">
           <ul class="lvl_1">