Copy environment

Base

<header class="header  ">
    <div class="container">
        <a href="#" class="logo  header__logo">
    <span class="logo__label">gotoAndPlay</span>
    <svg xmlns="http://www.w3.org/2000/svg" width="170" height="29" viewBox="0 0 170 29" class="logo__img" fill="#353635" fill-rule="evenodd">
        <path d="M17.689,12.756c1.278,0.734,1.278,1.934,0,2.668s-3.366,1.935-4.643,2.668-2.321.133-2.321-1.335V11.422c0-1.466,1.043-2.066,2.321-1.333ZM28.049,26V13.952a14.015,14.015,0,1,0-5.184,10.824v1.668a0.494,0.494,0,0,0,.144.355c0.18,0.14.582,0.518,2.36,0.518a3.982,3.982,0,0,0,2.523-.506,0.551,0.551,0,0,0,.157-0.42V26ZM14.024,23.486a9.535,9.535,0,1,1,9.582-9.534A9.568,9.568,0,0,1,14.024,23.486ZM42.695,12.074q-2.9,0-2.894,3.485v2.36a4.168,4.168,0,0,0,.634,2.552,2.624,2.624,0,0,0,2.206.823,4.391,4.391,0,0,0,3-1.153V13.419A3.884,3.884,0,0,0,42.695,12.074Zm5.35,10.893Q48.045,29,42.474,29a9.3,9.3,0,0,1-3.749-.659,1.025,1.025,0,0,1-.359-1.756,0.866,0.866,0,0,1,.827-0.219,6.62,6.62,0,0,0,.634.192l0.663,0.165a8.061,8.061,0,0,0,1.847.22q3.308,0,3.309-3.868V22.308a5.933,5.933,0,0,1-3.419,1.1q-4.854,0-4.853-5.761V15.833q0-5.87,4.909-5.872A5.272,5.272,0,0,1,45.646,11.2V11.169a1.183,1.183,0,0,1,.344-0.851,1.127,1.127,0,0,1,.84-0.357,1.171,1.171,0,0,1,.883.343,1.2,1.2,0,0,1,.332.864v11.8Zm11.028-7.326q0-3.457-3.143-3.457-3.115,0-3.116,3.457v2.826q0,3.486,3.116,3.485,3.145,0,3.143-3.485V15.641ZM60.2,22.473a5.318,5.318,0,0,1-4.274,1.674,5.28,5.28,0,0,1-4.246-1.674,5.933,5.933,0,0,1-1.3-4.006V15.641a5.937,5.937,0,0,1,1.3-4.006A5.283,5.283,0,0,1,55.93,9.961,5.321,5.321,0,0,1,60.2,11.635a5.94,5.94,0,0,1,1.3,4.006v2.826A5.936,5.936,0,0,1,60.2,22.473Zm10.327,1.18a1.05,1.05,0,0,1-.787.329H68.918a4.341,4.341,0,0,1-3.833-1.619,7.746,7.746,0,0,1-.966-4.308V12.184h-0.8a1.011,1.011,0,0,1-.743-0.3,0.973,0.973,0,0,1-.3-0.713,1.033,1.033,0,0,1,1.047-1.043h0.8V7.3a1.157,1.157,0,0,1,.358-0.85,1.171,1.171,0,0,1,.855-0.357,1.126,1.126,0,0,1,.842.357,1.184,1.184,0,0,1,.344.85v2.827h2.564a1.02,1.02,0,0,1,.745.3,1.009,1.009,0,0,1,.3.741,0.975,0.975,0,0,1-.3.713,1.016,1.016,0,0,1-.745.3H66.518v5.845a5.764,5.764,0,0,0,.523,2.935,2.375,2.375,0,0,0,2.152.823h0.551a1.076,1.076,0,0,1,.787.315,1.064,1.064,0,0,1,.317.783A1.076,1.076,0,0,1,70.531,23.653Zm9.94-8.012q0-3.457-3.144-3.457-3.115,0-3.116,3.457v2.826q0,3.486,3.116,3.485,3.145,0,3.144-3.485V15.641ZM81.6,22.473a6.257,6.257,0,0,1-8.519,0,5.929,5.929,0,0,1-1.3-4.006V15.641a5.933,5.933,0,0,1,1.3-4.006,6.257,6.257,0,0,1,8.519,0,5.936,5.936,0,0,1,1.3,4.006v2.826A5.932,5.932,0,0,1,81.6,22.473ZM92.975,12.444Q92.161,10.125,91.2,7.711q-1.875,4.8-3.309,9.356H94.5Q93.788,14.764,92.975,12.444Zm5.708,10.468a1.181,1.181,0,0,1,.013.165,1.026,1.026,0,0,1-.385.837,1.365,1.365,0,0,1-.884.315,1.13,1.13,0,0,1-1.183-.96q-0.195-.768-0.469-1.742T95.14,19.317H87.252q-0.386,1.318-1.075,3.951a1.116,1.116,0,0,1-1.157.96,1.287,1.287,0,0,1-.856-0.329,1.066,1.066,0,0,1-.385-0.851,1.447,1.447,0,0,1,.055-0.329q1.048-4.335,2.509-8.725t3.308-8.917a1.607,1.607,0,0,1,3.172,0q1.763,4.336,3.213,8.711t2.606,8.931C98.659,22.793,98.673,22.858,98.683,22.912ZM110.73,23.8a1.178,1.178,0,0,1-.867.342,1.145,1.145,0,0,1-.841-0.342,1.167,1.167,0,0,1-.345-0.864V15.2a3.538,3.538,0,0,0-.523-2.14,2.485,2.485,0,0,0-2.095-.824,3.539,3.539,0,0,0-3.338,1.729V22.94a1.144,1.144,0,0,1-.358.864,1.2,1.2,0,0,1-.855.342,1.223,1.223,0,0,1-1.214-1.207V13.693a1.759,1.759,0,0,0-.855-1.729,0.834,0.834,0,0,1-.469-0.8,0.991,0.991,0,0,1,1.187-1.043,2.349,2.349,0,0,1,1.488.576,2.643,2.643,0,0,1,.608.906,5.552,5.552,0,0,1,4.3-1.646q4.521,0,4.522,5.022V22.94A1.164,1.164,0,0,1,110.73,23.8Zm10.631-10.5a3.913,3.913,0,0,0-2.868-1.262q-2.951,0-2.95,3.7v2.991q0,3.32,3.006,3.32a4.221,4.221,0,0,0,2.812-1.153v-7.6Zm2.454,10.838a2.136,2.136,0,0,1-1.986-1.207,5.914,5.914,0,0,1-3.611,1.207q-5.1,0-5.1-5.542v-2.5q0-6.146,4.935-6.146a5.461,5.461,0,0,1,3.309,1.07V5.3a1.131,1.131,0,0,1,.345-0.836,1.179,1.179,0,0,1,.868-0.344,1.148,1.148,0,0,1,.841.344,1.135,1.135,0,0,1,.345.836V20.58a1.774,1.774,0,0,0,.772,1.728,0.836,0.836,0,0,1,.469.8A0.99,0.99,0,0,1,123.815,24.147ZM137.3,9.413a2.765,2.765,0,0,0-.827-2.086,4.383,4.383,0,0,0-3.2-1.015h-3.86V13.8h4.219a3.963,3.963,0,0,0,2.811-.905,2.839,2.839,0,0,0,.855-2.141V9.413Zm0.855,5.213a6.461,6.461,0,0,1-4.467,1.455h-4.273v6.914a1.242,1.242,0,1,1-2.483,0V5.215a1.206,1.206,0,0,1,.358-0.864,1.178,1.178,0,0,1,.883-0.371h5.267a6.642,6.642,0,0,1,4.936,1.728,5.077,5.077,0,0,1,1.405,3.677v1.4A4.953,4.953,0,0,1,138.153,14.626Zm6.065,9.521a2.281,2.281,0,0,1-1.489-.576,3.058,3.058,0,0,1-1.075-2.552V5.3a1.111,1.111,0,0,1,.359-0.836,1.234,1.234,0,0,1,1.709,0,1.114,1.114,0,0,1,.359.836V20.58a1.754,1.754,0,0,0,.855,1.728,0.836,0.836,0,0,1,.468.8A0.989,0.989,0,0,1,144.218,24.147Zm10.341-6.365h-2.9q-2.923,0-2.923,2.14V20.14q0,2.14,2.839,2.14,2.979,0,2.979-2.881V17.781Zm2.453,6.365a1.95,1.95,0,0,1-1.433-.576,1.8,1.8,0,0,1-.551-0.823,5.01,5.01,0,0,1-3.861,1.4,5.256,5.256,0,0,1-3.695-1.152,3.781,3.781,0,0,1-1.13-2.881v-0.22a3.563,3.563,0,0,1,1.213-2.853,5.945,5.945,0,0,1,3.86-1.126h3.144V15.257a4.159,4.159,0,0,0-.552-2.469,2.735,2.735,0,0,0-2.289-.823,5.81,5.81,0,0,0-2.811.686,1.226,1.226,0,0,1-.58.165A0.947,0.947,0,0,1,147.6,12.5a1.044,1.044,0,0,1-.289-0.727,0.987,0.987,0,0,1,.5-0.851,7.594,7.594,0,0,1,4.054-.96,5.081,5.081,0,0,1,4.026,1.4,6.394,6.394,0,0,1,1.074,4.115v5.1a1.813,1.813,0,0,0,.772,1.728,0.912,0.912,0,0,1,.469.8A0.989,0.989,0,0,1,157.012,24.147Zm9.184-2.085a14.981,14.981,0,0,1-2.787,5.158A5.725,5.725,0,0,1,159.385,29a1.227,1.227,0,0,1-.966-0.33,1.159,1.159,0,0,1-.358-0.851,1.038,1.038,0,0,1,1.13-1.152q2.427-.082,3.888-2.8-1.572-3.923-2.73-7.01t-1.875-5.42c-0.019-.072-0.032-0.137-0.042-0.192a1.335,1.335,0,0,1-.013-0.192,0.992,0.992,0,0,1,.358-0.8,1.287,1.287,0,0,1,.855-0.3,1.078,1.078,0,0,1,1.048.823q0.744,2.334,1.64,4.843t1.944,5.227l3.419-10.1a1.1,1.1,0,0,1,1.1-.8,1.253,1.253,0,0,1,.855.316,1.029,1.029,0,0,1,.358.809,1.473,1.473,0,0,1-.082.466Z"/>
    </svg>
</a>
        <button class="header__nav-button js-nav-toggle">
                <svg class="icon  header__nav-toggle-icon header__nav-toggle-icon--open">
    <use xlink:href="../../inc/svg/global.b2834a8c5e2811bb3821991f69ec7764.svg#menu"></use>
</svg>
                <svg class="icon  header__nav-toggle-icon header__nav-toggle-icon--close">
    <use xlink:href="../../inc/svg/global.b2834a8c5e2811bb3821991f69ec7764.svg#menu-close"></use>
</svg>
                <span class="header__nav-button-label">Navigation</span>
            </button>
        <nav class="header__nav">
            <ul class="header__nav-list">
                <li class="header__nav-item is-current">
                    <a href="#" class="link  header__nav-link">
    Work
</a>
                </li>
                <li class="header__nav-item">
                    <a href="#" class="link  header__nav-link">
    Team
</a>
                </li>
                <li class="header__nav-item">
                    <a href="#" class="link  header__nav-link">
    Contact
</a>
                </li>
                <li class="header__nav-item">
                    <a href="#" class="link  header__nav-link">
    About
</a>
                </li>
                <li class="header__nav-item header__nav-item--mobile">
                    <a href="#" class="link  header__nav-link">
    Brand kit
</a>
                </li>
                <li class="header__nav-item header__nav-item--mobile">
                    <a href="#" class="link  header__nav-link">
    Privacy Policty
</a>
                </li>
            </ul>
        </nav>
    </div>
    <div class="header__background">
        <svg class="header__background-triangle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 177.23">
            <path d="M142.34,61.33a30.14,30.14,0,0,1,0,54.87l-95,54.6C21.41,185.88,0,173.51,0,143.35V33.88C0,3.72,21.41-8.65,47.34,6.43l95,54.9"/>
        </svg>
    </div>
    <div class="header__footer">
        <ul class="list  social header__social">
            <li class="list__item "> <a href="https://www.facebook.com/gotoandplay.ee/" class="social__link">
            <svg class="icon  ">
    <use xlink:href="../../inc/svg/global.b2834a8c5e2811bb3821991f69ec7764.svg#facebook"></use>
</svg>
            <span class="social__label">Visit our Facebook page</span>
        </a>
            </li>
            <li class="list__item "> <a href="https://www.instagram.com/gotoandplayee/" class="social__link">
            <svg class="icon  ">
    <use xlink:href="../../inc/svg/global.b2834a8c5e2811bb3821991f69ec7764.svg#instagram"></use>
</svg>
            <span class="social__label">Visit our Instagram feed</span>
        </a>
            </li>
            <li class="list__item "> <a href="https://twitter.com/gotoandplayee" class="social__link">
            <svg class="icon  ">
    <use xlink:href="../../inc/svg/global.b2834a8c5e2811bb3821991f69ec7764.svg#twitter"></use>
</svg>
            <span class="social__label">Visit our Twitter feed</span>
        </a>
            </li>
        </ul>

        <nav class="languages  header__lang">
            <ul class="list  languages__list">
                <li class="list__item languages__item"> <a href="#" class="link  languages__link is-current">
    eng
</a>
                </li>
                <li class="list__item languages__item"> <a href="#" class="link  languages__link">
    est
</a>
                </li>
            </ul>
        </nav>
    </div>
</header>

<div class="main  ">
    <div class="main__content">
        content

    </div>
    <div class="sticky-footer  ">
        <ul class="list  social sticky-footer__social">
            <li class="list__item "> <a href="https://www.facebook.com/gotoandplay.ee/" class="social__link">
            <svg class="icon  ">
    <use xlink:href="../../inc/svg/global.b2834a8c5e2811bb3821991f69ec7764.svg#facebook"></use>
</svg>
            <span class="social__label">Visit our Facebook page</span>
        </a>
            </li>
            <li class="list__item "> <a href="https://www.instagram.com/gotoandplayee/" class="social__link">
            <svg class="icon  ">
    <use xlink:href="../../inc/svg/global.b2834a8c5e2811bb3821991f69ec7764.svg#instagram"></use>
</svg>
            <span class="social__label">Visit our Instagram feed</span>
        </a>
            </li>
            <li class="list__item "> <a href="https://twitter.com/gotoandplayee" class="social__link">
            <svg class="icon  ">
    <use xlink:href="../../inc/svg/global.b2834a8c5e2811bb3821991f69ec7764.svg#twitter"></use>
</svg>
            <span class="social__label">Visit our Twitter feed</span>
        </a>
            </li>
        </ul>
        <nav class="languages languages--dark sticky-footer__languages">
            <ul class="list languages--dark languages__list">
                <li class="list__item languages__item"> <a href="#" class="link languages--dark languages__link is-current">
    eng
</a>
                </li>
                <li class="list__item languages__item"> <a href="#" class="link languages--dark languages__link">
    est
</a>
                </li>
            </ul>
        </nav>
    </div>
    <footer class="footer  main__footer">

        <h2 class="heading heading--on-dark footer__heading">
            <span class="heading__small">take a look at our</span>
            <span class="heading__main">
                    <a href="#" class="link link--h2 footer__heading">
    case studies
</a>
            </span>
        </h2>

        <nav class="footer__nav">
            <ul class="list  social footer__social">
                <li class="list__item "> <a href="https://www.facebook.com/gotoandplay.ee/" class="social__link">
            <svg class="icon  ">
    <use xlink:href="../../inc/svg/global.b2834a8c5e2811bb3821991f69ec7764.svg#facebook"></use>
</svg>
            <span class="social__label">Visit our Facebook page</span>
        </a>
                </li>
                <li class="list__item "> <a href="https://www.instagram.com/gotoandplayee/" class="social__link">
            <svg class="icon  ">
    <use xlink:href="../../inc/svg/global.b2834a8c5e2811bb3821991f69ec7764.svg#instagram"></use>
</svg>
            <span class="social__label">Visit our Instagram feed</span>
        </a>
                </li>
                <li class="list__item "> <a href="https://twitter.com/gotoandplayee" class="social__link">
            <svg class="icon  ">
    <use xlink:href="../../inc/svg/global.b2834a8c5e2811bb3821991f69ec7764.svg#twitter"></use>
</svg>
            <span class="social__label">Visit our Twitter feed</span>
        </a>
                </li>
            </ul>

            <ul class="list  footer__menu">
                <li class="list__item "> <a href="#" class="link  footer__menu-link">
    Brand kit
</a>
                </li>
                <li class="list__item "> <a href="#" class="link  footer__menu-link">
    Privacy policy
</a>
                </li>
                <li class="list__item "> <a href="#" class="link  footer__menu-link">
    Something else
</a>
                </li>
            </ul>

            <nav class="languages  footer__lang">
                <ul class="list  languages__list">
                    <li class="list__item languages__item"> <a href="#" class="link  languages__link is-current">
    eng
</a>
                    </li>
                    <li class="list__item languages__item"> <a href="#" class="link  languages__link">
    est
</a>
                    </li>
                </ul>
            </nav>
        </nav>
    </footer>
    <div class="cookie  ">
        <div class="cookie__notice">
            <div class="cookie__content text">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis molestias maxime odio id hic iste? Cumque, voluptates similique sit doloribus impedit, minus culpa odit quas tempore voluptatum. Odit, animi, ratione.
            </div>
            <div class="cookie__actions">

                <button type="button" class="button  cookie__accept-button">
    Nõustun
</button>
            </div>
        </div>
    </div>
</div>
{
  "language": "en-US",
  "data": {
    "header": {
      "logo": {
        "label": "gotoAndPlay",
        "link": "#"
      },
      "navButtonLabel": "Navigation",
      "navigation": [
        {
          "link": "#",
          "title": "Work",
          "current": true
        },
        {
          "link": "#",
          "title": "Team"
        },
        {
          "link": "#",
          "title": "Contact"
        },
        {
          "link": "#",
          "title": "About"
        },
        {
          "link": "#",
          "title": "Brand kit",
          "modifier": "header__nav-item--mobile"
        },
        {
          "link": "#",
          "title": "Privacy Policty",
          "modifier": "header__nav-item--mobile"
        }
      ],
      "social": {
        "items": [
          {
            "link": "https://www.facebook.com/gotoandplay.ee/",
            "icon": "facebook",
            "label": "Visit our Facebook page"
          },
          {
            "link": "https://www.instagram.com/gotoandplayee/",
            "icon": "instagram",
            "label": "Visit our Instagram feed"
          },
          {
            "link": "https://twitter.com/gotoandplayee",
            "icon": "twitter",
            "label": "Visit our Twitter feed"
          }
        ]
      },
      "languages": {
        "items": [
          {
            "link": "#",
            "title": "eng",
            "current": "true"
          },
          {
            "link": "#",
            "title": "est"
          }
        ]
      }
    },
    "footer": {
      "heading": {
        "prefix": "take a look at our",
        "text": "case studies",
        "link": "#"
      },
      "social": {
        "items": [
          {
            "link": "https://www.facebook.com/gotoandplay.ee/",
            "icon": "facebook",
            "label": "Visit our Facebook page"
          },
          {
            "link": "https://www.instagram.com/gotoandplayee/",
            "icon": "instagram",
            "label": "Visit our Instagram feed"
          },
          {
            "link": "https://twitter.com/gotoandplayee",
            "icon": "twitter",
            "label": "Visit our Twitter feed"
          }
        ]
      },
      "languages": {
        "items": [
          {
            "link": "#",
            "title": "eng",
            "current": "true"
          },
          {
            "link": "#",
            "title": "est"
          }
        ]
      },
      "navigation": [
        {
          "link": "#",
          "title": "Brand kit"
        },
        {
          "link": "#",
          "title": "Privacy policy"
        },
        {
          "link": "#",
          "title": "Something else"
        }
      ]
    },
    "stickyFooter": {
      "social": {
        "items": [
          {
            "link": "https://www.facebook.com/gotoandplay.ee/",
            "icon": "facebook",
            "label": "Visit our Facebook page"
          },
          {
            "link": "https://www.instagram.com/gotoandplayee/",
            "icon": "instagram",
            "label": "Visit our Instagram feed"
          },
          {
            "link": "https://twitter.com/gotoandplayee",
            "icon": "twitter",
            "label": "Visit our Twitter feed"
          }
        ]
      },
      "languages": {
        "items": [
          {
            "link": "#",
            "title": "eng",
            "current": "true"
          },
          {
            "link": "#",
            "title": "est"
          }
        ]
      }
    },
    "cookie": {
      "content": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis molestias maxime odio id hic iste? Cumque, voluptates similique sit doloribus impedit, minus culpa odit quas tempore voluptatum. Odit, animi, ratione.",
      "button": {
        "text": "Nõustun"
      }
    }
  }
}