{"id":229,"date":"2019-05-19T03:03:57","date_gmt":"2019-05-19T03:03:57","guid":{"rendered":""},"modified":"2026-04-19T12:37:15","modified_gmt":"2026-04-19T12:37:15","slug":"cases-four-columns","status":"publish","type":"page","link":"https:\/\/runoo.tech\/zh\/cases\/cases-four-columns\/","title":{"rendered":"Cases Four Columns (Demo)"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"229\" class=\"elementor elementor-229\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b619c0c thegem-e-con-layout-thegem e-flex e-con-boxed e-con e-parent\" data-id=\"b619c0c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;thegem_container_layout&quot;:&quot;thegem&quot;}\">\r\n\t\t\t\t\t<div class=\"e-con-inner\">\r\n\t\t\t\t<div class=\"elementor-element elementor-element-2d73cb8 flex-horizontal-align-default flex-horizontal-align-tablet-default flex-horizontal-align-mobile-default flex-vertical-align-default flex-vertical-align-tablet-default flex-vertical-align-mobile-default elementor-widget elementor-widget-html\" data-id=\"2d73cb8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n.cp{width:100%;padding:80px 60px;font-family:'Inter','Segoe UI',Arial,sans-serif;box-sizing:border-box;background:#fff;}\n.cp-inner{max-width:1100px;margin:0 auto;}\n.cp-label{font-size:12px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#2563eb;margin-bottom:16px;}\n.cp-heading{font-size:clamp(2.2rem,4vw,3.2rem);font-weight:900;color:#0f172a;letter-spacing:-0.03em;line-height:1.1;margin:0 0 16px;}\n.cp-sub{font-size:18px;color:#64748b;line-height:1.7;max-width:560px;margin:0 0 40px;}\n.cp-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:48px;border-bottom:1px solid #f1f5f9;padding-bottom:24px;}\n.cp-filter{font-size:13px;font-weight:600;padding:8px 20px;border-radius:100px;border:1.5px solid #e2e8f0;color:#64748b;cursor:pointer;transition:all .2s;background:#fff;}\n.cp-filter.active{background:#2563eb;color:#fff;border-color:#2563eb;}\n.cp-filter:hover:not(.active){border-color:#2563eb;color:#2563eb;}\n.cp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;}\n.cp-card{text-decoration:none;display:block;border-radius:16px;overflow:hidden;position:relative;cursor:pointer;}\n.cp-card-img{width:100%;height:300px;display:block;transition:transform .5s ease;}\n.cp-card:hover .cp-card-img{transform:scale(1.04);}\n.cp-card-overlay{position:absolute;bottom:0;left:0;right:0;padding:28px;background:linear-gradient(to top,rgba(5,5,15,.95) 0%,rgba(5,5,15,.5) 55%,transparent 100%);transition:padding .3s ease;}\n.cp-card:hover .cp-card-overlay{padding-bottom:36px;}\n.cp-card-meta{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap;}\n.cp-card-tag{font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#93c5fd;background:rgba(37,99,235,.35);border:1px solid rgba(147,197,253,.25);padding:4px 10px;border-radius:100px;}\n.cp-card-tag-2{font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#c4b5fd;background:rgba(124,58,237,.35);border:1px solid rgba(196,181,253,.25);padding:4px 10px;border-radius:100px;}\n.cp-card-client{font-size:12px;color:rgba(255,255,255,.45);font-weight:600;}\n.cp-card-title{font-size:20px;font-weight:900;color:#fff;margin:0 0 8px;letter-spacing:-0.02em;line-height:1.3;}\n.cp-card-desc{font-size:14px;color:rgba(255,255,255,.55);line-height:1.7;margin:0 0 16px;max-height:0;overflow:hidden;opacity:0;transition:max-height .35s ease,opacity .3s ease;}\n.cp-card:hover .cp-card-desc{max-height:80px;opacity:1;}\n.cp-card-link{font-size:13px;font-weight:700;color:#60a5fa;display:inline-flex;align-items:center;gap:6px;transition:gap .2s;}\n.cp-card:hover .cp-card-link{gap:10px;}\n.cp-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#fbbf24;background:rgba(251,191,36,.15);border:1px solid rgba(251,191,36,.3);padding:4px 12px;border-radius:100px;}\n.cp-status-dot{width:6px;height:6px;border-radius:50%;background:#fbbf24;animation:pulse 1.5s infinite;flex-shrink:0;}\n@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.3;}}\n@media(max-width:768px){\n  .cp{padding:60px 24px;}\n  .cp-grid{grid-template-columns:1fr;}\n  .cp-card-img{height:240px;}\n}\n@media(max-width:480px){\n  .cp{padding:48px 16px;}\n  .cp-sub{font-size:16px;}\n}\n<\/style>\n\n<div class=\"cp\">\n  <div class=\"cp-inner\">\n    <div class=\"cp-label\">Case Studies<\/div>\n    <h1 class=\"cp-heading\">Real Growth Results<\/h1>\n    <p class=\"cp-sub\">From zero to digital \u2014 real projects, real results. Here's how we help brands grow smarter online.<\/p>\n\n    <div class=\"cp-filters\">\n      <div class=\"cp-filter active\">All<\/div>\n      <div class=\"cp-filter\">Website & Conversion<\/div>\n      <div class=\"cp-filter\">Content<\/div>\n      <div class=\"cp-filter\">SEO \u589e\u957f<\/div>\n      <div class=\"cp-filter\">\u5e7f\u544a\u589e\u957f<\/div>\n    <\/div>\n\n    <div class=\"cp-grid\">\n\n      <a href=\"https:\/\/runoo.tech\/zh\/elementor-1637\/\" class=\"cp-card\">\n        <svg class=\"cp-card-img\" viewbox=\"0 0 600 300\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n          <defs>\n            <lineargradient id=\"g1\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n              <stop offset=\"0%\" style=\"stop-color:#1e3a8a\"\/>\n              <stop offset=\"100%\" style=\"stop-color:#0f172a\"\/>\n            <\/lineargradient>\n          <\/defs>\n          <rect width=\"600\" height=\"300\" fill=\"url(#g1)\"\/>\n        <\/svg>\n        <div class=\"cp-card-overlay\">\n          <div class=\"cp-card-meta\">\n            <span class=\"cp-card-tag\">Website & Conversion<\/span>\n            <span class=\"cp-card-client\">Unikoo<\/span>\n          <\/div>\n          <div class=\"cp-card-title\">Dual-System E-Commerce on Shopify<\/div>\n          <div class=\"cp-card-desc\">Built a single Shopify store serving both retail and wholesale \u2014 with tiered pricing, custom quote requests and member access control.<\/div>\n          <span class=\"cp-card-link\">Read case study \u2192<\/span>\n        <\/div>\n      <\/a>\n\n      <a href=\"#\" class=\"cp-card\">\n        <svg class=\"cp-card-img\" viewbox=\"0 0 600 300\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n          <defs>\n            <lineargradient id=\"g2\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n              <stop offset=\"0%\" style=\"stop-color:#2d1b4e\"\/>\n              <stop offset=\"100%\" style=\"stop-color:#0f172a\"\/>\n            <\/lineargradient>\n          <\/defs>\n          <rect width=\"600\" height=\"300\" fill=\"url(#g2)\"\/>\n        <\/svg>\n        <div class=\"cp-card-overlay\">\n          <div class=\"cp-card-meta\">\n            <span class=\"cp-card-tag\">Website & Conversion<\/span>\n            <span class=\"cp-card-tag-2\">Content<\/span>\n            <span class=\"cp-card-client\">FashionCrossover London<\/span>\n          <\/div>\n          <div class=\"cp-card-title\">Global Fashion Brand Rebuild<\/div>\n          <div class=\"cp-card-desc\">Full website rebuild and content strategy for a London-based fashion brand targeting global markets.<\/div>\n          <span class=\"cp-status\"><span class=\"cp-status-dot\"><\/span>In Progress<\/span>\n        <\/div>\n      <\/a>\n\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n(function(){\n  var filters=document.querySelectorAll('.cp-filter');\n  filters.forEach(function(f){\n    f.addEventListener('click',function(){\n      filters.forEach(function(x){x.classList.remove('active');});\n      f.classList.add('active');\n    });\n  });\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Case Studies Real Growth Results From zero to digital \u2014 real projects, real results. Here&#8217;s how we help brands grow&#8230;<\/p>","protected":false},"author":1,"featured_media":0,"parent":185,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-fullwidth.php","meta":{"footnotes":""},"class_list":["post-229","page","type-page","status-publish"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/runoo.tech\/zh\/wp-json\/wp\/v2\/pages\/229","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/runoo.tech\/zh\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/runoo.tech\/zh\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/runoo.tech\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/runoo.tech\/zh\/wp-json\/wp\/v2\/comments?post=229"}],"version-history":[{"count":13,"href":"https:\/\/runoo.tech\/zh\/wp-json\/wp\/v2\/pages\/229\/revisions"}],"predecessor-version":[{"id":1687,"href":"https:\/\/runoo.tech\/zh\/wp-json\/wp\/v2\/pages\/229\/revisions\/1687"}],"up":[{"embeddable":true,"href":"https:\/\/runoo.tech\/zh\/wp-json\/wp\/v2\/pages\/185"}],"wp:attachment":[{"href":"https:\/\/runoo.tech\/zh\/wp-json\/wp\/v2\/media?parent=229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}