Datafable · peterdesmet · Sep 21, 2014 · Aug 29, 2014 · Aug 29, 2014 · Aug 30, 2014
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+
+.DS_Store
diff --git a/css/main.css b/css/main.css
@@ -0,0 +1,77 @@
+.navbar {
+    margin-bottom: 0;
+    }
+    @media (min-width: 768px) {
+        /* Reduce padding to make place for fa-2x icons. */
+        .navbar .icons li a {
+            padding-top: 11px;
+            padding-bottom: 11px;
+        }
+    }    
+
+.jumbotron {
+    background-image: url("../images/background-forest.jpg"); /* Image by Jonas Nilsson Lee (http://www.nilssonlee.se/) */
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 500px;
+    }
+    .jumbotron h1, .jumbotron p {
+        color: white;
+        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
+    }
+
+.description {
+    margin-bottom: 30px;
+    }
+    .description h1 {
+        margin-bottom: 20px;
+    }
+
+.portfolio {
+    background-color: #f8f8f8;
+    border-bottom: 1px solid #e7e7e7;
+    border-top: 1px solid #e7e7e7;
+    }
+    a.thumbnail {
+        border-radius: 0;
+        padding: 0;
+        -webkit-transition: initial;
+        transition: initial;
+        }
+        a.thumbnail:hover {
+            border-color: #428bca;
+            border-width: 5px;
+            margin: -4px -4px 16px -4px; /* To offset border hover, including margin-bottom: 20px */
+            text-decoration: none;
+        }
+        .thumbnail img {
+            width: 100%;
+        }
+        .thumbnail .caption {
+            min-height: 130px;
+            }
+            .thumbnail .caption p {
+                color: #777;
+            }
+    .portfolio .credit {
+        color: #777;
+        font-size: 11px;
+        margin-top: -15px;
+        padding: 0 9px;
+    }
+
+.footer {
+    padding-bottom: 20px;
+    padding-top: 20px;
+    }
+    .footer a:hover {
+        text-decoration: none;
+    }
+    .footer address {
+        margin-top: 25px; /* Align with .media-body h4 */
+    }
+    .footer .media-object {
+        height: 72px;
+        width: 72px;
+    }
diff --git a/images/background-forest.jpg b/images/background-forest.jpg
diff --git a/images/bird-migration-flow-visualization.png b/images/bird-migration-flow-visualization.png
diff --git a/images/favicon.ico b/images/favicon.ico
diff --git a/images/lionfish.jpg b/images/lionfish.jpg
diff --git a/images/rolling-blackout-belgium.png b/images/rolling-blackout-belgium.png
diff --git a/images/scuba-diving-citizen-science-observations.jpg b/images/scuba-diving-citizen-science-observations.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html>
+    <!-- Yes, this is basically a generic Bootstrap website. But we like it. -->
+    <head>
+        <meta charset="utf-8">
+        <title>Datafable</title>
+        <meta name="author" content="Datafable">
+        <meta name="description" content="We help you discover the untold stories in your data.">
+        <meta name="google-site-verification" content="6kXtGiEOQN_bN4OXcJ-cjJy4mXQQbFOZIru9xFLNK7Q">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="shortcut icon" href="images/favicon.ico">
+        <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
+        <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
+        <link rel="stylesheet" type="text/css" href="css/main.css"/>
+    </head>
+
+    <body>
+        <nav class="navbar navbar-default" role="navigation">
+            <div class="container">
+                <div class="navbar-header">
+                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
+                        <span class="sr-only">Toggle navigation</span>
+                        <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
+                    </button>
+                    <p class="navbar-brand">Datafable</p>
+                </div>
+
+                <div class="collapse navbar-collapse">
+                    <ul class="nav navbar-nav">
+                        <li><a href="#portfolio">Portfolio</a></li>
+                        <li><a href="#contact">Contact us</a></li>
+                    </ul>
+                    <ul class="nav navbar-nav navbar-right icons">
+                        <li><a href="https://twitter.com/datafable">
+                            <span class="fa fa-twitter fa-2x hidden-xs"></span>
+                            <span class="visible-xs-inline">Twitter</span>
+                        </a></li>
+                        <li><a href="https://github.com/datafable">
+                            <span class="fa fa-github fa-2x hidden-xs"></span>
+                            <span class="visible-xs-inline">GitHub</span>
+                        </a></li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+
+        <div class="jumbotron">
+            <div class="container">
+                <h1>Datafable</h1>
+                <p>Discover the untold stories in your data</p>
+                <a href="mailto:info@datafable.com" class="btn btn-success btn-lg" role="button">Contact us</a>
+            </div>
+        </div>
+
+        <div class="description">
+            <div class="container">
+                <h1 class="text-center">We offer expertise in data visualization and publication</h1>
+            </div>
+        </div>
+
+        <div class="portfolio">
+            <div class="container">
+                <a name="portfolio"></a><h2>Portfolio</h2>
+                <div class="row">
+                    <div class="col-md-4 col-sm-6">
+                        <a href="http://datafable.com/rolling-blackout-belgium/viz/" class="thumbnail">
+                            <div class="caption">
+                                <h3>Rolling blackout plan</h3>
+                                <p>Own project</p>
+                            </div>
+                            <img src="images/rolling-blackout-belgium.png" alt="screenshot">
+                        </a>
+                    </div>
+
+                    <div class="col-md-4 col-sm-6">
+                        <a href="http://enram.github.io/bird-migration-flow-visualization/viz/" class="thumbnail">
+                            <div class="caption">
+                                <h3>Bird migration flow visualization</h3>
+                                <p>ENRAM / LifeWatch INBO</p>
+                            </div> 
+                            <img src="images/bird-migration-flow-visualization.png" alt="screenshot">
+                        </a>
+                    </div>
+
+                    <div class="col-md-4 col-sm-6">
+                        <a href="http://www.gbif.org/page/2991" class="thumbnail">
+                            <div class="caption">
+                                <h3>Scuba diving citizen science observations</h3>
+                                <p>Diveboard</p>
+                            </div>
+                            <img src="images/scuba-diving-citizen-science-observations.jpg" alt="screenshot">
+                        </a>
+                        <p class="credit">Photo by <a href="https://www.flickr.com/photos/tim_uk/2692982879">Tim Sheerman-Chase</a>, licenced under <a href="https://creativecommons.org/licenses/by/2.0/">CC-BY</a>.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="footer">
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-4 col-sm-6">
+                        <a name="contact"></a><h3>Contact us</h3>
+                        <address>
+                            <p><a href="mailto:info@datafable.com"><span class="fa fa-envelope-o fa-lg fa-fw"></span> info@datafable.com</a></p>
+                            <p><a href="https://twitter.com/datafable"><span class="fa fa-twitter fa-lg fa-fw"></span> @datafable</a></p>
+                        </address>
+                        <p>We love <a href="https://github.com/datafable">open source and open data</a>.</p>
+                    </div>
+
+                    <div class="col-md-4 col-sm-6 col-md-offset-4">
+                        <h3>Team</h3>
+                        <div class="media">
+                            <img src="https://avatars0.githubusercontent.com/u/2742677?v=2&amp;s=100" alt="avatar" class="pull-left media-object img-circle">
+                            <div class="media-body">
+                                <h4>Bart Aelterman</h4>
+                                <a href="https://twitter.com/bartaelterman"><span class="fa fa-twitter fa-lg fa-fw"></span> @bartaelterman</a>
+                            </div>
+                        </div>    
+                        <div class="media">
+                            <img src="https://avatars0.githubusercontent.com/u/600993?v=2&amp;s=100" alt="avatar" class="pull-left media-object img-circle">
+                            <div class="media-body">
+                                <h4>Peter Desmet</h4>
+                                <a href="https://twitter.com/peterdesmet"><span class="fa fa-twitter fa-lg fa-fw"></span>  @peterdesmet</a>
+                            </div>
+                        </div> 
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Scripts -->
+        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
+        <script>
+            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+            ga('create', 'UA-54642803-2', 'auto');
+            ga('send', 'pageview');
+        </script>
+    </body>
+</html>