{"id":20,"date":"2026-02-05T19:19:02","date_gmt":"2026-02-05T19:19:02","guid":{"rendered":"https:\/\/mi2design.ro\/?page_id=20"},"modified":"2026-08-10T09:59:01","modified_gmt":"2026-08-10T09:59:01","slug":"portofoliu","status":"publish","type":"page","link":"https:\/\/mi2design.ro\/en\/portofoliu\/","title":{"rendered":"Portfolio"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"20\" class=\"elementor elementor-20\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d80c4af elementor-section-height-min-height elementor-section-boxed elementor-section-height-default elementor-section-items-middle\" data-id=\"d80c4af\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1bc9b75\" data-id=\"1bc9b75\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d4d8a72 elementor-widget__width-auto elementor-widget elementor-widget-heading\" data-id=\"d4d8a72\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h5 class=\"elementor-heading-title elementor-size-default\">Proiecte realizate<\/h5>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f1057b6 elementor-widget elementor-widget-heading\" data-id=\"f1057b6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Rezultate construite\n<br><a style=\"font-weight: 800;color: #50A2FF\">prin strategie \u0219i execu\u021bie<\/a><\/h1>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-524b596 elementor-widget__width-initial elementor-widget-tablet__width-inherit elementor-widget elementor-widget-text-editor\" data-id=\"524b596\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\tFiecare proiect este g\u00e2ndit pentru performan\u021b\u0103. De la website-uri corporate la aplica\u021bii complexe, livr\u0103m solu\u021bii digitale clare, rapide \u0219i orientate spre conversie.\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0006474 elementor-widget elementor-widget-spacer\" data-id=\"0006474\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1dc869e elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default\" data-id=\"1dc869e\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-40445bb\" data-id=\"40445bb\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5ed62bc elementor-widget elementor-widget-html\" data-id=\"5ed62bc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section id=\"wswPortfolio\">\r\n\r\n<div class=\"wsw-shell\">\r\n\r\n    <div class=\"wsw-head\">\r\n\r\n        <div>\r\n            <div class=\"wsw-kicker\">WEB DESIGN PORTFOLIO<\/div>\r\n\r\n            <h2>\r\n                Websites built for\r\n                <span>real businesses.<\/span>\r\n            <\/h2>\r\n\r\n            <p>\r\n                Selected websites designed and developed for businesses\r\n                across the United Kingdom, Europe and international markets.\r\n            <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"wsw-count\">\r\n            <strong id=\"wswCount\">0<\/strong>\r\n            <span>PROJECTS<\/span>\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <div class=\"wsw-controls\">\r\n\r\n        <div class=\"wsw-search\">\r\n            <span>\u2315<\/span>\r\n\r\n            <input\r\n                id=\"wswSearch\"\r\n                type=\"search\"\r\n                placeholder=\"Search portfolio...\"\r\n            >\r\n        <\/div>\r\n\r\n\r\n        <div class=\"wsw-filters\">\r\n\r\n            <button class=\"wsw-filter active\" data-filter=\"all\">\r\n                All\r\n            <\/button>\r\n\r\n            <button class=\"wsw-filter\" data-filter=\"United Kingdom\">\r\n                UK\r\n            <\/button>\r\n\r\n            <button class=\"wsw-filter\" data-filter=\"Romania\">\r\n                Romania\r\n            <\/button>\r\n\r\n            <button class=\"wsw-filter\" data-filter=\"Italy\">\r\n                Italy\r\n            <\/button>\r\n\r\n            <button class=\"wsw-filter\" data-filter=\"Germany\">\r\n                Germany\r\n            <\/button>\r\n\r\n            <button class=\"wsw-filter\" data-filter=\"Switzerland\">\r\n                Switzerland\r\n            <\/button>\r\n\r\n            <button class=\"wsw-filter\" data-filter=\"International\">\r\n                International\r\n            <\/button>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <div id=\"wswGrid\" class=\"wsw-grid\"><\/div>\r\n\r\n\r\n    <div class=\"wsw-more-wrap\">\r\n        <button id=\"wswMore\" class=\"wsw-more\">\r\n            LOAD MORE PROJECTS \u2193\r\n        <\/button>\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n   PORTFOLIO BASE\r\n========================================================= *\/\r\n\r\n#wswPortfolio,\r\n#wswPortfolio *{\r\n    box-sizing:border-box;\r\n}\r\n\r\n#wswPortfolio{\r\n\r\n    --green:#173c32;\r\n    --green2:#0c2922;\r\n    --gold:#dfbd42;\r\n    --text:#151b18;\r\n    --grey:#717b76;\r\n    --line:#e5eae7;\r\n    --soft:#f4f7f5;\r\n\r\n    width:100%;\r\n    background:#fff;\r\n\r\n    font-family:\r\n        Montserrat,\r\n        Arial,\r\n        Helvetica,\r\n        sans-serif;\r\n\r\n    color:var(--text);\r\n}\r\n\r\n\r\n.wsw-shell{\r\n\r\n    width:100%;\r\n    max-width:1920px;\r\n\r\n    margin:auto;\r\n\r\n    padding:\r\n        clamp(55px,6vw,105px)\r\n        clamp(18px,4vw,80px)\r\n        clamp(70px,7vw,120px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER\r\n========================================================= *\/\r\n\r\n.wsw-head{\r\n\r\n    display:flex;\r\n    justify-content:space-between;\r\n    align-items:flex-end;\r\n\r\n    gap:40px;\r\n\r\n    margin-bottom:42px;\r\n}\r\n\r\n\r\n.wsw-kicker{\r\n\r\n    margin-bottom:13px;\r\n\r\n    color:var(--green);\r\n\r\n    font-size:11px;\r\n    font-weight:800;\r\n\r\n    letter-spacing:.18em;\r\n}\r\n\r\n\r\n.wsw-head h2{\r\n\r\n    max-width:1000px;\r\n\r\n    margin:0;\r\n\r\n    font-size:\r\n        clamp(40px,4.6vw,82px);\r\n\r\n    line-height:.96;\r\n\r\n    font-weight:800;\r\n\r\n    letter-spacing:-.05em;\r\n}\r\n\r\n\r\n.wsw-head h2 span{\r\n\r\n    display:block;\r\n\r\n    color:var(--green);\r\n}\r\n\r\n\r\n.wsw-head p{\r\n\r\n    max-width:730px;\r\n\r\n    margin:\r\n        25px\r\n        0\r\n        0;\r\n\r\n    color:var(--grey);\r\n\r\n    font-size:\r\n        clamp(14px,1.1vw,18px);\r\n\r\n    line-height:1.7;\r\n}\r\n\r\n\r\n.wsw-count{\r\n\r\n    display:flex;\r\n    flex-direction:column;\r\n\r\n    align-items:flex-end;\r\n\r\n    padding-bottom:5px;\r\n}\r\n\r\n\r\n.wsw-count strong{\r\n\r\n    color:var(--green);\r\n\r\n    font-size:54px;\r\n\r\n    line-height:1;\r\n\r\n    font-weight:800;\r\n}\r\n\r\n\r\n.wsw-count span{\r\n\r\n    margin-top:5px;\r\n\r\n    color:#89918d;\r\n\r\n    font-size:8px;\r\n    font-weight:800;\r\n\r\n    letter-spacing:.15em;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CONTROLS\r\n========================================================= *\/\r\n\r\n.wsw-controls{\r\n\r\n    display:flex;\r\n\r\n    justify-content:space-between;\r\n    align-items:center;\r\n\r\n    gap:25px;\r\n\r\n    margin-bottom:42px;\r\n\r\n    padding:16px 0;\r\n\r\n    border-top:\r\n        1px solid var(--line);\r\n\r\n    border-bottom:\r\n        1px solid var(--line);\r\n}\r\n\r\n\r\n.wsw-search{\r\n\r\n    width:260px;\r\n    flex:0 0 260px;\r\n\r\n    display:flex;\r\n\r\n    align-items:center;\r\n\r\n    gap:8px;\r\n}\r\n\r\n\r\n.wsw-search span{\r\n\r\n    color:#888f8b;\r\n\r\n    font-size:21px;\r\n}\r\n\r\n\r\n.wsw-search input{\r\n\r\n    width:100%;\r\n\r\n    border:0;\r\n\r\n    outline:0;\r\n\r\n    background:transparent;\r\n\r\n    color:#18211d;\r\n\r\n    font-family:inherit;\r\n\r\n    font-size:12px;\r\n\r\n    font-weight:600;\r\n}\r\n\r\n\r\n.wsw-filters{\r\n\r\n    display:flex;\r\n\r\n    justify-content:flex-end;\r\n    align-items:center;\r\n\r\n    gap:5px;\r\n\r\n    overflow-x:auto;\r\n\r\n    scrollbar-width:none;\r\n}\r\n\r\n\r\n.wsw-filters::-webkit-scrollbar{\r\n    display:none;\r\n}\r\n\r\n\r\n.wsw-filter{\r\n\r\n    flex:0 0 auto;\r\n\r\n    padding:\r\n        9px\r\n        14px;\r\n\r\n    border:0;\r\n\r\n    border-radius:100px;\r\n\r\n    background:transparent;\r\n\r\n    color:#747d79;\r\n\r\n    cursor:pointer;\r\n\r\n    font-family:inherit;\r\n\r\n    font-size:10px;\r\n\r\n    font-weight:700;\r\n\r\n    transition:.25s;\r\n}\r\n\r\n\r\n.wsw-filter:hover{\r\n\r\n    background:#f1f4f2;\r\n\r\n    color:var(--green);\r\n}\r\n\r\n\r\n.wsw-filter.active{\r\n\r\n    background:var(--green);\r\n\r\n    color:#fff;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   GRID\r\n========================================================= *\/\r\n\r\n.wsw-grid{\r\n\r\n    display:grid;\r\n\r\n    grid-template-columns:\r\n        repeat(4,minmax(0,1fr));\r\n\r\n    gap:\r\n        clamp(30px,3vw,55px)\r\n        clamp(18px,2vw,38px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CARD\r\n========================================================= *\/\r\n\r\n.wsw-project{\r\n\r\n    min-width:0;\r\n}\r\n\r\n\r\n.wsw-card{\r\n\r\n    min-height:600px;\r\n\r\n    position:relative;\r\n\r\n    display:flex;\r\n\r\n    flex-direction:column;\r\n\r\n    align-items:center;\r\n\r\n    padding:\r\n        24px\r\n        17px\r\n        25px;\r\n\r\n    overflow:hidden;\r\n\r\n    border:\r\n        1px solid #e4e9e6;\r\n\r\n    border-radius:26px;\r\n\r\n    background:\r\n\r\n        radial-gradient(\r\n            circle at 50% -15%,\r\n            rgba(23,60,50,.09),\r\n            transparent 43%\r\n        ),\r\n\r\n        linear-gradient(\r\n            145deg,\r\n            #fbfcfb,\r\n            #f2f5f3\r\n        );\r\n\r\n    transition:\r\n        transform .35s ease,\r\n        box-shadow .35s ease,\r\n        border-color .35s ease;\r\n}\r\n\r\n\r\n.wsw-project:hover .wsw-card{\r\n\r\n    transform:\r\n        translateY(-7px);\r\n\r\n    border-color:#d3ddd8;\r\n\r\n    box-shadow:\r\n        0 30px 60px\r\n        rgba(15,48,38,.11);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CARD HEADER\r\n========================================================= *\/\r\n\r\n.wsw-card-top{\r\n\r\n    width:100%;\r\n\r\n    min-height:25px;\r\n\r\n    margin-bottom:20px;\r\n\r\n    display:flex;\r\n\r\n    align-items:center;\r\n\r\n    justify-content:space-between;\r\n\r\n    gap:8px;\r\n}\r\n\r\n\r\n.wsw-country{\r\n\r\n    display:flex;\r\n\r\n    align-items:center;\r\n\r\n    gap:6px;\r\n\r\n    color:#68736e;\r\n\r\n    font-size:8px;\r\n\r\n    font-weight:800;\r\n\r\n    letter-spacing:.08em;\r\n\r\n    text-transform:uppercase;\r\n}\r\n\r\n\r\n.wsw-country:before{\r\n\r\n    content:\"\";\r\n\r\n    width:6px;\r\n    height:6px;\r\n\r\n    border-radius:50%;\r\n\r\n    background:var(--gold);\r\n}\r\n\r\n\r\n.wsw-old{\r\n\r\n    padding:\r\n        5px\r\n        8px;\r\n\r\n    border:\r\n        1px solid #dce2df;\r\n\r\n    border-radius:50px;\r\n\r\n    background:#fff;\r\n\r\n    color:#828b86;\r\n\r\n    font-size:6px;\r\n\r\n    font-weight:800;\r\n\r\n    letter-spacing:.08em;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PHONE MOCKUP\r\n========================================================= *\/\r\n\r\n.wsw-phone-area{\r\n\r\n    position:relative;\r\n\r\n    width:100%;\r\n\r\n    display:flex;\r\n\r\n    justify-content:center;\r\n}\r\n\r\n\r\n.wsw-phone-area:after{\r\n\r\n    content:\"\";\r\n\r\n    position:absolute;\r\n\r\n    left:50%;\r\n    bottom:-17px;\r\n\r\n    width:58%;\r\n    height:24px;\r\n\r\n    transform:\r\n        translateX(-50%);\r\n\r\n    background:\r\n        rgba(17,52,41,.15);\r\n\r\n    filter:\r\n        blur(18px);\r\n\r\n    border-radius:50%;\r\n}\r\n\r\n\r\n.wsw-phone{\r\n\r\n    \/*\r\n       Phone displayed size\r\n    *\/\r\n\r\n    --phone-width:220px;\r\n\r\n    position:relative;\r\n\r\n    z-index:2;\r\n\r\n    width:\r\n        var(--phone-width);\r\n\r\n    max-width:82%;\r\n\r\n    aspect-ratio:\r\n        390 \/ 844;\r\n\r\n    padding:6px;\r\n\r\n    overflow:hidden;\r\n\r\n    border-radius:36px;\r\n\r\n    background:\r\n\r\n        linear-gradient(\r\n            145deg,\r\n            #3a3e3c,\r\n            #060707 48%,\r\n            #171a19\r\n        );\r\n\r\n    box-shadow:\r\n\r\n        inset\r\n        0 0 0 1px\r\n        rgba(255,255,255,.2),\r\n\r\n        0 20px 37px\r\n        rgba(12,39,30,.20);\r\n\r\n    transition:\r\n        transform .4s\r\n        cubic-bezier(.2,.8,.2,1);\r\n}\r\n\r\n\r\n.wsw-project:hover\r\n.wsw-phone{\r\n\r\n    transform:\r\n        translateY(-7px)\r\n        scale(1.02);\r\n}\r\n\r\n\r\n\/* Dynamic Island *\/\r\n\r\n.wsw-phone:before{\r\n\r\n    content:\"\";\r\n\r\n    position:absolute;\r\n\r\n    z-index:20;\r\n\r\n    top:12px;\r\n    left:50%;\r\n\r\n    width:66px;\r\n    height:18px;\r\n\r\n    transform:\r\n        translateX(-50%);\r\n\r\n    border-radius:30px;\r\n\r\n    background:#050606;\r\n\r\n    box-shadow:\r\n        inset 0 0 0 1px\r\n        rgba(255,255,255,.04);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SCREEN\r\n========================================================= *\/\r\n\r\n.wsw-screen{\r\n\r\n    position:relative;\r\n\r\n    width:100%;\r\n    height:100%;\r\n\r\n    overflow:hidden;\r\n\r\n    border-radius:30px;\r\n\r\n    background:#fff;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LIVE WEBSITE IFRAME\r\n========================================================= *\/\r\n\r\n\/*\r\n REAL PHONE BROWSER DIMENSIONS\r\n\r\n Website thinks viewport is approximately:\r\n\r\n 390px \u00d7 844px\r\n\r\n We then scale that mobile page to fit inside\r\n the visual phone.\r\n*\/\r\n\r\n.wsw-browser{\r\n\r\n    position:absolute;\r\n\r\n    top:0;\r\n    left:0;\r\n\r\n    width:390px;\r\n    height:844px;\r\n\r\n    border:0;\r\n\r\n    background:#fff;\r\n\r\n    transform-origin:\r\n        top left;\r\n\r\n    pointer-events:none;\r\n}\r\n\r\n\r\n\/* loading screen underneath iframe *\/\r\n\r\n.wsw-loading{\r\n\r\n    position:absolute;\r\n\r\n    inset:0;\r\n\r\n    z-index:0;\r\n\r\n    display:flex;\r\n\r\n    flex-direction:column;\r\n\r\n    align-items:center;\r\n\r\n    justify-content:center;\r\n\r\n    gap:11px;\r\n\r\n    padding:20px;\r\n\r\n    text-align:center;\r\n\r\n    background:#fff;\r\n}\r\n\r\n\r\n.wsw-spinner{\r\n\r\n    width:25px;\r\n    height:25px;\r\n\r\n    border:\r\n        2px solid #dfe4e1;\r\n\r\n    border-top-color:\r\n        var(--green);\r\n\r\n    border-radius:50%;\r\n\r\n    animation:\r\n        wswSpin .8s linear infinite;\r\n}\r\n\r\n\r\n@keyframes wswSpin{\r\n\r\n    to{\r\n        transform:\r\n            rotate(360deg);\r\n    }\r\n}\r\n\r\n\r\n.wsw-loading span{\r\n\r\n    color:#7c8681;\r\n\r\n    font-size:8px;\r\n\r\n    font-weight:700;\r\n\r\n    letter-spacing:.07em;\r\n\r\n    text-transform:uppercase;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ARCHIVED IMAGE\r\n========================================================= *\/\r\n\r\n.wsw-archive-img{\r\n\r\n    position:absolute;\r\n\r\n    z-index:2;\r\n\r\n    inset:0;\r\n\r\n    width:100%;\r\n    height:100%;\r\n\r\n    object-fit:cover;\r\n\r\n    object-position:\r\n        top center;\r\n\r\n    background:#fff;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   INFO\r\n========================================================= *\/\r\n\r\n.wsw-info{\r\n\r\n    width:100%;\r\n\r\n    margin-top:27px;\r\n\r\n    text-align:center;\r\n}\r\n\r\n\r\n.wsw-domain{\r\n\r\n    margin:0;\r\n\r\n    color:#17201c;\r\n\r\n    font-size:\r\n        clamp(14px,1vw,18px);\r\n\r\n    line-height:1.3;\r\n\r\n    font-weight:750;\r\n\r\n    letter-spacing:-.025em;\r\n\r\n    overflow-wrap:anywhere;\r\n}\r\n\r\n\r\n.wsw-type{\r\n\r\n    margin-top:7px;\r\n\r\n    color:#858e89;\r\n\r\n    font-size:8px;\r\n\r\n    font-weight:750;\r\n\r\n    letter-spacing:.07em;\r\n\r\n    text-transform:uppercase;\r\n}\r\n\r\n\r\n.wsw-open{\r\n\r\n    margin-top:14px;\r\n\r\n    display:inline-flex;\r\n\r\n    align-items:center;\r\n\r\n    gap:7px;\r\n\r\n    color:var(--green);\r\n\r\n    text-decoration:none;\r\n\r\n    font-size:8px;\r\n\r\n    font-weight:800;\r\n\r\n    letter-spacing:.08em;\r\n\r\n    text-transform:uppercase;\r\n\r\n    transition:.25s;\r\n}\r\n\r\n\r\n.wsw-open:hover{\r\n\r\n    gap:11px;\r\n\r\n    color:#000;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LOAD MORE\r\n========================================================= *\/\r\n\r\n.wsw-more-wrap{\r\n\r\n    padding-top:55px;\r\n\r\n    text-align:center;\r\n}\r\n\r\n\r\n.wsw-more{\r\n\r\n    padding:\r\n        15px\r\n        24px;\r\n\r\n    border:\r\n        1px solid var(--green);\r\n\r\n    border-radius:100px;\r\n\r\n    background:#fff;\r\n\r\n    color:var(--green);\r\n\r\n    cursor:pointer;\r\n\r\n    font-family:inherit;\r\n\r\n    font-size:9px;\r\n\r\n    font-weight:800;\r\n\r\n    letter-spacing:.09em;\r\n\r\n    transition:.25s;\r\n}\r\n\r\n\r\n.wsw-more:hover{\r\n\r\n    background:var(--green);\r\n\r\n    color:#fff;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media(max-width:1400px){\r\n\r\n    .wsw-grid{\r\n\r\n        grid-template-columns:\r\n            repeat(3,minmax(0,1fr));\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n@media(max-width:1000px){\r\n\r\n    .wsw-count{\r\n        display:none;\r\n    }\r\n\r\n\r\n    .wsw-grid{\r\n\r\n        grid-template-columns:\r\n            repeat(2,minmax(0,1fr));\r\n\r\n    }\r\n\r\n\r\n    .wsw-controls{\r\n\r\n        display:block;\r\n    }\r\n\r\n\r\n    .wsw-search{\r\n\r\n        width:100%;\r\n\r\n        margin-bottom:14px;\r\n    }\r\n\r\n\r\n    .wsw-filters{\r\n\r\n        justify-content:flex-start;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n\r\n@media(max-width:650px){\r\n\r\n    .wsw-shell{\r\n\r\n        padding:\r\n            48px\r\n            11px\r\n            65px;\r\n    }\r\n\r\n\r\n    .wsw-head{\r\n\r\n        margin-bottom:27px;\r\n    }\r\n\r\n\r\n    .wsw-kicker{\r\n\r\n        font-size:8px;\r\n    }\r\n\r\n\r\n    .wsw-head h2{\r\n\r\n        font-size:\r\n            clamp(35px,10vw,46px);\r\n    }\r\n\r\n\r\n    .wsw-head p{\r\n\r\n        margin-top:17px;\r\n\r\n        font-size:12px;\r\n\r\n        line-height:1.6;\r\n    }\r\n\r\n\r\n    .wsw-controls{\r\n\r\n        margin-bottom:22px;\r\n\r\n        padding:12px 0;\r\n    }\r\n\r\n\r\n    .wsw-search{\r\n\r\n        padding:\r\n            8px\r\n            12px;\r\n\r\n        border:\r\n            1px solid var(--line);\r\n\r\n        border-radius:50px;\r\n    }\r\n\r\n\r\n    .wsw-filter{\r\n\r\n        padding:\r\n            7px\r\n            10px;\r\n\r\n        font-size:7px;\r\n    }\r\n\r\n\r\n    \/*\r\n      TWO PORTFOLIO ITEMS\r\n      PER MOBILE ROW\r\n    *\/\r\n\r\n    .wsw-grid{\r\n\r\n        grid-template-columns:\r\n            repeat(2,minmax(0,1fr));\r\n\r\n        gap:\r\n            15px\r\n            8px;\r\n    }\r\n\r\n\r\n    .wsw-card{\r\n\r\n        min-height:385px;\r\n\r\n        padding:\r\n            14px\r\n            5px\r\n            15px;\r\n\r\n        border-radius:16px;\r\n    }\r\n\r\n\r\n    .wsw-card-top{\r\n\r\n        min-height:18px;\r\n\r\n        margin-bottom:9px;\r\n    }\r\n\r\n\r\n    .wsw-country{\r\n\r\n        gap:4px;\r\n\r\n        font-size:5.8px;\r\n\r\n        letter-spacing:.02em;\r\n    }\r\n\r\n\r\n    .wsw-country:before{\r\n\r\n        width:4px;\r\n        height:4px;\r\n    }\r\n\r\n\r\n    .wsw-old{\r\n\r\n        padding:\r\n            3px\r\n            4px;\r\n\r\n        font-size:4.5px;\r\n    }\r\n\r\n\r\n    \/*\r\n       SMALLER PHONE\r\n       SAME REAL 390px WEBSITE\r\n    *\/\r\n\r\n    .wsw-phone{\r\n\r\n        --phone-width:128px;\r\n\r\n        padding:4px;\r\n\r\n        border-radius:22px;\r\n    }\r\n\r\n\r\n    .wsw-phone:before{\r\n\r\n        top:7px;\r\n\r\n        width:38px;\r\n        height:10px;\r\n    }\r\n\r\n\r\n    .wsw-screen{\r\n\r\n        border-radius:18px;\r\n    }\r\n\r\n\r\n    .wsw-info{\r\n\r\n        margin-top:14px;\r\n    }\r\n\r\n\r\n    .wsw-domain{\r\n\r\n        font-size:10px;\r\n    }\r\n\r\n\r\n    .wsw-type{\r\n\r\n        margin-top:4px;\r\n\r\n        font-size:5.8px;\r\n    }\r\n\r\n\r\n    .wsw-open{\r\n\r\n        margin-top:8px;\r\n\r\n        font-size:5.8px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   VERY SMALL PHONE\r\n========================================================= *\/\r\n\r\n@media(max-width:350px){\r\n\r\n    .wsw-grid{\r\n\r\n        grid-template-columns:1fr;\r\n    }\r\n\r\n\r\n    .wsw-phone{\r\n\r\n        --phone-width:165px;\r\n    }\r\n\r\n\r\n    .wsw-card{\r\n\r\n        min-height:500px;\r\n    }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<script>\r\n\r\n(function(){\r\n\r\n\r\n\/* =========================================================\r\n   PROJECT DATABASE\r\n========================================================= *\/\r\n\r\nconst PROJECTS = [\r\n\r\n{domain:\"harleyeliteacademy.com\",country:\"United Kingdom\",type:\"Medical Education\"},\r\n{domain:\"harleyeliteacademy.co.uk\",country:\"United Kingdom\",type:\"Medical Education\"},\r\n{domain:\"harleyelitegroup.co.uk\",country:\"United Kingdom\",type:\"Medical\"},\r\n{domain:\"harleyelitegroup.com\",country:\"United Kingdom\",type:\"Medical\"},\r\n{domain:\"harleyelitehair.com\",country:\"United Kingdom\",type:\"Medical\"},\r\n{domain:\"hela.academy\",country:\"United Kingdom\",type:\"Medical Education\"},\r\n{domain:\"mvplasticsurgery.com\",country:\"United Kingdom\",type:\"Plastic Surgery\"},\r\n{domain:\"unicsconstruction.uk\",country:\"United Kingdom\",type:\"Construction\"},\r\n{domain:\"topuzisteelfixers.co.uk\",country:\"United Kingdom\",type:\"Construction\"},\r\n{domain:\"topuzicontractors.co.uk\",country:\"United Kingdom\",type:\"Construction\"},\r\n{domain:\"sportshube15.com\",country:\"United Kingdom\",type:\"Sports\"},\r\n{domain:\"hampsteadfc.com\",country:\"United Kingdom\",type:\"Sports\"},\r\n{domain:\"decorpainter.co.uk\",country:\"United Kingdom\",type:\"Construction\"},\r\n{domain:\"co-builder.co.uk\",country:\"United Kingdom\",type:\"Construction\"},\r\n{domain:\"mats-ps.co.uk\",country:\"United Kingdom\",type:\"Business\"},\r\n{domain:\"aestheticslab.co.uk\",country:\"United Kingdom\",type:\"Aesthetics\"},\r\n{domain:\"bellacosarestaurant.com\",country:\"United Kingdom\",type:\"Restaurant\"},\r\n{domain:\"wimpolepharmacy.co.uk\",country:\"United Kingdom\",type:\"Pharmacy\"},\r\n{domain:\"beautylashesval.com\",country:\"United Kingdom\",type:\"Beauty\"},\r\n{domain:\"beautymagiclondon.co.uk\",country:\"United Kingdom\",type:\"Beauty\"},\r\n{domain:\"linacatering.co.uk\",country:\"United Kingdom\",type:\"Catering\"},\r\n{domain:\"petrescufactory.com\",country:\"United Kingdom\",type:\"Business\"},\r\n{domain:\"sussexexecutivechauffeurs.co.uk\",country:\"United Kingdom\",type:\"Transport\"},\r\n{domain:\"amanandvanbirmingham.co.uk\",country:\"United Kingdom\",type:\"Transport\"},\r\n{domain:\"greenmarketing.co.uk\",country:\"United Kingdom\",type:\"Marketing\"},\r\n{domain:\"mariaprocanails.co.uk\",country:\"United Kingdom\",type:\"Beauty\"},\r\n{domain:\"staff4catering.co.uk\",country:\"United Kingdom\",type:\"Recruitment\"},\r\n{domain:\"mi2design.co.uk\",country:\"United Kingdom\",type:\"Web Design\"},\r\n{domain:\"weplant-trees.co.uk\",country:\"United Kingdom\",type:\"Environment\"},\r\n{domain:\"aidamedical.co.uk\",country:\"United Kingdom\",type:\"Medical\"},\r\n{domain:\"360degreeclinic.co.uk\",country:\"United Kingdom\",type:\"Medical\"},\r\n\r\n{domain:\"chefbogdan.ro\",country:\"Romania\",type:\"Hospitality\"},\r\n{domain:\"abpark.ro\",country:\"Romania\",type:\"Business\"},\r\n{domain:\"smilebaby.ro\",country:\"Romania\",type:\"Healthcare\"},\r\n{domain:\"ydbevents.ro\",country:\"Romania\",type:\"Events\"},\r\n{domain:\"mesager24.ro\",country:\"Romania\",type:\"Media\"},\r\n{domain:\"anlan.ro\",country:\"Romania\",type:\"Business\"},\r\n{domain:\"ginevio.ro\",country:\"Romania\",type:\"Healthcare\"},\r\n{domain:\"chirurgie-turcan.ro\",country:\"Romania\",type:\"Medical\"},\r\n{domain:\"megapark.ro\",country:\"Romania\",type:\"Entertainment\"},\r\n{domain:\"artvasytraditional.ro\",country:\"Romania\",type:\"E-Commerce\"},\r\n{domain:\"meseriasii.com\",country:\"Romania\",type:\"Business\"},\r\n{domain:\"kronosat.com\",country:\"Romania\",type:\"Technology\"},\r\n{domain:\"mundo-marmol.ro\",country:\"Romania\",type:\"Business\"},\r\n{domain:\"repario.ro\",country:\"Romania\",type:\"Services\"},\r\n{domain:\"edilrom.com\",country:\"Romania\",type:\"Construction\"},\r\n\r\n{domain:\"pezzaorrostu.it\",country:\"Italy\",type:\"Restaurant\"},\r\n{domain:\"autoluxsrlogliastra.it\",country:\"Italy\",type:\"Automotive\"},\r\n\r\n{domain:\"autoteile-david.de\",country:\"Germany\",type:\"Automotive\"},\r\n{domain:\"topbait.de\",country:\"Germany\",type:\"E-Commerce\"},\r\n\r\n{domain:\"sublimebeaute.ch\",country:\"Switzerland\",type:\"Beauty & Aesthetics\"},\r\n{domain:\"stopaddiction.ch\",country:\"Switzerland\",type:\"Healthcare\"},\r\n\r\n{domain:\"clinicajoelle.qa\",country:\"International\",type:\"Medical\"},\r\n{domain:\"edenderma.com\",country:\"International\",type:\"Aesthetics\"},\r\n{domain:\"educationeurope.eu\",country:\"International\",type:\"Education\"},\r\n{domain:\"educatiopoland.pl\",country:\"International\",type:\"Education\"},\r\n{domain:\"mbbsinpoland.com\",country:\"International\",type:\"Education\"},\r\n{domain:\"bblprp.com\",country:\"International\",type:\"Medical Education\"},\r\n{domain:\"alinachirila.eu\",country:\"International\",type:\"Business\"},\r\n{domain:\"scubadreamers.com\",country:\"International\",type:\"Travel\"}\r\n\r\n\r\n\/*\r\n ============================================================\r\n OLD \/ OFFLINE WEBSITES\r\n\r\n For an offline site you MUST give the card\r\n a saved image.\r\n\r\n Example:\r\n\r\n {\r\n     domain:\"swissgoldline.ch\",\r\n     country:\"Switzerland\",\r\n     type:\"Business\",\r\n     old:true,\r\n     image:\"https:\/\/www.webwarrington.co.uk\/wp-content\/uploads\/portfolio\/swissgoldline.webp\"\r\n }\r\n\r\n ============================================================\r\n*\/\r\n\r\n];\r\n\r\n\r\n\/* =========================================================\r\n   ELEMENTS\r\n========================================================= *\/\r\n\r\nconst grid =\r\ndocument.getElementById(\"wswGrid\");\r\n\r\nconst count =\r\ndocument.getElementById(\"wswCount\");\r\n\r\nconst search =\r\ndocument.getElementById(\"wswSearch\");\r\n\r\nconst more =\r\ndocument.getElementById(\"wswMore\");\r\n\r\nconst buttons =\r\ndocument.querySelectorAll(\".wsw-filter\");\r\n\r\n\r\nlet filter = \"all\";\r\n\r\n\r\nlet visible =\r\nwindow.innerWidth <= 650\r\n? 8\r\n: 12;\r\n\r\n\r\n\/* =========================================================\r\n   ESCAPE\r\n========================================================= *\/\r\n\r\nfunction esc(value){\r\n\r\n    return String(value)\r\n\r\n    .replace(\/&\/g,\"&amp;\")\r\n    .replace(\/<\/g,\"&lt;\")\r\n    .replace(\/>\/g,\"&gt;\")\r\n    .replace(\/\"\/g,\"&quot;\")\r\n    .replace(\/'\/g,\"&#039;\");\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CARD\r\n========================================================= *\/\r\n\r\nfunction createProject(p){\r\n\r\n    const item =\r\n    document.createElement(\"article\");\r\n\r\n\r\n    item.className =\r\n    \"wsw-project\";\r\n\r\n\r\n    let websiteContent;\r\n\r\n\r\n    \/*\r\n     OLD WEBSITE\r\n\r\n     Use your historical screenshot.\r\n    *\/\r\n\r\n    if(p.old && p.image){\r\n\r\n        websiteContent = `\r\n\r\n            <img decoding=\"async\"\r\n\r\n                class=\"wsw-archive-img\"\r\n\r\n                src=\"${esc(p.image)}\"\r\n\r\n                alt=\"${esc(p.domain)} website\"\r\n\r\n                loading=\"lazy\"\r\n\r\n            >\r\n\r\n        `;\r\n\r\n    }\r\n\r\n\r\n    \/*\r\n     CURRENT WEBSITE\r\n\r\n     Render the actual website\r\n     inside the phone.\r\n    *\/\r\n\r\n    else{\r\n\r\n        websiteContent = `\r\n\r\n            <div class=\"wsw-loading\">\r\n\r\n                <div class=\"wsw-spinner\"><\/div>\r\n\r\n                <span>\r\n                    Loading website\r\n                <\/span>\r\n\r\n            <\/div>\r\n\r\n\r\n            <iframe\r\n\r\n                class=\"wsw-browser\"\r\n\r\n                src=\"https:\/\/${esc(p.domain)}\"\r\n\r\n                loading=\"lazy\"\r\n\r\n                scrolling=\"yes\"\r\n\r\n                tabindex=\"-1\"\r\n\r\n                aria-label=\"${esc(p.domain)} website preview\"\r\n\r\n            ><\/iframe>\r\n\r\n        `;\r\n\r\n    }\r\n\r\n\r\n    item.innerHTML = `\r\n\r\n        <div class=\"wsw-card\">\r\n\r\n\r\n            <div class=\"wsw-card-top\">\r\n\r\n\r\n                <div class=\"wsw-country\">\r\n\r\n                    ${esc(p.country)}\r\n\r\n                <\/div>\r\n\r\n\r\n                ${\r\n                    p.old\r\n\r\n                    ?\r\n\r\n                    `<div class=\"wsw-old\">\r\n                        PAST PROJECT\r\n                    <\/div>`\r\n\r\n                    :\r\n\r\n                    \"\"\r\n                }\r\n\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <div class=\"wsw-phone-area\">\r\n\r\n\r\n                <div class=\"wsw-phone\">\r\n\r\n\r\n                    <div class=\"wsw-screen\">\r\n\r\n                        ${websiteContent}\r\n\r\n                    <\/div>\r\n\r\n\r\n                <\/div>\r\n\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <div class=\"wsw-info\">\r\n\r\n\r\n                <h3 class=\"wsw-domain\">\r\n\r\n                    ${esc(p.domain)}\r\n\r\n                <\/h3>\r\n\r\n\r\n                <div class=\"wsw-type\">\r\n\r\n                    ${esc(p.type)}\r\n\r\n                    &nbsp;\u2022&nbsp;\r\n\r\n                    WEB DESIGN\r\n\r\n                <\/div>\r\n\r\n\r\n                ${\r\n                    !p.old\r\n\r\n                    ?\r\n\r\n                    `\r\n\r\n                    <a\r\n                        class=\"wsw-open\"\r\n\r\n                        href=\"https:\/\/${esc(p.domain)}\"\r\n\r\n                        target=\"_blank\"\r\n\r\n                        rel=\"noopener noreferrer\"\r\n                    >\r\n\r\n                        VIEW WEBSITE \u2197\r\n\r\n                    <\/a>\r\n\r\n                    `\r\n\r\n                    :\r\n\r\n                    `\r\n\r\n                    <span class=\"wsw-open\">\r\n\r\n                        PAST PROJECT\r\n\r\n                    <\/span>\r\n\r\n                    `\r\n\r\n                }\r\n\r\n\r\n            <\/div>\r\n\r\n\r\n        <\/div>\r\n\r\n    `;\r\n\r\n\r\n    \/*\r\n     Scale 390px website viewport\r\n     precisely into phone screen.\r\n    *\/\r\n\r\n    const phone =\r\n    item.querySelector(\r\n        \".wsw-screen\"\r\n    );\r\n\r\n\r\n    const iframe =\r\n    item.querySelector(\r\n        \".wsw-browser\"\r\n    );\r\n\r\n\r\n    if(iframe){\r\n\r\n        function scaleFrame(){\r\n\r\n            const width =\r\n            phone.clientWidth;\r\n\r\n\r\n            const scale =\r\n            width \/ 390;\r\n\r\n\r\n            iframe.style.transform =\r\n            \"scale(\" + scale + \")\";\r\n\r\n        }\r\n\r\n\r\n        scaleFrame();\r\n\r\n\r\n        \/*\r\n         resize if Elementor\/browser\r\n         changes card dimensions.\r\n        *\/\r\n\r\n        const observer =\r\n        new ResizeObserver(\r\n            scaleFrame\r\n        );\r\n\r\n\r\n        observer.observe(phone);\r\n\r\n    }\r\n\r\n\r\n    return item;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FILTERED DATA\r\n========================================================= *\/\r\n\r\nfunction getProjects(){\r\n\r\n    const q =\r\n    search.value\r\n    .trim()\r\n    .toLowerCase();\r\n\r\n\r\n    return PROJECTS.filter(\r\n        p => {\r\n\r\n\r\n            const filterOK =\r\n\r\n            filter === \"all\"\r\n\r\n            ||\r\n\r\n            p.country === filter;\r\n\r\n\r\n            const haystack =\r\n\r\n            (\r\n                p.domain +\r\n                \" \" +\r\n                p.country +\r\n                \" \" +\r\n                p.type\r\n            )\r\n\r\n            .toLowerCase();\r\n\r\n\r\n            const searchOK =\r\n\r\n            !q\r\n\r\n            ||\r\n\r\n            haystack.includes(q);\r\n\r\n\r\n            return (\r\n                filterOK &&\r\n                searchOK\r\n            );\r\n\r\n        }\r\n    );\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   RENDER\r\n========================================================= *\/\r\n\r\nfunction render(){\r\n\r\n    const list =\r\n    getProjects();\r\n\r\n\r\n    count.textContent =\r\n    list.length;\r\n\r\n\r\n    grid.innerHTML = \"\";\r\n\r\n\r\n    list\r\n\r\n    .slice(0,visible)\r\n\r\n    .forEach(\r\n        project => {\r\n\r\n            grid.appendChild(\r\n                createProject(project)\r\n            );\r\n\r\n        }\r\n    );\r\n\r\n\r\n    more.style.display =\r\n\r\n    list.length > visible\r\n\r\n    ?\r\n\r\n    \"inline-block\"\r\n\r\n    :\r\n\r\n    \"none\";\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FILTER EVENTS\r\n========================================================= *\/\r\n\r\nbuttons.forEach(\r\n    button => {\r\n\r\n        button.addEventListener(\r\n            \"click\",\r\n\r\n            function(){\r\n\r\n                buttons.forEach(\r\n                    x =>\r\n                    x.classList.remove(\r\n                        \"active\"\r\n                    )\r\n                );\r\n\r\n\r\n                this.classList.add(\r\n                    \"active\"\r\n                );\r\n\r\n\r\n                filter =\r\n                this.dataset.filter;\r\n\r\n\r\n                visible =\r\n                window.innerWidth <= 650\r\n                ? 8\r\n                : 12;\r\n\r\n\r\n                render();\r\n\r\n            }\r\n\r\n        );\r\n\r\n    }\r\n);\r\n\r\n\r\n\/* =========================================================\r\n   SEARCH\r\n========================================================= *\/\r\n\r\nlet timer;\r\n\r\n\r\nsearch.addEventListener(\r\n    \"input\",\r\n\r\n    function(){\r\n\r\n        clearTimeout(timer);\r\n\r\n\r\n        timer =\r\n        setTimeout(\r\n            function(){\r\n\r\n                visible =\r\n                window.innerWidth <= 650\r\n                ? 8\r\n                : 12;\r\n\r\n                render();\r\n\r\n            },\r\n            150\r\n        );\r\n\r\n    }\r\n\r\n);\r\n\r\n\r\n\/* =========================================================\r\n   MORE\r\n========================================================= *\/\r\n\r\nmore.addEventListener(\r\n    \"click\",\r\n\r\n    function(){\r\n\r\n        visible +=\r\n        window.innerWidth <= 650\r\n        ? 8\r\n        : 12;\r\n\r\n\r\n        render();\r\n\r\n    }\r\n);\r\n\r\n\r\n\/* =========================================================\r\n   START\r\n========================================================= *\/\r\n\r\nrender();\r\n\r\n\r\n})();\r\n\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-135c79a elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default\" data-id=\"135c79a\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-133ab92\" data-id=\"133ab92\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-621834c elementor-widget elementor-widget-html\" data-id=\"621834c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"mi2fb-wrap\" id=\"mi2FbPortfolio\">\r\n  <div class=\"mi2fb-card\">\r\n    <div class=\"mi2fb-head\">\r\n      <div>\r\n        <div class=\"mi2fb-title\">Portofoliu Grafic\u0103 (Postare pe Facebook)<\/div>\r\n        <div class=\"mi2fb-sub\">\r\n          Logo-uri \u2022 C\u0103r\u021bi de vizit\u0103 \u2022 Flyere\/Pliante \u2022 Bannere (din post\u0103rile paginilor Facebook)\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"mi2fb-links\">\r\n        <a class=\"mi2fb-link\" href=\"https:\/\/www.facebook.com\/RomaniaMi2design\/photos\" target=\"_blank\" rel=\"noopener\">Deschide album RO<\/a>\r\n        <a class=\"mi2fb-link\" href=\"https:\/\/www.facebook.com\/WebDesigninLONDON\/photos\" target=\"_blank\" rel=\"noopener\">Deschide album London<\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"mi2fb-tabs\" role=\"tablist\" aria-label=\"Categorii portofoliu\">\r\n      <button class=\"mi2fb-tab active\" data-tab=\"logos\" role=\"tab\" aria-selected=\"true\">Logo-uri<\/button>\r\n      <button class=\"mi2fb-tab\" data-tab=\"cards\" role=\"tab\" aria-selected=\"false\">C\u0103r\u021bi de vizit\u0103<\/button>\r\n      <button class=\"mi2fb-tab\" data-tab=\"flyers\" role=\"tab\" aria-selected=\"false\">Pliante & Flyere<\/button>\r\n      <button class=\"mi2fb-tab\" data-tab=\"banners\" role=\"tab\" aria-selected=\"false\">Bannere<\/button>\r\n      <button class=\"mi2fb-tab\" data-tab=\"all\" role=\"tab\" aria-selected=\"false\">Toate<\/button>\r\n    <\/div>\r\n\r\n    <div class=\"mi2fb-note\">\r\n      Tip: ca s\u0103 apar\u0103 \u201cpe bune\u201d, posteaz\u0103 pe Facebook cu hashtag-uri (ex: <b>#logo<\/b>, <b>#cartivizita<\/b>, <b>#flyer<\/b>, <b>#banner<\/b>).\r\n      Aici filtr\u0103m feed-ul dup\u0103 hashtag (\u00een textul post\u0103rii). Dac\u0103 nu ai hashtag-uri, alege \u201cToate\u201d.\r\n    <\/div>\r\n\r\n    <div class=\"mi2fb-grid\">\r\n      <!-- Column 1 -->\r\n      <div class=\"mi2fb-col\">\r\n        <div class=\"mi2fb-col-head\">\r\n          <div class=\"mi2fb-col-title\">Mi2Design Agency RO<\/div>\r\n          <div class=\"mi2fb-col-sub\">facebook.com\/RomaniaMi2design<\/div>\r\n        <\/div>\r\n\r\n        <!-- Facebook Page Plugin -->\r\n        <div class=\"mi2fb-embed\">\r\n          <div class=\"fb-page\"\r\n               data-href=\"https:\/\/www.facebook.com\/RomaniaMi2design\/\"\r\n               data-tabs=\"timeline\"\r\n               data-width=\"500\"\r\n               data-height=\"900\"\r\n               data-small-header=\"true\"\r\n               data-adapt-container-width=\"true\"\r\n               data-hide-cover=\"false\"\r\n               data-show-facepile=\"false\">\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Column 2 -->\r\n      <div class=\"mi2fb-col\">\r\n        <div class=\"mi2fb-col-head\">\r\n          <div class=\"mi2fb-col-title\">WebDesign in London<\/div>\r\n          <div class=\"mi2fb-col-sub\">facebook.com\/WebDesigninLONDON<\/div>\r\n        <\/div>\r\n\r\n        <div class=\"mi2fb-embed\">\r\n          <div class=\"fb-page\"\r\n               data-href=\"https:\/\/www.facebook.com\/WebDesigninLONDON\/\"\r\n               data-tabs=\"timeline\"\r\n               data-width=\"500\"\r\n               data-height=\"900\"\r\n               data-small-header=\"true\"\r\n               data-adapt-container-width=\"true\"\r\n               data-hide-cover=\"false\"\r\n               data-show-facepile=\"false\">\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"mi2fb-footer\">\r\n      <div class=\"mi2fb-footer-left\">\r\n        <div class=\"mi2fb-footer-title\">Sugestie practic\u0103<\/div>\r\n        <div class=\"mi2fb-footer-sub\">\r\n          Dac\u0103 vrei filtrare real\u0103 pe categorii, pune hashtag \u00een post\u0103ri:\r\n          <b>#logo<\/b> \/ <b>#cartivizita<\/b> \/ <b>#flyer<\/b> \/ <b>#banner<\/b>.\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- Facebook SDK -->\r\n<div id=\"fb-root\"><\/div>\r\n<script async defer crossorigin=\"anonymous\"\r\n  src=\"https:\/\/connect.facebook.net\/en_US\/sdk.js#xfbml=1&version=v20.0\">\r\n<\/script>\r\n\r\n<style>\r\n  .mi2fb-wrap{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;max-width:1180px;margin:24px auto;padding:0 12px}\r\n  .mi2fb-card{background:#0b0f14;border:1px solid rgba(255,255,255,.08);border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.35);color:#e9eef5;overflow:hidden}\r\n  .mi2fb-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding:18px 18px 10px}\r\n  .mi2fb-title{font-size:20px;font-weight:950}\r\n  .mi2fb-sub{opacity:.8;margin-top:6px}\r\n  .mi2fb-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}\r\n  .mi2fb-link{background:#0f1620;border:1px solid rgba(255,255,255,.12);color:#e9eef5;text-decoration:none;border-radius:12px;padding:10px 12px;font-weight:900}\r\n  .mi2fb-link:hover{border-color:rgba(123,200,255,.65)}\r\n\r\n  .mi2fb-tabs{display:flex;gap:8px;flex-wrap:wrap;padding:0 18px 12px}\r\n  .mi2fb-tab{background:#0f1620;border:1px solid rgba(255,255,255,.10);color:#e9eef5;border-radius:999px;padding:8px 12px;font-weight:900;cursor:pointer;opacity:.85}\r\n  .mi2fb-tab.active{border-color:rgba(123,200,255,.65);opacity:1}\r\n\r\n  .mi2fb-note{padding:0 18px 14px;opacity:.85;border-top:1px solid rgba(255,255,255,.06)}\r\n  .mi2fb-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px 18px 18px;border-top:1px solid rgba(255,255,255,.06)}\r\n  @media(max-width:980px){.mi2fb-grid{grid-template-columns:1fr}}\r\n  .mi2fb-col{background:#0f1620;border:1px solid rgba(255,255,255,.10);border-radius:16px;overflow:hidden}\r\n  .mi2fb-col-head{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.06)}\r\n  .mi2fb-col-title{font-weight:1000}\r\n  .mi2fb-col-sub{opacity:.75;font-size:12px;margin-top:4px}\r\n  .mi2fb-embed{padding:12px 14px}\r\n  .mi2fb-footer{padding:14px 18px;border-top:1px solid rgba(255,255,255,.06)}\r\n  .mi2fb-footer-title{font-weight:1000}\r\n  .mi2fb-footer-sub{opacity:.85;margin-top:6px}\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n  const root = document.getElementById(\"mi2FbPortfolio\");\r\n  if(!root) return;\r\n\r\n  const tabs = root.querySelectorAll(\".mi2fb-tab\");\r\n\r\n  \/\/ Important: Page Plugin nu are filtrare nativ\u0103 pe \u201cPhotos\u201d.\r\n  \/\/ Aici facem filtrare \u201clogic\u0103\u201d prin recomandarea de hashtag \u00een postare.\r\n  \/\/ Practic: utilizatorul selecteaz\u0103 categoria, iar noi afi\u0219\u0103m un mic hint.\r\n  const map = {\r\n    logos: \"#logo\",\r\n    cards: \"#cartivizita\",\r\n    flyers: \"#flyer\",\r\n    banners: \"#banner\",\r\n    all: \"\"\r\n  };\r\n\r\n  const note = root.querySelector(\".mi2fb-note\");\r\n\r\n  tabs.forEach(btn=>{\r\n    btn.addEventListener(\"click\", ()=>{\r\n      tabs.forEach(x=>x.classList.remove(\"active\"));\r\n      btn.classList.add(\"active\");\r\n\r\n      const key = btn.getAttribute(\"data-tab\");\r\n      const tag = map[key] || \"\";\r\n\r\n      if(tag){\r\n        note.innerHTML =\r\n          `Tip: posteaz\u0103 pe Facebook cu hashtag-ul <b>${tag}<\/b> (\u0219i eventual \u0219i \u00een descriere).\r\n           Aici nu putem filtra \u201cPhotos\u201d direct, dar po\u021bi organiza feed-ul prin hashtag-uri.`;\r\n      }else{\r\n        note.innerHTML =\r\n          `Tip: alege \u201cToate\u201d ca s\u0103 vezi feed-ul complet. Pentru categorii, folose\u0219te hashtag-uri:\r\n           <b>#logo<\/b>, <b>#cartivizita<\/b>, <b>#flyer<\/b>, <b>#banner<\/b>.`;\r\n      }\r\n    });\r\n  });\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Proiecte realizate Rezultate construite prin strategie \u0219i execu\u021bie Fiecare proiect este g\u00e2ndit pentru performan\u021b\u0103. De la website-uri corporate la aplica\u021bii complexe, livr\u0103m solu\u021bii digitale clare, rapide \u0219i orientate spre conversie. WEB DESIGN PORTFOLIO Websites built for real businesses. Selected websites designed and developed for businesses across the United Kingdom, Europe and international markets. 0 PROJECTS &#8230; <a title=\"Portfolio\" class=\"read-more\" href=\"https:\/\/mi2design.ro\/en\/portofoliu\/\" aria-label=\"Read more about Portofoliu\">Read more<\/a><\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-20","page","type-page","status-publish"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Portofoliu - Mi2Design Agency | Creare Website &amp; Graphic Design Rom\u00e2nia<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mi2design.ro\/en\/portofoliu\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Portofoliu - Mi2Design Agency | Creare Website &amp; Graphic Design Rom\u00e2nia\" \/>\n<meta property=\"og:description\" content=\"Proiecte realizate Rezultate construite prin strategie \u0219i execu\u021bie Fiecare proiect este g\u00e2ndit pentru performan\u021b\u0103. De la website-uri corporate la aplica\u021bii complexe, livr\u0103m solu\u021bii digitale clare, rapide \u0219i orientate spre conversie. WEB DESIGN PORTFOLIO Websites built for real businesses. Selected websites designed and developed for businesses across the United Kingdom, Europe and international markets. 0 PROJECTS ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mi2design.ro\/en\/portofoliu\/\" \/>\n<meta property=\"og:site_name\" content=\"Mi2Design Agency | Creare Website &amp; Graphic Design Rom\u00e2nia\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-10T09:59:01+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/mi2design.ro\\\/portofoliu\\\/\",\"url\":\"https:\\\/\\\/mi2design.ro\\\/portofoliu\\\/\",\"name\":\"Portofoliu - Mi2Design Agency | Creare Website &amp; Graphic Design Rom\u00e2nia\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/mi2design.ro\\\/#website\"},\"datePublished\":\"2026-02-05T19:19:02+00:00\",\"dateModified\":\"2026-08-10T09:59:01+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/mi2design.ro\\\/portofoliu\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/mi2design.ro\\\/portofoliu\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/mi2design.ro\\\/portofoliu\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Prima pagin\u0103\",\"item\":\"https:\\\/\\\/mi2design.ro\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Portofoliu\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/mi2design.ro\\\/#website\",\"url\":\"https:\\\/\\\/mi2design.ro\\\/\",\"name\":\"Mi2Design Agency | Creare Website &amp; Graphic Design Rom\u00e2nia\",\"description\":\"Creare website profesional, design grafic \u0219i identitate vizual\u0103 pentru firme. Site rapid \u00een 24h. Solu\u021bii moderne pentrufirme si antreprenori.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/mi2design.ro\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Portofoliu - Mi2Design Agency | Creare Website &amp; Graphic Design Rom\u00e2nia","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/mi2design.ro\/en\/portofoliu\/","og_locale":"en_GB","og_type":"article","og_title":"Portofoliu - Mi2Design Agency | Creare Website &amp; Graphic Design Rom\u00e2nia","og_description":"Proiecte realizate Rezultate construite prin strategie \u0219i execu\u021bie Fiecare proiect este g\u00e2ndit pentru performan\u021b\u0103. De la website-uri corporate la aplica\u021bii complexe, livr\u0103m solu\u021bii digitale clare, rapide \u0219i orientate spre conversie. WEB DESIGN PORTFOLIO Websites built for real businesses. Selected websites designed and developed for businesses across the United Kingdom, Europe and international markets. 0 PROJECTS ... Read more","og_url":"https:\/\/mi2design.ro\/en\/portofoliu\/","og_site_name":"Mi2Design Agency | Creare Website &amp; Graphic Design Rom\u00e2nia","article_modified_time":"2026-08-10T09:59:01+00:00","twitter_card":"summary_large_image","twitter_misc":{"Estimated reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/mi2design.ro\/portofoliu\/","url":"https:\/\/mi2design.ro\/portofoliu\/","name":"Portofoliu - Mi2Design Agency | Creare Website &amp; Graphic Design Rom\u00e2nia","isPartOf":{"@id":"https:\/\/mi2design.ro\/#website"},"datePublished":"2026-02-05T19:19:02+00:00","dateModified":"2026-08-10T09:59:01+00:00","breadcrumb":{"@id":"https:\/\/mi2design.ro\/portofoliu\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mi2design.ro\/portofoliu\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/mi2design.ro\/portofoliu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Prima pagin\u0103","item":"https:\/\/mi2design.ro\/"},{"@type":"ListItem","position":2,"name":"Portofoliu"}]},{"@type":"WebSite","@id":"https:\/\/mi2design.ro\/#website","url":"https:\/\/mi2design.ro\/","name":"Mi2Design Agency | Creare Website &amp; Graphic Design Rom\u00e2nia","description":"Creare website profesional, design grafic \u0219i identitate vizual\u0103 pentru firme. Site rapid \u00een 24h. Solu\u021bii moderne pentrufirme si antreprenori.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mi2design.ro\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"}]}},"_links":{"self":[{"href":"https:\/\/mi2design.ro\/en\/wp-json\/wp\/v2\/pages\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mi2design.ro\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mi2design.ro\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mi2design.ro\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mi2design.ro\/en\/wp-json\/wp\/v2\/comments?post=20"}],"version-history":[{"count":25,"href":"https:\/\/mi2design.ro\/en\/wp-json\/wp\/v2\/pages\/20\/revisions"}],"predecessor-version":[{"id":1060,"href":"https:\/\/mi2design.ro\/en\/wp-json\/wp\/v2\/pages\/20\/revisions\/1060"}],"wp:attachment":[{"href":"https:\/\/mi2design.ro\/en\/wp-json\/wp\/v2\/media?parent=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}