<!-- Mömax Menu Template --> <style type='text/css'> .spotPreviewDefault { width: 1920px; height: 1080px; } @font-face { font-family: 'Quintus'; src: url('fonts/Quintus_BOLD.ttf'); font-weight: 700; } @font-face { font-family: 'Quintus'; src: url('fonts/Quintus_REG.ttf'); font-weight: 500; } @font-face { font-family: 'ManusTrial'; src: url('fonts/Manus.ttf'); font-weight: 500; } @font-face { font-family: 'Lubalin'; src: url('fonts/Lubalin Graph Book Regular.ttf'); font-weight: 500; } {{divId}} .container { position: relative; width: 100%; height: 100%; overflow: hidden; background-image: url({{{mediaPath}}}content/media/public/media/moemax_tafel_bg_logo.png); color: white; } {{divId}} .content-wrapper { width: 100%; height: 100%; /*animation: fadeOut 1.0s ease 8.9s both;*/ } {{divId}} .text-header { position: absolute; top: 81px; left: 77px; font-family: 'ManusTrial'; font-size: 110px; max-width: 75%; animation: fadeIn 1s linear 1s both; } {{divId}} .product { position: absolute; width: 50%; } {{divId}} .product-img { position: absolute; top: 140px; width: 100%; height: 390px; display: flex; justify-content: center; align-items: center; } {{divId}} .product-img img { max-width: 830px; max-height: 390px; } {{divId}} .product-price { position: absolute; font-family: 'ManusTrial'; font-size: 184px; top: -30px; left: 77px; /*animation-iteration-count: infinite; animation-direction: alternate; animation-name: highlightZoom; animation-duration: 1s; animation-timing-function: ease-in-out;*/ } {{divId}} .product-price span { animation: fadeIn 1s linear 2.0s both; } {{divId}} .product-price sup { font-size: 103px; } {{divId}} .product-name { position: absolute; top: 520px; left: 78px; font-family: 'ManusTrial'; font-size: 80px; max-width: 85%; animation: fadeIn 1s linear 2.1s both; } {{divId}} .product-description { position: absolute; top: 645px; left: 78px; font-family: 'Lubalin', sans-serif; font-size: 27px; max-width: 85%; height: 120px; animation: fadeIn 1s linear 2.2s both; } {{divId}} #product1 { top: 250px; animation: scaleFade 1.2s ease 0.5s both; } {{divId}} #product1 .product-price { animation: bounceAnim 8s ease-in-out 3s both infinite; } {{divId}} #product1 img { animation: productScale 5s ease 1.0s both infinite; } {{divId}} #product2 { top: 250px; left: 50%; animation: scaleFade 1.2s ease 0.7s both; } {{divId}} #product2 .product-price { animation: bounceAnim 8s ease-in-out 4s both infinite; } {{divId}} #product2 img { animation: productScale 5s ease-in-out 1.3s both infinite; } @keyframes fadeIn { from {opacity: 0;} to {opacity: 1.0;} } @keyframes fadeOut { from {opacity: 1.0;} to {opacity: 0;} } @keyframes scaleFade { from {opacity: 0; transform:scale(0.95);} to {opacity: 1.0; transform:scale(1.0);} } @keyframes highlightZoom { 0% { transform: scale(1.0); } 100% {transform: scale(1.1); } } @keyframes bounceAnim { 0% { transform: scale(1.0); } 2% {transform: scale(1.3); } 4% {transform: scale(1.0); } 6% {transform: scale(1.08); } 8% {transform: scale(1.0); } 10% {transform: scale(1.03); } 12% {transform: scale(1.0); } 14% {transform: scale(1.015); } 16% {transform: scale(1.0); } 18% {transform: scale(1.005); } 20% {transform: scale(1.0); } } @keyframes productScale { 0% { transform: scale(1.0); } 50% { transform: scale(1.04); } 100% { transform: scale(1.0); } } </style> <div class='container'> <div class='content-wrapper'> <div class='text-header'> <span>{{ headline }}</span> </div> <div class='product' id='product1'> <div class='product-price'><span>{{ productPrice1 }}</span></div> <div class='product-img'> <img src='{{ productImage1 }}' /> </div> <div class='product-name'><span>{{ productName1 }}</span></div> <div class='product-description'><span>{{{nl2br productDescription1 }}}</span></div> </div> <div class='product' id='product2'> <div class='product-price'><span>{{ productPrice2 }}</span></div> <div class='product-img'> <img src='{{ productImage2 }}' /> </div> <div class='product-name'><span>{{ productName2 }}</span></div> <div class='product-description'><span>{{{nl2br productDescription2 }}}</span></div> </div> </div> </div> <script type='text/javascript'> /*Split price by comma*/ function templateOnPlay{{playerId}}(player) { setTimeout(function(){ $('.product-price span').each(function(){ if($(this).text().indexOf(',') > 0){ let text = $(this).text(); let data = text.split(','); $(this).html(data[0]+'<sup> '+data[1]+'</sup>'); } }); var header = fitty('.text-header span', { minSize: 60, maxSize: 110 }); header[0].fit(); var names = fitty('.product-name span', { minSize: 60, maxSize: 80 }); names[0].fit(); names[1].fit(); var names = fitty('.product-description span', { minSize: 25, maxSize: 30 }); names[0].fit(); names[1].fit(); }, 100); } </script>