Triple code promo

Format

Central

COMPLEXITÉ

Figma
🔥 Le code de ce scénario a été copié dans votre presse-papier
Preview
{"archived":0,"globalCss":null,"mainStage":null,"name":"Offre été FR - Triple code promo","stages":[{"__typename":"ScenarioStages","customScript":"https://img.perfmaker.net/985/JS/1653054634_test_tripple_code.js","displayTimeOnlyUntilClick":null,"formatContainer":{"__typename":"ScenarioStagesFormatContainer","closeButtonStyle":{"position":"absolute","top":"10px","right":"10px"},"coverStyle":{"background-color":"black","opacity":"0.6","transition":"opacity .5s"},"iframeStyle":{},"wrapperClose":{"bottom":"-100%","transition":"bottom ease .5s"},"wrapperHidden":{"height":"350px","max-width":"750px","width":"55vw","right":"50%","bottom":"-100%","transform":"translate(50%, 50%)","overflow":"hidden !important"},"wrapperOpen":{"bottom":"50%","transition":"bottom ease .5s"}},"htmlCloseButton":"\n\n<style>\n\n .lines{\n position: absolute;\n display:flex;\n justify-content:center;\n align-items:center;\n top: 1vh;\n right: 10px;\n width: 30px;\n height: 30px;\n cursor: pointer;\n background:transparent;\n border-radius:30px;\n }\n .line{\n position: absolute;\n background:black;\n width: 16px;\n height: 1px;\n transition: All ease .3s;\n }\n .lines:hover .line1{\n transform: rotate(0deg);\n height:2px;\n }\n .lines:hover .line2{\n transform: rotate(0deg);\n height:2px;\n }\n .line1{\n transform: rotate(45deg);\n }\n .line2{\n transform: rotate(-45deg);\n }\n @media only screen and (max-width: 1024px) {\n \t.perfmaker-sidebar-wrapper {\n height: 80% !important;\n width: 90% !important;\n \t}\n } \n\n</style>\n\n<div class=\"lines perfmaker-close-cross\">\n <div class=\"line1 line\"></div>\n <div class=\"line2 line\"></div>\n</div>","htmlContent":"<style>\n @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');\n\n@import url('https://fonts.googleapis.com/css2?family=Racing+Sans+One&display=swap');\n\n\n\n.pm-root{\n height: calc(100% - 8px);\n width: calc(100% - 8px);\n display: flex;\n flex-direction: column;\n align-items: center;\n background-color: white;\n border: 4px solid #4F4F4F;\n}\n.pm-top-container{\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.pm-logo{\n height: 100%;\n margin-top: 5vh;\n}\n.pm-title{\n font-family: 'Racing Sans One', cursive;\n text-transform: uppercase;\n color: #E74C3C;\n font-size: calc(10px + 1vh + 4vw);\n text-align: center;\n margin: 2vh 0 0 0;\n}\n\n.pm-bottom-container{\n width: 100%;\n height: 68vh;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-evenly;\n}\n.pm-left-container{\n display: flex;\n flex-direction: column;\n align-items: center;\n\n}\n.pm-right-container{\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.separator{\n width: 1px;\n height: 65%;\n background-color: black;\n}\n.pm-reduc{\n font-family: 'Racing Sans One', cursive;\n text-transform: uppercase;\n color: #E74C3C;\n font-size: calc(25px + 6vh + 2vw);\n text-align: center;\n margin: 2vh 0;\n line-height: 0.85em;\n}\n.pm-reduc span{\n font-size: calc(8px + .7vh + .5vw);\n color: #4F4F4F;\n font-family: 'Racing Sans One', cursive;\n}\n \n .pm-root h3 {\n font-family: 'Montserrat', sans-serif;\n font-size: calc(8px + .4vh + .4vw);\n }\n .pm-ht{\n font-size:14px;\n color: #4F4F4F;\n font-family: 'Montserrat', sans-serif;\n\tposition:absolute;\n bottom:5px;\n left:8px;\n font-weight: 600;\n }\n.bottom-btn {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 10px 20px;\n justify-content: center;\n width: 100%;\n height: 40px;\n background: #E74C3C;\n box-shadow: 3px 3px 6px rgba(100, 101, 114, 0.2), inset -1px -1px 1px rgba(100, 101, 114, 0.15);\n border-radius: 5px;\n border:none;\n flex: none;\n order: 0;\n flex-grow: 0;\n color:#fff;\n text-align:center;\n margin:0 auto;\n cursor:pointer;\n position:relative;\n }\n \n .bottom-btn:hover {\n background: #f8968C;\n color: #fff;\n transition:all ease .4s;\n \n }\n\n\n\n \n .promocode{\n \tdisplay:none;\n }\n .popuptext {\n visibility: hidden;\n width: 45%;\n background-color: #000;\n color: #fff;\n text-align: center;\n border-radius: 6px;\n padding: 5px 0;\n font-size: 9px;\n position: absolute;\n z-index: 12;\n left: 50%;\n \ttop: -17px;\n transform: translate(-50%, -50%);\n }\n \n .popuptext::after {\n content: \"\";\n position: absolute;\n top: 100%;\n left: 50%;\n margin-left: -5px;\n border-width: 5px;\n border-style: solid;\n border-color: #555 transparent transparent transparent;\n }\n \n .popup .show {\n visibility: visible;\n -webkit-animation: fadeIn 1s;\n animation: fadeIn 1s\n }\n @media only screen and (max-width: 600px) {\n .pm-bottom-container{\n \tflex-direction:column;\n }\n .pm-reduc{\n line-height: .8em;\n font-size: calc(10px + 4vh + 4vw);\n }\n .pm-left-container, .pm-right-container{\n \twidth:90%;\n }\n .pm-logo {\n height: 15%;\n margin-top: 5vh;\n\t}\n .separator {\n width: 50%;\n height: 1px;\n background-color: black;\n\t}\n .pm-title{\n \tfont-size:calc(14px + 1vh + 2.5vw);\n margin: 1vh 0 3vh 0;\n }\n .pm-reduc span {\n font-size: calc(7px + .75vh + 2vw);\n\t}\n .separator{\n \tdisplay:none;\n }\n \n }\n \n \n \n\n\n</style>\n\n\n<div class=\"pm-root\">\n <div class=\"pm-top-container\">\n\n <img src=\"https://img.perfmaker.net/985/1651051249_pmc-logo%201.svg\" alt=\"\" class=\"pm-logo\">\n <h1 class=\"pm-title\">Promo nouveau site</h1>\n </div>\n <div class=\"pm-bottom-container\">\n <div class=\"pm-left-container\">\n <h2 class=\"pm-reduc\">-50$</h2>\n <h3>Sur achat de 1000$* ou plus</h3>\n <div class=\"code-promo-container\">\n <span class=\"promocode\" id=\"codePromo0\">PROMO50</span>\n <button id=\"copyButton0\" class=\"perfmaker-action bottom-btn\">Copier le code promo <span class=\"popuptext\" id=\"myPopup0\" style=\"\">Code copié&nbsp;!</span></button>\n </div>\n </div>\n <div class=\"separator\"></div>\n <div class=\"pm-left-container\">\n <h2 class=\"pm-reduc\">-75$</h2>\n <h3>Sur achat de 1500$* ou plus</h3>\n <div class=\"code-promo-container\">\n <span class=\"promocode\" id=\"codePromo1\">PROMO75</span>\n <button id=\"copyButton1\" class=\"perfmaker-action bottom-btn\">Copier le code promo <span class=\"popuptext\" id=\"myPopup1\" style=\"\">Code copié&nbsp;!</span></button>\n </div>\n </div>\n <div class=\"separator\"></div>\n <div class=\"pm-right-container\">\n <h2 class=\"pm-reduc\">-100$</h2>\n <h3>Sur achat de 2000$* ou plus</h3>\n <div class=\"code-promo-container\">\n <span class=\"promocode\" id=\"codePromo2\">PROMO100</span>\n <button id=\"copyButton2\" class=\"perfmaker-action bottom-btn\">Copier le code promo <span class=\"popuptext\" id=\"myPopup2\" style=\"\">Code copié&nbsp;!</span></button>\n </div>\n </div>\n \n </div>\n <span class=\"pm-ht\">*Prix avant-taxes</span>\n</div>","name":"scène 0","notBlocking":null}],"transitions":[[{"__typename":"ScenarioTransitions","actionType":null,"closeBefore":false,"data":null,"nextStage":null}]]}