From: nael <nael@cubedesigners.com>
Date: Mon, 26 Nov 2018 13:28:17 +0000 (+0100)
Subject: wait #2362 @3.3
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=8a3f247add2a8eecce0033ace020172d95b477aa;p=Animations.git

wait #2362 @3.3
---

diff --git a/AccordHotel-p112/index.html b/AccordHotel-p112/index.html
index 114cc72..4387c08 100644
--- a/AccordHotel-p112/index.html
+++ b/AccordHotel-p112/index.html
@@ -10,10 +10,10 @@
 
 <div class="container">
     <div class="bubble">
-        <div class="bubble-item1">
-            <img class="bubble-item1__img1" src="src/img%20(1).svg" alt="">
+        <div class="bubble-item bubble-item1">
+            <img class="img bubble-item1__img1" src="src/img%20(1).svg" alt="">
         </div>
-        <p class="bubble-desc1">
+        <p class="description bubble-desc1">
             - Hotel development<br> know-how<br>
             - Residential development <br>expertise<br>
             - Partnership made easy<br>
@@ -21,10 +21,10 @@
         </p>
     </div>
     <div class="bubble">
-        <div class="bubble-item2">
-            <img class="bubble-item2__img2" src="src/img%20(2).svg" alt="">
+        <div class="bubble-item bubble-item2">
+            <img class="img bubble-item2__img2" src="src/img%20(2).svg" alt="">
         </div>
-        <p class="bubble-desc2">
+        <p class="description bubble-desc2">
             - Reliable systems<br>
             - A robust distribution <br>eco-system<br>
             - From ideation to hotel<br>solution deployment<br>
@@ -32,34 +32,76 @@
         </p>
     </div>
     <div class="bubble">
-        <div class="bubble-item3">
-            <img class="bubble-item3__img3" src="src/img%20(3).svg" alt="">
+        <div class="bubble-item bubble-item3">
+            <img class="img bubble-item3__img3" src="src/img%20(3).svg" alt="">
         </div>
+        <p class="description bubble-desc3">
+            - Our.com presence<br>
+            - All Connect <br>
+            - Connect our hotels<br>with our key clients<br>
+            - Partner websites<br>a key support<br>
+            - The App <br>
+            - Social Media <br>
+            - Brand-building<br>campaigns<br>
+            - Massive presence<br>at tradeshows<br>
+        </p>
     </div>
     <div class="bubble">
-        <div class="bubble-item4">
-            <img class="bubble-item4__img4" src="src/img%20(4).svg" alt="">
+        <div class="bubble-item bubble-item4">
+            <img class="img bubble-item4__img4" src="src/img%20(4).svg" alt="">
         </div>
+        <p class="description bubble-desc4">
+            - Reservation call centres<br>
+            - Business opportunities<br>
+            - Le Club AccorHotels<br>
+            - Revenue management<br>
+            - Seasonal deals<br>
+            - Develop new markets<br>
+        </p>
     </div>
     <div class="bubble">
-        <div class="bubble-item5">
-            <img class="bubble-item5__img5" src="src/img%20(5).svg" alt="">
+        <div class="bubble-item bubble-item5">
+            <img class="img bubble-item5__img5" src="src/img%20(5).svg" alt="">
         </div>
+        <p class="description bubble-desc5">
+            - Guest knowledge<br>
+            - Guest loyalty<br>
+            - Customer experience<br>
+            - Customer feedback<br>
+            - Customer care<br>
+        </p>
     </div>
     <div class="bubble">
-        <div class="bubble-item6">
-            <img class="bubble-item6__img6" src="src/img%20(6).svg" alt="">
+        <div class="bubble-item bubble-item6">
+            <img class="img bubble-item6__img6" src="src/img%20(6).svg" alt="">
         </div>
+        <p class="description bubble-desc6">
+            - Operational expertise<br>
+            - A complete set of<br>dashboards for hotels<br>and owners<br>
+            - Security and safety<br>
+            - Risk management<br>
+            - Procurement power<br>
+        </p>
     </div>
     <div class="bubble">
-        <div class="bubble-item7">
-            <img class="bubble-item7__img7" src="src/img%20(7).svg" alt="">
+        <div class="bubble-item bubble-item7">
+            <img class="img bubble-item7__img7" src="src/img%20(7).svg" alt="">
         </div>
+        <p class="description bubble-desc7">
+            - Section<br>
+            - Learning & development<br>
+            - Employee benefits<br>
+            - Diversity and inclusion<br>
+        </p>
     </div>
     <div class="bubble">
-        <div class="bubble-item8">
-            <img class="bubble-item8__img8" src="src/img%20(8).svg" alt="">
+        <div class="bubble-item bubble-item8">
+            <img class="img bubble-item8__img8" src="src/img%20(8).svg" alt="">
         </div>
+        <p class="description bubble-desc8">
+            - Acting for positive<br>hospitality<br>
+            - Planet 21 - Acting Here !<br>
+        </p>
     </div>
 </div>
 
diff --git a/AccordHotel-p112/main.js b/AccordHotel-p112/main.js
index e69de29..a7778a9 100644
--- a/AccordHotel-p112/main.js
+++ b/AccordHotel-p112/main.js
@@ -0,0 +1,26 @@
+let tl = new TimelineMax();
+
+    tl.from('.bubble-item1',0.5,{display: 'none',top: 0, opacity:0});
+    tl.from('.bubble-desc1',0.4,{opacity: 0});
+
+    tl.from('.bubble-item2',0.5,{display: 'none',top: 0, opacity:0}, '+=0.2');
+    tl.from('.bubble-desc2',0.4,{opacity: 0});
+
+    tl.from('.bubble-item3',0.5,{display: 'none',top: 50, opacity:0}, '+=0.2');
+    tl.from('.bubble-desc3',0.4,{opacity: 0});
+
+    tl.from('.bubble-item4',0.5,{display: 'none',top: 200, opacity:0}, '+=0.2');
+    tl.from('.bubble-desc4',0.4,{opacity:0});
+
+    tl.from('.bubble-item5',0.5,{display: 'none',top: 200, opacity:0}, '+=0.2');
+    tl.from('.bubble-desc5',0.4,{opacity: 0});
+
+    tl.from('.bubble-item6',0.5,{display: 'none',top: 300, opacity:0}, '+=0.2');
+    tl.from('.bubble-desc6',0.4,{opacity: 0});
+
+    tl.from('.bubble-item7',0.5,{display: 'none',top: 440, opacity:0}, '+=0.2');
+    tl.from('.bubble-desc7',0.4,{opacity: 0});
+
+    tl.from('.bubble-item8',0.5,{display: 'none',top: 440, opacity:0}, '+=0.2');
+    tl.from('.bubble-desc8',0.4,{opacity: 0});
+
diff --git a/AccordHotel-p112/style.sass b/AccordHotel-p112/style.sass
index afea85b..b3883a4 100644
--- a/AccordHotel-p112/style.sass
+++ b/AccordHotel-p112/style.sass
@@ -10,10 +10,12 @@ $bubble-bg: #B2D1C8
   display: none
   position: absolute
 .container
-  background-image: url("bg.png")
+  //background-image: url("bg.png")
+  background: darksalmon
   width: 540px
   height: 749px
 .bubble
+  &-item
   &-item1
     width: 100px
     height: 100px
@@ -32,9 +34,10 @@ $bubble-bg: #B2D1C8
     color: white
     font-size: 7px
     position: absolute
-    top: 227px
-    left: 125px
+    top: 226px
+    left: 123px
     font-family: typo
+    line-height: 1.35
   &-item2
     width: 100px
     height: 100px
@@ -53,9 +56,10 @@ $bubble-bg: #B2D1C8
     color: white
     font-size: 7px
     position: absolute
-    top: 227px
-    left: 345px
+    top: 226px
+    left: 344px
     font-family: typo
+    line-height: 1.35
   &-item3
     width: 100px
     height: 100px
@@ -67,10 +71,17 @@ $bubble-bg: #B2D1C8
     display: flex
     align-items: center
     justify-content: center
-
     &__img3
       width: 62px
       margin-bottom: 8px
+  &-desc3
+    color: white
+    font-size: 7px
+    position: absolute
+    top: 299px
+    left: 233px
+    font-family: typo
+    line-height: 1.4
   &-item4
     width: 100px
     height: 100px
@@ -82,10 +93,17 @@ $bubble-bg: #B2D1C8
     display: flex
     align-items: center
     justify-content: center
-
     &__img4
       width: 68px
       margin-bottom: 14px
+  &-desc4
+    color: white
+    font-size: 7px
+    position: absolute
+    top: 440px
+    left: 123px
+    font-family: typo
+    line-height: 1.5
   &-item5
     width: 100px
     height: 100px
@@ -100,6 +118,14 @@ $bubble-bg: #B2D1C8
     &__img5
       width: 63px
       margin-bottom: -3px
+  &-desc5
+    color: white
+    font-size: 7px
+    position: absolute
+    top: 440px
+    left: 344px
+    font-family: typo
+    line-height: 1.5
   &-item6
     width: 100px
     height: 100px
@@ -111,10 +137,17 @@ $bubble-bg: #B2D1C8
     display: flex
     align-items: center
     justify-content: center
-
     &__img6
       width: 58px
       margin-bottom: -5px
+  &-desc6
+    color: white
+    font-size: 7px
+    position: absolute
+    top: 548px
+    left: 233px
+    font-family: typo
+    line-height: 1.4
   &-item7
     width: 100px
     height: 100px
@@ -126,10 +159,17 @@ $bubble-bg: #B2D1C8
     display: flex
     align-items: center
     justify-content: center
-
     &__img7
       width: 80px
       margin-bottom: -4px
+  &-desc7
+    color: white
+    font-size: 7px
+    position: absolute
+    top: 655px
+    left: 123px
+    font-family: typo
+    line-height: 1.45
   &-item8
     width: 100px
     height: 100px
@@ -144,4 +184,11 @@ $bubble-bg: #B2D1C8
     &__img8
       width: 66px
       margin-bottom: -6px
-
+  &-desc8
+    color: white
+    font-size: 7px
+    position: absolute
+    top: 655px
+    left: 344px
+    font-family: typo
+    line-height: 1.4
\ No newline at end of file