spin-unit.github.io/home.html at main · spin-unit/spin-unit.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8"/>
    <title>SPIN Unit</title>
    <link rel="stylesheet" href="./assets/css/default.css">
    <meta content="width=device-width, initial-scale=1" name="viewport">

  </head>

  <body>
    <span class="corner-nav-bl corner-nav noselect">
          <a class="" href="about">About</a> &nbsp;&bull;&nbsp;
          <a class="" href="resources">Resources</a> &nbsp;&bull;&nbsp;
          <a class="" href="latest">Latest</a>
    </span>
     <span class="corner-nav-br corner-nav noselect">
          <a href="https://twitter.com/spinunit" target="_blank">Twitter &#8599;&#xFE0E;</a> &nbsp;
          <a href="https://www.instagram.com/spinunit" target="_blank">Instagram &#8599;&#xFE0E;</a> &nbsp;
          <a href="https://www.linkedin.com/company/spatial-intelligence-unit" target="_blank">Linkedin &#8599;&#xFE0E;</a>
    </span>

    <div class="default-content">

      <div class="page-container padding-bottom padding-side padding-top">
        <div class="col-100 col-float-left col-content">
          <span class="p-nav-text regular-weight"><a class="highlight" href="about">SPIN Unit</a> is a research & innovation practice dedicated to discovering urban values. In our work, we <a id="text-data" class="highlight" href="work/data">make data meaningful</a>, <a id="text-innovation" class="highlight" href="work/innovation">innovate interactions</a>, and <a id="text-education" class ="highlight" href="work/education">advance urban education</a>. We also coordinate <a class="highlight" target="_blank"href="https://realspace.community">A Real Space</a> in the heart of Helsinki.</span>
        </div>
      </div>


      <div class="page-container padding-side padding-top margin-bottom">
        <div class="col-33 col-float-left front-images padding-side">
          <a href="work/data"><img id="img-data" class="default-greyed-img" src="/assets/img/core/circle-1.png"></a>
        </div>
        <div class="col-33 col-float-left front-images padding-side padding-top">
          <a href="work/innovation"><img id="img-innovation" class="default-greyed-img" src="/assets/img/core/circle-2.png"></a>
        </div>
        <div class="col-33 col-float-left front-images padding-side padding-top">
          <a href="work/education"><img id="img-education" class="default-greyed-img" src="/assets/img/core/circle-3.png"></a>
        </div>
    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>

      const array = ["data", "innovation", "education"];

      array.forEach(function (item, index) {
        $('#text-'.concat(item)).hover(function(){
          $('#img-'.concat(item)).toggleClass('reset-img');
        });

        $('#img-'.concat(item)).hover(function(){
          $('#text-'.concat(item)).toggleClass('highlight-active');
         });

      });

    </script>


  </body>

</html>