{"id":315,"date":"2026-05-21T14:13:37","date_gmt":"2026-05-21T14:13:37","guid":{"rendered":"https:\/\/heyoninstitute.lk\/?page_id=315"},"modified":"2026-06-03T07:24:29","modified_gmt":"2026-06-03T07:24:29","slug":"professional-certificate","status":"publish","type":"page","link":"https:\/\/heyoninstitute.lk\/?page_id=315","title":{"rendered":"Professional Certificate"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"si\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <style>\n        :root {\n            --primary-gradient: linear-gradient(46deg, #00adb5 4%, #095f5c 93%);\n            --primary-hover: linear-gradient(270deg, #00adb5 4%, #095f5c 93%);\n            --text-dark: #2d2d2d;\n            --text-muted: #555555;\n            --border-radius: 16px;\n            --transition: all 0.3s ease;\n        }\n\n        \/* Container styling to center the single card on your page template *\/\n        .course-card-container {\n            max-width: 1100px;\n            width: 100%;\n            margin: 20px auto;\n            padding: 0 20px;\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n        }\n\n        \/* Beautiful Landscape Card Layout *\/\n        .course-landscape-card {\n            display: flex;\n            flex-direction: row; \/* Forces Image Left, Details Right *\/\n            background: #ffffff;\n            border-radius: var(--border-radius);\n            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);\n            overflow: hidden;\n            min-height: 400px;\n            transition: var(--transition);\n            border: 1px solid rgba(0, 0, 0, 0.04);\n        }\n\n        .course-landscape-card:hover {\n            transform: translateY(-5px);\n            box-shadow: 0 15px 40px rgba(0, 173, 181, 0.12);\n        }\n\n        \/* Left Side Image Container *\/\n        .card-image-wrapper {\n            flex: 1.1; \/* Proportional width of the image area *\/\n            position: relative;\n            overflow: hidden;\n            min-height: 100%;\n        }\n\n        .card-image-wrapper img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            display: block;\n            transition: var(--transition);\n        }\n\n        .course-landscape-card:hover .card-image-wrapper img {\n            transform: scale(1.03);\n        }\n\n        \/* Elegant Pill Tag Overlay on Image *\/\n        .image-badge {\n            position: absolute;\n            top: 20px;\n            left: 20px;\n            background: rgba(9, 95, 92, 0.9);\n            backdrop-filter: blur(5px);\n            color: #ffffff;\n            padding: 6px 14px;\n            font-size: 0.8rem;\n            font-weight: 600;\n            border-radius: 30px;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n            z-index: 2;\n        }\n\n        \/* Right Side Text Details *\/\n        .card-content-wrapper {\n            flex: 1; \/* Proportional width of the content area *\/\n            padding: 40px;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            background: linear-gradient(135deg, #ffffff 0%, #fbfdfd 100%);\n        }\n\n        .card-subtitle {\n            color: #00adb5;\n            font-size: 0.85rem;\n            font-weight: 700;\n            text-transform: uppercase;\n            letter-spacing: 2px;\n            margin-bottom: 10px;\n        }\n\n        .card-title {\n            color: var(--text-dark);\n            font-size: 1.85rem;\n            line-height: 1.3;\n            margin: 0 0 15px 0;\n            font-weight: 700;\n        }\n\n        .card-description {\n            color: var(--text-muted);\n            font-size: 1rem;\n            line-height: 1.7;\n            margin: 0 0 30px 0;\n            font-weight: 400;\n        }\n\n        \/* Dynamic Action Button *\/\n        .card-cta-btn {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            align-self: flex-start;\n            padding: 12px 28px;\n            background: var(--primary-gradient);\n            color: #ffffff;\n            text-decoration: none;\n            font-weight: 600;\n            font-size: 0.95rem;\n            border-radius: 50px;\n            box-shadow: 0 4px 15px rgba(0, 173, 181, 0.25);\n            transition: var(--transition);\n        }\n\n        .card-cta-btn:hover {\n            background: var(--primary-hover);\n            box-shadow: 0 6px 20px rgba(0, 173, 181, 0.4);\n            transform: translateX(3px);\n        }\n\n        .card-cta-btn svg {\n            margin-left: 8px;\n            transition: var(--transition);\n        }\n\n        .card-cta-btn:hover svg {\n            transform: translateX(4px);\n        }\n\n        \/* Responsive Breakpoint for Mobile and Tablets *\/\n        @media (max-width: 850px) {\n            .course-landscape-card {\n                flex-direction: column; \/* Switches layout to vertical grid stack *\/\n            }\n            .card-image-wrapper {\n                min-height: 250px;\n            }\n            .card-content-wrapper {\n                padding: 30px;\n            }\n            .card-title {\n                font-size: 1.5rem;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n\n    <div class=\"course-card-container\">\n        <div class=\"course-landscape-card\">\n            \n            <!-- Left Side Course Image -->\n            <div class=\"card-image-wrapper\">\n                <span class=\"image-badge\">Professional<\/span>\n                <img decoding=\"async\" src=\"https:\/\/heyoninstitute.lk\/wp-content\/uploads\/2026\/06\/Gemini_Generated_Image_plxmamplxmamplxm.png\" alt=\"Capacity Building Training\">\n            <\/div>\n            \n            <!-- Right Side Course Details -->\n            <div class=\"card-content-wrapper\">\n                <div class=\"card-subtitle\">Basic Certificate In ICT <\/div>\n                <h2 class=\"card-title\">Basic Certificate In ICT <\/h2>\n                <p class=\"card-description\"><\/p>\n                \n                <a href=\"https:\/\/heyoninstitute.lk\/?page_id=192\" class=\"card-cta-btn\">\n                    More Details\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>\n                <\/a>\n            <\/div>\n\n        <\/div>\n    <\/div>\n\n<\/body>\n<\/html>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<!DOCTYPE html>\n<html lang=\"si\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <style>\n        :root {\n            --primary-gradient: linear-gradient(46deg, #00adb5 4%, #095f5c 93%);\n            --primary-hover: linear-gradient(270deg, #00adb5 4%, #095f5c 93%);\n            --text-dark: #2d2d2d;\n            --text-muted: #555555;\n            --border-radius: 16px;\n            --transition: all 0.3s ease;\n        }\n\n        \/* Container styling to center the single card on your page template *\/\n        .course-card-container {\n            max-width: 1100px;\n            width: 100%;\n            margin: 20px auto;\n            padding: 0 20px;\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n        }\n\n        \/* Beautiful Landscape Card Layout *\/\n        .course-landscape-card {\n            display: flex;\n            flex-direction: row; \/* Forces Image Left, Details Right *\/\n            background: #ffffff;\n            border-radius: var(--border-radius);\n            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);\n            overflow: hidden;\n            min-height: 400px;\n            transition: var(--transition);\n            border: 1px solid rgba(0, 0, 0, 0.04);\n        }\n\n        .course-landscape-card:hover {\n            transform: translateY(-5px);\n            box-shadow: 0 15px 40px rgba(0, 173, 181, 0.12);\n        }\n\n        \/* Left Side Image Container *\/\n        .card-image-wrapper {\n            flex: 1.1; \/* Proportional width of the image area *\/\n            position: relative;\n            overflow: hidden;\n            min-height: 100%;\n        }\n\n        .card-image-wrapper img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            display: block;\n            transition: var(--transition);\n        }\n\n        .course-landscape-card:hover .card-image-wrapper img {\n            transform: scale(1.03);\n        }\n\n        \/* Elegant Pill Tag Overlay on Image *\/\n        .image-badge {\n            position: absolute;\n            top: 20px;\n            left: 20px;\n            background: rgba(9, 95, 92, 0.9);\n            backdrop-filter: blur(5px);\n            color: #ffffff;\n            padding: 6px 14px;\n            font-size: 0.8rem;\n            font-weight: 600;\n            border-radius: 30px;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n            z-index: 2;\n        }\n\n        \/* Right Side Text Details *\/\n        .card-content-wrapper {\n            flex: 1; \/* Proportional width of the content area *\/\n            padding: 40px;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            background: linear-gradient(135deg, #ffffff 0%, #fbfdfd 100%);\n        }\n\n        .card-subtitle {\n            color: #00adb5;\n            font-size: 0.85rem;\n            font-weight: 700;\n            text-transform: uppercase;\n            letter-spacing: 2px;\n            margin-bottom: 10px;\n        }\n\n        .card-title {\n            color: var(--text-dark);\n            font-size: 1.85rem;\n            line-height: 1.3;\n            margin: 0 0 15px 0;\n            font-weight: 700;\n        }\n\n        .card-description {\n            color: var(--text-muted);\n            font-size: 1rem;\n            line-height: 1.7;\n            margin: 0 0 30px 0;\n            font-weight: 400;\n        }\n\n        \/* Dynamic Action Button *\/\n        .card-cta-btn {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            align-self: flex-start;\n            padding: 12px 28px;\n            background: var(--primary-gradient);\n            color: #ffffff;\n            text-decoration: none;\n            font-weight: 600;\n            font-size: 0.95rem;\n            border-radius: 50px;\n            box-shadow: 0 4px 15px rgba(0, 173, 181, 0.25);\n            transition: var(--transition);\n        }\n\n        .card-cta-btn:hover {\n            background: var(--primary-hover);\n            box-shadow: 0 6px 20px rgba(0, 173, 181, 0.4);\n            transform: translateX(3px);\n        }\n\n        .card-cta-btn svg {\n            margin-left: 8px;\n            transition: var(--transition);\n        }\n\n        .card-cta-btn:hover svg {\n            transform: translateX(4px);\n        }\n\n        \/* Responsive Breakpoint for Mobile and Tablets *\/\n        @media (max-width: 850px) {\n            .course-landscape-card {\n                flex-direction: column; \/* Switches layout to vertical grid stack *\/\n            }\n            .card-image-wrapper {\n                min-height: 250px;\n            }\n            .card-content-wrapper {\n                padding: 30px;\n            }\n            .card-title {\n                font-size: 1.5rem;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n\n    <div class=\"course-card-container\">\n        <div class=\"course-landscape-card\">\n            \n            <!-- Left Side Course Image -->\n            <div class=\"card-image-wrapper\">\n                <span class=\"image-badge\">Professional<\/span>\n                <img decoding=\"async\" src=\"https:\/\/heyoninstitute.lk\/wp-content\/uploads\/2026\/06\/Gemini_Generated_Image_plxmamplxmamplxm.png\" alt=\"Capacity Building Training\">\n            <\/div>\n            \n            <!-- Right Side Course Details -->\n            <div class=\"card-content-wrapper\">\n                <div class=\"card-subtitle\">Certificate In Marketing Management <\/div>\n                <h2 class=\"card-title\">Certificate In Marketing Management <\/h2>\n                <p class=\"card-description\"><\/p>\n                \n                <a href=\"https:\/\/heyoninstitute.lk\/?page_id=194\" class=\"card-cta-btn\">\n                    More Details\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>\n                <\/a>\n            <\/div>\n\n        <\/div>\n    <\/div>\n\n<\/body>\n<\/html>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<!DOCTYPE html>\n<html lang=\"si\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <style>\n        :root {\n            --primary-gradient: linear-gradient(46deg, #00adb5 4%, #095f5c 93%);\n            --primary-hover: linear-gradient(270deg, #00adb5 4%, #095f5c 93%);\n            --text-dark: #2d2d2d;\n            --text-muted: #555555;\n            --border-radius: 16px;\n            --transition: all 0.3s ease;\n        }\n\n        \/* Container styling to center the single card on your page template *\/\n        .course-card-container {\n            max-width: 1100px;\n            width: 100%;\n            margin: 20px auto;\n            padding: 0 20px;\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n        }\n\n        \/* Beautiful Landscape Card Layout *\/\n        .course-landscape-card {\n            display: flex;\n            flex-direction: row; \/* Forces Image Left, Details Right *\/\n            background: #ffffff;\n            border-radius: var(--border-radius);\n            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);\n            overflow: hidden;\n            min-height: 400px;\n            transition: var(--transition);\n            border: 1px solid rgba(0, 0, 0, 0.04);\n        }\n\n        .course-landscape-card:hover {\n            transform: translateY(-5px);\n            box-shadow: 0 15px 40px rgba(0, 173, 181, 0.12);\n        }\n\n        \/* Left Side Image Container *\/\n        .card-image-wrapper {\n            flex: 1.1; \/* Proportional width of the image area *\/\n            position: relative;\n            overflow: hidden;\n            min-height: 100%;\n        }\n\n        .card-image-wrapper img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            display: block;\n            transition: var(--transition);\n        }\n\n        .course-landscape-card:hover .card-image-wrapper img {\n            transform: scale(1.03);\n        }\n\n        \/* Elegant Pill Tag Overlay on Image *\/\n        .image-badge {\n            position: absolute;\n            top: 20px;\n            left: 20px;\n            background: rgba(9, 95, 92, 0.9);\n            backdrop-filter: blur(5px);\n            color: #ffffff;\n            padding: 6px 14px;\n            font-size: 0.8rem;\n            font-weight: 600;\n            border-radius: 30px;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n            z-index: 2;\n        }\n\n        \/* Right Side Text Details *\/\n        .card-content-wrapper {\n            flex: 1; \/* Proportional width of the content area *\/\n            padding: 40px;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            background: linear-gradient(135deg, #ffffff 0%, #fbfdfd 100%);\n        }\n\n        .card-subtitle {\n            color: #00adb5;\n            font-size: 0.85rem;\n            font-weight: 700;\n            text-transform: uppercase;\n            letter-spacing: 2px;\n            margin-bottom: 10px;\n        }\n\n        .card-title {\n            color: var(--text-dark);\n            font-size: 1.85rem;\n            line-height: 1.3;\n            margin: 0 0 15px 0;\n            font-weight: 700;\n        }\n\n        .card-description {\n            color: var(--text-muted);\n            font-size: 1rem;\n            line-height: 1.7;\n            margin: 0 0 30px 0;\n            font-weight: 400;\n        }\n\n        \/* Dynamic Action Button *\/\n        .card-cta-btn {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            align-self: flex-start;\n            padding: 12px 28px;\n            background: var(--primary-gradient);\n            color: #ffffff;\n            text-decoration: none;\n            font-weight: 600;\n            font-size: 0.95rem;\n            border-radius: 50px;\n            box-shadow: 0 4px 15px rgba(0, 173, 181, 0.25);\n            transition: var(--transition);\n        }\n\n        .card-cta-btn:hover {\n            background: var(--primary-hover);\n            box-shadow: 0 6px 20px rgba(0, 173, 181, 0.4);\n            transform: translateX(3px);\n        }\n\n        .card-cta-btn svg {\n            margin-left: 8px;\n            transition: var(--transition);\n        }\n\n        .card-cta-btn:hover svg {\n            transform: translateX(4px);\n        }\n\n        \/* Responsive Breakpoint for Mobile and Tablets *\/\n        @media (max-width: 850px) {\n            .course-landscape-card {\n                flex-direction: column; \/* Switches layout to vertical grid stack *\/\n            }\n            .card-image-wrapper {\n                min-height: 250px;\n            }\n            .card-content-wrapper {\n                padding: 30px;\n            }\n            .card-title {\n                font-size: 1.5rem;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n\n    <div class=\"course-card-container\">\n        <div class=\"course-landscape-card\">\n            \n            <!-- Left Side Course Image -->\n            <div class=\"card-image-wrapper\">\n                <span class=\"image-badge\">Professional<\/span>\n                <img decoding=\"async\" src=\"https:\/\/heyoninstitute.lk\/wp-content\/uploads\/2026\/06\/Gemini_Generated_Image_plxmamplxmamplxm.png\" alt=\"Capacity Building Training\">\n            <\/div>\n            \n            <!-- Right Side Course Details -->\n            <div class=\"card-content-wrapper\">\n                <div class=\"card-subtitle\">Certificate in Web Designing With WordPress <\/div>\n                <h2 class=\"card-title\">Certificate in Web Designing With WordPress <\/h2>\n                <p class=\"card-description\"><\/p>\n                \n                <a href=\"https:\/\/heyoninstitute.lk\/?page_id=219\" class=\"card-cta-btn\">\n                    More Details\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>\n                <\/a>\n            <\/div>\n\n        <\/div>\n    <\/div>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Professional Basic Certificate In ICT Basic Certificate In ICT More Details Professional Certificate In Marketing Management Certificate In Marketing Management More Details Professional Certificate in Web Designing With WordPress Certificate in Web Designing With WordPress More Details<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-315","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/heyoninstitute.lk\/index.php?rest_route=\/wp\/v2\/pages\/315","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/heyoninstitute.lk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/heyoninstitute.lk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/heyoninstitute.lk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/heyoninstitute.lk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=315"}],"version-history":[{"count":8,"href":"https:\/\/heyoninstitute.lk\/index.php?rest_route=\/wp\/v2\/pages\/315\/revisions"}],"predecessor-version":[{"id":619,"href":"https:\/\/heyoninstitute.lk\/index.php?rest_route=\/wp\/v2\/pages\/315\/revisions\/619"}],"wp:attachment":[{"href":"https:\/\/heyoninstitute.lk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}