-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
67 lines (53 loc) · 2.65 KB
/
index.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
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:700,400' rel='stylesheet' type='text/css'>
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div class="wrapper">
<div class="">
<h1 class="title">Kitty Microbiome Project</h1>
<div class="divider"></div>
</div>
<div class="sidebar">
<div class="my-cat-image">
<img src="img/cat.svg"/>
</div>
<div class="info">
<h1>Explore your cat!</h1>
<p id="desc">
Every animal has its own unique diversity of bacteria in its digestive tract. Cats are no exception. How does this composition influence your feline companion?s health? That is the question that the <strong>Kitty Microbiome Project</strong> is trying to address. This web app allows you to explore the four most common bacterial phyla found in your cat and compare them with other cats.
</p>
</div>
</div>
<div class="my-cat-graph unanimate" id="svg-container">
</div>
<div class='graph-set'>
<div class="micro-graph" id="svg-container">
<h3 class="graph-title">Loading...</h3>
</div>
<div class="micro-graph" id="svg-container">
<h3 class="graph-title">Loading...</h3>
</div>
<div class="micro-graph" id="svg-container">
<h3 class="graph-title">Loading...</h3>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="js/main.js"></script>
</body>
</html>