<div class="header ">
<div class="header__inner h-container">
<div class="grid grid--no-gutter header__grid">
<div class="grid__col grid__col--md-1 header__logo-col">
<div class="logo header__logo">
<a href="https://play.ee" class="logo__content logo__link">
<svg viewBox="0 0 58 62" xmlns="http://www.w3.org/2000/svg" class="logo__svg">
<path d="M8.93299 7.67307c0 2.85703-1.6054 4.32633-3.45778 4.32633-.82328 0-1.68772-.3265-2.22285-.8571v4.1222H.700195V3.42839H3.29352v.65303c.5763-.61221 1.48191-.81628 2.22286-.81628 2.26402 0 3.41661 1.95908 3.41661 4.40793zm-2.55217-.04081c0-1.4285-.53513-2.12234-1.56423-2.12234-1.35841 0-1.77005.93873-1.77005 2.12234 0 1.18361.4528 2.16315 1.72889 2.16315 1.07026 0 1.60539-.69384 1.60539-2.16315zM10.085 9.71379V0h2.5933v9.34646c0 .40814.1646.44895.494.44895.1234 0 .3293 0 .5351-.08162v1.99991c-.5351.2041-1.0291.2857-1.3996.2857-1.2349 0-2.2228-.6939-2.2228-2.28561zM22.187 6.53028v5.30582h-2.3464l-.1646-.8163c-.6998.898-1.6054 1.0204-2.2229 1.0204-1.8935 0-3.2519-1.1836-3.2519-2.89781 0-.97955.4528-1.67339 1.1526-2.04072.5351-.2857 1.1937-.40814 1.9347-.40814h2.3463v-.16325c0-.61222-.494-1.02036-1.4407-1.02036-.6175 0-1.2761.20407-2.0171.89791l-1.8523-1.55094c.9879-1.10198 2.5521-1.59175 3.9929-1.59175 2.4286 0 3.8694 1.26524 3.8694 3.26514zm-2.5934 1.99989h-1.9347c-.2881 0-.4939.04082-.6586.16326-.1646.12244-.247.2857-.247.48977 0 .40814.3705.77547 1.1115.77547.9056 0 1.6877-.61221 1.7288-1.4285zM25.48 11.5505l-3.1284-8.08126h2.8403l1.6877 5.14259 1.8935-5.14259h2.8404L26.7149 15.3054h-2.7991l1.5642-3.7549zM9.17956 30.8964l-1.44074-1.6326c-1.0291.8163-2.22285 1.1837-3.58126 1.1837C1.85238 30.4066 0 29.3863 0 27.3456c0-1.7142 1.31725-2.7754 2.63449-3.6325-.49396-.4898-1.31724-1.3877-1.31724-2.6121 0-1.8366 1.81121-2.8978 3.45777-2.8978 1.72888 0 3.29311 1.1836 3.29311 2.8978 0 1.2652-.82327 2.1632-1.81121 2.9386l1.39958 1.551c.24698-.5306.49396-1.1837.69978-1.9183l2.30522.4081c-.3705 1.3469-.82332 2.4489-1.35845 3.306l1.68775 1.8774-1.81124 1.6326zm-2.9638-3.3468l-1.89354-2.1223c-.98794.653-1.81122 1.2652-1.81122 1.9999 0 .653.61746.8571 1.44074.8571.86444-.0408 1.60539-.2857 2.26402-.7347zM4.5692 22.5703c.65862-.4489 1.11142-.8979 1.11142-1.4693 0-.449-.24698-.8571-.86444-.8571-.53513 0-.98793.2857-.98793.8163 0 .4898.41164 1.102.74095 1.5101zM8.76833 38.7736v5.5507H6.175v-4.612c0-.653 0-1.7142-1.31725-1.7142-1.60539 0-1.60539 1.5101-1.60539 2.408v3.9182H.700195v-8.3669H3.29352v.7754c.61746-.7754 1.52307-.9795 2.38751-.9795 1.93471.0408 3.0873 1.1836 3.0873 3.0203zM9.75586 40.1613c0-2.2856 1.60544-4.3672 4.36334-4.3672 2.7169 0 4.3223 2.0407 4.3223 4.3672 0 2.2856-1.6054 4.3671-4.3223 4.3671-2.7579 0-4.36334-2.0815-4.36334-4.3671zm6.09224 0c0-1.0612-.3293-2.1224-1.7289-2.1224-1.3995 0-1.77 1.0612-1.77 2.1224 0 1.0203.3293 2.1631 1.77 2.1631 1.3584 0 1.7289-1.102 1.7289-2.1631zM27.8267 40.202c0 2.857-1.6054 4.3264-3.4578 4.3264-.8233 0-1.6877-.3266-2.2228-.8571v4.1222h-2.5934V35.9574h2.6345v.6122c.5763-.6122 1.4819-.8163 2.2229-.8163 2.2228.0408 3.4166 1.9591 3.4166 4.4487zm-2.5933-.0408c0-1.4285-.5352-2.1223-1.5643-2.1223-1.3584 0-1.77.9387-1.77 2.1223 0 1.1836.4528 2.1632 1.7289 2.1632 1.0702 0 1.6054-.7347 1.6054-2.1632zM36.6768 41.0592h-5.5571c.0823.653.6175 1.1836 1.7289 1.1836.6174 0 1.3172-.2449 1.77-.8163l1.7701 1.5509c-.9056 1.0204-2.0994 1.551-3.5813 1.551-3.1284 0-4.281-2.1632-4.281-4.3263 0-2.0816 1.1526-4.408 4.1575-4.408 2.6345 0 4.0341 1.8775 4.0341 4.4488 0 .2449-.0412.4489-.0412.8163zm-2.4286-1.8775c-.0412-.7755-.741-1.2652-1.6054-1.2652-1.0703 0-1.4819.6938-1.5643 1.2652h3.1697zM7.98581 55.997v5.3059H5.63946l-.16466-.8163c-.69978.8979-1.60539 1.0203-2.22285 1.0203C1.35841 61.5069 0 60.3233 0 58.6091c0-.9795.452803-1.6733 1.15259-2.0407.53513-.2857 1.19375-.4081 1.93471-.4081h2.34634v-.1225c0-.6122-.49397-1.0203-1.44074-1.0203-.61746 0-1.27608.2041-2.01703.8979L.123492 54.3645c1.070258-1.102 2.634488-1.5918 4.075228-1.5918 2.34635 0 3.78709 1.2244 3.78709 3.2243zm-2.59333 1.9999H3.45777c-.28815 0-.49397.0408-.65862.1633-.16466.1224-.24699.2857-.24699.4898 0 .4081.37048.7754 1.11143.7754.90561 0 1.68772-.5714 1.72889-1.4285zM9.5498 59.1807v-9.7138h2.5933v9.3465c0 .4081.1647.4489.494.4489.1235 0 .3293 0 .5351-.0816v1.9999c-.5351.2041-1.0291.2857-1.3995.2857-1.2761.0408-2.2229-.653-2.2229-2.2856zM14.2842 59.1807v-9.7138h2.5933v9.3465c0 .4081.1647.4489.494.4489.1235 0 .3293 0 .5351-.0816v1.9999c-.5351.2041-1.0291.2857-1.3996.2857-1.2349.0408-2.2228-.653-2.2228-2.2856zM19.0996 49.4669h2.6345v2.3264h-2.6345v-2.3264zm.0412 3.4692h2.5933v8.3669h-2.5933v-8.3669zM30.9145 55.997v5.3059h-2.3463l-.1647-.8163c-.6998.8979-1.6054 1.0203-2.2228 1.0203-1.8936 0-3.252-1.1836-3.252-2.8978 0-.9795.4528-1.6733 1.1526-2.0407.5351-.2857 1.1938-.4081 1.9347-.4081h2.3464v-.1225c0-.6122-.494-1.0203-1.4408-1.0203-.6174 0-1.2761.2041-2.017.8979l-1.8524-1.5509c1.0703-1.102 2.6345-1.5918 4.0752-1.5918 2.3464 0 3.7871 1.2244 3.7871 3.2243zm-2.5933 1.9999h-1.9347c-.2882 0-.494.0408-.6586.1633-.1647.1224-.247.2857-.247.4898 0 .4081.3704.7754 1.1114.7754.9056 0 1.6877-.5714 1.7289-1.4285zM40.6698 55.7523v5.5507h-2.5933v-4.612c0-.653 0-1.7142-1.3172-1.7142-1.6054 0-1.6054 1.5102-1.6054 2.4081v3.9181h-2.5934v-8.3669h2.5934v.7755c.6174-.7755 1.523-.9795 2.3875-.9795 1.9759.0408 3.1284 1.1836 3.1284 3.0202zM41.6582 57.14c0-2.204 1.3584-4.4079 4.2399-4.4079 1.77 0 3.1284.8162 3.7459 2.5304l-2.4287.9796c-.1235-.7755-.6586-1.3061-1.3172-1.3061-1.1938 0-1.6054 1.102-1.6054 2.1632 0 1.0611.3705 2.1223 1.5642 2.1223.6586 0 1.2349-.4897 1.3584-1.2244l2.3464.8979c-.5763 1.5918-1.8936 2.5713-3.6636 2.5713-2.9227.0408-4.2399-2.1632-4.2399-4.3263zM57.9591 57.9971h-5.5572c.0824.653.6175 1.1836 1.7289 1.1836.6175 0 1.3173-.2449 1.7701-.8163l1.77 1.551c-.9056 1.0203-2.0994 1.5509-3.5813 1.5509-3.1284 0-4.281-2.1631-4.281-4.3263 0-2.0815 1.1526-4.4079 4.1576-4.4079 2.6344 0 4.034 1.8774 4.034 4.4487 0 .2449 0 .4898-.0411.8163zm-2.4287-1.8775c-.0412-.7754-.741-1.2652-1.6054-1.2652-1.0703 0-1.4819.6938-1.5642 1.2652h3.1696z" />
</svg>
<span class="h-visually-hidden">
</span>
</a>
</div>
<div class="logo header__logo header__logo--negative">
<a href="https://play.ee" class="logo__content logo__link">
<svg viewBox="0 0 58 62" xmlns="http://www.w3.org/2000/svg" class="logo__svg">
<path d="M8.93299 7.67307c0 2.85703-1.6054 4.32633-3.45778 4.32633-.82328 0-1.68772-.3265-2.22285-.8571v4.1222H.700195V3.42839H3.29352v.65303c.5763-.61221 1.48191-.81628 2.22286-.81628 2.26402 0 3.41661 1.95908 3.41661 4.40793zm-2.55217-.04081c0-1.4285-.53513-2.12234-1.56423-2.12234-1.35841 0-1.77005.93873-1.77005 2.12234 0 1.18361.4528 2.16315 1.72889 2.16315 1.07026 0 1.60539-.69384 1.60539-2.16315zM10.085 9.71379V0h2.5933v9.34646c0 .40814.1646.44895.494.44895.1234 0 .3293 0 .5351-.08162v1.99991c-.5351.2041-1.0291.2857-1.3996.2857-1.2349 0-2.2228-.6939-2.2228-2.28561zM22.187 6.53028v5.30582h-2.3464l-.1646-.8163c-.6998.898-1.6054 1.0204-2.2229 1.0204-1.8935 0-3.2519-1.1836-3.2519-2.89781 0-.97955.4528-1.67339 1.1526-2.04072.5351-.2857 1.1937-.40814 1.9347-.40814h2.3463v-.16325c0-.61222-.494-1.02036-1.4407-1.02036-.6175 0-1.2761.20407-2.0171.89791l-1.8523-1.55094c.9879-1.10198 2.5521-1.59175 3.9929-1.59175 2.4286 0 3.8694 1.26524 3.8694 3.26514zm-2.5934 1.99989h-1.9347c-.2881 0-.4939.04082-.6586.16326-.1646.12244-.247.2857-.247.48977 0 .40814.3705.77547 1.1115.77547.9056 0 1.6877-.61221 1.7288-1.4285zM25.48 11.5505l-3.1284-8.08126h2.8403l1.6877 5.14259 1.8935-5.14259h2.8404L26.7149 15.3054h-2.7991l1.5642-3.7549zM9.17956 30.8964l-1.44074-1.6326c-1.0291.8163-2.22285 1.1837-3.58126 1.1837C1.85238 30.4066 0 29.3863 0 27.3456c0-1.7142 1.31725-2.7754 2.63449-3.6325-.49396-.4898-1.31724-1.3877-1.31724-2.6121 0-1.8366 1.81121-2.8978 3.45777-2.8978 1.72888 0 3.29311 1.1836 3.29311 2.8978 0 1.2652-.82327 2.1632-1.81121 2.9386l1.39958 1.551c.24698-.5306.49396-1.1837.69978-1.9183l2.30522.4081c-.3705 1.3469-.82332 2.4489-1.35845 3.306l1.68775 1.8774-1.81124 1.6326zm-2.9638-3.3468l-1.89354-2.1223c-.98794.653-1.81122 1.2652-1.81122 1.9999 0 .653.61746.8571 1.44074.8571.86444-.0408 1.60539-.2857 2.26402-.7347zM4.5692 22.5703c.65862-.4489 1.11142-.8979 1.11142-1.4693 0-.449-.24698-.8571-.86444-.8571-.53513 0-.98793.2857-.98793.8163 0 .4898.41164 1.102.74095 1.5101zM8.76833 38.7736v5.5507H6.175v-4.612c0-.653 0-1.7142-1.31725-1.7142-1.60539 0-1.60539 1.5101-1.60539 2.408v3.9182H.700195v-8.3669H3.29352v.7754c.61746-.7754 1.52307-.9795 2.38751-.9795 1.93471.0408 3.0873 1.1836 3.0873 3.0203zM9.75586 40.1613c0-2.2856 1.60544-4.3672 4.36334-4.3672 2.7169 0 4.3223 2.0407 4.3223 4.3672 0 2.2856-1.6054 4.3671-4.3223 4.3671-2.7579 0-4.36334-2.0815-4.36334-4.3671zm6.09224 0c0-1.0612-.3293-2.1224-1.7289-2.1224-1.3995 0-1.77 1.0612-1.77 2.1224 0 1.0203.3293 2.1631 1.77 2.1631 1.3584 0 1.7289-1.102 1.7289-2.1631zM27.8267 40.202c0 2.857-1.6054 4.3264-3.4578 4.3264-.8233 0-1.6877-.3266-2.2228-.8571v4.1222h-2.5934V35.9574h2.6345v.6122c.5763-.6122 1.4819-.8163 2.2229-.8163 2.2228.0408 3.4166 1.9591 3.4166 4.4487zm-2.5933-.0408c0-1.4285-.5352-2.1223-1.5643-2.1223-1.3584 0-1.77.9387-1.77 2.1223 0 1.1836.4528 2.1632 1.7289 2.1632 1.0702 0 1.6054-.7347 1.6054-2.1632zM36.6768 41.0592h-5.5571c.0823.653.6175 1.1836 1.7289 1.1836.6174 0 1.3172-.2449 1.77-.8163l1.7701 1.5509c-.9056 1.0204-2.0994 1.551-3.5813 1.551-3.1284 0-4.281-2.1632-4.281-4.3263 0-2.0816 1.1526-4.408 4.1575-4.408 2.6345 0 4.0341 1.8775 4.0341 4.4488 0 .2449-.0412.4489-.0412.8163zm-2.4286-1.8775c-.0412-.7755-.741-1.2652-1.6054-1.2652-1.0703 0-1.4819.6938-1.5643 1.2652h3.1697zM7.98581 55.997v5.3059H5.63946l-.16466-.8163c-.69978.8979-1.60539 1.0203-2.22285 1.0203C1.35841 61.5069 0 60.3233 0 58.6091c0-.9795.452803-1.6733 1.15259-2.0407.53513-.2857 1.19375-.4081 1.93471-.4081h2.34634v-.1225c0-.6122-.49397-1.0203-1.44074-1.0203-.61746 0-1.27608.2041-2.01703.8979L.123492 54.3645c1.070258-1.102 2.634488-1.5918 4.075228-1.5918 2.34635 0 3.78709 1.2244 3.78709 3.2243zm-2.59333 1.9999H3.45777c-.28815 0-.49397.0408-.65862.1633-.16466.1224-.24699.2857-.24699.4898 0 .4081.37048.7754 1.11143.7754.90561 0 1.68772-.5714 1.72889-1.4285zM9.5498 59.1807v-9.7138h2.5933v9.3465c0 .4081.1647.4489.494.4489.1235 0 .3293 0 .5351-.0816v1.9999c-.5351.2041-1.0291.2857-1.3995.2857-1.2761.0408-2.2229-.653-2.2229-2.2856zM14.2842 59.1807v-9.7138h2.5933v9.3465c0 .4081.1647.4489.494.4489.1235 0 .3293 0 .5351-.0816v1.9999c-.5351.2041-1.0291.2857-1.3996.2857-1.2349.0408-2.2228-.653-2.2228-2.2856zM19.0996 49.4669h2.6345v2.3264h-2.6345v-2.3264zm.0412 3.4692h2.5933v8.3669h-2.5933v-8.3669zM30.9145 55.997v5.3059h-2.3463l-.1647-.8163c-.6998.8979-1.6054 1.0203-2.2228 1.0203-1.8936 0-3.252-1.1836-3.252-2.8978 0-.9795.4528-1.6733 1.1526-2.0407.5351-.2857 1.1938-.4081 1.9347-.4081h2.3464v-.1225c0-.6122-.494-1.0203-1.4408-1.0203-.6174 0-1.2761.2041-2.017.8979l-1.8524-1.5509c1.0703-1.102 2.6345-1.5918 4.0752-1.5918 2.3464 0 3.7871 1.2244 3.7871 3.2243zm-2.5933 1.9999h-1.9347c-.2882 0-.494.0408-.6586.1633-.1647.1224-.247.2857-.247.4898 0 .4081.3704.7754 1.1114.7754.9056 0 1.6877-.5714 1.7289-1.4285zM40.6698 55.7523v5.5507h-2.5933v-4.612c0-.653 0-1.7142-1.3172-1.7142-1.6054 0-1.6054 1.5102-1.6054 2.4081v3.9181h-2.5934v-8.3669h2.5934v.7755c.6174-.7755 1.523-.9795 2.3875-.9795 1.9759.0408 3.1284 1.1836 3.1284 3.0202zM41.6582 57.14c0-2.204 1.3584-4.4079 4.2399-4.4079 1.77 0 3.1284.8162 3.7459 2.5304l-2.4287.9796c-.1235-.7755-.6586-1.3061-1.3172-1.3061-1.1938 0-1.6054 1.102-1.6054 2.1632 0 1.0611.3705 2.1223 1.5642 2.1223.6586 0 1.2349-.4897 1.3584-1.2244l2.3464.8979c-.5763 1.5918-1.8936 2.5713-3.6636 2.5713-2.9227.0408-4.2399-2.1632-4.2399-4.3263zM57.9591 57.9971h-5.5572c.0824.653.6175 1.1836 1.7289 1.1836.6175 0 1.3173-.2449 1.7701-.8163l1.77 1.551c-.9056 1.0203-2.0994 1.5509-3.5813 1.5509-3.1284 0-4.281-2.1631-4.281-4.3263 0-2.0815 1.1526-4.4079 4.1576-4.4079 2.6344 0 4.034 1.8774 4.034 4.4487 0 .2449 0 .4898-.0411.8163zm-2.4287-1.8775c-.0412-.7754-.741-1.2652-1.6054-1.2652-1.0703 0-1.4819.6938-1.5642 1.2652h3.1696z" />
</svg>
<span class="h-visually-hidden">
</span>
</a>
</div>
</div>
<div class="grid__col grid__col--md-11 header__main-col">
<div class="header__container">
<div class="header__container-inner h-container">
<div class="header__content-wrapper">
<nav class="navigation header__navigation">
<ul class="navigation__list navigation__list--parents">
<li class="navigation__item ">
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-right-long-54"></use>
</svg>
<a href="#" class="navigation__link">
Home
</a>
<span class="navigation__description">Home is the place to be #staythefuckhome</span>
</li>
<li class="navigation__item has-children is-current ">
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-right-long-54"></use>
</svg>
<a href="#" class="navigation__link">
Services
<svg class="icon navigation__chevron">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#chevron-bottom-24"></use>
</svg>
</a>
<span class="navigation__description">Everything digital under one roof.</span>
<ul class="navigation__list navigation__list--children">
<li class="navigation__item ">
<a href="#" class="navigation__link">
Business transformation
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
<li class="navigation__item ">
<a href="#" class="navigation__link">
Design & Innovation
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
<li class="navigation__item ">
<a href="#" class="navigation__link">
Development
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
<li class="navigation__item ">
<a href="#" class="navigation__link">
Maintenance
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
</ul>
</li>
<li class="navigation__item has-children ">
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-right-long-54"></use>
</svg>
<a href="#" class="navigation__link">
Work
<svg class="icon navigation__chevron">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#chevron-bottom-24"></use>
</svg>
</a>
<span class="navigation__description">Home is the place to be #staythefuckhome</span>
<ul class="navigation__list navigation__list--children">
<li class="navigation__item ">
<a href="#" class="navigation__link">
Business transformation
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
<li class="navigation__item ">
<a href="#" class="navigation__link">
Design & Innovation
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
<li class="navigation__item ">
<a href="#" class="navigation__link">
Development
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
</ul>
</li>
<li class="navigation__item ">
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-right-long-54"></use>
</svg>
<a href="#" class="navigation__link">
About
</a>
<span class="navigation__description">Home is the place to be #staythefuckhome</span>
</li>
<li class="navigation__item ">
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-right-long-54"></use>
</svg>
<a href="#" class="navigation__link">
Contact
</a>
<span class="navigation__description">Got a project you dream of realizing? Get in touch!</span>
</li>
</ul>
</nav>
<div class="header__contact">
<div class="header__contact-item">
<div class="header__contact-label text-small">Email</div>
<div class="header__contact-data">
<a href="mailto:contact@something.com" class="link header__link">contact@something.com</a>
</div>
</div>
<div class="header__contact-item">
<div class="header__contact-label text-small">Connect</div>
<div class="header__contact-data">
<a href="tel:56565656" class="link header__link">56565656</a>
</div>
</div>
</div>
</div>
</div>
<figure class="image header__background-image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20480%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/360x216 360w, //via.placeholder.com/720x432 720w, //via.placeholder.com/1000x600 1000w, //via.placeholder.com/2000x1200 2000w, //via.placeholder.com/800x480 800w, //via.placeholder.com/1600x960 1600w, //via.placeholder.com/1200x720 1200w, //via.placeholder.com/2400x1440 2400w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</div>
<div class="header__burger-wrapper">
<button type="button" class="header__burger js-toggle-menu" aria-label="Toggle mobile menu" aria-expanded="false">
<span class="header__burger-box">
<span class="header__burger-inner">
<span class="header__burger-top"></span>
<span class="header__burger-middle"></span>
<span class="header__burger-bottom"></span>
</span>
</span>
</button>
<button type="button" class="header__burger header__burger--negative js-toggle-menu" aria-label="Toggle mobile menu">
<span class="header__burger-box">
<span class="header__burger-inner">
<span class="header__burger-top"></span>
<span class="header__burger-middle"></span>
<span class="header__burger-bottom"></span>
</span>
</span>
</button>
</div>
<div class="header__circle"></div>
</div>
</div>
</div>
</div>
<div class="hero hero--split
" data-theme="dark">
<div class="hero__inner h-container">
<div class="grid grid--no-horizontal-gutter hero__grid">
<div class="grid__col grid__col--md-5 grid__col--lg-4 grid__col--offset-md-1 hero__title--set-left
hero__grid-col">
<h1 class="hero__title ">Bauhub</h1>
</div>
<div class="grid__col grid__col--md-5 grid__col--lg-4 grid__col--offset-md-1
hero__grid-col">
<div class="hero__description text">
<h3>A fresh new take on the construction market, a solution that lets you streamline the processes effortless and paperless.</h3>
</div>
</div>
</div>
</div>
</div>
<div class="section section--pt-small section--pb-medium case-study">
<div class="section__inner ">
<div class="section__content ">
<div class="h-container">
<div class="grid case-study__grid">
<div class="grid__col grid__col--md-5 grid__col--offset-md-1 case-study__col case-study__col--content">
<div class="case-study__details animation__target">
<div class="case-study__details-item animation__target">
<div class="case-study__details-label">Role</div>
<div class="case-study__details-data animation__target">
UI/UX, Brand, Website
</div>
</div>
<div class="case-study__details-item animation__target">
<div class="case-study__details-label">Website</div>
<div class="case-study__details-data animation__target">
<a href="https://elblox.com" class="link case-study__details-link" target="_blank" rel="noreferrer noopener">elblox.com<svg class="icon link__icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-right-top-24"></use>
</svg></a>
</div>
</div>
</div>
<div class="case-study__content text animation__target js-more">
<p>Elblox.com is now a significant sales and marketing channel for businesses, private producers and energy utilities. In the case of elblox.com the information architecture and the visual language helps to explain the nature of the service.</p>
<p>Elblox.com is now a significant sales and marketing channel for businesses, private producers and energy utilities. In the case of elblox.com the information architecture and the visual language helps to explain the nature of the service.</p>
<button type="button" class="button button--magnetic case-study__more-button h-hidden-sm h-hidden-md h-hidden-lg">
<span class="button__filler"></span>
<span class="button__inner">
<span class="button__text">Read more</span>
</span>
</button>
</div>
</div>
<div class="grid__col grid__col--md-6 case-study__col animation__target">
<div class="case-study__gallery">
<div class="modal " id="case-study-image-modal">
<div class="case-study__modal-content">
<p class="case-study__modal-title">Website for the pioneer in the world of renewable energy.</p>
<figure class="image image--fluid case-study__modal-image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%201440%22%3E%3C%2Fsvg%3E" data-srcset="https://placehold.it/1920x1080" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
<figure class="image image--fluid case-study__modal-image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%201440%22%3E%3C%2Fsvg%3E" data-srcset="https://placehold.it/1080x1920" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</div>
</div>
<a class="case-study__image-link" href="#case-study-image-modal" data-js="open-modal">
<figure class="image image--fluid case-study__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%201440%22%3E%3C%2Fsvg%3E" data-srcset="https://placehold.it/1920x1080" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</a>
<a class="case-study__image-link" href="#case-study-image-modal" data-js="open-modal">
<figure class="image image--fluid case-study__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%201440%22%3E%3C%2Fsvg%3E" data-srcset="https://placehold.it/1080x1920" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</a>
</div>
<a href="#" class="button button--block-xs case-study__cta-button h-hidden-sm h-hidden-md h-hidden-lg">
<span class="button__inner">
<span class="button__text">Lets start a project</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer" data-theme="dark">
<div class="footer__inner h-container">
<div class="grid">
<div class="grid__col grid__col--md-5 grid__col--lg-6">
<h3 class="footer__contacts-title h3">Get in touch</h3>
<div class="footer__contacts text text-small">
<p>Emajõe 1b,</p>
<p>Tartu, Estonia</p>
<p><a href="#">info@something.com</a></p>
</div>
</div>
<div class="grid__col grid__col--md-7 grid__col--lg-6">
<nav class="navigation navigation--footer footer__navigation">
<ul class="navigation__list navigation__list--parents">
<li class="navigation__item has-children navigation__item--divisible-by-3 ">
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-right-long-54"></use>
</svg>
<p class="navigation__link">
Index
</p>
<ul class="navigation__list navigation__list--children">
<li class="navigation__item ">
<a href="#" class="navigation__link">
Business transformation
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
<li class="navigation__item ">
<a href="#" class="navigation__link">
Design & Innovation
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
<li class="navigation__item ">
<a href="#" class="navigation__link">
Development
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
<li class="navigation__item ">
<a href="#" class="navigation__link">
Maintenance
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
</ul>
</li>
<li class="navigation__item has-children navigation__item--divisible-by-3 ">
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-right-long-54"></use>
</svg>
<p class="navigation__link">
Services
</p>
<ul class="navigation__list navigation__list--children">
<li class="navigation__item ">
<a href="#" class="navigation__link">
Business transformation
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
<li class="navigation__item ">
<a href="#" class="navigation__link">
Design & Innovation
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
<li class="navigation__item ">
<a href="#" class="navigation__link">
Development
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
<li class="navigation__item ">
<a href="#" class="navigation__link">
Maintenance
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
</ul>
</li>
<li class="navigation__item has-children navigation__item--divisible-by-3 ">
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-right-long-54"></use>
</svg>
<p class="navigation__link">
Industries
</p>
<ul class="navigation__list navigation__list--children">
<li class="navigation__item ">
<a href="#" class="navigation__link">
Business transformation
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
<li class="navigation__item ">
<a href="#" class="navigation__link">
Design & Innovation
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
<li class="navigation__item ">
<a href="#" class="navigation__link">
Development
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="footer__inner h-container">
<div class="cta footer__cta">
<div class="cta__container">
<h3 class="h2 cta__text">
Got a project you dream of realizing?
<a href="#" class="button button--text cta__button">
<span class="button__inner">
<span class="button__text">Get in touch</span>
</span>
</a>
<a href="#" class="cta__link"><svg class="icon cta__link-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-top-right-long-54"></use>
</svg>
<span class="cta__link-inner">Get in touch</span></a>
</h3>
</div>
</div>
</div>
<figure class="image footer__bg-image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20376%20282%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/360x270 360w, //via.placeholder.com/720x540 720w, //via.placeholder.com/672x504 672w, //via.placeholder.com/352x264 352w, //via.placeholder.com/704x528 704w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</footer>
<div class="notification-list"></div>
{% extends '@view-base' %}
{% block page %}
{% include '@case-study' with { data: data.caseStudy, modifier: 'section--pt-small section--pb-medium', class: '' } %}
{% endblock %}
{
"language": "en-US",
"data": {
"header": {
"logo": {
"link": "https://play.ee"
},
"navigation": {
"items": [
{
"link": "#",
"title": "Home",
"description": "Home is the place to be #staythefuckhome"
},
{
"link": "#",
"title": "Services",
"description": "Everything digital under one roof.",
"current": "true",
"children": [
{
"link": "#",
"title": "Business transformation"
},
{
"link": "#",
"title": "Design & Innovation"
},
{
"link": "#",
"title": "Development"
},
{
"link": "#",
"title": "Maintenance"
}
]
},
{
"link": "#",
"title": "Work",
"description": "Home is the place to be #staythefuckhome",
"children": [
{
"link": "#",
"title": "Business transformation"
},
{
"link": "#",
"title": "Design & Innovation"
},
{
"link": "#",
"title": "Development"
}
]
},
{
"link": "#",
"title": "About",
"description": "Home is the place to be #staythefuckhome"
},
{
"link": "#",
"title": "Contact",
"description": "Got a project you dream of realizing? Get in touch!"
}
]
},
"toggleLabel": "Toggle mobile menu",
"bgImage": true,
"contacts": [
{
"label": "Email",
"data": "contact@something.com",
"link": "mailto:contact@something.com"
},
{
"label": "Connect",
"data": "56565656",
"link": "tel:56565656"
}
]
},
"hero": {
"variants": "split",
"title": "Bauhub",
"description": "<h3>A fresh new take on the construction market, a solution that lets you streamline the processes effortless and paperless.</h3>",
"image": false
},
"caseStudy": {
"details": [
{
"label": "Role",
"data": "UI/UX, Brand, Website"
},
{
"label": "Website",
"data": "elblox.com",
"link": "https://elblox.com",
"newtab": true
}
],
"content": "<p>Elblox.com is now a significant sales and marketing channel for businesses, private producers and energy utilities. In the case of elblox.com the information architecture and the visual language helps to explain the nature of the service.</p><p>Elblox.com is now a significant sales and marketing channel for businesses, private producers and energy utilities. In the case of elblox.com the information architecture and the visual language helps to explain the nature of the service.</p>",
"moreButton": {
"text": "Read more"
},
"ctaButton": {
"text": "Lets start a project",
"link": "#"
},
"modalTitle": "Website for the pioneer in the world of renewable energy.",
"images": [
{
"srcset": "https://placehold.it/1920x1080",
"sources": null
},
{
"srcset": "https://placehold.it/1080x1920",
"sources": null
}
]
},
"footer": {
"footerBgImage": true,
"footerContacts": {
"title": "Get in touch",
"content": "<p>Emajõe 1b,</p><p>Tartu, Estonia</p><p><a href=\"#\">info@something.com</a></p>"
},
"footerNavigation": {
"items": [
{
"title": "Index",
"children": [
{
"link": "#",
"title": "Business transformation"
},
{
"link": "#",
"title": "Design & Innovation"
},
{
"link": "#",
"title": "Development"
},
{
"link": "#",
"title": "Maintenance"
}
]
},
{
"title": "Services",
"children": [
{
"link": "#",
"title": "Business transformation"
},
{
"link": "#",
"title": "Design & Innovation"
},
{
"link": "#",
"title": "Development"
},
{
"link": "#",
"title": "Maintenance"
}
]
},
{
"title": "Industries",
"children": [
{
"link": "#",
"title": "Business transformation"
},
{
"link": "#",
"title": "Design & Innovation"
},
{
"link": "#",
"title": "Development"
}
]
}
]
},
"cta": {
"text": "Got a project you dream of realizing?",
"button": {
"text": "Get in touch",
"link": "#"
}
}
},
"notifications": [
{
"component": "BrowserNotification",
"data": {
"content": "You are using an outdated browser. Please upgrade your browser to improve your experience and security.",
"actions": [
{
"link": "https://google.com",
"text": "Learn more",
"attributes": "target=\"_blank\""
}
],
"button": {
"text": "OK"
}
}
},
{
"component": "CookieNotification",
"data": {
"content": "We use Cookies to improve your web experience. Read our <a href=\"#\"> cookie policy </a>",
"button": {
"text": "ACCEPT"
}
},
"sgShouldShow": true
}
],
"cursorPet": {
"viewLabel": "view",
"dragLabel": "drag",
"closeLabel": "close"
}
}
}