ClotureOnline - 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":0,"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 @import url('https://fonts.googleapis.com/css2?family=Poppins: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.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/1135/1665149812_logo%20(3).svg\");\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/1135/1665149768_banner1.svg\");\n\tbackground-position: bottom;\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 justify-content: space-around;\n}\n.pm-list{\n\twidth: 100%;\n\tdisplay: flex;\n\talign-items: center;\n\t\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/1135/1665150037_medal%201.svg\");\n}\n.icon2{\n\tbackground-image: url(\"https://img.perfmaker.net/1135/1665150037_fence%201.svg\");\n}\n.icon3{\n\tbackground-image: url(\"https://img.perfmaker.net/1135/1665150001_icon-park-outline_protect.svg\");\n}\n.icon4{\n\tbackground-image: url(\"https://img.perfmaker.net/1118/1653920307_Vector%20(4).svg\");\n}\n.pm-list p{\n\tcolor: black;\n\t font-family: 'Poppins', sans-serif;\n\n\tfont-weight: 400;\n\ttext-align: left;\n\tfont-size: calc(8px + 1.6vw);\n\tmargin: 0;\n \twidth:75%;\n line-height:1.4em;\n}\n.pm-list span{\n font-family: 'Poppins', sans-serif;\n\n\tfont-size: calc(10px + 1vh);\n font-weight:600;\n\n}\n.bottom-btn{\n\tcolor: white;\n\tbackground-color: #FF6600;\n margin-bottom:4vh;\nfont-family: 'Poppins', sans-serif;\n\tfont-size: calc(10px + 1vh);\n\tpadding: 1vh 10vw;\n\tborder: 1px solid #FF6600;\n\tcursor: pointer;\n \tmargin-top:2vh;\n transition:all 0.5s;\n display:flex;\n align-items:center;\n justify-content:flex-start;\n gap:3vw;\n border-radius:4px;\n text-decoration:none;\n}\n .bottom-btn:hover {\n \n }\n .pm-contact{\n \tcolor:#FF6600;\n font-size:calc(13px + 1vh);\n font-family: 'Poppins', sans-serif;\n\tmargin:2vh 0vw 0vh 0vw;\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>Entreprise familiale spécialisée dans la clôture depuis <span> +20 ans</span> </p>\n\t\t</div>\n\t\t<div class=\"pm-list\">\n\t\t\t<div class=\"pm-icon icon2\"></div><p>Qualité PRO au meilleur prix !</p>\n\t\t</div>\n\t\t<div class=\"pm-list\">\n\t\t\t<div class=\"pm-icon icon3\"></div><p>Paiement sécurisé</p>\n\t\t</div>\n\t\t<div class=\"pm-list\">\n\t\t\t<div class=\"pm-icon icon4\"></div><p>Retrait ou livraison rapide</p>\n\t\t</div>\n <h1 class=\"pm-contact\">Contactez-nous&nbsp;!</h1>\n\t\t<a class=\"perfmaker-action bottom-btn\" data-onclick=\"HIDE_SIDEBAR\" href=\"tel:0430303381\"><img src=\"https://img.perfmaker.net/1135/1665150506_contact%201.svg\">04 30 30 33 81</a>\n\t</div>\n</div>","name":"Réassurance","notBlocking":false}],"transitions":[[{"__typename":"ScenarioTransitions","actionType":null,"closeBefore":false,"data":null,"nextStage":null}]]}