Skip to content

Instantly share code, notes, and snippets.

@andrewxhill
Last active December 25, 2015 09:29
Show Gist options
  • Save andrewxhill/6954283 to your computer and use it in GitHub Desktop.
Save andrewxhill/6954283 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--Edit the title of the page-->
<title>Your page title goes here</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.ie.css" />
<![endif]-->
<!--Switch between the different themes changing the stylesheet below - light-theme.css |dark-theme.css -->
<link rel="stylesheet" href="light-theme.css">
<link rel="stylesheet" href="makeitresponsive.css">
</head>
<body>
<div class="map" id="map"></div>
<div class="sidepanel">
<div class="wrapper">
<div class="context subheader">
<p>Map created by <a href="#">{Link to your website}</a></p>
</div>
<h1>Title of your visualization</h1>
<p>An earthquake of magnitude 9.0 occurred March 11, 2012, off the northeastern Pacific coast of Japan. The earthquake was followed by a tsunami which would reach 9.3m or higher at Fukushima Prefecture. <a href=''>Combined, the two claimed almost</a> 20,000 lives in the region of Tohoku and triggered nuclear meltdowns at three reactors in Fukushima nuclear plant.</p>
<!--Copy and paste the div below for creating content blocks-->
<h3>Description</h3>
<p>The size and age of the Cosmos are beyond ordinary human understanding. Lost somewhere between immensity and eternity is our tiny planetary home. In a cosmic perspective, most human concerns seem insignificant, even petty. And yet our species is young and curious and brave and shows much promise. In the last few millennia we have made the most astonishing, unexpected discoveries about the Cosmos and our place within it, explorations that are exhilarating to consider. They remind us that humans have evolved to wonder, that understanding is a joy, that knowledge is prerequisite to survival. I believe our future depends powerfully on how well we understand this Cosmos in which we float like a mote of dust in the morning sky.</p>
<h3>Sources</h3>
<p>Unexpected discoveries about the <a href="#">Cosmos and our place</a> within it, explorations that are <a href="#">exhilarating</a> to consider. They remind us that humans have evolved to wonder, that understanding is a joy, that knowledge is prerequisite to survival. I believe our future depends powerfully on how well we understand this.</p>
<div class="context footer">
<p>Create your maps with ease using <a href="http://cartodb.com">CartoDB</a></p></p>
</div>
</div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&v=3.8"></script>
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<!--Change the URL below in order to change the map that is being shown.
Go to your map in CartoDB, click on share, and copy the URL undert the API section
Check the cartodb.js documentation for more info
http://developers.cartodb.com/documentation/cartodb-js.html-->
<script type="text/javascript">
cartodb.createVis('map', 'http://nacis-workshop.cartodb.com/api/v2/viz/569d1940-336d-11e3-af98-5f54611e93d5/viz.json');
</script>
</body>
</html>
/* Change the styles below in order to customize your template */
body{font-family: Helvetica, Arial; font-weight: regular; font-size: 15px; color: #555; background-color: #FFF; margin: 0;}
h1{font-weight: bold; font-size: 31px; letter-spacing: -1px; color: #333; line-height: 33px;}
h3{font-weight: bold; font-size: 12px; color: #CCC; text-transform: uppercase; margin: 10px 0 0 0;}
p{margin: 8px 0 20px 0; line-height: 18px;}
a, a:visited{color: #397DB8; text-decoration: none;}
a:hover{text-decoration: underline;}
.wrapper{display: block; padding: 4px 30px 0 30px;}
.map{background-color:#eee; position: absolute; top: 0; left: 0; bottom: 0; width: 67%; *height:100%;}
.sidepanel{background-color:#FFF; position: absolute; top: 0; right: 0; bottom: 0; width: 33%; height: 100%; overflow: auto;}
.context{font-family: Helvetica, Arial; font-size: 13px; color: #999; padding: 10px 0 0 0;}
.subheader{border-bottom: 1px solid #ddd;}
.footer{border-top: 1px solid #ddd; margin-top: 30px;}
.titleBlock{text-align: right;}
/* Here are the styles that makes the template responsive */
@media only screen and (max-width: 768px) {
.map{position: inherit; height: 400px; width: 100%; display: block;}
.sidepanel{position: inherit; width: 100%;}
}
@media only screen and (max-width: 480px) {
.map {height: 300px;}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment