{
    "components": [
        {
            "classes": [
                "of-ribbon-template"
            ],
            "attributes": {
                "id": "izx1"
            },
            "components": [
                {
                    "classes": [
                        "of-ribbon-close-btn",
                        "of-campaign-ribbon-close"
                    ],
                    "attributes": {
                        "id": "i23h"
                    },
                    "components": [
                        {
                            "type": "svg",
                            "resizable": {
                                "ratioDefault": true
                            },
                            "attributes": {
                                "width": "30",
                                "height": "30",
                                "viewBox": "0 0 32 32",
                                "fill": "none",
                                "xmlns": "http://www.w3.org/2000/svg",
                                "id": "i1tg"
                            },
                            "components": [
                                {
                                    "tagName": "mask",
                                    "type": "svg-in",
                                    "resizable": {
                                        "ratioDefault": true
                                    },
                                    "attributes": {
                                        "id": "mask0_2255_1643",
                                        "maskUnits": "userSpaceOnUse",
                                        "x": "0",
                                        "y": "0",
                                        "width": "32",
                                        "height": "32"
                                    },
                                    "components": [
                                        {
                                            "tagName": "rect",
                                            "type": "svg-in",
                                            "resizable": {
                                                "ratioDefault": true
                                            },
                                            "attributes": {
                                                "width": "32",
                                                "height": "32",
                                                "fill": "#D9D9D9"
                                            }
                                        }
                                    ]
                                },
                                {
                                    "tagName": "g",
                                    "type": "svg-in",
                                    "resizable": {
                                        "ratioDefault": true
                                    },
                                    "attributes": {
                                        "mask": "url(#mask0_2255_1643)"
                                    },
                                    "components": [
                                        {
                                            "tagName": "path",
                                            "type": "svg-in",
                                            "resizable": {
                                                "ratioDefault": true
                                            },
                                            "attributes": {
                                                "d": "M9.6 24L8 22.4L14.4 16L8 9.6L9.6 8L16 14.4L22.4 8L24 9.6L17.6 16L24 22.4L22.4 24L16 17.6L9.6 24Z",
                                                "fill": "currentColor"
                                            }
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    "name": "Droppable Area",
                    "removable": false,
                    "classes": [
                        "of-ribbon-template-content"
                    ],
                    "attributes": {
                        "id": "iwyoa"
                    },
                    "components": [
                        {
                            "type": "text",
                            "attributes": {
                                "id": "i55lc"
                            },
                            "components": [
                                {
                                    "tagName": "span",
                                    "type": "text",
                                    "attributes": {
                                        "id": "iqqr4"
                                    },
                                    "components": [
                                        {
                                            "type": "textnode",
                                            "content": "\ud83c\udf81 Spring Sale"
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "type": "text",
                            "attributes": {
                                "id": "idhku"
                            },
                            "components": [
                                {
                                    "tagName": "span",
                                    "type": "text",
                                    "attributes": {
                                        "id": "ihjrf"
                                    },
                                    "components": [
                                        {
                                            "type": "textnode",
                                            "content": "Click to copy the coupon"
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "type": "copy-button",
                            "content": "Copy Text",
                            "classes": [
                                "button",
                                "copy-button"
                            ],
                            "attributes": {
                                "id": "igj44"
                            }
                        },
                        {
                            "type": "text",
                            "attributes": {
                                "id": "irp18"
                            },
                            "components": [
                                {
                                    "tagName": "span",
                                    "type": "text",
                                    "attributes": {
                                        "id": "i1yqg"
                                    },
                                    "components": [
                                        {
                                            "type": "textnode",
                                            "content": "Extra 60% OFF on Courses"
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "type": "text",
                            "attributes": {
                                "id": "ih237"
                            },
                            "components": [
                                {
                                    "tagName": "span",
                                    "type": "text",
                                    "attributes": {
                                        "id": "ia5m7"
                                    },
                                    "components": [
                                        {
                                            "type": "textnode",
                                            "content": "Offer Ends in"
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "type": "countdown-component-two",
                            "classes": [
                                "countdown-component-two"
                            ],
                            "attributes": {
                                "days": "2",
                                "id": "countdown-two-c3094"
                            },
                            "components": [
                                {
                                    "components": [
                                        {
                                            "tagName": "span",
                                            "type": "text",
                                            "classes": [
                                                "hours"
                                            ],
                                            "attributes": {
                                                "data-type": "hours"
                                            },
                                            "components": [
                                                {
                                                    "type": "textnode",
                                                    "content": "00"
                                                }
                                            ]
                                        },
                                        {
                                            "tagName": "span",
                                            "type": "text",
                                            "components": [
                                                {
                                                    "type": "textnode",
                                                    "content": "Hours"
                                                }
                                            ]
                                        }
                                    ]
                                },
                                {
                                    "components": [
                                        {
                                            "tagName": "span",
                                            "type": "text",
                                            "classes": [
                                                "minutes"
                                            ],
                                            "attributes": {
                                                "data-type": "minutes"
                                            },
                                            "components": [
                                                {
                                                    "type": "textnode",
                                                    "content": "00"
                                                }
                                            ]
                                        },
                                        {
                                            "tagName": "span",
                                            "type": "text",
                                            "components": [
                                                {
                                                    "type": "textnode",
                                                    "content": "Minutes"
                                                }
                                            ]
                                        }
                                    ]
                                },
                                {
                                    "components": [
                                        {
                                            "tagName": "span",
                                            "type": "text",
                                            "classes": [
                                                "seconds"
                                            ],
                                            "attributes": {
                                                "data-type": "seconds"
                                            },
                                            "components": [
                                                {
                                                    "type": "textnode",
                                                    "content": "00"
                                                }
                                            ]
                                        },
                                        {
                                            "tagName": "span",
                                            "type": "text",
                                            "components": [
                                                {
                                                    "type": "textnode",
                                                    "content": "Seconds"
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ],
                            "scriptUpdated": 1
                        },
                        {
                            "type": "comment",
                            "content": " Content will be droppable here "
                        }
                    ]
                }
            ]
        }
    ],
    "styles": [
        {
            "selectors": [
                "of-header"
            ],
            "style": {
                "background-image": "url('http://yocard.test/wp-content/uploads/engage-builder/sa_campaign_677243fabd66a1.55709526.jpg')",
                "background-repeat": "repeat",
                "background-position": "left top",
                "background-attachment": "scroll",
                "background-size": "auto",
                "height": "150px"
            }
        },
        {
            "selectors": [
                "countdown-component"
            ],
            "style": {
                "color": "#fdfdfd"
            }
        },
        {
            "selectors": [
                "#ijw4"
            ],
            "style": {
                "position": "relative"
            },
            "wrapper": 1
        },
        {
            "selectors": [
                {
                    "name": "gjs-row",
                    "private": 1
                }
            ],
            "style": {
                "display": "table",
                "padding-top": "10px",
                "padding-right": "10px",
                "padding-bottom": "10px",
                "padding-left": "10px",
                "width": "100%"
            }
        },
        {
            "selectors": [
                {
                    "name": "gjs-cell",
                    "private": 1
                }
            ],
            "style": {
                "width": "100%",
                "display": "block"
            },
            "mediaText": "(max-width: 768px)",
            "atRuleType": "media"
        },
        {
            "selectors": [
                "gjs-cell30"
            ],
            "style": {
                "width": "100%",
                "display": "block"
            },
            "mediaText": "(max-width: 768px)",
            "atRuleType": "media"
        },
        {
            "selectors": [
                "gjs-cell70"
            ],
            "style": {
                "width": "100%",
                "display": "block"
            },
            "mediaText": "(max-width: 768px)",
            "atRuleType": "media"
        },
        {
            "selectors": [
                {
                    "name": "gjs-cell",
                    "private": 1
                }
            ],
            "style": {
                "width": "8%",
                "display": "table-cell",
                "height": "75px"
            }
        },
        {
            "selectors": [
                "button",
                "cross-button"
            ],
            "style": {
                "color": "#e60f0f",
                "background-color": "#16ba32",
                "border-radius": "45% 45% 45% 45%"
            }
        },
        {
            "selectors": [
                "#injq"
            ],
            "style": {
                "position": "relative"
            },
            "wrapper": 1
        },
        {
            "selectors": [
                "#mask0_2255_1643"
            ],
            "style": {
                "mask-type": "alpha"
            }
        },
        {
            "selectors": [
                "of-ribbon-template-content"
            ],
            "style": {
                "color": "#312626"
            }
        },
        {
            "selectors": [
                "of-ribbon-template"
            ],
            "style": {
                "background-color": "#38b7a6",
                "height": "120px"
            }
        },
        {
            "selectors": [
                "#iwyoa"
            ],
            "style": {
                "position": "relative"
            }
        },
        {
            "selectors": [
                "button",
                "copy-button"
            ],
            "style": {
                "color": "#1c3ec8",
                "background-color": "#ffffff",
                "padding": "5px 25px 5px 25px",
                "font-size": "16px",
                "font-weight": "700",
                "border-radius": "10px 10px 10px 10px"
            }
        },
        {
            "selectors": [
                "#i1tg"
            ],
            "style": {
                "left": "NaN%",
                "background-color": "#ea0808"
            },
            "state": "hover"
        },
        {
            "selectors": [
                "#i23h"
            ],
            "style": {
                "position": "absolute"
            },
            "state": "hover"
        },
        {
            "selectors": [
                "days"
            ],
            "style": {
                "color": "#f32b2b"
            }
        },
        {
            "selectors": [
                "hours"
            ],
            "style": {
                "color": "#f32b2b"
            }
        },
        {
            "selectors": [
                "minutes"
            ],
            "style": {
                "color": "#f32b2b"
            }
        },
        {
            "selectors": [
                "seconds"
            ],
            "style": {
                "color": "#f32b2b"
            }
        },
        {
            "selectors": [
                "#i1tg"
            ],
            "style": {
                "background-color": "#ffffff",
                "color": "#312626",
                "border-radius": "50px 50px 50px 50px"
            }
        },
        {
            "selectors": [
                "#izx1"
            ],
            "style": {
                "position": "relative"
            },
            "state": "hover"
        },
        {
            "selectors": [
                "of-ribbon-close-btn",
                "of-campaign-ribbon-close"
            ],
            "style": {
                "position": "absolute"
            }
        },
        {
            "selectors": [
                "#izx1"
            ],
            "style": {
                "position": "relative"
            }
        },
        {
            "selectors": [
                "#i23h"
            ],
            "style": {
                "position": "absolute",
                "left": "96%",
                "top": "9%"
            }
        },
        {
            "selectors": [
                "#iwyoa"
            ],
            "style": {
                "position": "relative"
            },
            "state": "hover"
        },
        {
            "selectors": [
                "#iwyoa"
            ],
            "style": {
                "position": "relative"
            },
            "mediaText": "(max-width: 768px)",
            "atRuleType": "media"
        },
        {
            "selectors": [
                "countdown-component-two"
            ],
            "style": {
                "font-size": "12px"
            },
            "mediaText": "(max-width: 768px)",
            "atRuleType": "media"
        },
        {
            "selectors": [
                "button",
                "copy-button"
            ],
            "style": {
                "font-size": "12px"
            },
            "mediaText": "(max-width: 768px)",
            "atRuleType": "media"
        },
        {
            "selectors": [
                "of-ribbon-template"
            ],
            "style": {
                "height": "300px"
            },
            "mediaText": "(max-width: 320px)",
            "atRuleType": "media"
        },
        {
            "selectors": [
                "#iwyoa"
            ],
            "style": {
                "position": "relative"
            },
            "mediaText": "(max-width: 320px)",
            "atRuleType": "media"
        },
        {
            "selectors": [
                "#i1tg"
            ],
            "style": {
                "position": "absolute",
                "left": "NaN%"
            },
            "mediaText": "(max-width: 320px)",
            "atRuleType": "media"
        },
        {
            "selectors": [
                "#i23h"
            ],
            "style": {
                "position": "relative",
                "width": "20%",
                "top": "14%"
            },
            "mediaText": "(max-width: 320px)",
            "atRuleType": "media"
        },
        {
            "selectors": [
                "#izx1"
            ],
            "style": {
                "position": "relative"
            },
            "mediaText": "(max-width: 320px)",
            "atRuleType": "media"
        },
        {
            "selectors": [
                "of-ribbon-template"
            ],
            "style": {
                "height": "200px"
            },
            "mediaText": "(max-width: 768px)",
            "atRuleType": "media"
        },
        {
            "selectors": [
                "of-ribbon-template"
            ],
            "style": {
                "height": "250px"
            },
            "mediaText": "(max-width: 512px)",
            "atRuleType": "media"
        },
        {
            "selectors": [
                "#iwyoa"
            ],
            "style": {
                "position": "relative"
            },
            "mediaText": "(max-width: 512px)",
            "atRuleType": "media"
        },
        {
            "selectors": [
                "#izx1"
            ],
            "style": {
                "position": "relative"
            },
            "mediaText": "(max-width: 512px)",
            "atRuleType": "media"
        },
        {
            "selectors": [
                "#i23h"
            ],
            "style": {
                "position": "absolute",
                "top": "0%",
                "left": "90%"
            },
            "mediaText": "(max-width: 512px)",
            "atRuleType": "media"
        },
        {
            "selectors": [
                "button",
                "copy-button"
            ],
            "style": {
                "font-size": "20px"
            },
            "state": "hover"
        },
        {
            "selectors": [
                "#i55lc"
            ],
            "style": {
                "padding": "10px",
                "position": "absolute",
                "top": "0px",
                "left": "45px"
            }
        },
        {
            "selectors": [
                "#iqqr4"
            ],
            "style": {
                "color": "rgb(0, 0, 0)",
                "font-family": "Poppins",
                "font-size": "28px",
                "font-weight": "700",
                "text-align": "center"
            }
        },
        {
            "selectors": [
                "#irp18"
            ],
            "style": {
                "padding": "10px",
                "position": "absolute",
                "left": "0px",
                "top": "39px"
            }
        },
        {
            "selectors": [
                "#i1yqg"
            ],
            "style": {
                "color": "rgb(0, 0, 0)",
                "font-family": "Poppins",
                "font-size": "28px",
                "text-align": "center"
            }
        },
        {
            "selectors": [
                "#ih237"
            ],
            "style": {
                "padding": "10px",
                "position": "absolute",
                "left": "42.64%",
                "top": "0px"
            }
        },
        {
            "selectors": [
                "#ia5m7"
            ],
            "style": {
                "color": "rgb(0, 0, 0)",
                "font-family": "Montserrat",
                "font-size": "16px",
                "text-align": "center"
            }
        },
        {
            "selectors": [
                "#idhku"
            ],
            "style": {
                "padding": "10px",
                "position": "absolute",
                "left": "79.02%",
                "top": "12px"
            }
        },
        {
            "selectors": [
                "#ihjrf"
            ],
            "style": {
                "color": "rgb(0, 0, 0)",
                "font-family": "Poppins",
                "font-size": "16px",
                "text-align": "center"
            }
        },
        {
            "selectors": [
                "#igj44"
            ],
            "style": {
                "position": "absolute",
                "left": "82.02%",
                "top": "55px"
            }
        },
        {
            "selectors": [
                "#idhku"
            ],
            "style": {
                "position": "absolute",
                "left": "76.56%"
            },
            "mediaText": "(max-width: 1024px)",
            "atRuleType": "media"
        },
        {
            "selectors": [
                "#iwyoa"
            ],
            "style": {
                "position": "relative"
            },
            "mediaText": "(max-width: 1024px)",
            "atRuleType": "media"
        },
        {
            "selectors": [
                "#igj44"
            ],
            "style": {
                "position": "absolute",
                "top": "60px",
                "left": "80.71%"
            },
            "mediaText": "(max-width: 1024px)",
            "atRuleType": "media"
        },
        {
            "selectors": [
                "#i1yqg"
            ],
            "style": {
                "font-size": "20px"
            },
            "mediaText": "(max-width: 1024px)",
            "atRuleType": "media"
        },
        {
            "selectors": [
                "#irp18"
            ],
            "style": {
                "position": "absolute",
                "left": "35px"
            },
            "mediaText": "(max-width: 1024px)",
            "atRuleType": "media"
        },
        {
            "selectors": [
                "#ialq"
            ],
            "style": {
                "position": "relative"
            },
            "mediaText": "(max-width: 768px)",
            "atRuleType": "media"
        },
        {
            "selectors": [
                "#izx1"
            ],
            "style": {
                "position": "absolute",
                "left": "0px"
            },
            "mediaText": "(max-width: 768px)",
            "atRuleType": "media"
        },
        {
            "selectors": [
                "#ih237"
            ],
            "style": {
                "position": "absolute",
                "top": "80px",
                "left": "44.14%"
            },
            "mediaText": "(max-width: 768px)",
            "atRuleType": "media"
        },
        {
            "selectors": [
                "#idhku"
            ],
            "style": {
                "position": "absolute",
                "left": "68.40%"
            },
            "mediaText": "(max-width: 768px)",
            "atRuleType": "media"
        },
        {
            "selectors": [
                "#igj44"
            ],
            "style": {
                "position": "absolute",
                "left": "74.10%",
                "top": "55px"
            },
            "mediaText": "(max-width: 768px)",
            "atRuleType": "media"
        },
        {
            "selectors": [
                "#iqqr4"
            ],
            "style": {
                "font-size": "20px"
            },
            "mediaText": "(max-width: 568px)",
            "atRuleType": "media"
        },
        {
            "selectors": [
                "#i55lc"
            ],
            "style": {
                "position": "absolute",
                "top": "0px",
                "left": "32.51%"
            },
            "mediaText": "(max-width: 568px)",
            "atRuleType": "media"
        },
        {
            "selectors": [
                "#iwyoa"
            ],
            "style": {
                "position": "relative"
            },
            "mediaText": "(max-width: 568px)",
            "atRuleType": "media"
        },
        {
            "selectors": [
                "#irp18"
            ],
            "style": {
                "position": "absolute",
                "top": "24px",
                "left": "23.54%"
            },
            "mediaText": "(max-width: 568px)",
            "atRuleType": "media"
        },
        {
            "selectors": [
                "of-ribbon-template"
            ],
            "style": {
                "height": "250px"
            },
            "mediaText": "(max-width: 568px)",
            "atRuleType": "media"
        },
        {
            "selectors": [
                "#ih237"
            ],
            "style": {
                "position": "absolute",
                "top": "60px",
                "left": "39.69%"
            },
            "mediaText": "(max-width: 568px)",
            "atRuleType": "media"
        },
        {
            "selectors": [
                "#idhku"
            ],
            "style": {
                "position": "absolute",
                "top": "68.80%",
                "left": "31.39%"
            },
            "mediaText": "(max-width: 568px)",
            "atRuleType": "media"
        },
        {
            "selectors": [
                "#igj44"
            ],
            "style": {
                "position": "absolute",
                "top": "86.00%",
                "left": "38.12%"
            },
            "mediaText": "(max-width: 568px)",
            "atRuleType": "media"
        },
        {
            "selectors": [
                "#countdown-two-c3094"
            ],
            "style": {
                "position": "absolute",
                "left": "39.27%",
                "top": "35px"
            }
        },
        {
            "selectors": [
                "#countdown-two-c3094"
            ],
            "style": {
                "position": "absolute",
                "top": "62.50%"
            },
            "mediaText": "(max-width: 768px)",
            "atRuleType": "media"
        },
        {
            "selectors": [
                "#irp18"
            ],
            "style": {
                "position": "absolute",
                "top": "44px"
            },
            "mediaText": "(max-width: 768px)",
            "atRuleType": "media"
        },
        {
            "selectors": [
                "#countdown-two-c3094"
            ],
            "style": {
                "position": "absolute",
                "top": "42.40%",
                "left": "29.15%"
            },
            "mediaText": "(max-width: 568px)",
            "atRuleType": "media"
        }
    ]
}