index.html 2.06 KB
Newer Older
Elias Häußler's avatar
Elias Häußler committed
1 2
<!DOCTYPE html>
<html>
3

Elias Häußler's avatar
Elias Häußler committed
4
<head>
5
  <title>Visualization</title>
Elias Häußler's avatar
Elias Häußler committed
6
  <meta charset="utf-8" />
7
  <meta name="viewport" content="width=device-width, initial-scale=1" />
Elias Häußler's avatar
Elias Häußler committed
8 9
  <meta name="author" content="Elias Häußler" />
  <meta name="description" content="Visualization about student growth in Germany" />
10
  <link rel="stylesheet" href="assets/css/fonts.css" />
Elias Häußler's avatar
Elias Häußler committed
11 12
  <link rel="stylesheet" href="assets/css/main.css" />
</head>
Elias Häußler's avatar
Elias Häußler committed
13

Elias Häußler's avatar
Elias Häußler committed
14 15
<body>
<div class="page-wrapper">
16

Elias Häußler's avatar
Elias Häußler committed
17 18 19
  <header class="page-header">
    <section class="page-header__meta"></section>
  </header> <!-- eof: .page-header -->
20

Elias Häußler's avatar
Elias Häußler committed
21
  <main class="page">
22 23 24 25 26 27 28
    <section class="visualization">
      <div class="visualization__container visualization__container--map">
        <div class="visualization__controls controls"></div>
        <div class="visualization__map map"></div>
      </div>
      <div class="visualization__container visualization__container--chart">
        <div class="visualization__chart chart"></div>
Elias Häußler's avatar
Elias Häußler committed
29 30 31
      </div>
    </section> <!-- eof: .visualization -->
  </main> <!-- eof: .page -->
Elias Häußler's avatar
Elias Häußler committed
32

Elias Häußler's avatar
Elias Häußler committed
33 34
  <footer class="page-footer">
    <div class="page-footer__copyright">
35 36
      &copy; 2017-2019 <a class="link" href="https://haeussler.dev" target="_blank">Elias Häußler</a>
      &middot; <a class="link" href="https://gitlab.elias-haeussler.de/eliashaeussler/student-growth" target="_blank">Source code</a>
37
      <span class="page-footer__license"></span>
Elias Häußler's avatar
Elias Häußler committed
38 39
    </div>
  </footer> <!-- eof: .page-footer -->
Elias Häußler's avatar
Elias Häußler committed
40

41
</div> <!-- eof: .page-wrapper -->
Elias Häußler's avatar
Elias Häußler committed
42

Elias Häußler's avatar
Elias Häußler committed
43
<div class="fullscreen"></div>
Elias Häußler's avatar
Elias Häußler committed
44

45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61
<div class="device-notice">
  <div class="device-notice__message">
    <p>
      This website is not optimized for your devices' width.
      <span class="portrait-only">
        Please consider using it in landscape mode or select a device with larger screen size.
      </span>
      <span class="landscape-only">
        Please consider using a device with larger screen size.
      </span>
    </p>
    <p>
      <a href="javascript:void(0);" class="device-notice__confirm">Got it!</a>
    </p>
  </div>
</div>

Elias Häußler's avatar
Elias Häußler committed
62 63
<script src="assets/js/main.js"></script>
</body>
64

65
</html>