Copy environment

Work

<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">

        <section class="section section--page-intro card-list js-card-list">
            <div class="section__inner">
                <div class="section__content">
                    <div class="h-container">

                        <h1 class="heading  h2 card-list__heading">
                            <span class="heading__small">take a look at our</span>
                            <span class="heading__main">
                    case studies
            </span>
                        </h1>
                        <hr class="separator separator--small js-card-list">
                        <div class="card-list__inner">
                            <div class="card-list__aside">
                                <aside class="sidebar  card-list__sidebar">
                                    <h4 class="sidebar__title">clients</h4>
                                    <ul class="sidebar__list">
                                        <li class="sidebar__list-item">
                                            <a href="#tavex-0" class="sidebar__link ">Tavex</a>
                                        </li>
                                        <li class="sidebar__list-item">
                                            <a href="#tavex-1" class="sidebar__link ">Tavex</a>
                                        </li>
                                        <li class="sidebar__list-item">
                                            <a href="#tavex-2" class="sidebar__link ">Telia</a>
                                        </li>
                                        <li class="sidebar__list-item">
                                            <a href="#tavex-3" class="sidebar__link ">Diapol Granite</a>
                                        </li>
                                        <li class="sidebar__list-item">
                                            <a href="#tavex-4" class="sidebar__link ">Maikrahv</a>
                                        </li>
                                    </ul>
                                </aside>
                            </div>
                            <div class="card-list__main">
                                <a href="#" class="card card--large card-list__card" id="tavex-0" style="color:#000000;" data-color="#000000" data-background-color="#e5e5e5" data-text-color="light" data-heading-color="primary">
                                    <div class="card__inner">
                                        <div class="card__content">
                                            <h3 class="h4 card__title">Award winning website for 21st century home</h3>
                                            <div class="card__meta">PHP7 / HTML5 / CSS3</div>
                                        </div>
                                        <div class="card__background">
                                            <div class="image image--fluid card__image">
                                                <div class="image__inner">
                                                    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20240%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/300x240 300w, //placehold.it/600x480 600w" data-sizes="auto" alt="" class="image__img lazyload">
                                                    <noscript>
                <img src="//placehold.it/300x240" srcset="//placehold.it/300x240 300w, //placehold.it/600x480 600w" sizes="100vw" alt="" class="image__img">
            </noscript>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="image image--fluid card__satellite card__satellite--one">
                                        <div class="image__inner">
                                            <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2070%2070%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/320x320 320w, //placehold.it/640x640 640w, //placehold.it/960x960 960w, //placehold.it/1280x1280 1280w, //placehold.it/1600x1600 1600w, //placehold.it/70x70 70w, //placehold.it/140x140 140w"
                                                data-sizes="auto" alt="" class="image__img lazyload">
                                            <noscript>
                <img src="//placehold.it/320x320" srcset="//placehold.it/320x320 320w, //placehold.it/640x640 640w, //placehold.it/960x960 960w, //placehold.it/1280x1280 1280w, //placehold.it/1600x1600 1600w, //placehold.it/70x70 70w, //placehold.it/140x140 140w" sizes="100vw" alt="" class="image__img">
            </noscript>
                                        </div>
                                    </div>
                                    <div class="image image--fluid card__satellite card__satellite--two">
                                        <div class="image__inner">
                                            <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2070%2070%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/320x320 320w, //placehold.it/640x640 640w, //placehold.it/960x960 960w, //placehold.it/1280x1280 1280w, //placehold.it/1600x1600 1600w, //placehold.it/70x70 70w, //placehold.it/140x140 140w"
                                                data-sizes="auto" alt="" class="image__img lazyload">
                                            <noscript>
                <img src="//placehold.it/320x320" srcset="//placehold.it/320x320 320w, //placehold.it/640x640 640w, //placehold.it/960x960 960w, //placehold.it/1280x1280 1280w, //placehold.it/1600x1600 1600w, //placehold.it/70x70 70w, //placehold.it/140x140 140w" sizes="100vw" alt="" class="image__img">
            </noscript>
                                        </div>
                                    </div>
                                    <svg class="icon card--large card__icon">
    <use xlink:href="../../inc/svg/global.b2834a8c5e2811bb3821991f69ec7764.svg#arrow-right"></use>
</svg>
                                </a>
                                <a href="#" class="card card--large card-list__card" id="tavex-1" style="color:#00bf9c;" data-color="#00bf9c" data-background-color="#d0fff6" data-text-color="light" data-heading-color="secondary">
                                    <div class="card__inner">
                                        <div class="card__content">
                                            <h3 class="h4 card__title">Tavex e-commerce</h3>
                                            <div class="card__meta">PHP7 / HTML5 / CSS3</div>
                                        </div>
                                        <div class="card__background">
                                            <div class="image image--fluid card__image">
                                                <div class="image__inner">
                                                    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20240%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/300x240 300w, //placehold.it/600x480 600w" data-sizes="auto" alt="" class="image__img lazyload">
                                                    <noscript>
                <img src="//placehold.it/300x240" srcset="//placehold.it/300x240 300w, //placehold.it/600x480 600w" sizes="100vw" alt="" class="image__img">
            </noscript>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="image image--fluid card__satellite card__satellite--one">
                                        <div class="image__inner">
                                            <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2070%2070%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/320x320 320w, //placehold.it/640x640 640w, //placehold.it/960x960 960w, //placehold.it/1280x1280 1280w, //placehold.it/1600x1600 1600w, //placehold.it/70x70 70w, //placehold.it/140x140 140w"
                                                data-sizes="auto" alt="" class="image__img lazyload">
                                            <noscript>
                <img src="//placehold.it/320x320" srcset="//placehold.it/320x320 320w, //placehold.it/640x640 640w, //placehold.it/960x960 960w, //placehold.it/1280x1280 1280w, //placehold.it/1600x1600 1600w, //placehold.it/70x70 70w, //placehold.it/140x140 140w" sizes="100vw" alt="" class="image__img">
            </noscript>
                                        </div>
                                    </div>
                                    <div class="image image--fluid card__satellite card__satellite--two">
                                        <div class="image__inner">
                                            <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2070%2070%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/320x320 320w, //placehold.it/640x640 640w, //placehold.it/960x960 960w, //placehold.it/1280x1280 1280w, //placehold.it/1600x1600 1600w, //placehold.it/70x70 70w, //placehold.it/140x140 140w"
                                                data-sizes="auto" alt="" class="image__img lazyload">
                                            <noscript>
                <img src="//placehold.it/320x320" srcset="//placehold.it/320x320 320w, //placehold.it/640x640 640w, //placehold.it/960x960 960w, //placehold.it/1280x1280 1280w, //placehold.it/1600x1600 1600w, //placehold.it/70x70 70w, //placehold.it/140x140 140w" sizes="100vw" alt="" class="image__img">
            </noscript>
                                        </div>
                                    </div>
                                    <svg class="icon card--large card__icon">
    <use xlink:href="../../inc/svg/global.b2834a8c5e2811bb3821991f69ec7764.svg#arrow-right"></use>
</svg>
                                </a>
                                <a href="#" class="card card--large card-list__card" id="tavex-2" style="color:#ffc400;" data-color="#ffc400" data-background-color="#fff3cc" data-text-color="light" data-heading-color="tertiary">
                                    <div class="card__inner">
                                        <div class="card__content">
                                            <h3 class="h4 card__title">Tavex e-commerce</h3>
                                            <div class="card__meta">PHP7 / HTML5 / CSS3</div>
                                        </div>
                                    </div>
                                    <div class="image image--fluid card__satellite card__satellite--one">
                                        <div class="image__inner">
                                            <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2070%2070%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/320x320 320w, //placehold.it/640x640 640w, //placehold.it/960x960 960w, //placehold.it/1280x1280 1280w, //placehold.it/1600x1600 1600w, //placehold.it/70x70 70w, //placehold.it/140x140 140w"
                                                data-sizes="auto" alt="" class="image__img lazyload">
                                            <noscript>
                <img src="//placehold.it/320x320" srcset="//placehold.it/320x320 320w, //placehold.it/640x640 640w, //placehold.it/960x960 960w, //placehold.it/1280x1280 1280w, //placehold.it/1600x1600 1600w, //placehold.it/70x70 70w, //placehold.it/140x140 140w" sizes="100vw" alt="" class="image__img">
            </noscript>
                                        </div>
                                    </div>
                                    <svg class="icon card--large card__icon">
    <use xlink:href="../../inc/svg/global.b2834a8c5e2811bb3821991f69ec7764.svg#arrow-right"></use>
</svg>
                                </a>
                                <a href="#" class="card card--large card-list__card" id="tavex-3" style="color:#ff452d;" data-color="#ff452d" data-background-color="#ffccc6" data-text-color="light" data-heading-color="primary">
                                    <div class="card__inner">
                                        <div class="card__content">
                                            <h3 class="h4 card__title">Tavex e-commerce</h3>
                                            <div class="card__meta">PHP7 / HTML5 / CSS3</div>
                                        </div>
                                        <div class="card__background">
                                            <div class="image image--fluid card__image">
                                                <div class="image__inner">
                                                    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20240%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/300x240 300w, //placehold.it/600x480 600w" data-sizes="auto" alt="" class="image__img lazyload">
                                                    <noscript>
                <img src="//placehold.it/300x240" srcset="//placehold.it/300x240 300w, //placehold.it/600x480 600w" sizes="100vw" alt="" class="image__img">
            </noscript>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="image image--fluid card__satellite card__satellite--two">
                                        <div class="image__inner">
                                            <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2070%2070%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/320x320 320w, //placehold.it/640x640 640w, //placehold.it/960x960 960w, //placehold.it/1280x1280 1280w, //placehold.it/1600x1600 1600w, //placehold.it/70x70 70w, //placehold.it/140x140 140w"
                                                data-sizes="auto" alt="" class="image__img lazyload">
                                            <noscript>
                <img src="//placehold.it/320x320" srcset="//placehold.it/320x320 320w, //placehold.it/640x640 640w, //placehold.it/960x960 960w, //placehold.it/1280x1280 1280w, //placehold.it/1600x1600 1600w, //placehold.it/70x70 70w, //placehold.it/140x140 140w" sizes="100vw" alt="" class="image__img">
            </noscript>
                                        </div>
                                    </div>
                                    <svg class="icon card--large card__icon">
    <use xlink:href="../../inc/svg/global.b2834a8c5e2811bb3821991f69ec7764.svg#arrow-right"></use>
</svg>
                                </a>
                                <a href="#" class="card card--large card-list__card" id="tavex-4" style="color:#e8fefb;" data-color="#e8fefb" data-background-color="#f8fffe" data-text-color="dark" data-heading-color="primary">
                                    <div class="card__inner">
                                        <div class="card__content">
                                            <h3 class="h4 card__title">Tavex e-commerce</h3>
                                            <div class="card__meta">PHP7 / HTML5 / CSS3</div>
                                        </div>
                                    </div>
                                    <svg class="icon card--large card__icon">
    <use xlink:href="../../inc/svg/global.b2834a8c5e2811bb3821991f69ec7764.svg#arrow-right"></use>
</svg>
                                </a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>

    </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"
        }
      ]
    },
    "cardList": {
      "heading": {
        "prefix": "take a look at our",
        "text": "case studies"
      },
      "sidebar": {
        "title": "clients",
        "list": [
          {
            "link": "#tavex-0",
            "text": "Tavex"
          },
          {
            "link": "#tavex-1",
            "text": "Tavex"
          },
          {
            "link": "#tavex-2",
            "text": "Telia"
          },
          {
            "link": "#tavex-3",
            "text": "Diapol Granite"
          },
          {
            "link": "#tavex-4",
            "text": "Maikrahv"
          }
        ]
      },
      "items": [
        {
          "color": "#000000",
          "backgroundColor": "#e5e5e5",
          "headingColor": "primary",
          "title": "Award winning website for 21st century home",
          "meta": "PHP7 / HTML5 / CSS3",
          "id": "tavex-0",
          "image": true,
          "satellite1": true,
          "satellite2": true
        },
        {
          "color": "#00bf9c",
          "backgroundColor": "#d0fff6",
          "headingColor": "secondary",
          "title": "Tavex e-commerce",
          "meta": "PHP7 / HTML5 / CSS3",
          "id": "tavex-1",
          "image": true,
          "satellite1": true,
          "satellite2": true
        },
        {
          "color": "#ffc400",
          "backgroundColor": "#fff3cc",
          "headingColor": "tertiary",
          "title": "Tavex e-commerce",
          "meta": "PHP7 / HTML5 / CSS3",
          "id": "tavex-2",
          "satellite1": true
        },
        {
          "color": "#ff452d",
          "backgroundColor": "#ffccc6",
          "headingColor": "primary",
          "title": "Tavex e-commerce",
          "meta": "PHP7 / HTML5 / CSS3",
          "id": "tavex-3",
          "image": true,
          "satellite2": true
        },
        {
          "color": "#e8fefb",
          "backgroundColor": "#f8fffe",
          "textColor": "dark",
          "title": "Tavex e-commerce",
          "meta": "PHP7 / HTML5 / CSS3",
          "id": "tavex-4"
        }
      ]
    },
    "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"
      }
    }
  }
}