Merge pull request #262 from vishnubansaltarento/fix-logout-page-banner

update for new banner on logout page with new features

Author: vishnubansaltarento

src/app/routes/public/public-logout/public-logout.component.html

@@ -1,42 +1,55 @@
-<div class="main_container flex flex-row" style=" background: url(assets/instances/eagle/banners/home/9/Login_background.png) no-repeat center center fixed;">
+<div class="main_container flex flex-row"
+  style=" background: url(/assets/instances/eagle/banners/home/9/BG.png) center center fixed;">
   <div class="left_container flex flex-col items-center justify-center">
-    <div class="logo_box flex items-center">
+    <!-- <div class="logo_box flex items-center">
       <img src="/assets/instances/eagle/app_logos/dopt_logo.png" alt="logo" class="logo_img">
-    </div>
+    </div> -->
 
-    <div class="slideshow-container">
+    <!-- <div class="slideshow-container">
 
        <div class="mySlides">
         <img src="/assets/instances/eagle/app_logos/Hexagon.png" alt="karmayogi">
-        <!-- <img src="/assets/instances/eagle/app_logos/card3.png" alt="slide 1"> -->
 
-      </div>
 
-      <!-- <div class="mySlides">
+      </div>
 
-        <img src="/assets/instances/eagle/app_logos/Hexagon.png" alt="slide 2">
 
-      </div> -->
 
 
 
 
 
 
 
+      </div> -->
+    <div class="left_container mt-8">
+      <div class="features-image">
+        <img src="/assets/instances/eagle/banners/home/9/Sticky Notes.png" alt="What's New @ iGOT?">
       </div>
-      <br>
-
+      <!-- <div class="logo_box flex items-center">
+            <img src="/assets/instances/eagle/app_logos/dopt_logo.png" alt="logo" class="logo_img">
+          </div> -->
+      <!-- <div class="slideshow-container">
+            <div class="mySlides">
+              <img src="/assets/instances/eagle/app_logos/Hexagon.png" alt="karmayogi"> -->
+      <!-- <img src="/assets/instances/eagle/app_logos/card3.png" alt="slide 1"> -->
+      <!-- </div> -->
+      <!-- <div class="mySlides">
+              <img src="/assets/instances/eagle/app_logos/Hexagon.png" alt="slide 2">
+            </div> -->
+      <!-- </div>
+          <br> -->
       <!-- <div style="text-align:center">
-        <span class="dot"></span>
-        <span class="dot"></span>
-
-      </div> -->
+              <span class="dot"></span>
+              <span class="dot"></span>
+            </div> -->
+    </div>
+    <br>
   </div>
   <div class=" right_container flex flex-col items-center justify-center">
     <div class="right_inner_container">
       <div class="right_logo_box right_logo_box flex items-center justify-center">
-      <img src="/assets/instances/eagle/app_logos/eagle-logo-transparent.svg" alt="logo" class="logout_logo">
+        <img src="/assets/instances/eagle/app_logos/eagle-logo-transparent.svg" alt="logo" class="logout_logo">
       </div>
       <div class="text_box flex items-center justify-center">
         <h2 class="mat-h2"> Welcome to SPV Portal!</h2>
@@ -48,4 +61,4 @@ <h2 class="mat-h2"> Welcome to SPV Portal!</h2>
     </div>
 
   </div>
-</div>
+</div>

src/app/routes/public/public-logout/public-logout.component.scss

@@ -10,10 +10,21 @@
       background-size: cover;
     }
 
-    .right_container {
+    // .right_container {
+    //   background-color: #fff;
+    //   width: 45%;
+    //   height: 100vh;
+    //   box-sizing: border-box;
+    //   box-shadow: 0px 20px 60px #3e3e3e29;
+
+    //   @include breakpoint-xs {
+    //     width: 100%!important;
+    //   }
+    // }
+     .right_container {
       background-color: #fff;
       width: 45%;
-      height: 100vh;
+      min-height: 100vh;
       box-sizing: border-box;
       box-shadow: 0px 20px 60px #3e3e3e29;
 
@@ -22,11 +33,23 @@
       }
     }
 
-    .left_container {
-      padding: 5rem 6rem;
-      box-sizing: border-box;
-      width: 55%;
-      height: 100vh;
+    // .left_container {
+    //   padding: 5rem 6rem;
+    //   box-sizing: border-box;
+    //   width: 55%;
+    //   height: 100vh;
+
+    //   @include breakpoint-xs {
+    //     display: none!important;
+    //   }
+    // }
+     .left_container {
+      flex: 1;
+      // display: flex;
+      // align-items: center;
+      // justify-content: center;
+      position: relative;
+      max-width: 100%;
 
       @include breakpoint-xs {
         display: none!important;
@@ -119,6 +142,18 @@ width:300px;
     }
   }
 
+.features-image {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .features-image img {
+      max-width: 90%;
+      // position: absolute;
+      // top: 10%;
+      // // left: 50%;
+      // transform: translate(-50%, -50%);
+    }