New logo + animation

layout/style-scss/style.scss

@@ -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 {
@@ -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">