Casserolerie - Réassurance

Format

Sidebox

COMPLEXITÉ

Low
Figma
🔥 Le code de ce scénario a été copié dans votre presse-papier
Preview
{"archived":0,"globalCss":null,"mainStage":null,"name":"Réassurance","stages":[{"__typename":"ScenarioStages","customScript":"","displayTimeOnlyUntilClick":null,"formatContainer":{"__typename":"ScenarioStagesFormatContainer","closeButtonStyle":{"position":"absolute","top":"5px","right":"5px"},"coverStyle":{"opacity":".6","background-color":"black","transition":"opacity .3s linear"},"iframeStyle":{},"wrapperClose":{"right":"-100%","transition":"right .3s linear"},"wrapperHidden":{"height":"94vh","max-height":"700px","width":"400px","bottom":"3vh","right":"-100%"},"wrapperOpen":{"right":"1vw","transition":"right .3s linear"}},"htmlCloseButton":"<style>\n .lines{\n position: absolute;\n top: 1vh;\n right: 10px;\n width: 20px;\n height: 20px;\n cursor: pointer;\n }\n .line{\n position: absolute;\n background:black;\n top:1vh;\n width: 20px;\n height: 1px;\n transition: All ease .3s;\n }\n \n .line1{\n transform: rotate(45deg);\n }\n .line2{\n transform: rotate(-45deg);\n }\n\n \t@media only screen and (max-width: 640px) {\n .perfmaker-sidebar-wrapper {\n width: 90vw !important;\n \theight: 85vh !important;\n \tbottom: 3vh !important;\n \tleft: 5vw !important;\n top:unset !important;\n }\n }\n \n</style>\n\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\n @font-face {\n font-family: \"Futura\";\n src: url(\"https://img.perfmaker.net/812/1642690439_Futura.woff2\")\n }\n @font-face {\n font-family: \"Futura Bold\";\n src: url(\"https://img.perfmaker.net/812/1645725017_FuturaStdHeavy.otf\")\n }\n\n.pm-root{\n\twidth: 100%;\n\theight: 100%;\n\tbackground-color: white;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n \tborder-radius:10px;\n}\n.pm-header{\n\twidth: 100%;\n\theight: 10vh;\n\tbackground-image: url(\"https://img.perfmaker.net/1118/1650898459_Capture%20d%E2%80%99e%CC%81cran%202022-04-25%20a%CC%80%2016.53.48.png\");\n\tbackground-position: center;\n\tbackground-repeat: no-repeat;\n\tbackground-size: 30vh;\n}\n.pm-img-banner{\n\twidth: 100%;\n\theight: 30vh;\n\tbackground-image: url(\"https://img.perfmaker.net/1118/1653920307_View%20Louvre%202%20-%20%C2%A9Hotel%20Regina%20Paris%201.png\");\n\tbackground-position: center;\n\tbackground-repeat: no-repeat;\n\tbackground-size: cover;\n}\n.pm-subheader{\n\twidth: 90%;\n height:60vh;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n \tmargin-top:2vh;\n}\n.pm-list{\n\twidth: 100%;\n\tdisplay: flex;\n\talign-items: center;\n\tmargin: 1.75vh 0;\n}\n.pm-icon{\n\theight: calc(19px + 2vh + 2vw);\n\twidth: calc(19px + 2vh + 2vw);\n margin-right:5vw;\n\tbackground-position: center;\n\tbackground-repeat: no-repeat;\n\tbackground-size: contain;\n}\n.icon1{\n\tbackground-image: url(\"https://img.perfmaker.net/1118/1653920307_Vector%20(2).svg\");\n}\n.icon2{\n\tbackground-image: url(\"https://img.perfmaker.net/1118/1653920307_Vector%20(3).svg\");\n}\n.icon3{\n\tbackground-image: url(\"https://img.perfmaker.net/1118/1653920307_Vector%20(4).svg\");\n}\n.icon4{\n\tbackground-image: url(\"https://img.perfmaker.net/1118/1653920307_Vector%20(5).svg\");\n}\n.pm-list p{\n\tcolor: black;\n\t font-family: \"Futura\";\n\tfont-weight: 400;\n\ttext-align: left;\n\tfont-size: calc(10px + 1vh);\n\tmargin: 0;\n \twidth:75%;\n line-height:1.4em;\n}\n.pm-list span{\n font-family: \"Futura bold\";\n\tfont-size: calc(10px + 1vh);\n\tcolor: #FF6600;\n\n}\n.bottom-btn{\n\tcolor: white;\n\tbackground-color: #FF6600;\n\tfont-family: ;\n\tfont-size: calc(10px + 1vh);\n\twidth: 75%;\n\tpadding: 1vh 0;\n\tborder: 1px solid #FF6600;\n\tcursor: pointer;\n \tmargin-top:6vh;\n transition:all 0.5s;\n}\n .bottom-btn:hover {\n background:none;\n color:#FF6600;\n }\n@media all and max-height(600px) {\n .pm-img-banner{\n height:20vh;\n }\n }\n</style>\n\n<div class=\"pm-root\">\n\t<div class=\"pm-header\"></div>\n\t<div class=\"pm-img-banner\"></div>\n\t<div class=\"pm-subheader\">\n\t\t<div class=\"pm-list\">\n\t\t\t<div class=\"pm-icon icon1\"></div><p>Depuis <span> +35 ans </span> nous sommes les spécialistes de l’article culinaire.</p>\n\t\t</div>\n\t\t<div class=\"pm-list\">\n\t\t\t<div class=\"pm-icon icon2\"></div><p><span>+8000 </span> références en stock.</p>\n\t\t</div>\n\t\t<div class=\"pm-list\">\n\t\t\t<div class=\"pm-icon icon3\"></div><p>Commande expédiée<br> en <span> 24/48h.</span></p>\n\t\t</div>\n\t\t<div class=\"pm-list\">\n\t\t\t<div class=\"pm-icon icon4\"></div><p>Service après-vente<br> <span> 02 97 37 22 06</span></p>\n\t\t</div>\n\t\t<button class=\"perfmaker-action bottom-btn\" data-onclick=\"HIDE_SIDEBAR\" data-url=\"\">FERMER</button>\n\t</div>\n</div>","name":"Réassurance","notBlocking":false}],"transitions":[[{"__typename":"ScenarioTransitions","actionType":null,"closeBefore":false,"data":null,"nextStage":null}]]}