-
Notifications
You must be signed in to change notification settings - Fork 2
/
about.html
84 lines (70 loc) · 4.92 KB
/
about.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>The World Inside Our Home</title>
<!-- Standard meta -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS link -->
<link rel="stylesheet" href="css/style.css">
<!-- Google font link -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Pangolin&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montez&display=swap" rel="stylesheet">
<!-- Load d3.js -->
<script type="text/javascript" src="https://d3js.org/d3.v4.js"></script>
<script type="text/javascript" src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<script type="text/javascript" src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.0/d3-legend.js"></script>
<!-- Scrollmagic -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div class ="body-container" id="body-container">
<!-- START OF HEADER BUTTONS FOR STORY PAGES -->
<!-- Project masthead -->
<div class="heading-container">
<!-- Project title -->
<div class="project-title">
<h1 class="project-title black-font bold-text center-text no-line-height">The World Inside Our <span class="home-cursive home-color">Home</span></h1>
</div>
<!-- Industry buttons -->
<div class="section-buttons center-text" id="header-buttons">
<!-- <div class="vertical-top"></div> -->
<button id="homeButton" class="buttonA home-button"><a href="index.html">Home</a></button>
<button id="homeButton" class="buttonA home-button"><a href="data.html">Sources and Methodology</a></button>
</div>
</div>
<!-- END OF HEADER BUTTONS FOR STORY PAGES -->
<div class="main-container">
<div id="part-1-about">
<div class="sub-section-about intro-div">
<h2 class="main-title black-font one-column-text">The Project</h2>
<p class="story-paragraphs one-column-text">This is a project built as a part of our coursework for MSc in Computational and Data Journalism at Cardiff University. It’s a work in progress.</p>
<p class="story-paragraphs one-column-text">It offers analyses and visualisations of the symbiotic relation, borne of commodities, between the UK and other countries. We focus on the things we commonly have at home from three industries: food, textile, and wood. Our analyses and visualisations were based on 10-year data, if available and whenever necessary to the analysis. At the time this project was created, the latest available data was as of 2017.</p>
</div>
</div>
<div id="part-2-about">
<div class="sub-section-about">
<h2 class="main-title black-font one-column-text">Navigate this site</h2>
<p class="story-paragraphs one-column-text">Click either of the three main headings “Food,” “Textile,” or “Wood” on the homepage, and things we commonly have at home from the selected industry will be highlighted in the home image.</p>
<p class="story-paragraphs one-column-text">To see the countries that import these things into the UK on the world map, click the “Explore” link on the right. The world map shows all importing countries in 2017 for the selected industry. The lines on the map are scaled according to either import value in pounds or import volume. On the map, click any country to view a list of the import statistics from that location. Other visualisations are shown in the text.</p>
<p class="story-paragraphs one-column-text">Go back to “Home” to explore other industries.</p>
</div>
</div>
<div id="part-3-about">
</div>
</div>
</div>
<!-- END OF STORY PAGE -->
<!-- START OF JAVASCRIPT LINKS -->
<script type="text/javascript" src="js/classtoggle.js"></script>
<script type="text/javascript" src="js/sticky.js"></script>
<!-- END OF JAVASCRIPT LINKS -->
</body>
</html>