visualizingthecrisis.github.io/index.html at master · visualizingthecrisis/visualizingthecrisis.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
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
<!DOCTYPE html>
<html>
  <head>
    <title>VISUALISING THE CRISIS</title>

    <script src="js/jquery.min.js" charset="utf-8"></script>


    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

  <style>
    video#bgvid {
      position: fixed;
      top: 50%;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      z-index: -100;
      -ms-transform: translateX(-50%) translateY(-50%);
      -moz-transform: translateX(-50%) translateY(-50%);
      -webkit-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
      background: url(video/video.jpeg) no-repeat;
      background-size: cover;
    }

    @font-face {
      font-family: SF-UI;
      src: url("../font/SF-UI-Display-Regular.otf") format("opentype");
    }
    @font-face {
      font-family: SF-UI-Heavy;
      src: url("../font/SF-UI-Display-Heavy.otf") format("opentype");
    }
    @font-face {
      font-family: MaisonNeue;
      src: url("../font/MaisonNeue-Mono.ttf") format("opentype");
    }
    .title{
      font-size:50px;
      position:fixed;
      text-align: center;
      width:100%;
      top:20%;
      font-family: SF-UI-Heavy;
      z-index:1;
      color:white;
      line-height: 1.0;
    }
    @media screen and (min-width: 767px) {
      .title{
        font-size:100px;

      }
      button{
        margin-top: 0px;
      }
    }
    button{
      margin-top: 100px;;
      border: 1px solid white;
      background-color:transparent;
      font-family: SF-UI;
      margin:10px;
      padding:4px;
      padding-left: 16px;
      padding-right: 16px;

      font-size:14px;
      border-radius: 5px;
    }
    a{
      color:white;
    }
    body{
      background-color: black;
    }
  </style>
  </head>
  <body>
    <video autoplay loop poster="" volume=0 id="bgvid">
      <source src="video/video.mp4" type="video/mp4">
    </video>

    <div class="container" >
      <div class="row">
        <div class="col-sm-12">
        </div>

      </div>
    </div>
    <div class="title">
      Visualizing <br/> the Crisis
      <div style=" text-align:center;z-index:1;padding-top:2%;">
        <button type="button" style="display:inline-block;" ><a href="https://github.com/visualizingthecrisis/visualizingthecrisis.github.io">ABOUT</a></button>
        <button type="button" style="display:inline-block;" ><a href="main.html">EXPLORE</a></button>
      </div>
    </div>
    <div style=" width:100%;text-align:center;z-index:1;font-family:MaisonNeue;font-size:14px;bottom:30px; position:fixed; color:white;">
      TRACKING THE UNFOLDING <br/>GLOBAL FINANCIAL CRISIS
    </div>
  </body>
</html>