[Trunk|Connect]: Add new images

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@56272 d315682c-612b-4755-9ff5-7f18f6832af3

src/app/communities/communities.component.html

@@ -181,7 +181,7 @@
             </div>
           </div>
         </div>
-      <div class="uk-margin-large-top home-background uk-background-norepeat uk-background-cover">
+      <div class="uk-margin-large-top home-background uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color">
         <div class="uk-container uk-container-large">
           <gif-slider [gifs]="gifs" [link]="true" [linkTitle]="'learn more'" [route]="'/about'">
           </gif-slider>
@@ -219,11 +219,11 @@
   </div>
 </div>
 <helper div="connect-test"></helper>
-<div class="contact-background uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color">
+<div class="contact-banner uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color">
   <div class="uk-container uk-container-large uk-section">
     <div class="uk-flex uk-flex-middle uk-padding uk-child-width-1-1@s uk-child-width-1-2@m" uk-grid>
       <div class="uk-text-center">
-        <img width="237" height="250" src="../../assets/contact/2.png">
+        <img width="237" height="250" src="../../assets/contact/1.png">
       </div>
       <div>
         <h1>Let us Help you Develop a Collaborative Science Gateway. It is fast. It is reliable.</h1>

src/app/contact/contact.component.html

@@ -1,10 +1,10 @@
-<div *ngIf="showLoading" class="uk-margin-large">
+<div class="contact-background image-front-topbar uk-section-large uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light" tm-header-transparent-placeholder="">
-    <div class="uk-animation-fade uk-margin-top  uk-width-1-1" role="alert"><span class="loading-gif  uk-align-center" ></span></div>
-</div>
-<div *ngIf="!showLoading" class="image-front-topbar home-background uk-section-large uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light">
     <div style=" min-height: 350px;"  class="uk-section uk-padding-remove-bottom uk-flex uk-flex-middle">
         <div class="uk-align-center">
-            <div class="uk-container uk-container-large">
+            <div *ngIf="showLoading" class="uk-margin-large">
+                <div class="uk-animation-fade uk-margin-top  uk-width-1-1" role="alert"><span class="loading-gif  uk-align-center" ></span></div>
+            </div>
+            <div *ngIf="!showLoading" class="uk-container uk-container-large">
                 <div class="uk-grid-divider" uk-grid>
                     <div class="uk-width-1-2@m uk-width-1-1@s">
                         <h4 class="uk-margin-auto uk-h4 uk-text-bold">Contact us and create your community profile</h4>

src/app/learn-how/learn-how.component.ts

@@ -10,7 +10,7 @@ import {FAQ} from "../openaireLibrary/utils/entities/FAQ";
     template: `
       <div class="image-front-topbar" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light" tm-header-transparent-placeholder="">
         <div  style=" min-height: calc(7.89999px + 60vh);"
-              class="uk-padding-remove-bottom cloud-background uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color" >
+              class="uk-padding-remove-bottom about-background uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color" >
             <div class="uk-section uk-margin-large-top">
               <div class="uk-container uk-container-large">
                   <div class="uk-margin-large-top" uk-grid>
@@ -65,12 +65,12 @@ import {FAQ} from "../openaireLibrary/utils/entities/FAQ";
               </div>
             </div>
         </div>
-        <div class="uk-section">
+        <div class="cloud-abstract uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color">
           <div class="uk-container uk-container-large">
             <gif-slider [gifs]="gifs"></gif-slider>
           </div>
         </div>
-        <div class="contact-background uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color">
+        <div class="contact-banner uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color">
             <div class="uk-container uk-container-large uk-section">
                 <div class="uk-flex uk-flex-middle uk-child-width-1-1@s uk-child-width-1-2@m" uk-grid>
                   <div>

src/app/learn-how/learnInDepth/learn-in-depth.component.ts

@@ -8,7 +8,7 @@ import {EnvProperties}          from '../../openaireLibrary/utils/properties/env
   selector: 'learn-in-depth',
   template: `
       <div class="image-front-topbar uk-section-overlap uk-position-relative uk-preserve-color" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light" tm-header-transparent-placeholder="">
-        <div class="cloud1-background uk-background-norepeat uk-background-cover uk-section uk-padding-remove-bottom" >
+        <div class="cloud-background uk-background-norepeat uk-background-cover uk-section uk-padding-remove-bottom" >
           <div class="uk-container uk-container-large uk-section">
             <div uk-grid>
               <div class="uk-margin-large-top uk-width-3-4@m uk-width-1-1@s">
@@ -162,13 +162,13 @@ import {EnvProperties}          from '../../openaireLibrary/utils/properties/env
                 </div>
               </div>
             </div>
-          <div class="contact-background uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color">
+          <div class="contact-banner uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color">
             <div class="uk-container uk-container-large uk-section">
               <div class="uk-flex uk-flex-middle uk-padding uk-child-width-1-1@s" uk-grid>
 
                 <div class="uk-width-1-3@m">
                   <div class="uk-margin-left">
-                    <img width="330" height="250" src="../../assets/contact/3.png">
+                    <img width="330" height="250" src="../../assets/contact/2.png">
                   </div>
                 </div>
                 <div class="uk-padding-remove-vertical uk-padding-large uk-margin-large-left uk-width-3-5@m">

src/assets/connect-custom.css

@@ -50,28 +50,37 @@
   background-color: rgb(255, 255, 255);
 }
 
+.contact-banner {
+  background-color: #CFDEF1;
+}
+
 .contact-background {
   background-image: url("./contact/background.png") !important;
   background-color: rgb(255, 255, 255);
 }
 
-.banner-background {
+.about-background {
-  background-image: url("./banner/background.png") !important;
+  background-image: url("./about/background.png") !important;
   background-color: rgb(255, 255, 255);
 }
 
 .cloud-background {
-  background-image: url("./cloud/background.png") !important;
+    background-image: url("./cloud/background.png") !important;
-  background-color: rgb(255, 255, 255);
-}
-
-.cloud1-background {
-    background-image: url("./cloud/1.png") !important;
     background-color: rgb(255, 255, 255);
 }
 
+.cloud-abstract {
+  background-image: url("./cloud/abstract.png") !important;
+  background-color: rgb(255, 255, 255);
+}
+
+.banner-background {
+  background-image: url("banner/background.png") !important;
+  background-color: rgb(255, 255, 255);
+}
+
 .home-background {
-  background-image: url("home/background.jpg") !important;
+  background-image: url("home/background.png") !important;
   background-color: rgb(255, 255, 255);
 }
 
@@ -239,4 +248,4 @@ div:not(.connect_App) bottom .uk-totop{
 .img-sketch {
     height:20%;
 }
-*/
+*/