MEA Coffrets cadeaux - Extranet

Format

Autre

COMPLEXITÉ

Figma
🔥 Le code de ce scénario a été copié dans votre presse-papier
Preview
{"archived":0,"globalCss":null,"mainStage":0,"name":"EXTRANET","stages":[{"__typename":"ScenarioStages","customScript":"","displayTimeOnlyUntilClick":null,"formatContainer":{"__typename":"ScenarioStagesFormatContainer","closeButtonStyle":{"position":"absolute","top":"5px","right":"10px"},"coverStyle":{"background-color":"black","opacity":"0.6","transition":"opacity .3s linear"},"iframeStyle":{},"wrapperClose":{"right":"-410px","transition":"right .3s"},"wrapperHidden":{"height":"100%","width":"50%","min-width":"700px","top":"0px","right":"-410px"},"wrapperOpen":{"right":"0px","transition":"right .3s"}},"htmlCloseButton":"<style>\n .lines{\n position: absolute;\n display:flex;\n justify-content:center;\n align-items:center;\n top: 1vh;\n right: 0px;\n width: 27px;\n height: 27px;\n cursor: pointer;\n background-color:#EE810C;\n border-radius: 100px;\n }\n .line{\n position: absolute;\n background-color:white;\n width: 14px;\n height: 2px;\n transition: All ease .3s;\n border-radius: 100px;\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: 700px) {\n .perfmaker-sidebar-wrapper {\n width: 100% !important;\n height: 90vh !important;\n left:0% !important;\n min-width:unset !important;\n top: unset !important;\n bottom:0vh !important;\n }\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\t@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:ital,wght@0,300;0,700;1,300&display=swap');\n @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,500;1,600&display=swap');\n @import url('https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap');\n @import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');\n\n}\n@font-face {\n font-family: \"Normatica Medium\";\n src: url(https://img.perfmaker.net/537/CarnokyType-NormaticaRegular.otf);\n font-weight: 400;\n}\n@font-face {\n font-family: \"Normatica Bold\";\n src: url(https://img.perfmaker.net/537/CarnokyType-NormaticaBold.otf);\n font-weight: 600\n}\n@font-face {\n font-family: \"Conduit ITC\";\n src: url('https://img.perfmaker.net/537/1645014022_Conduit ITC Regular.otf');\n}\n .pm-root{\n \twidth:100%;\n \theight:100%;\n background-color:white;\n display: flex;\n flex-direction: column;\n align-items: center;\n position: relative;\n gap: 2vw;\n overflow-y:scroll;\n overflow-x:hidden;\n padding:2vh 0;\n }\n .logo{\n\theight:calc(3vh + 20px);\n }\n .pm-title{\n \tfont-family: \"Conduit ITC\";\n \tcolor: black;\n \ttext-align: left;\n align-self:flex-start;\n \tfont-size: calc(14px + 2vh);\n \ttext-transform: uppercase;\n margin: 1vh 3.5vw;\n font-weight:bold;\n }\n .pm-title span{\n \tcolor: #EE810C;\n }\n .card-container{\n \twidth: 100%;\n \tdisplay: flex;\n \tflex-direction: row;\n \tflex-wrap: wrap;\n justify-content: center;\n gap: 3vw;\n }\n .card{\n \twidth: 45%;\n \tdisplay: flex;\n \tflex-direction: column;\n \talign-items: flex-start;\n \tjustify-content: flex-start;\n \tbox-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;\n overflow:hidden;\n position:relative;\n background-color:white;\n transition: all ease .2s;\n cursor:pointer;\n }\n .card:hover{\n \ttransform:translateY(-1%);\n }\n .card:after{\n \tcontent:\"Nouveauté\";\n font-family: \"Conduit ITC\";\n \tcolor: white;\n background-color:#EE810C;\n padding:5px 5px 3px 5px;\n position:absolute;\n right:0;\n top:15px;\n }\n .dedicated:before{\n \tcontent:\"Dédiée aux restaurateurs\";\n font-family: \"Conduit ITC\";\n \tcolor: EE810C;\n width:9ch;\n background-color:#FDEDDD;\n padding:5px 13px 3px 8px;\n position:absolute;\n right:0;\n top:45px;\n }\n .top-container{\n \tdisplay: flex;\n flex-direction: row;\n align-items: center;\n width: 85%;\n align-self: center;\n margin-top: 5vh;\n gap: 2vw;\n }\n .round-img1{\n \tborder-radius: 100px;\n \theight: 70px;\n \twidth: 70px;\n \tbackground-image: url(\"https://img.perfmaker.net/537/1667914169_img_circle.png\");\n \tbackground-position: center;\n \tbackground-size: cover;\n \tbackground-repeat: no-repeat;\n }\n .round-img2{\n \tborder-radius: 100px;\n \theight: 70px;\n \twidth: 70px;\n \tbackground-image: url(\"https://img.perfmaker.net/537/1667922092_img_circle2.png\");\n \tbackground-position: center;\n \tbackground-size: cover;\n \tbackground-repeat: no-repeat;\n }\n .round-img3{\n \tborder-radius: 100px;\n \theight: