HEX
Server: Apache/2.4.41 (Ubuntu)
System: Linux wordpress-ubuntu-s-2vcpu-4gb-fra1-01 5.4.0-169-generic #187-Ubuntu SMP Thu Nov 23 14:52:28 UTC 2023 x86_64
User: root (0)
PHP: 7.4.33
Disabled: pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare,
$ pwd: /var/www/tana/frontend/styleguide/
Upload Files
File: /var/www/tana/frontend/styleguide/item-pages-services-services-map.html
<!DOCTYPE html>
<html>
  <head>
    <title>Tana Styleguide</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="generator" content="kss-node">

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700,300">
    <link rel="stylesheet" href="kss-assets/vendor/prism.css">
    <link rel="stylesheet" href="kss-assets/css/kss.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400|Montserrat:400,500,600,700&amp;subset=latin-ext">
<link rel="stylesheet" href="./../build/assets/style/style.css">
<link rel="stylesheet" href="./../styleguide.css">

  </head>

  <body class="kss-body">

    <!-- header. -->
    <header class="kss-header">
      <section class="kss-header__inner">
        <a class="kss-header__hamburger-trigger">
          <div class="kss-header__hamburger"></div>
        </a>
        <h1 class="kss-header__title kss-title">Tana Styleguide</h1>
      </section>
    </header>
    <!-- /header. -->


    <!-- navigation. -->
    <section class="kss-navigation">
      <h1 class="kss-navigation__title kss-title">Tana Styleguide</h1>
      <ul class="kss-nav">
        <li class="kss-nav__item">
          <a href="index.html">
            <span class="kss-nav__ref">0</span>
            <span class="kss-nav__name">Introduction</span>
          </a>
        </li>
          <li class="kss-nav__item">
            <a class="" href="section-base.html">
              <span class="kss-nav__ref">1</span>
              <span class="kss-nav__name">Base</span>
            </a>
          </li>
          <li class="kss-nav__item">
            <a class="" href="section-components.html">
              <span class="kss-nav__ref">2</span>
              <span class="kss-nav__name">Components</span>
            </a>
          </li>
          <li class="kss-nav__item">
            <a class="" href="section-pages.html">
              <span class="kss-nav__ref">3</span>
              <span class="kss-nav__name">Pages</span>
            </a>
          </li>
          <li class="kss-nav__item">
            <a class="" href="section-themes.html">
              <span class="kss-nav__ref">4</span>
              <span class="kss-nav__name">Themes</span>
            </a>
          </li>
      </ul>
    </section>
    <!-- /navigation. -->


    <!-- documentation. -->
    <section class="kss-documentation">

        <!--
          display each section, in order.
          the "root" element comes first in this loop, and can be detected using
          the "#if @first" block as seen below.
        -->
            <header class="kss-section kss-section--depth-3" id="kssref-pages-services-services-map">

            <article class="kss-section__content">
                <p class="kss-section__source">Source: <span>pages/_services.scss</span>, line <span>1</span></p>

              <a class="kss-section__permalink" href="#kssref-pages-services-services-map">
                <h3 class="kss-section__item kss-section__item--depth-3">
                  <span class="kss-section__ref">3.1.2</span>
                  <span class="kss-section__name">Services map</span>
                </h3>
              </a>

                <div class="kss-section__description"><p>This map shows countries where service is provided. Country names are clickable and it opens a subpage with details for that country. Clickable rectangles are rendered using svg <code>&lt;rect&gt;</code>.</p>
</div>

            </article>

              <article class="kss-section__modifiers">
                <h1 class="kss-modifiers__heading">Example</h1>


                <div class="kss-modifiers__example"><div class="services-map__container" id="servicesMapContainer">
  <div class="container">
    <div class="row">
      <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-md-3 col-lg-2 col-sm-offset-0">
        <a href="./" class="tana-logo-alternate">
          <img class="img-responsive" src="./../build/assets/images/tana-logo-alternate.png" alt="Tana logotip">
        </a>
      </div>
    </div>
  </div>
  <div class="visible-xs services-map__map-mobile">
    <img src="./assets/images/services-map-mobile.png" alt="Karta regije" class="img-responsive">
  </div>
  <div class="container">
    <div class="row hidden-xs">
      <div class="col-xs-12">
        <figure id="servicesMap" class="services-map__map-desktop">
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2240 1263"
            preserveAspectRatio="xMinYMin meet">
            <image width="2220" height="1263" xlink:href="./../build/assets/images/services-map.png">
            </image>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Slovenia" xlink:href="#slovenia">
              <text class="services-map__link-text" x="385" y="460">Slovenia</text>
            </a>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Croatia" xlink:href="#croatia">
              <text class="services-map__link-text" x="420" y="565">Croatia</text>
            </a>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Bosnia-Herzegovina" xlink:href="#bosnia-herzegovina">
              <text class="services-map__link-text" x="0" y="670">Bosnia-Herzegovina</text>
            </a>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Montenegro" xlink:href="#montenegro">
              <text class="services-map__link-text" x="250" y="780">Montenegro</text>
            </a>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Serbia" xlink:href="#serbia">
              <text class="services-map__link-text" x="1880" y="625">Serbia</text>
            </a>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Kosovo" xlink:href="#kosovo">
              <text class="services-map__link-text" x="1880" y="730">Kosovo</text>
            </a>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Macedonia" xlink:href="#macedonia">
              <text class="services-map__link-text" x="1880" y="840">Macedonia</text>
            </a>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Albania" xlink:href="#albania">
              <text class="services-map__link-text" x="1880" y="940">Albania</text>
            </a>
          </svg>
        </figure>
      </div>
    </div>
    <div class="row visible-xs">
      <div class="col-xs-12">
        <ul class="list list--unstyled services-map__list">
          <li class="services-map__list-item">
            <a href="#slovenia" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Slovenia">Slovenia</a>
          </li>
          <li class="services-map__list-item" data-name="Croatia">
            <a href="#croatia" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Croatia">Croatia</a>
          </li>
          <li class="services-map__list-item" data-name="Bosnia-Herzegovina">
            <a href="#bosnia-herzegovina" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Bosnia-Herzegovina">Bosnia-Herzegovina</a>
          </li>
          <li class="services-map__list-item" data-name="Montenegro">
            <a href="#montenegro" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Montenegro">Montenegro</a>
          </li>
          <li class="services-map__list-item" data-name="Serbia">
            <a href="#serbia" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Serbia">Serbia</a>
          </li>
          <li class="services-map__list-item" data-name="Kosovo">
            <a href="#kosovo" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Kosovo">Kosovo</a>
          </li>
          <li class="services-map__list-item" data-name="Macedonia">
            <a href="#macedonia" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Macedonia">Macedonia</a>
          </li>
          <li class="services-map__list-item" data-name="Albania">
            <a href="#albania" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Albania">Albania</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div></div>

              </article>

                <article class="kss-section__markup">
                  <pre><code class="language-markup">&lt;div class&#x3D;&quot;services-map__container&quot; id&#x3D;&quot;servicesMapContainer&quot;&gt;
  &lt;div class&#x3D;&quot;container&quot;&gt;
    &lt;div class&#x3D;&quot;row&quot;&gt;
      &lt;div class&#x3D;&quot;col-xs-6 col-xs-offset-3 col-sm-4 col-md-3 col-lg-2 col-sm-offset-0&quot;&gt;
        &lt;a href&#x3D;&quot;./&quot; class&#x3D;&quot;tana-logo-alternate&quot;&gt;
          &lt;img class&#x3D;&quot;img-responsive&quot; src&#x3D;&quot;./../build/assets/images/tana-logo-alternate.png&quot; alt&#x3D;&quot;Tana logotip&quot;&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class&#x3D;&quot;visible-xs services-map__map-mobile&quot;&gt;
    &lt;img src&#x3D;&quot;./assets/images/services-map-mobile.png&quot; alt&#x3D;&quot;Karta regije&quot; class&#x3D;&quot;img-responsive&quot;&gt;
  &lt;/div&gt;
  &lt;div class&#x3D;&quot;container&quot;&gt;
    &lt;div class&#x3D;&quot;row hidden-xs&quot;&gt;
      &lt;div class&#x3D;&quot;col-xs-12&quot;&gt;
        &lt;figure id&#x3D;&quot;servicesMap&quot; class&#x3D;&quot;services-map__map-desktop&quot;&gt;
          &lt;svg version&#x3D;&quot;1.1&quot; xmlns&#x3D;&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink&#x3D;&quot;http://www.w3.org/1999/xlink&quot; viewBox&#x3D;&quot;0 0 2240 1263&quot;
            preserveAspectRatio&#x3D;&quot;xMinYMin meet&quot;&gt;
            &lt;image width&#x3D;&quot;2220&quot; height&#x3D;&quot;1263&quot; xlink:href&#x3D;&quot;./../build/assets/images/services-map.png&quot;&gt;
            &lt;/image&gt;
            &lt;a class&#x3D;&quot;services-map__link&quot; data-open-subpage data-subpage-type&#x3D;&quot;country&quot; data-name&#x3D;&quot;Slovenia&quot; xlink:href&#x3D;&quot;#slovenia&quot;&gt;
              &lt;text class&#x3D;&quot;services-map__link-text&quot; x&#x3D;&quot;385&quot; y&#x3D;&quot;460&quot;&gt;Slovenia&lt;/text&gt;
            &lt;/a&gt;
            &lt;a class&#x3D;&quot;services-map__link&quot; data-open-subpage data-subpage-type&#x3D;&quot;country&quot; data-name&#x3D;&quot;Croatia&quot; xlink:href&#x3D;&quot;#croatia&quot;&gt;
              &lt;text class&#x3D;&quot;services-map__link-text&quot; x&#x3D;&quot;420&quot; y&#x3D;&quot;565&quot;&gt;Croatia&lt;/text&gt;
            &lt;/a&gt;
            &lt;a class&#x3D;&quot;services-map__link&quot; data-open-subpage data-subpage-type&#x3D;&quot;country&quot; data-name&#x3D;&quot;Bosnia-Herzegovina&quot; xlink:href&#x3D;&quot;#bosnia-herzegovina&quot;&gt;
              &lt;text class&#x3D;&quot;services-map__link-text&quot; x&#x3D;&quot;0&quot; y&#x3D;&quot;670&quot;&gt;Bosnia-Herzegovina&lt;/text&gt;
            &lt;/a&gt;
            &lt;a class&#x3D;&quot;services-map__link&quot; data-open-subpage data-subpage-type&#x3D;&quot;country&quot; data-name&#x3D;&quot;Montenegro&quot; xlink:href&#x3D;&quot;#montenegro&quot;&gt;
              &lt;text class&#x3D;&quot;services-map__link-text&quot; x&#x3D;&quot;250&quot; y&#x3D;&quot;780&quot;&gt;Montenegro&lt;/text&gt;
            &lt;/a&gt;
            &lt;a class&#x3D;&quot;services-map__link&quot; data-open-subpage data-subpage-type&#x3D;&quot;country&quot; data-name&#x3D;&quot;Serbia&quot; xlink:href&#x3D;&quot;#serbia&quot;&gt;
              &lt;text class&#x3D;&quot;services-map__link-text&quot; x&#x3D;&quot;1880&quot; y&#x3D;&quot;625&quot;&gt;Serbia&lt;/text&gt;
            &lt;/a&gt;
            &lt;a class&#x3D;&quot;services-map__link&quot; data-open-subpage data-subpage-type&#x3D;&quot;country&quot; data-name&#x3D;&quot;Kosovo&quot; xlink:href&#x3D;&quot;#kosovo&quot;&gt;
              &lt;text class&#x3D;&quot;services-map__link-text&quot; x&#x3D;&quot;1880&quot; y&#x3D;&quot;730&quot;&gt;Kosovo&lt;/text&gt;
            &lt;/a&gt;
            &lt;a class&#x3D;&quot;services-map__link&quot; data-open-subpage data-subpage-type&#x3D;&quot;country&quot; data-name&#x3D;&quot;Macedonia&quot; xlink:href&#x3D;&quot;#macedonia&quot;&gt;
              &lt;text class&#x3D;&quot;services-map__link-text&quot; x&#x3D;&quot;1880&quot; y&#x3D;&quot;840&quot;&gt;Macedonia&lt;/text&gt;
            &lt;/a&gt;
            &lt;a class&#x3D;&quot;services-map__link&quot; data-open-subpage data-subpage-type&#x3D;&quot;country&quot; data-name&#x3D;&quot;Albania&quot; xlink:href&#x3D;&quot;#albania&quot;&gt;
              &lt;text class&#x3D;&quot;services-map__link-text&quot; x&#x3D;&quot;1880&quot; y&#x3D;&quot;940&quot;&gt;Albania&lt;/text&gt;
            &lt;/a&gt;
          &lt;/svg&gt;
        &lt;/figure&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class&#x3D;&quot;row visible-xs&quot;&gt;
      &lt;div class&#x3D;&quot;col-xs-12&quot;&gt;
        &lt;ul class&#x3D;&quot;list list--unstyled services-map__list&quot;&gt;
          &lt;li class&#x3D;&quot;services-map__list-item&quot;&gt;
            &lt;a href&#x3D;&quot;#slovenia&quot; class&#x3D;&quot;services-map__link&quot; data-open-subpage data-subpage-type&#x3D;&quot;country&quot; data-name&#x3D;&quot;Slovenia&quot;&gt;Slovenia&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class&#x3D;&quot;services-map__list-item&quot; data-name&#x3D;&quot;Croatia&quot;&gt;
            &lt;a href&#x3D;&quot;#croatia&quot; class&#x3D;&quot;services-map__link&quot; data-open-subpage data-subpage-type&#x3D;&quot;country&quot; data-name&#x3D;&quot;Croatia&quot;&gt;Croatia&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class&#x3D;&quot;services-map__list-item&quot; data-name&#x3D;&quot;Bosnia-Herzegovina&quot;&gt;
            &lt;a href&#x3D;&quot;#bosnia-herzegovina&quot; class&#x3D;&quot;services-map__link&quot; data-open-subpage data-subpage-type&#x3D;&quot;country&quot; data-name&#x3D;&quot;Bosnia-Herzegovina&quot;&gt;Bosnia-Herzegovina&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class&#x3D;&quot;services-map__list-item&quot; data-name&#x3D;&quot;Montenegro&quot;&gt;
            &lt;a href&#x3D;&quot;#montenegro&quot; class&#x3D;&quot;services-map__link&quot; data-open-subpage data-subpage-type&#x3D;&quot;country&quot; data-name&#x3D;&quot;Montenegro&quot;&gt;Montenegro&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class&#x3D;&quot;services-map__list-item&quot; data-name&#x3D;&quot;Serbia&quot;&gt;
            &lt;a href&#x3D;&quot;#serbia&quot; class&#x3D;&quot;services-map__link&quot; data-open-subpage data-subpage-type&#x3D;&quot;country&quot; data-name&#x3D;&quot;Serbia&quot;&gt;Serbia&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class&#x3D;&quot;services-map__list-item&quot; data-name&#x3D;&quot;Kosovo&quot;&gt;
            &lt;a href&#x3D;&quot;#kosovo&quot; class&#x3D;&quot;services-map__link&quot; data-open-subpage data-subpage-type&#x3D;&quot;country&quot; data-name&#x3D;&quot;Kosovo&quot;&gt;Kosovo&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class&#x3D;&quot;services-map__list-item&quot; data-name&#x3D;&quot;Macedonia&quot;&gt;
            &lt;a href&#x3D;&quot;#macedonia&quot; class&#x3D;&quot;services-map__link&quot; data-open-subpage data-subpage-type&#x3D;&quot;country&quot; data-name&#x3D;&quot;Macedonia&quot;&gt;Macedonia&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class&#x3D;&quot;services-map__list-item&quot; data-name&#x3D;&quot;Albania&quot;&gt;
            &lt;a href&#x3D;&quot;#albania&quot; class&#x3D;&quot;services-map__link&quot; data-open-subpage data-subpage-type&#x3D;&quot;country&quot; data-name&#x3D;&quot;Albania&quot;&gt;Albania&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
                </article>

            </header>
    </section>
    <!-- /documentation. -->



  <!-- scripts. -->
  <script src="kss-assets/vendor/jquery.js"></script>
  <script src="kss-assets/vendor/prism.js"></script>
  <script src="kss-assets/js/kss.js"></script>
  <script src="./../build/assets/scripts/vendor.min.js"></script>
<script src="./../build/assets/scripts/app.min.js"></script>

  <!-- /scripts. -->

  </body>
</html>
@ Telegram