web/index.html at master · CHAOS-Community/web · 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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CHAOS:\COMMUNITY | Cultural Heritage Archive Open System</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  <style type="text/css">
     body {
padding-bottom: 20px;
background-image: url('img/light_wool.png');
background-repeat:repeat;
}

      /* Custom container */
      .container-narrow {
        padding-top: 20px;
        margin: 0 auto;
        max-width: 700px;
      }
      .container-narrow > hr {
        margin: 30px 0;
      }
       .container-narrow1 {
        padding-top: 0px;
        margin: 0 auto;
        max-width: 700px;
      }
 .table-style {
        max-width: 300;
      }
      /* Main marketing message and sign up button */
      .jumbotron {
        margin: 60px 0;
        text-align: left;
      }
      .jumbotron1 {
        margin: 0px 0;
        padding-left: 130px;
        padding-top: 0px;
      }
      .jumbotron h1 {
        font-size: 66px;
        line-height: 1;
      }
      .jumbotron .btn {
        font-size: 21px;
        padding: 14px 24px;
      }

      /* Supporting marketing content */
      .marketing {
        margin: 60px 0;
      }
      .marketing p + h4 {
        margin-top: 28px;
      }


    /* GLOBAL STYLES
    -------------------------------------------------- */
    /* Padding below the footer and lighter body text */

    body {
      padding-bottom: 40px;
      color: #5a5a5a;
    }


    /* MARKETING CONTENT
    -------------------------------------------------- */

    /* Center align the text within the three columns below the carousel */
    .marketing .span4 {
      text-align: center;
    }
    .marketing h2 {
      font-weight: normal;
    }
    .marketing .span4 p {
      margin-left: 10px;
      margin-right: 10px;
    }

    /* Featurettes
    ------------------------- */

    .featurette-divider {
      margin: 80px 0; /* Space out the Bootstrap <hr> more */
    }
    .featurette {
      padding-top: 50px; /* Vertically center images part 1: add padding above and below text. */
      overflow: hidden; /* Vertically center images part 2: clear their floats. */
    }
    .featurette-image {
      margin-top: -10px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */
    }

    /* Give some space on the sides of the floated elements so text doesn't run right into it. */
    .featurette-image.pull-left {
      margin-right: 40px;
    }
    .featurette-image.pull-right {
      margin-left: 40px;
    }

    /* Thin out the marketing headings */
    .featurette-heading {
      font-size: 60px;
      font-weight: 100;
      line-height: 1;
      letter-spacing: -1px;
    }

    </style>
  </head>
  <body>
<div class="container-narrow1">
    <a class="brand pull-right" href="index.html"><img src="img/chaoscommunity.png"
      alt></a>
      </div>
    <div class="container-narrow">
      <i class="icon-globe"></i><a class="btn btn-link" href="en/index.html">In English</a>
      <div class="masthead">
      </div>
      <br>
      <br>
      <div class="jumbotron">
        <p class="lead"><b>CHAOS:\_</b> er et open source samarbejde. Vi arbejder for at sænke omkostninger ved formidling af kulturarven på internettet. Sammen har vi udviklet teknologier, der hjælper os med at arkivere, søge i og præsentere videoer, lyde, billeder og tekster på internettet.
          <br>
          <br>
        Du kan også være med.
        </p>

<div class="jumbotron1">
        <p><ul class="nav nav-pills">
  <li class="">
    <a href="https://github.com/CHAOS-Community">Find os på GitHub</a>
  </li>
  <li><a href="https://twitter.com/weareallchaos">Følg @weareallchaos</a></li>
  <li><a href="#myModal" data-toggle="modal">Skriv til os</a></li>
</ul>

</p>

    <!-- dropdown menu links -->
  </ul>

</div>
  <hr>
      </div>


      <div class="row-fluid marketing">
        <div class="span6">
          <h4>Hvem er vi?</h4>
          <p>DR's Kulturarvsprojekt og en række universiteter <br> og museer arbejder sammen om CHAOS:\_.</p>
            <i class="icon-info-sign"></i><a class="btn btn-link" href="#sektion1">Læs mere</a>
            <br>
          <h4>Hvem kan være med?</h4>
          <p>Hvis du synes kulturarv, teknologi og formidling <br>er interessant, er CHAOS:\_ måske noget for dig.</p>
            <i class="icon-info-sign"></i><a class="btn btn-link" href="#sektion2">Læs mere</a>
            <br>
        </div>
        <div class="span6">
          <h4>Hvor er koden?</h4>
          <p>Du kan følge projektets fremgang og downloade koden på github.com/chaos-community.</p>
            <i class="icon-info-sign"></i><a class="btn btn-link" href="#sektion3">Læs mere</a>
            <br>
          <h4>Hvordan kommer jeg i gang?</h4>
          <p>Skriv til os, så svarer vi på spørgsmål og hjælper dig med at komme i gang med CHAOS:\_.</p>
            <i class="icon-info-sign"></i><a class="btn btn-link" href="#sektion4">Læs mere</a>
            <br>
          </div>
      </div>

<hr class="featurette-divider">
<A name="sektion1"></A>
<div class="featurette">
        <img class="featurette-image pull-right" src="img/gramophone.png">
        <h2 class="featurette-heading">Hvem er vi?</h2>
        <p class="lead">I øjeblikket samarbejder <br>

          <span class="label label-inverse">DR’s Kulturarvsprojekt</span> <span class="label label-inverse">Aalborg Universitet</span> <span class="label label-inverse">Aarhus Universitet</span> <span class="label label-inverse">Kolding Designskole</span> <span class="label label-inverse">Mediemuseet, Brandts</span> <span class="label label-inverse">Statsbiblioteket</span> <span class="label label-inverse">Det Informationsvidenskabelige Akademi</span> <span class="label label-inverse">Roskilde Universitet</span> <span class="label label-inverse">Københavns Universitet</span> <span class="label label-inverse">Syddansk Universitet</span> <span class="label label-inverse">Kunsten Aalborg</span> <span class="label label-inverse">Vesthimmerlands Museum</span> <span class="label label-inverse">Vendsyssel Kunstmuseum</span> <span class="label label-inverse">Try Museum</span> <span class="label label-inverse">Læsø Museum</span> <span class="label label-inverse">Limfjordsmuseet</span> <span class="label label-inverse">Skagens Museum</span> <span class="label label-inverse">Nordjyllands Kystmuseum</span> <span class="label label-inverse">Vendsyssel Historiske Museum og Arkiv</span> <span class="label label-inverse">og en række kommercielle aktører</span><br>

          om projekter som blandt andet <a href="http://www.larm-archive.org/about-larm/about-chaos/" target="_blank">LARM.fm</a> <br>og <a href="https://itunes.apple.com/dk/app/kunstens-officielle-app/id571649722?l=da&mt=8" target="_blank">KUNSTEN mobil app</a> baseret på CHAOS:\_.</p>

      </div>
  <hr class="featurette-divider">
<A name="sektion2"></A>
<div class="featurette">
        <img class="featurette-image pull-left" src="img/bulb.png">
        <h2 class="featurette-heading">Hvem kan <br>være med?</h2>
        <p class="lead">Hvis du vil formidle kulturarv, men har svært ved at få råd til idéerne, kan CHAOS:\_ være for dig. Hvis du er udvikler og nysgerrig, vil vi også meget gerne høre fra dig.</p>
      </div>
<hr class="featurette-divider">
<A name="sektion3"></A>
<div class="featurette">
        <img class="featurette-image pull-right" src="img/computer.png">
        <h2 class="featurette-heading">Hvor er koden?</h2>
        <p class="lead">Koden der udvikles i samarbejdet ligger på <a href="https://github.com/CHAOS-Community" target="_blank">github.com/CHAOS-Community</a>, hvor du bl.a. kan finde Software Development Kits for udviklere, følge fremdriften i projektet og se eksempler på, hvordan CHAOS:\_ kan bruges til at få masser af indhold på en hjemmeside eller i en mobil app.</p>
      </div>
<hr class="featurette-divider">
<A name="sektion4"></A>
<div class="featurette">
        <img class="featurette-image pull-left" src="img/plane.png">
        <h2 class="featurette-heading">Hvordan kommer jeg i gang?</h2>
        <p class="lead">Hvis du vil vide præcis hvad CHAOS:\_ kan bruges til eller vil have hjælp til at komme i gang så skriv til os her:<ul class="nav nav-pills pull-right">
  <li><a href="#myModal" data-toggle="modal">Skriv til os</a></li>
</ul>
</p>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Skriv til os</h3>
  </div>
  <div class="modal-body">
    <p><script src="http://podio.com/webforms/2618790/192332.js"></script>
<script type="text/javascript">
  _podioWebForm.render("192332")
</script></p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Luk vinduet</button>
  </div>
</div></p>
      </div>


      <hr>
      <div class="footer">
        <p>© Cultural Heritage Archive Open System 2012 · Images <a href="http://thenounproject.com/noun/paper-plane/#icon-No3756" target="_blank">Paper Plane</a>, <a href="http://thenounproject.com/noun/gramophone/#icon-No4536" target="_blank">Gramophone</a>, <a href="http://thenounproject.com/noun/light-bulb/#icon-No3721" target="_blank">Light Bulb</a> & <a href="http://thenounproject.com/noun/laptop/#icon-No4532" target="_blank">Laptop</a> designed by <a href="http://thenounproject.com/bitsnbobs" target="_blank">James Fenton</a> from The Noun Project.
         </p>
      </div>

    </div>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>