global-network/index.html at master · mariajayne/global-network · 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
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Global Network</title>

    <!-- Load Google Font -->

    <!-- CSS libraries -->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/cards.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">

    <!-- Custom CSS code -->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/style-front-page.css">
</head>
<body>

<div id="cover">
    <div id="introText">global network
    </div>
</div>


<button id="launchButton" type="button">launch</button>

<div id="undercover"></div>

<div class="container-fluid">

    <div class="row row-centered headline" id="frontpage-headline">
        <div class="col-md-12">
            <a class="a-nav" href="#"><u>Home</u></a>
            <a class="a-nav" href="views/dashboard.html">Internet Usage</a>
            <a class="a-nav" href="views/countries.html">Demographics</a>
            <a class="a-nav" href="views/social-media.html">Social Media</a>
            <a class="a-nav" href="views/process.html">Process book</a>
        </div>
    </div>
    <hr>

    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 frontpage-header">
            <h3>3.3 billion people in the world use the internet today.</h3>
            <h5 id="underHeadline">This is almost half of the world's population and it has been steadily growing for the past 25 years. </h5>
        </div>
    </div>

    <div id="yearCounter">1992</div>
    <div id="userCounter"><span id="userCounter1">0 </span> &nbsp; internet users worldwide</div>

    <table id="mapLegend">
        <tr>
            <td id="legendCircle"></td>
            <td><span id="legendText">A city of internet users</span></td>
        </tr>
    </table>

    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12" id="map"></div>
    </div>


</div>

<!-- Load JS libraries -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/queue.v1.min.js"></script>
<script src="js/topojson.v1.min.js"></script>
<script src="js/d3.min.js"></script>


<!-- Visualization objects -->
<script src="js/front-page-map.js"></script>

<!-- Load data, create visualizations -->
<script src="js/front-page.js"></script>
<script src="js/main.js"></script>

</body>
</html>