]> _ Git - Animations.git/commitdiff
wait #2362 @0.5
authornael <nael@cubedesigners.com>
Mon, 17 Dec 2018 11:18:07 +0000 (12:18 +0100)
committernael <nael@cubedesigners.com>
Mon, 17 Dec 2018 11:18:07 +0000 (12:18 +0100)
AccordHotel-p112/DalaFloda.woff [new file with mode: 0644]
AccordHotel-p112/bg.png
AccordHotel-p112/index.html
AccordHotel-p112/main.js
AccordHotel-p112/style.css [new file with mode: 0644]
AccordHotel-p112/style.css.map [new file with mode: 0644]
AccordHotel-p112/style.sass

diff --git a/AccordHotel-p112/DalaFloda.woff b/AccordHotel-p112/DalaFloda.woff
new file mode 100644 (file)
index 0000000..ca64f28
Binary files /dev/null and b/AccordHotel-p112/DalaFloda.woff differ
index 355c4c90f283ce2955a7ef38845c53747d2cbf63..a6e3d0c3775d8fdc9f35d318b609b84d222aac84 100644 (file)
Binary files a/AccordHotel-p112/bg.png and b/AccordHotel-p112/bg.png differ
index 4387c08a844b59c4f25b3c7ebca2bb51f9f41a84..0cf9286c1bf35394a978d31fda83970dfd143859 100644 (file)
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
-<canvas id="canvas" width="540" height="749"></canvas>
+<canvas id="canvas" width="1078" height="750"></canvas>
 
 <div class="container">
-    <div class="bubble">
-        <div class="bubble-item bubble-item1">
-            <img class="img bubble-item1__img1" src="src/img%20(1).svg" alt="">
+    <h1 class="title"> As a leading hotel<br>Operator and<br>Franchiser worldwide,<br>we have
+    developed<br>a unique know-how<br>in boosting hotel<br>performances.</h1>
+    <div class="bubble-contain">
+        <div class="bubble">
+            <div class="bubble-item bubble-item1">
+                <img class="img bubble-item1__img1" src="src/img%20(1).svg" alt="">
+            </div>
+            <p class="description bubble-desc1">
+                - Hotel development<br> know-how<br>
+                - Residential development <br>expertise<br>
+                - Partnership made easy<br>
+                - Design & create<br> destinations
+            </p>
         </div>
-        <p class="description bubble-desc1">
-            - Hotel development<br> know-how<br>
-            - Residential development <br>expertise<br>
-            - Partnership made easy<br>
-            - Design & create<br> destinations
-        </p>
-    </div>
-    <div class="bubble">
-        <div class="bubble-item bubble-item2">
-            <img class="img bubble-item2__img2" src="src/img%20(2).svg" alt="">
+        <div class="bubble">
+            <div class="bubble-item bubble-item2">
+                <img class="img bubble-item2__img2" src="src/img%20(2).svg" alt="">
+            </div>
+            <p class="description bubble-desc2">
+                - Reliable systems<br>
+                - A robust distribution <br>eco-system<br>
+                - From ideation to hotel<br>solution deployment<br>
+                - My Venue Finder
+            </p>
         </div>
-        <p class="description bubble-desc2">
-            - Reliable systems<br>
-            - A robust distribution <br>eco-system<br>
-            - From ideation to hotel<br>solution deployment<br>
-            - My Venue Finder
-        </p>
-    </div>
-    <div class="bubble">
-        <div class="bubble-item bubble-item3">
-            <img class="img bubble-item3__img3" src="src/img%20(3).svg" alt="">
+        <div class="bubble">
+            <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>
-        <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-item bubble-item4">
-            <img class="img bubble-item4__img4" src="src/img%20(4).svg" alt="">
+        <div class="bubble">
+            <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>
-        <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-item bubble-item5">
-            <img class="img bubble-item5__img5" src="src/img%20(5).svg" alt="">
+        <div class="bubble">
+            <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>
-        <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-item bubble-item6">
-            <img class="img bubble-item6__img6" src="src/img%20(6).svg" alt="">
+        <div class="bubble">
+            <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>
-        <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-item bubble-item7">
-            <img class="img bubble-item7__img7" src="src/img%20(7).svg" alt="">
+        <div class="bubble">
+            <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>
-        <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-item bubble-item8">
-            <img class="img bubble-item8__img8" src="src/img%20(8).svg" alt="">
+        <div class="bubble">
+            <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>
-        <p class="description bubble-desc8">
-            - Acting for positive<br>hospitality<br>
-            - Planet 21 - Acting Here !<br>
-        </p>
     </div>
 </div>
 
 
 
+
 <script src="jQuery.js"></script>
 <script src="TweenMax.min.js"></script>
 <script src="TimelineMax.min.js"></script>
index 6003c4422a8fc3818982e9ab74086613d6ca0c01..84ee16f35398101222ab30322e89e6d3e9812ad0 100644 (file)
@@ -1,13 +1,16 @@
 let tl = new TimelineMax();
 
-    tl.from('.bubble-item1',0.5,{display: 'none',top: 0, opacity:0});
-    tl.from('.bubble-item2',0.5,{display: 'none',top: 0, opacity:0}, '-=0.3');
-    tl.from('.bubble-item3',0.5,{display: 'none',top: 50, opacity:0}, '-=0.3');
-    tl.from('.bubble-item4',0.5,{display: 'none',top: 200, opacity:0}, '-=0.3');
-    tl.from('.bubble-item5',0.5,{display: 'none',top: 200, opacity:0}, '-=0.3');
-    tl.from('.bubble-item6',0.5,{display: 'none',top: 300, opacity:0}, '-=0.3');
-    tl.from('.bubble-item7',0.5,{display: 'none',top: 440, opacity:0}, '-=0.3');
-    tl.from('.bubble-item8',0.5,{display: 'none',top: 440, opacity:0}, '-=0.3');
+    tl.from('.title',1,{left: -20,opacity:0});
+    tl.to('.bubble',0,{opacity:1});
+
+    tl.fromTo('.bubble-item1',0.5,{display: 'flex',left:223,top: 300},{display: 'flex',top: 115, left:113, opacity:1});
+    tl.fromTo('.bubble-item2',0.5,{display: 'flex',left:223,top: 300},{display: 'flex',top: 115, left:334, opacity:1}, '-=0.3');
+    tl.fromTo('.bubble-item3',0.5,{display: 'flex',left:223,top: 300},{display: 'flex',top: 187, left:223, opacity:1}, '-=0.3');
+    tl.fromTo('.bubble-item4',0.5,{display: 'flex',left:223,top: 300},{display: 'flex',top: 330, left:113, opacity:1}, '-=0.3');
+    tl.fromTo('.bubble-item5',0.5,{display: 'flex',left:223,top: 300},{display: 'flex',top: 330, left:334, opacity:1}, '-=0.3');
+    tl.fromTo('.bubble-item6',0.5,{display: 'flex',left:223,top: 300},{display: 'flex',top: 437, left:223, opacity:1}, '-=0.3');
+    tl.fromTo('.bubble-item7',0.5,{display: 'flex',left:223,top: 300},{display: 'flex',top: 544, left:113,opacity:1}, '-=0.3');
+    tl.fromTo('.bubble-item8',0.5,{display: 'flex',left:223,top: 300},{display: 'flex',top: 544, left:334, opacity:1}, '-=0.3');
 
 
     tl.from('.bubble-desc1',0.4,{opacity: 0}, '-=0.1');
diff --git a/AccordHotel-p112/style.css b/AccordHotel-p112/style.css
new file mode 100644 (file)
index 0000000..339aaac
--- /dev/null
@@ -0,0 +1,219 @@
+* {
+  margin: 0;
+  padding: 0; }
+
+@font-face {
+  font-family: "typo";
+  src: url("font.woff") format("woff"); }
+@font-face {
+  font-family: "DalaFloda";
+  src: url("DalaFloda.woff") format("woff"); }
+#canvas {
+  display: none;
+  position: absolute; }
+
+.container {
+  width: 1078px;
+  height: 750px;
+  background: rosybrown; }
+
+.title {
+  color: white;
+  position: absolute;
+  top: 410px;
+  left: 45px;
+  font-size: 29px;
+  line-height: 1.1; }
+
+.bubble {
+  opacity: 0; }
+  .bubble-contain {
+    position: absolute;
+    left: 540px;
+    top: 0; }
+  .bubble-item1 {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    background: #B2D1C8;
+    position: absolute;
+    left: 113px;
+    top: 115px;
+    display: flex;
+    align-items: center;
+    justify-content: center; }
+    .bubble-item1__img1 {
+      width: 71px;
+      margin-bottom: 8px; }
+  .bubble-desc1 {
+    color: white;
+    font-size: 7px;
+    position: absolute;
+    top: 226px;
+    left: 123px;
+    font-family: typo;
+    line-height: 1.35;
+    width: 96px; }
+  .bubble-item2 {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    background: #B2D1C8;
+    position: absolute;
+    left: 334px;
+    top: 115px;
+    display: flex;
+    align-items: center;
+    justify-content: center; }
+    .bubble-item2__img2 {
+      width: 81px;
+      margin-bottom: 12px; }
+  .bubble-desc2 {
+    color: white;
+    font-size: 7px;
+    position: absolute;
+    top: 226px;
+    left: 344px;
+    font-family: typo;
+    line-height: 1.35;
+    width: 96px; }
+  .bubble-item3 {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    background: #B2D1C8;
+    position: absolute;
+    left: 223px;
+    top: 187px;
+    display: flex;
+    align-items: center;
+    justify-content: center; }
+    .bubble-item3__img3 {
+      width: 62px;
+      margin-bottom: 8px; }
+  .bubble-desc3 {
+    color: white;
+    font-size: 7px;
+    position: absolute;
+    top: 299px;
+    left: 233px;
+    font-family: typo;
+    line-height: 1.4;
+    width: 96px; }
+  .bubble-item4 {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    background: #B2D1C8;
+    position: absolute;
+    left: 113px;
+    top: 330px;
+    display: flex;
+    align-items: center;
+    justify-content: center; }
+    .bubble-item4__img4 {
+      width: 68px;
+      margin-bottom: 14px; }
+  .bubble-desc4 {
+    color: white;
+    font-size: 7px;
+    position: absolute;
+    top: 440px;
+    left: 123px;
+    font-family: typo;
+    line-height: 1.5;
+    width: 96px; }
+  .bubble-item5 {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    background: #B2D1C8;
+    position: absolute;
+    left: 334px;
+    top: 330px;
+    display: flex;
+    align-items: center;
+    justify-content: center; }
+    .bubble-item5__img5 {
+      width: 63px;
+      margin-bottom: -3px; }
+  .bubble-desc5 {
+    color: white;
+    font-size: 7px;
+    position: absolute;
+    top: 440px;
+    left: 344px;
+    font-family: typo;
+    line-height: 1.5;
+    width: 96px; }
+  .bubble-item6 {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    background: #B2D1C8;
+    position: absolute;
+    left: 223px;
+    top: 437px;
+    display: flex;
+    align-items: center;
+    justify-content: center; }
+    .bubble-item6__img6 {
+      width: 58px;
+      margin-bottom: -5px; }
+  .bubble-desc6 {
+    color: white;
+    font-size: 7px;
+    position: absolute;
+    top: 548px;
+    left: 233px;
+    font-family: typo;
+    line-height: 1.4;
+    width: 96px; }
+  .bubble-item7 {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    background: #B2D1C8;
+    position: absolute;
+    left: 113px;
+    top: 544px;
+    display: flex;
+    align-items: center;
+    justify-content: center; }
+    .bubble-item7__img7 {
+      width: 80px;
+      margin-bottom: -4px; }
+  .bubble-desc7 {
+    color: white;
+    font-size: 7px;
+    position: absolute;
+    top: 655px;
+    left: 123px;
+    font-family: typo;
+    line-height: 1.45;
+    width: 96px; }
+  .bubble-item8 {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    background: #B2D1C8;
+    position: absolute;
+    left: 334px;
+    top: 544px;
+    display: flex;
+    align-items: center;
+    justify-content: center; }
+    .bubble-item8__img8 {
+      width: 66px;
+      margin-bottom: -6px; }
+  .bubble-desc8 {
+    color: white;
+    font-size: 7px;
+    position: absolute;
+    top: 655px;
+    left: 344px;
+    font-family: typo;
+    line-height: 1.4;
+    width: 96px; }
+
+/*# sourceMappingURL=style.css.map */
diff --git a/AccordHotel-p112/style.css.map b/AccordHotel-p112/style.css.map
new file mode 100644 (file)
index 0000000..badad92
--- /dev/null
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "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",
+"sources": ["style.sass"],
+"names": [],
+"file": "style.css"
+}
\ No newline at end of file
index da5dcbd4f1a81c0e2df8b282c7e1b6b81105670b..853279f0dfabebe7fc2045b292a854875ffadb1f 100644 (file)
@@ -6,13 +6,29 @@ $bubble-bg: #B2D1C8
 @font-face
   font-family: "typo"
   src: url("font.woff") format('woff')
+@font-face
+  font-family: "DalaFloda"
+  src: url("DalaFloda.woff") format('woff')
 #canvas
   display: none
   position: absolute
 .container
-  width: 540px
-  height: 749px
+  width: 1078px
+  height: 750px
+  background: rosybrown
+.title
+  color: white
+  position: absolute
+  top: 410px
+  left: 45px
+  font-size: 29px
+  line-height: 1.1
 .bubble
+  opacity: 0
+  &-contain
+    position: absolute
+    left: 540px
+    top: 0
   &-item
   &-item1
     width: 100px
@@ -36,6 +52,7 @@ $bubble-bg: #B2D1C8
     left: 123px
     font-family: typo
     line-height: 1.35
+    width: 96px
   &-item2
     width: 100px
     height: 100px
@@ -58,6 +75,7 @@ $bubble-bg: #B2D1C8
     left: 344px
     font-family: typo
     line-height: 1.35
+    width: 96px
   &-item3
     width: 100px
     height: 100px
@@ -80,6 +98,7 @@ $bubble-bg: #B2D1C8
     left: 233px
     font-family: typo
     line-height: 1.4
+    width: 96px
   &-item4
     width: 100px
     height: 100px
@@ -102,6 +121,7 @@ $bubble-bg: #B2D1C8
     left: 123px
     font-family: typo
     line-height: 1.5
+    width: 96px
   &-item5
     width: 100px
     height: 100px
@@ -124,6 +144,7 @@ $bubble-bg: #B2D1C8
     left: 344px
     font-family: typo
     line-height: 1.5
+    width: 96px
   &-item6
     width: 100px
     height: 100px
@@ -146,6 +167,7 @@ $bubble-bg: #B2D1C8
     left: 233px
     font-family: typo
     line-height: 1.4
+    width: 96px
   &-item7
     width: 100px
     height: 100px
@@ -168,6 +190,7 @@ $bubble-bg: #B2D1C8
     left: 123px
     font-family: typo
     line-height: 1.45
+    width: 96px
   &-item8
     width: 100px
     height: 100px
@@ -189,4 +212,5 @@ $bubble-bg: #B2D1C8
     top: 655px
     left: 344px
     font-family: typo
-    line-height: 1.4
\ No newline at end of file
+    line-height: 1.4
+    width: 96px
\ No newline at end of file