andrewxhill/index.html

## index.html
<!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>

## light-theme.css
/* 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;}

## makeitresponsive.css
/* 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;}
}

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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;}
	}