Maison-Alliance - Mise en avant dynamique

Format

Sidebox

COMPLEXITÉ

Low
Figma
🔥 Le code de ce scénario a été copié dans votre presse-papier
Preview
{"archived":0,"globalCss":null,"mainStage":0,"name":"Mise en avant dynamique","stages":[{"__typename":"ScenarioStages","customScript":"","displayTimeOnlyUntilClick":null,"formatContainer":{"__typename":"ScenarioStagesFormatContainer","closeButtonStyle":{"position":"absolute","right":"0px","top":"0px","display":"flex","justify-content":"center","align-items":"center"},"coverStyle":{"background-color":"black","opacity":"0.7","transition":"opacity .3s"},"iframeStyle":{},"wrapperClose":{"bottom":"-230px","transition":"all .3s linear"},"wrapperHidden":{"height":"70vh","width":"100%","right":"50%","left":"50%","bottom":"-270px","overflow":"hidden !important","max-width":"400px","margin":"0 auto","transform":"translate(-50%, 0)"},"wrapperOpen":{"bottom":"15vh","transition":"all .3s linear"}},"htmlCloseButton":"<style>\n@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');\n \n .pm-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:white;\n border-radius:100px;\n \n }\n .pm-line{\n position: absolute;\n background:#004B90;\n width: 18px;\n height: 2px;\n transition: All ease .3s;\n }\n \n .pm-line1{\n transform: rotate(45deg);\n }\n .pm-line2{\n transform: rotate(-45deg);\n }\n @-webkit-keyframes slide-top {\n 0% {\n -webkit-transform: translateY(220px);\n transform: translateY(220px);\n }\n 100% {\n -webkit-transform: translateY(0px);\n transform: translateY(0px);\n }\n}\n@keyframes slide-top {\n 0% {\n -webkit-transform: translateY(220px);\n transform: translateY(220px);\n }\n 100% {\n -webkit-transform: translateY(0px);\n transform: translateY(0px);\n }\n}\n \n \n @-webkit-keyframes slide-bottom {\n 0% {\n -webkit-transform: translateY(0px);\n transform: translateY(0px);\n }\n 100% {\n -webkit-transform: translateY(250px);\n transform: translateY(250px);\n }\n}\n@keyframes slide-bottom {\n 0% {\n -webkit-transform: translateY(0px);\n transform: translateY(0px);\n }\n 100% {\n -webkit-transform: translateY(250px);\n transform: translateY(250px);\n }\n}\n @media only screen and (max-width: 600px) {\n .perfmaker-sidebar-wrapper {\n width: 90% !important;\n right:5% !important;\n left:5%;\n bottom:10% !important;\n height: 80% !important;\n min-height: 300px !important; \n transform: translate(-50%, 0) !important;\n }\n }\n \n \n\n</style>\n\n<div class=\"pm-lines perfmaker-close-cross\">\n <div class=\"pm-line1 pm-line\"></div>\n <div class=\"pm-line2 pm-line\"></div>\n</div>","htmlContent":"<style>\n @font-face {\n font-family: \"Constanta\";\n src: url(\"https://img.perfmaker.net/Font/1644238266_constan.ttf \")\n }\n .pm-root {\n width: 100%;\n height: 100%;\n font-family: 'Constanta';\n border-radius: 20px;\n position: relative;\n display: flex;\n align-items: center;\n /*animation: slide-bottom-container 1s ease 0s normal forwards 1;\n animation-delay: 1s;\n -webkit-transform: translateY(430px);\n transform: translateY(430px);*/\n \n }\n \n .background {\n width: 100%;\n height: 30%;\n background-image: url(\"https://img.perfmaker.net/1108/1659529094_ezgif-5-fb8580803c.gif\");\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n bottom: 0;\n z-index: 0000;\n \t\tposition:absolute;\n border-radius:0 0 20px 20px;\n display:flex;\n justify-content:center;\n align-items:center;\n }\n \n \n \n .logo {\n height: 7vh;\n display:block;\n margin: 2vh 0;\n align-self: center;\n }\n \n .container {\n background-color: #fff;\n height: 100%;\n width: 100%;\n margin:0 auto;\n border-radius: 20px;\n color: #004B90;\n \n z-index:1000;\n }\n \n .container > div {\n display:flex;\n flex-direction:column;\n justify-content: space-evenly;\n height:70%;\n }\n .pm-root .pm-title {\n font-size: calc(14px + 2vw) ;\n font-weight: 400;\n text-align: left;\n width: 90%;\nmargin:2vh auto 1vh auto;\n \ttext-align:center;\n }\nul {\n width:80%;\n margin:0 auto;\n }\n \n .pm-root .container li {\n margin: 0;\n font-size: calc(8px + 2vw) ;\n text-align: left;\n line-height: calc(13px + 2vh);\n }\n \n .pm-root .container li span {\n font-size:12px;\n color:#958E8A;\n }\n \n \n \n .pm-root .container .price {\n margin-bottom: 10px;\n }\n \n .pm-root .container span {\n font-size: 20px;\n }\n \n .pm-root button {\n text-align: center;\n color: #000;\n text-shadow: none;\n font-size: 26px;\n margin: 0;\n padding: 0;\n border: 0;\n font-size: 14px;\n z-index: 999999999999;\n }\n \n .pm-root .more {\n width: 40px;\n height: 40px;\n background-color: #fff;\n border-radius: 100%;\n position: absolute;\n top: -20px;\n left: 50%;\n display: flex;\n align-items: center;\n cursor: pointer;\n justify-content: center;\n }\n \n .pm-root .pulse-white {\n background: white;\n box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);\n animation: pulse-white 2s infinite;\n }\n \n .pm-root .bottom-btn {\n background-color: #004B90;\n color: #fff;\n \ttext-align:center;\n padding: 10px 30px;\n border: none;\n transition: all ease .15s;\n cursor: pointer;\n font-weight: 300;\n display: block;\n \tmargin: -50px auto 0 auto;\n font-size:calc(10px + 2vw);\n font-family: \"Constanta\";\n }\n \n .pm-root .bottom-btn:hover {\n transform: scale(0.98);\n opacity: 0.9;\n }\n \n @keyframes pulse-white {\n 0% {\n transform: scale(0.95) translate(-50%, 0);\n box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);\n }\n 70% {\n transform: scale(1) translate(-50%, 0);\n box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);\n }\n 100% {\n transform: scale(0.95) translate(-50%, 0);\n box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);\n }\n }\n \n @-webkit-keyframes fade-in {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n \n @keyframes fade-in {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n \n @keyframes slide-bottom-container {\n 0% {\n -webkit-transform: translateY(340px);\n transform: translateY(340px);\n }\n 100% {\n -webkit-transform: translateY(0px);\n transform: translateY(0px);\n }\n }\n</style>\n\n\n\n<div class=\"pm-root\">\n\n <div class=\"container\">\n <div>\n <img src=\"https://img.perfmaker.net/1108/1644237515_logo-maison-de-l-alliance-diamant-1.png\" class=\"logo\">\n <h1 class=\"pm-title\">La référence de l’alliance à Paris</h1>\n <ul>\n <li>Remise à taille offerte<span> (jusqu’à 6 mois après l’achat)</span></li>\n <li>Livraison offerte sans minimum d’achat</li>\n \n <li>Garantie à vie <span>(contre tout vice de fabrication)</span></li>\n <li>Diamants éthiques, naturels et certifiés GIA<span> <br>Nos diamants sont certifiés par le laboratoire international de certification GIA « Gemological Institute of America ».</span></li>\n <li>Garantie du meilleur prix</li>\n <li>Envoi 100% sécurisé</li>\n </ul>\n \n <!-- <button class=\"perfmaker-action more pulse-white\" data-onclick=\"CLOSE_BUTTON_CLICK\">X</button>-->\n <div class=\"background\"> <button class=\"bottom-btn perfmaker-action\" data-onclick=\"HIDE_SIDEBAR\" data-url=\"https://www.maisondelalliance.fr/nouvelle-collection\" data-name=\"Nouvelle collection\">Découvrir la nouvelle collection</button></div>\n </div>\n \n </div>\n <!--<div class=\"background-top\"></div>-->\n \n\n\n\n</div>","name":"Bahamas","notBlocking":false}],"transitions":[[{"__typename":"ScenarioTransitions","actionType":null,"closeBefore":false,"data":null,"nextStage":null}]]}