adce overlay

src/assets/images/ADCE_white.svg

+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 240"><defs><style>.cls-1{fill:#fff;}</style></defs><path class="cls-1" d="M127.63,114.18,113.86,85.06h-47l3.7-8.16h39.41L84.63,23.72l-43,90.46H33L81.16,13.59c.9-2,2-3.09,3.81-3.09,1.57,0,2.69,1.12,3.69,3.09l48,100.59Z"/><path class="cls-1" d="M156.41,114.18V10.5H212.9c27.34,0,47.19,20.68,47.19,50.77s-19.85,52.91-47.19,52.91Zm56.49-9.56c21.93,0,37.89-18.39,37.89-42.92s-16-41.65-37.89-41.65H165.85v84.57Z"/><path class="cls-1" d="M82.05,230.26c-28.33,0-49-22.82-49-52.91,0-30.52,20.71-50.78,49-50.78H136.7v9.56H82.05c-22.72,0-39.26,17-39.26,41.64S59.33,220.7,82.05,220.7H136.7v9.56Z"/><path class="cls-1" d="M156.41,230.26V126.57H259.93v9.56h-92.3V220.7h92.46v9.56Zm27.07-48.35v-9h72v9Z"/></svg>
\ No newline at end of file

src/views/ADCE.vue

@@ -25,12 +25,13 @@
           </p>
         </div>
         <div
-          class="col-lg-5 offset-lg-2 d-flex flex-column justify-content-center"
+          class="col-lg-5 offset-lg-2 d-flex flex-column justify-content-center position-relative"
         >
           <img
             class="img-fluid shadow"
             src="@/assets/images/ADCE-bg-large.jpg"
           />
+          <ADCELogo id="adce-logo" />
         </div>
       </div>
       <div class="my-5">
@@ -184,6 +185,7 @@ import PageHeader from "@/components/PageHeader";
 import BottomWave from "@/components/BottomWave";
 import ProcessLogo from "@/assets/images/icons/Icon_process.svg";
 import SoftwareLogo from "@/assets/images/icons/Icon_software-development-tools.svg";
+import ADCELogo from "@/assets/images/ADCE_white.svg";
 import VueEasyLightbox from "vue-easy-lightbox";
 
 export default {
@@ -193,7 +195,8 @@ export default {
     BottomWave,
     VueEasyLightbox,
     ProcessLogo,
-    SoftwareLogo
+    SoftwareLogo,
+    ADCELogo
   },
   methods: {
     showImg(index) {
@@ -274,6 +277,15 @@ export default {
 }
 
 .adce {
+  #adce-logo {
+    fill: white;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 50%;
+  }
+
   .mm-logo {
     width: 250px;
   }