<!-- Mömax Template 2 --> <style type='text/css'> .spotPreviewDefault { width: 1920px; height: 1080px; } @font-face { font-family: 'OpenSans'; src: url('fonts/OpenSans-Regular.ttf'); font-weight: 500; } @font-face { font-family: 'OpenSans'; src: url('fonts/OpenSans-Bold.ttf'); font-weight: 700; } @font-face { font-family: 'OpenSans'; src: url('fonts/OpenSans-ExtraBold.ttf'); font-weight: 900; } {{divId}} .container { position: relative; width: 1920px; height: 1080px; overflow: hidden; background-color: white; } {{divId}} .content-wrapper { position: relative; width: 100%; height: 100%; animation: slideToLeft 1.0s ease-in-out calc({{realSpotLength}}s - 1s) both; } {{divId}} .text-header { position: absolute; left: 50px; top: 50px; font-size: 4.5rem; font-family: 'OpenSans', sans-serif; font-weight: 700; line-height: 1; color: #7eaf31; animation: fadeIn 1.0s ease 0.5s both; } {{divId}} .circle { position:absolute; bottom: -380px; left: -200px; width: 1000px; padding-top: 1000px; border-radius: 100%; background-color: #7eaf31; z-index: 2; animation: scaleUp 1.0s ease 0.8s both; } {{divId}} .product-title { position: absolute; left: 150px; bottom: 400px; text-align: center; font-size: 4rem; font-family: 'OpenSans', sans-serif; font-weight: 700; line-height: 1; color: white; transform: rotateZ(-10deg); z-index: 2; animation: fadeIn 1.0s ease 1.6s both; } {{divId}} .product-price { position: absolute; left: 75px; bottom: 50px; text-align: center; font-size: 18rem; font-weight: 900; font-family: 'OpenSans', sans-serif; color: white; z-index: 2; transform: rotateZ(-10deg); animation: fadeIn 1.0s ease 1.8s both; } {{divId}} .product-price div { animation: bounceAnim 5s ease-in-out 3s both infinite; } {{divId}} .product-price sup { font-size: 9.5rem; } {{divId}} .product-image { position: absolute; left: 45%; top: 15%; height: 75%; width: 50%; display: flex; align-items: center; justify-content: left; background-image: url({{ productImage }}); background-size: contain; background-position: left center; background-repeat: no-repeat; animation: fromRight 1.0s ease 0.5s both; } {{divId}} .product-image div { animation: productScale 5s ease 0s both infinite; } {{divId}} .product-image img { height: 90%; } {{divId}} .logo { position: absolute; top: 50px; right: 50px; animation: scaleUp 0.5s ease 1.0s both; } {{divId}} .logo img { width: 260px; } @keyframes fadeIn { from {opacity: 0;} to {opacity: 1.0;} } @keyframes fadeOut { from {opacity: 1.0;} to {opacity: 0;} } @keyframes scaleUp { 0% {transform: scale(0);} 70% {transform: scale(1.05);} 100% {transform: scale(1);} } @keyframes fromRight { 0% {left: 100%;} 70% {left: 44%;} 100% {left: 45%;} } @keyframes productScale { 0% { transform: scale(1.0); } 50% { transform: scale(0.96); } 100% { transform: scale(1.0); } } @keyframes bounceAnim { 0% { transform: scale(1.0); } 3% {transform: scale(1.3); } 6% {transform: scale(1.0); } 9% {transform: scale(1.08); } 12% {transform: scale(1.0); } 15% {transform: scale(1.03); } 18% {transform: scale(1.0); } 21% {transform: scale(1.015); } 24% {transform: scale(1.0); } 27% {transform: scale(1.005); } 30% {transform: scale(1.0); } } @keyframes slideToLeft { from { margin-left: 0%; } to {margin-left: -100%; } } </style> <div class='container'> <div class='content-wrapper'> <div class='text-header'> {{{nl2br headline }}} </div> <div class='circle'></div> <div class='product-title'> {{{nl2br productName }}} </div> <div class='product-price'> <div>{{ productPrice }}</div> </div> <div class='product-image'> <div><img src='' /></div> </div> <div class='logo'> <img src='{{{mediaPath}}}content/media/public/media/moemax.png' /> </div> </div> </div> <script type='text/javascript'> /*Split price by comma*/ function templateOnPlay{{playerId}}(player) { setTimeout(function(){ $('.product-price div').each(function(){ if($(this).text().indexOf(',') > 0){ let text = $(this).text(); let data = text.split(','); $(this).html(data[0]+'<sup>'+data[1]+'</sup>'); } }); }, 100); } </script>