Skip to content

Instantly share code, notes, and snippets.

@markarios

markarios/index.html

Last active August 29, 2015 14:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save markarios/0770373eed1eb553b7ea to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save markarios/0770373eed1eb553b7ea to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<!-- color theme -->
<!-- https://github.com/chriskempson/tomorrow-theme -->
<meta charset="UTF-8" name=viewport content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<style>
@media (orientation:landscape) {
div[id=dataviz] {
width:72%;
height:40rem;
background-color:#c5c8c6;
float:right;
margin-right:2rem;
}
div#controls {
width:15%;
height:100%;
float:left;
}
}
@media (orientation:portrait) {
div[id=dataviz] {
width:100%;
margin: 0 auto;
padding-bottom: 75%;
background-color:#c5c8c6;
}
nav {
width:100%;
margin:.4rem 0 .4rem 0;
padding-top:.1rem;
padding-bottom:1rem;
}
}
/*Theme*/
body {
background-color: #1d1f21;
font-size: Small;
font-family: Menlo, Helvetica;
color: #c5c8c6;
}
nav li {
list-style-type: none;
}
</style>
</head>
<body>
<div id="controls">
<nav id="01">
<ul >
<li><input type="range"></input></li>
<li><button type="button">home</button></li>
<li><button type="button">products</button></li>
<li><button type="button">news</button></li>
<li><button type="button">blog</button></li>
</ul>
</nav>
</div>
<div id="dataviz"></div>
<script>
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment