<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>
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');
--- /dev/null
+{
+"version": 3,
+"mappings": "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",
+"sources": ["style.sass"],
+"names": [],
+"file": "style.css"
+}
\ No newline at end of file