{"id":17445,"date":"2025-04-06T17:34:02","date_gmt":"2025-04-06T15:34:02","guid":{"rendered":"https:\/\/hivecreatives.se\/tjanster\/css-development\/"},"modified":"2025-05-27T12:27:57","modified_gmt":"2025-05-27T10:27:57","slug":"css-development","status":"publish","type":"services","link":"https:\/\/hivecreatives.se\/en\/services\/css-development\/","title":{"rendered":"CSS Development"},"content":{"rendered":"<style>.elementor-17726 .elementor-element.elementor-element-9dc7cd0{--display:flex;--min-height:500px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--padding-top:200px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-17726 .elementor-element.elementor-element-9dc7cd0:not(.elementor-motion-effects-element-type-background), .elementor-17726 .elementor-element.elementor-element-9dc7cd0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );background-image:url(\"https:\/\/hivecreatives.se\/wp-content\/uploads\/2025\/03\/01.jpg\");}.elementor-17726 .elementor-element.elementor-element-e584241 .elementor-heading-title{font-family:\"outfit\", Sans-serif;font-size:18px;font-weight:300;color:var( --e-global-color-1b7c756 );}.elementor-17726 .elementor-element.elementor-element-e584241 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border-style:none;border-radius:0px 0px 0px 0px;}.elementor-17726 .elementor-element.elementor-element-e584241.elementor-element{--align-self:flex-start;}.elementor-17726 .elementor-element.elementor-element-b33ec3d .elementor-heading-title{font-family:var( --e-global-typography-09506f0-font-family ), Sans-serif;font-size:var( --e-global-typography-09506f0-font-size );font-weight:var( --e-global-typography-09506f0-font-weight );line-height:var( --e-global-typography-09506f0-line-height );letter-spacing:var( --e-global-typography-09506f0-letter-spacing );word-spacing:var( --e-global-typography-09506f0-word-spacing );color:var( --e-global-color-1b7c756 );}.elementor-17726 .elementor-element.elementor-element-3e8986d{font-family:var( --e-global-typography-df58ad6-font-family ), Sans-serif;font-size:var( --e-global-typography-df58ad6-font-size );line-height:var( --e-global-typography-df58ad6-line-height );letter-spacing:var( --e-global-typography-df58ad6-letter-spacing );word-spacing:var( --e-global-typography-df58ad6-word-spacing );color:var( --e-global-color-1b7c756 );width:var( --container-widget-width, 55% );max-width:55%;--container-widget-width:55%;--container-widget-flex-grow:0;}.elementor-17726 .elementor-element.elementor-element-4d53eb8 .primary-link{color:#000;}.elementor-17726 .elementor-element.elementor-element-4d53eb8 .primary-button{font-family:var( --e-global-typography-967bde5-font-family ), Sans-serif;font-size:var( --e-global-typography-967bde5-font-size );font-weight:var( --e-global-typography-967bde5-font-weight );text-transform:var( --e-global-typography-967bde5-text-transform );line-height:var( --e-global-typography-967bde5-line-height );letter-spacing:var( --e-global-typography-967bde5-letter-spacing );word-spacing:var( --e-global-typography-967bde5-word-spacing );}@media(min-width:2400px){.elementor-17726 .elementor-element.elementor-element-b33ec3d .elementor-heading-title{font-size:var( --e-global-typography-09506f0-font-size );line-height:var( --e-global-typography-09506f0-line-height );letter-spacing:var( --e-global-typography-09506f0-letter-spacing );word-spacing:var( --e-global-typography-09506f0-word-spacing );}.elementor-17726 .elementor-element.elementor-element-3e8986d{font-size:var( --e-global-typography-df58ad6-font-size );line-height:var( --e-global-typography-df58ad6-line-height );letter-spacing:var( --e-global-typography-df58ad6-letter-spacing );word-spacing:var( --e-global-typography-df58ad6-word-spacing );}.elementor-17726 .elementor-element.elementor-element-4d53eb8 .primary-button{font-size:var( --e-global-typography-967bde5-font-size );line-height:var( --e-global-typography-967bde5-line-height );letter-spacing:var( --e-global-typography-967bde5-letter-spacing );word-spacing:var( --e-global-typography-967bde5-word-spacing );}}@media(max-width:1366px){.elementor-17726 .elementor-element.elementor-element-b33ec3d .elementor-heading-title{font-size:var( --e-global-typography-09506f0-font-size );line-height:var( --e-global-typography-09506f0-line-height );letter-spacing:var( --e-global-typography-09506f0-letter-spacing );word-spacing:var( --e-global-typography-09506f0-word-spacing );}.elementor-17726 .elementor-element.elementor-element-3e8986d{font-size:var( --e-global-typography-df58ad6-font-size );line-height:var( --e-global-typography-df58ad6-line-height );letter-spacing:var( --e-global-typography-df58ad6-letter-spacing );word-spacing:var( --e-global-typography-df58ad6-word-spacing );--container-widget-width:65%;--container-widget-flex-grow:0;width:var( --container-widget-width, 65% );max-width:65%;}.elementor-17726 .elementor-element.elementor-element-4d53eb8 .primary-button{font-size:var( --e-global-typography-967bde5-font-size );line-height:var( --e-global-typography-967bde5-line-height );letter-spacing:var( --e-global-typography-967bde5-letter-spacing );word-spacing:var( --e-global-typography-967bde5-word-spacing );}}@media(max-width:1200px){.elementor-17726 .elementor-element.elementor-element-3e8986d{--container-widget-width:75%;--container-widget-flex-grow:0;width:var( --container-widget-width, 75% );max-width:75%;}}@media(max-width:1024px){.elementor-17726 .elementor-element.elementor-element-b33ec3d .elementor-heading-title{font-size:var( --e-global-typography-09506f0-font-size );line-height:var( --e-global-typography-09506f0-line-height );letter-spacing:var( --e-global-typography-09506f0-letter-spacing );word-spacing:var( --e-global-typography-09506f0-word-spacing );}.elementor-17726 .elementor-element.elementor-element-3e8986d{font-size:var( --e-global-typography-df58ad6-font-size );line-height:var( --e-global-typography-df58ad6-line-height );letter-spacing:var( --e-global-typography-df58ad6-letter-spacing );word-spacing:var( --e-global-typography-df58ad6-word-spacing );}.elementor-17726 .elementor-element.elementor-element-4d53eb8 .primary-button{font-size:var( --e-global-typography-967bde5-font-size );line-height:var( --e-global-typography-967bde5-line-height );letter-spacing:var( --e-global-typography-967bde5-letter-spacing );word-spacing:var( --e-global-typography-967bde5-word-spacing );}}@media(max-width:880px){.elementor-17726 .elementor-element.elementor-element-3e8986d{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}}@media(max-width:767px){.elementor-17726 .elementor-element.elementor-element-9dc7cd0{--min-height:450px;}.elementor-17726 .elementor-element.elementor-element-b33ec3d .elementor-heading-title{font-size:var( --e-global-typography-09506f0-font-size );line-height:var( --e-global-typography-09506f0-line-height );letter-spacing:var( --e-global-typography-09506f0-letter-spacing );word-spacing:var( --e-global-typography-09506f0-word-spacing );}.elementor-17726 .elementor-element.elementor-element-3e8986d{font-size:var( --e-global-typography-df58ad6-font-size );line-height:var( --e-global-typography-df58ad6-line-height );letter-spacing:var( --e-global-typography-df58ad6-letter-spacing );word-spacing:var( --e-global-typography-df58ad6-word-spacing );}.elementor-17726 .elementor-element.elementor-element-4d53eb8 .primary-button{font-size:var( --e-global-typography-967bde5-font-size );line-height:var( --e-global-typography-967bde5-line-height );letter-spacing:var( --e-global-typography-967bde5-letter-spacing );word-spacing:var( --e-global-typography-967bde5-word-spacing );}}\/* Start Custom Fonts CSS *\/@font-face {\n\tfont-family: 'outfit';\n\tfont-style: normal;\n\tfont-weight: normal;\n\tfont-display: auto;\n\tsrc: url('https:\/\/hivecreatives.se\/wp-content\/uploads\/2025\/03\/Outfit-Regular.ttf') format('truetype');\n}\n@font-face {\n\tfont-family: 'outfit';\n\tfont-style: normal;\n\tfont-weight: bold;\n\tfont-display: auto;\n\tsrc: url('https:\/\/hivecreatives.se\/wp-content\/uploads\/2025\/03\/Outfit-Bold.ttf') format('truetype');\n}\n@font-face {\n\tfont-family: 'outfit';\n\tfont-style: normal;\n\tfont-weight: 100;\n\tfont-display: auto;\n\tsrc: url('https:\/\/hivecreatives.se\/wp-content\/uploads\/2025\/03\/Outfit-Thin.ttf') format('truetype');\n}\n@font-face {\n\tfont-family: 'outfit';\n\tfont-style: normal;\n\tfont-weight: 200;\n\tfont-display: auto;\n\tsrc: url('https:\/\/hivecreatives.se\/wp-content\/uploads\/2025\/03\/Outfit-ExtraLight.ttf') format('truetype');\n}\n@font-face {\n\tfont-family: 'outfit';\n\tfont-style: normal;\n\tfont-weight: 300;\n\tfont-display: auto;\n\tsrc: url('https:\/\/hivecreatives.se\/wp-content\/uploads\/2025\/03\/Outfit-Light.ttf') format('truetype');\n}\n@font-face {\n\tfont-family: 'outfit';\n\tfont-style: normal;\n\tfont-weight: 400;\n\tfont-display: auto;\n\tsrc: url('https:\/\/hivecreatives.se\/wp-content\/uploads\/2025\/03\/Outfit-Regular.ttf') format('truetype');\n}\n@font-face {\n\tfont-family: 'outfit';\n\tfont-style: normal;\n\tfont-weight: 500;\n\tfont-display: auto;\n\tsrc: url('https:\/\/hivecreatives.se\/wp-content\/uploads\/2025\/03\/Outfit-Medium.ttf') format('truetype');\n}\n@font-face {\n\tfont-family: 'outfit';\n\tfont-style: normal;\n\tfont-weight: 600;\n\tfont-display: auto;\n\tsrc: url('https:\/\/hivecreatives.se\/wp-content\/uploads\/2025\/03\/Outfit-SemiBold.ttf') format('truetype');\n}\n@font-face {\n\tfont-family: 'outfit';\n\tfont-style: normal;\n\tfont-weight: 700;\n\tfont-display: auto;\n\tsrc: url('https:\/\/hivecreatives.se\/wp-content\/uploads\/2025\/03\/Outfit-Bold.ttf') format('truetype');\n}\n@font-face {\n\tfont-family: 'outfit';\n\tfont-style: normal;\n\tfont-weight: 800;\n\tfont-display: auto;\n\tsrc: url('https:\/\/hivecreatives.se\/wp-content\/uploads\/2025\/03\/Outfit-ExtraBold.ttf') format('truetype');\n}\n@font-face {\n\tfont-family: 'outfit';\n\tfont-style: normal;\n\tfont-weight: 900;\n\tfont-display: auto;\n\tsrc: url('https:\/\/hivecreatives.se\/wp-content\/uploads\/2025\/03\/Outfit-Black.ttf') format('truetype');\n}\n\/* End Custom Fonts CSS *\/<\/style>\n<p><!-- start Creative Button --><\/p>\n<style>\/* widget: Creative Button *\/\n\/* Button Filter SVG *\/\n#uc_creative_button_elementor_4d53eb8 svg {\n      width: 0;\n      height: 0;\n      position: absolute;\n      display: none;\n    }\n    \/* Main Button Styling *\/\n#uc_creative_button_elementor_4d53eb8 {\n      position: relative;\n        display: inline-block;\n    overflow: visible;\n      align-items: center;\n   padding: 10px 0px;\n      justify-content: center;\n      margin-right: 40px;\n      background-color: #FFCA42;\n      color: #000; \/* Primary color *\/\n      text-decoration: none;\n      border: none;\n      filter: url(#buttonFilter);\n      cursor: pointer;\n      border-radius:500px;\n    }\n#uc_creative_button_elementor_4d53eb8 .primary-link {\ncolor:#000;\n   font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  font-style: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n    text-decoration: none;\n    padding: 10px 20px;\n}\n    \/* Arrow Icon Styling *\/\n#uc_creative_button_elementor_4d53eb8 .icon-span {\n      position: absolute;\n      top: 50%;\n      left: 100%;\n      transform: translateY(-50%);\n      background-color: #FFCA42;\n      width: fit-content;\n  \tpadding:10px;\n      height: 100%;\n      display: grid;\n      place-content: center;\n      border-radius: 50%;\n      transition: all 0.3s ease-in-out;\n    }\n#uc_creative_button_elementor_4d53eb8:hover .icon-span {\n      left: calc(100% + 10px);\n      transform: translateY(-50%) rotate(-45deg);\n    }\n#uc_creative_button_elementor_4d53eb8 .arrow-icon {\n      border: solid black;\n      border-width: 0 2px 2px 0;\n      display: inline-block;\n      padding: 5px;\n      transform: rotate(-45deg);\n      -webkit-transform: rotate(-45deg);\n    }\n    @media (min-width: 768px) {\n#uc_creative_button_elementor_4d53eb8 .primary-link {\n        padding: 15px 30px;\n      }\n      #uc_creative_button_elementor_4d53eb8 {\n        padding: 15px 0px;\n      }\n      #uc_creative_button_elementor_4d53eb8 .icon-span {\n  \tpadding:15px;\n    }        \n    }\n<\/style>\n<p>  <svg color-interpolation-filters=\"sRGB\">\n    <defs>\n      <filter id=\"buttonFilter\">\n        <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"7\" result=\"blur\"><\/feGaussianBlur>\n        <feColorMatrix\n          in=\"blur\"\n          mode=\"matrix\"\n          values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9\"\n          result=\"buttonFilter\"\n        ><\/feColorMatrix>\n        <feComposite in=\"SourceGraphic\" in2=\"buttonFilter\" operator=\"atop\"><\/feComposite>\n        <feBlend in=\"SourceGraphic\" in2=\"buttonFilter\"><\/feBlend>\n      <\/filter>\n    <\/defs>\n  <\/svg><br \/>\n  <!-- Button --><br \/>\n  <a href=\"\" ><br \/>\n  <\/a><br \/>\n<!-- end Creative Button -->\t\t\t\t<\/p>\n<h2>What is CSS \u2013 and why does it matter?<\/h2>\n<p>CSS stands for Cascading Style Sheets and is the coding language that controls how your website looks. This is where we define colors, fonts, layout, spacing, animations and how the design adapts to different screen sizes. In short: HTML creates the structure \u2013 CSS creates the experience.<\/p>\n<p>A well-written CSS does more than just make the surface look nice. It improves loading times, ensures that your site works on mobile and strengthens your brand\u2019s visual identity. It also makes it easier to further develop and maintain the website over time.<\/p>\n<p>We use CSS to create design solutions that are not only beautiful \u2013 but also smart, fast and scalable. With a focus on details, structure and usability, we deliver front-end solutions that both perform and impress.<\/p>\n<p>\t\t\t\t\tOur Services\t\t\t\t<\/p>\n<h2>More services<\/h2>\n<p>We build modern, scalable and fast websites using proven technologies and flexible frameworks. Whether you need a WordPress site, a custom system in PHP or a lightning-fast frontend in React or Next.js \u2013 we have the expertise to deliver at a high level.<\/p>\n<h3>WordPress<\/h3>\n<p>Custom-made, easy-to-maintain and SEO-friendly sites.<\/p>\n<p><!-- start Creative Button --><\/p>\n<style>\/* widget: Creative Button *\/\n\/* Button Filter SVG *\/\n#uc_creative_button_elementor_d194d40 svg {\n      width: 0;\n      height: 0;\n      position: absolute;\n      display: none;\n    }\n    \/* Main Button Styling *\/\n#uc_creative_button_elementor_d194d40 {\n      position: relative;\n        display: inline-block;\n    overflow: visible;\n      align-items: center;\n   padding: 10px 0px;\n      justify-content: center;\n      margin-right: 40px;\n      background-color: #222222;\n      color: #FFFFFF; \/* Primary color *\/\n      text-decoration: none;\n      border: none;\n      filter: url(#buttonFilter);\n      cursor: pointer;\n      border-radius:500px;\n    }\n#uc_creative_button_elementor_d194d40 .primary-link {\ncolor:#FFFFFF;\n   font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  font-style: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n    text-decoration: none;\n    padding: 10px 20px;\n}\n    \/* Arrow Icon Styling *\/\n#uc_creative_button_elementor_d194d40 .icon-span {\n      position: absolute;\n      top: 50%;\n      left: 100%;\n      transform: translateY(-50%);\n      background-color: #222222;\n      width: fit-content;\n  \tpadding:10px;\n      height: 100%;\n      display: grid;\n      place-content: center;\n      border-radius: 50%;\n      transition: all 0.3s ease-in-out;\n    }\n#uc_creative_button_elementor_d194d40:hover .icon-span {\n      left: calc(100% + 10px);\n      transform: translateY(-50%) rotate(-45deg);\n    }\n#uc_creative_button_elementor_d194d40 .arrow-icon {\n      border: solid black;\n      border-width: 0 2px 2px 0;\n      display: inline-block;\n      padding: 5px;\n      transform: rotate(-45deg);\n      -webkit-transform: rotate(-45deg);\n    }\n    @media (min-width: 768px) {\n#uc_creative_button_elementor_d194d40 .primary-link {\n        padding: 15px 30px;\n      }\n      #uc_creative_button_elementor_d194d40 {\n        padding: 15px 0px;\n      }\n      #uc_creative_button_elementor_d194d40 .icon-span {\n  \tpadding:15px;\n    }        \n    }\n<\/style>\n<p>  <svg color-interpolation-filters=\"sRGB\">\n    <defs>\n      <filter id=\"buttonFilter\">\n        <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"7\" result=\"blur\"><\/feGaussianBlur>\n        <feColorMatrix\n          in=\"blur\"\n          mode=\"matrix\"\n          values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9\"\n          result=\"buttonFilter\"\n        ><\/feColorMatrix>\n        <feComposite in=\"SourceGraphic\" in2=\"buttonFilter\" operator=\"atop\"><\/feComposite>\n        <feBlend in=\"SourceGraphic\" in2=\"buttonFilter\"><\/feBlend>\n      <\/filter>\n    <\/defs>\n  <\/svg><br \/>\n  <!-- Button --><br \/>\n  <a href=\"\" ><br \/>\n    Read more<br \/>\n  <\/a><br \/>\n<!-- end Creative Button -->\t\t\t\t<\/p>\n<h3>PHP<\/h3>\n<p>Stable backend solutions for scalable web applications.<\/p>\n<p><!-- start Creative Button --><\/p>\n<style>\/* widget: Creative Button *\/\n\/* Button Filter SVG *\/\n#uc_creative_button_elementor_5a63a0a svg {\n      width: 0;\n      height: 0;\n      position: absolute;\n      display: none;\n    }\n    \/* Main Button Styling *\/\n#uc_creative_button_elementor_5a63a0a {\n      position: relative;\n        display: inline-block;\n    overflow: visible;\n      align-items: center;\n   padding: 10px 0px;\n      justify-content: center;\n      margin-right: 40px;\n      background-color: #FFCA42;\n      color: #222222; \/* Primary color *\/\n      text-decoration: none;\n      border: none;\n      filter: url(#buttonFilter);\n      cursor: pointer;\n      border-radius:500px;\n    }\n#uc_creative_button_elementor_5a63a0a .primary-link {\ncolor:#222222;\n   font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  font-style: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n    text-decoration: none;\n    padding: 10px 20px;\n}\n    \/* Arrow Icon Styling *\/\n#uc_creative_button_elementor_5a63a0a .icon-span {\n      position: absolute;\n      top: 50%;\n      left: 100%;\n      transform: translateY(-50%);\n      background-color: #FFCA42;\n      width: fit-content;\n  \tpadding:10px;\n      height: 100%;\n      display: grid;\n      place-content: center;\n      border-radius: 50%;\n      transition: all 0.3s ease-in-out;\n    }\n#uc_creative_button_elementor_5a63a0a:hover .icon-span {\n      left: calc(100% + 10px);\n      transform: translateY(-50%) rotate(-45deg);\n    }\n#uc_creative_button_elementor_5a63a0a .arrow-icon {\n      border: solid black;\n      border-width: 0 2px 2px 0;\n      display: inline-block;\n      padding: 5px;\n      transform: rotate(-45deg);\n      -webkit-transform: rotate(-45deg);\n    }\n    @media (min-width: 768px) {\n#uc_creative_button_elementor_5a63a0a .primary-link {\n        padding: 15px 30px;\n      }\n      #uc_creative_button_elementor_5a63a0a {\n        padding: 15px 0px;\n      }\n      #uc_creative_button_elementor_5a63a0a .icon-span {\n  \tpadding:15px;\n    }        \n    }\n<\/style>\n<p>  <svg color-interpolation-filters=\"sRGB\">\n    <defs>\n      <filter id=\"buttonFilter\">\n        <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"7\" result=\"blur\"><\/feGaussianBlur>\n        <feColorMatrix\n          in=\"blur\"\n          mode=\"matrix\"\n          values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9\"\n          result=\"buttonFilter\"\n        ><\/feColorMatrix>\n        <feComposite in=\"SourceGraphic\" in2=\"buttonFilter\" operator=\"atop\"><\/feComposite>\n        <feBlend in=\"SourceGraphic\" in2=\"buttonFilter\"><\/feBlend>\n      <\/filter>\n    <\/defs>\n  <\/svg><br \/>\n  <!-- Button --><br \/>\n  <a href=\"\" ><br \/>\n    Read more<br \/>\n  <\/a><br \/>\n<!-- end Creative Button -->\t\t\t\t<\/p>\n<h3>React<br \/>\n<\/h3>\n<p>Top-notch responsive and interactive interfaces.<\/p>\n<p><!-- start Creative Button --><\/p>\n<style>\/* widget: Creative Button *\/\n\/* Button Filter SVG *\/\n#uc_creative_button_elementor_6e16c87 svg {\n      width: 0;\n      height: 0;\n      position: absolute;\n      display: none;\n    }\n    \/* Main Button Styling *\/\n#uc_creative_button_elementor_6e16c87 {\n      position: relative;\n        display: inline-block;\n    overflow: visible;\n      align-items: center;\n   padding: 10px 0px;\n      justify-content: center;\n      margin-right: 40px;\n      background-color: #222222;\n      color: #FFFFFF; \/* Primary color *\/\n      text-decoration: none;\n      border: none;\n      filter: url(#buttonFilter);\n      cursor: pointer;\n      border-radius:500px;\n    }\n#uc_creative_button_elementor_6e16c87 .primary-link {\ncolor:#FFFFFF;\n   font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  font-style: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n    text-decoration: none;\n    padding: 10px 20px;\n}\n    \/* Arrow Icon Styling *\/\n#uc_creative_button_elementor_6e16c87 .icon-span {\n      position: absolute;\n      top: 50%;\n      left: 100%;\n      transform: translateY(-50%);\n      background-color: #222222;\n      width: fit-content;\n  \tpadding:10px;\n      height: 100%;\n      display: grid;\n      place-content: center;\n      border-radius: 50%;\n      transition: all 0.3s ease-in-out;\n    }\n#uc_creative_button_elementor_6e16c87:hover .icon-span {\n      left: calc(100% + 10px);\n      transform: translateY(-50%) rotate(-45deg);\n    }\n#uc_creative_button_elementor_6e16c87 .arrow-icon {\n      border: solid black;\n      border-width: 0 2px 2px 0;\n      display: inline-block;\n      padding: 5px;\n      transform: rotate(-45deg);\n      -webkit-transform: rotate(-45deg);\n    }\n    @media (min-width: 768px) {\n#uc_creative_button_elementor_6e16c87 .primary-link {\n        padding: 15px 30px;\n      }\n      #uc_creative_button_elementor_6e16c87 {\n        padding: 15px 0px;\n      }\n      #uc_creative_button_elementor_6e16c87 .icon-span {\n  \tpadding:15px;\n    }        \n    }\n<\/style>\n<p>  <svg color-interpolation-filters=\"sRGB\">\n    <defs>\n      <filter id=\"buttonFilter\">\n        <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"7\" result=\"blur\"><\/feGaussianBlur>\n        <feColorMatrix\n          in=\"blur\"\n          mode=\"matrix\"\n          values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9\"\n          result=\"buttonFilter\"\n        ><\/feColorMatrix>\n        <feComposite in=\"SourceGraphic\" in2=\"buttonFilter\" operator=\"atop\"><\/feComposite>\n        <feBlend in=\"SourceGraphic\" in2=\"buttonFilter\"><\/feBlend>\n      <\/filter>\n    <\/defs>\n  <\/svg><br \/>\n  <!-- Button --><br \/>\n  <a href=\"\" ><br \/>\n    Read more<br \/>\n  <\/a><br \/>\n<!-- end Creative Button -->\t\t\t\t<\/p>\n<h3>Next.js<\/h3>\n<p>Lightning-fast and SEO-optimized web solutions in React.<\/p>\n<p><!-- start Creative Button --><\/p>\n<style>\/* widget: Creative Button *\/\n\/* Button Filter SVG *\/\n#uc_creative_button_elementor_43eea2d svg {\n      width: 0;\n      height: 0;\n      position: absolute;\n      display: none;\n    }\n    \/* Main Button Styling *\/\n#uc_creative_button_elementor_43eea2d {\n      position: relative;\n        display: inline-block;\n    overflow: visible;\n      align-items: center;\n   padding: 10px 0px;\n      justify-content: center;\n      margin-right: 40px;\n      background-color: #FFCA42;\n      color: #222222; \/* Primary color *\/\n      text-decoration: none;\n      border: none;\n      filter: url(#buttonFilter);\n      cursor: pointer;\n      border-radius:500px;\n    }\n#uc_creative_button_elementor_43eea2d .primary-link {\ncolor:#222222;\n   font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  font-style: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n    text-decoration: none;\n    padding: 10px 20px;\n}\n    \/* Arrow Icon Styling *\/\n#uc_creative_button_elementor_43eea2d .icon-span {\n      position: absolute;\n      top: 50%;\n      left: 100%;\n      transform: translateY(-50%);\n      background-color: #FFCA42;\n      width: fit-content;\n  \tpadding:10px;\n      height: 100%;\n      display: grid;\n      place-content: center;\n      border-radius: 50%;\n      transition: all 0.3s ease-in-out;\n    }\n#uc_creative_button_elementor_43eea2d:hover .icon-span {\n      left: calc(100% + 10px);\n      transform: translateY(-50%) rotate(-45deg);\n    }\n#uc_creative_button_elementor_43eea2d .arrow-icon {\n      border: solid black;\n      border-width: 0 2px 2px 0;\n      display: inline-block;\n      padding: 5px;\n      transform: rotate(-45deg);\n      -webkit-transform: rotate(-45deg);\n    }\n    @media (min-width: 768px) {\n#uc_creative_button_elementor_43eea2d .primary-link {\n        padding: 15px 30px;\n      }\n      #uc_creative_button_elementor_43eea2d {\n        padding: 15px 0px;\n      }\n      #uc_creative_button_elementor_43eea2d .icon-span {\n  \tpadding:15px;\n    }        \n    }\n<\/style>\n<p>  <svg color-interpolation-filters=\"sRGB\">\n    <defs>\n      <filter id=\"buttonFilter\">\n        <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"7\" result=\"blur\"><\/feGaussianBlur>\n        <feColorMatrix\n          in=\"blur\"\n          mode=\"matrix\"\n          values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9\"\n          result=\"buttonFilter\"\n        ><\/feColorMatrix>\n        <feComposite in=\"SourceGraphic\" in2=\"buttonFilter\" operator=\"atop\"><\/feComposite>\n        <feBlend in=\"SourceGraphic\" in2=\"buttonFilter\"><\/feBlend>\n      <\/filter>\n    <\/defs>\n  <\/svg><br \/>\n  <!-- Button --><br \/>\n  <a href=\"\" ><br \/>\n    Read more<br \/>\n  <\/a><br \/>\n<!-- end Creative Button --><br \/>\n<!-- start Creative Button --><\/p>\n<style>\/* widget: Creative Button *\/\n\/* Button Filter SVG *\/\n#uc_creative_button_elementor_b0794d5 svg {\n      width: 0;\n      height: 0;\n      position: absolute;\n      display: none;\n    }\n    \/* Main Button Styling *\/\n#uc_creative_button_elementor_b0794d5 {\n      position: relative;\n        display: inline-block;\n    overflow: visible;\n      align-items: center;\n   padding: 10px 0px;\n      justify-content: center;\n      margin-right: 40px;\n      background-color: #222222;\n      color: #FFFFFF; \/* Primary color *\/\n      text-decoration: none;\n      border: none;\n      filter: url(#buttonFilter);\n      cursor: pointer;\n      border-radius:500px;\n    }\n#uc_creative_button_elementor_b0794d5 .primary-link {\ncolor:#FFFFFF;\n   font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  font-style: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n    text-decoration: none;\n    padding: 10px 20px;\n}\n    \/* Arrow Icon Styling *\/\n#uc_creative_button_elementor_b0794d5 .icon-span {\n      position: absolute;\n      top: 50%;\n      left: 100%;\n      transform: translateY(-50%);\n      background-color: #222222;\n      width: fit-content;\n  \tpadding:10px;\n      height: 100%;\n      display: grid;\n      place-content: center;\n      border-radius: 50%;\n      transition: all 0.3s ease-in-out;\n    }\n#uc_creative_button_elementor_b0794d5:hover .icon-span {\n      left: calc(100% + 10px);\n      transform: translateY(-50%) rotate(-45deg);\n    }\n#uc_creative_button_elementor_b0794d5 .arrow-icon {\n      border: solid black;\n      border-width: 0 2px 2px 0;\n      display: inline-block;\n      padding: 5px;\n      transform: rotate(-45deg);\n      -webkit-transform: rotate(-45deg);\n    }\n    @media (min-width: 768px) {\n#uc_creative_button_elementor_b0794d5 .primary-link {\n        padding: 15px 30px;\n      }\n      #uc_creative_button_elementor_b0794d5 {\n        padding: 15px 0px;\n      }\n      #uc_creative_button_elementor_b0794d5 .icon-span {\n  \tpadding:15px;\n    }        \n    }\n<\/style>\n<p>  <svg color-interpolation-filters=\"sRGB\">\n    <defs>\n      <filter id=\"buttonFilter\">\n        <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"7\" result=\"blur\"><\/feGaussianBlur>\n        <feColorMatrix\n          in=\"blur\"\n          mode=\"matrix\"\n          values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9\"\n          result=\"buttonFilter\"\n        ><\/feColorMatrix>\n        <feComposite in=\"SourceGraphic\" in2=\"buttonFilter\" operator=\"atop\"><\/feComposite>\n        <feBlend in=\"SourceGraphic\" in2=\"buttonFilter\"><\/feBlend>\n      <\/filter>\n    <\/defs>\n  <\/svg><br \/>\n  <!-- Button --><br \/>\n  <a href=\"\" ><br \/>\n    All Services<br \/>\n  <\/a><br \/>\n<!-- end Creative Button -->\t\t\t\t<\/p>\n<h2>Ready to take the next step?<\/h2>\n<p>We listen, analyze and shape a path forward that reflects your goals. Get in touch \u2013 and we\u2019ll start where you are. Contact us<\/p>\n<p><!-- start Creative Button --><\/p>\n<style>\/* widget: Creative Button *\/\n\/* Button Filter SVG *\/\n#uc_creative_button_elementor_6721073 svg {\n      width: 0;\n      height: 0;\n      position: absolute;\n      display: none;\n    }\n    \/* Main Button Styling *\/\n#uc_creative_button_elementor_6721073 {\n      position: relative;\n        display: inline-block;\n    overflow: visible;\n      align-items: center;\n   padding: 10px 0px;\n      justify-content: center;\n      margin-right: 40px;\n      background-color: #FFFFFF;\n      color: #222222; \/* Primary color *\/\n      text-decoration: none;\n      border: none;\n      filter: url(#buttonFilter);\n      cursor: pointer;\n      border-radius:500px;\n    }\n#uc_creative_button_elementor_6721073 .primary-link {\ncolor:#222222;\n   font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  font-style: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n    text-decoration: none;\n    padding: 10px 20px;\n}\n    \/* Arrow Icon Styling *\/\n#uc_creative_button_elementor_6721073 .icon-span {\n      position: absolute;\n      top: 50%;\n      left: 100%;\n      transform: translateY(-50%);\n      background-color: #FFFFFF;\n      width: fit-content;\n  \tpadding:10px;\n      height: 100%;\n      display: grid;\n      place-content: center;\n      border-radius: 50%;\n      transition: all 0.3s ease-in-out;\n    }\n#uc_creative_button_elementor_6721073:hover .icon-span {\n      left: calc(100% + 10px);\n      transform: translateY(-50%) rotate(-45deg);\n    }\n#uc_creative_button_elementor_6721073 .arrow-icon {\n      border: solid black;\n      border-width: 0 2px 2px 0;\n      display: inline-block;\n      padding: 5px;\n      transform: rotate(-45deg);\n      -webkit-transform: rotate(-45deg);\n    }\n    @media (min-width: 768px) {\n#uc_creative_button_elementor_6721073 .primary-link {\n        padding: 15px 30px;\n      }\n      #uc_creative_button_elementor_6721073 {\n        padding: 15px 0px;\n      }\n      #uc_creative_button_elementor_6721073 .icon-span {\n  \tpadding:15px;\n    }        \n    }\n<\/style>\n<p>  <svg color-interpolation-filters=\"sRGB\">\n    <defs>\n      <filter id=\"buttonFilter\">\n        <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"7\" result=\"blur\"><\/feGaussianBlur>\n        <feColorMatrix\n          in=\"blur\"\n          mode=\"matrix\"\n          values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9\"\n          result=\"buttonFilter\"\n        ><\/feColorMatrix>\n        <feComposite in=\"SourceGraphic\" in2=\"buttonFilter\" operator=\"atop\"><\/feComposite>\n        <feBlend in=\"SourceGraphic\" in2=\"buttonFilter\"><\/feBlend>\n      <\/filter>\n    <\/defs>\n  <\/svg><br \/>\n  <!-- Button --><br \/>\n  <a href=\"\" ><br \/>\n    Contact us<br \/>\n  <\/a><br \/>\n<!-- end Creative Button --><br \/>\n\t\t\t\t\tOur Process\t\t\t\t<\/p>\n<h2>How we build websites that make a difference<\/h2>\n<p>Every web project is unique \u2013 but our process is always built on insight, structure and collaboration. With a focus on function, design and business value, we guide you from initial idea to a finished website that both performs and engages.&#8217;<\/p>\n<h3>\n\t\t\t\t\t\t\tNeeds, goals &#038; planning<br \/>\n\t\t\t\t\t<\/h3>\n<p>\n\t\t\t\t\t\tWe always start by listening. In an initial workshop meeting, we map out your needs, target groups and business goals. Together we set the framework for the project, prioritize functionality and create consensus for the next step.\t\t\t\t\t<\/p>\n<p>\t\t\t\t\t01\t\t\t\t<\/p>\n<h3>\n\t\t\t\t\t\t\tStructure &#038; SEO basics<br \/>\n\t\t\t\t\t<\/h3>\n<p>\n\t\t\t\t\t\tHere we lay the foundation for a logical and search-optimized website. We create a sitemap, identify important keywords and plan the structure of the content. All to give users and search engines a clear path through the website.\t\t\t\t\t<\/p>\n<p>\t\t\t\t\t02\t\t\t\t<\/p>\n<h3>\n\t\t\t\t\t\t\tDesign &#038; experience<br \/>\n\t\t\t\t\t<\/h3>\n<p>\n\t\t\t\t\t\tWe create visual and functional designs that reflect your brand and meet your users&#8217; needs. The designs are built in Figma and are always responsive, accessible, and designed to drive engagement and conversion.\t\t\t\t\t<\/p>\n<p>\t\t\t\t\t03\t\t\t\t<\/p>\n<h3>\n\t\t\t\t\t\t\tDevelopment &#038; technology<br \/>\n\t\t\t\t\t<\/h3>\n<p>\n\t\t\t\t\t\tNow the idea becomes reality. We code the website with modern frameworks and CMS solutions \u2013 optimized for performance, accessibility and future needs. We build flexibly and scalable \u2013 with smart features that make the job easier.\t\t\t\t\t<\/p>\n<p>\t\t\t\t\t04\t\t\t\t<\/p>\n<h3>\n\t\t\t\t\t\t\tContent, testing &#038; launch<br \/>\n\t\t\t\t\t<\/h3>\n<p>\n\t\t\t\t\t\tWhen the website is ready, we help fill it with the right content \u2013 \u200b\u200bor support you in the process. We test thoroughly on all devices, make final adjustments and only launch when everything feels 100%. After launch, we are there \u2013 to support, further develop and optimize.\t\t\t\t\t<\/p>\n<p>\t\t\t\t\t05<\/p>\n","protected":false},"parent":0,"menu_order":0,"template":"","service-category":[],"class_list":["post-17445","services","type-services","status-publish"],"acf":[],"_links":{"self":[{"href":"https:\/\/hivecreatives.se\/en\/wp-json\/wp\/v2\/services\/17445","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hivecreatives.se\/en\/wp-json\/wp\/v2\/services"}],"about":[{"href":"https:\/\/hivecreatives.se\/en\/wp-json\/wp\/v2\/types\/services"}],"version-history":[{"count":3,"href":"https:\/\/hivecreatives.se\/en\/wp-json\/wp\/v2\/services\/17445\/revisions"}],"predecessor-version":[{"id":46233,"href":"https:\/\/hivecreatives.se\/en\/wp-json\/wp\/v2\/services\/17445\/revisions\/46233"}],"wp:attachment":[{"href":"https:\/\/hivecreatives.se\/en\/wp-json\/wp\/v2\/media?parent=17445"}],"wp:term":[{"taxonomy":"service-category","embeddable":true,"href":"https:\/\/hivecreatives.se\/en\/wp-json\/wp\/v2\/service-category?post=17445"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}