Skip to content

Instantly share code, notes, and snippets.

@bradoyler

bradoyler/index.html

Created December 14, 2017 21:03
Show Gist options
  • Save bradoyler/fec214cdd932860df1b2d5d6c7e5ce3b to your computer and use it in GitHub Desktop.
Save bradoyler/fec214cdd932860df1b2d5d6c7e5ce3b to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/tikitis
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<figure class="media media--g">
<h3 class="media__title">How the Global Average Sea Level Has Risen <small class="media__subtitle">Cumulative sea level change from 1880 to 2014</small></h3>
<!-- Generated by ai2html v0.65.5 - 2017-11-08 12:09 -->
<!-- ai file: 17-ai2html-machinist-gmslr02.ai -->
<style type="text/css" media="screen,print">
#g-17-ai2html-machinist-gmslr02-box .g-artboard {
margin:0 auto;
}
#g-17-ai2html-machinist-gmslr02-box .g-artboard p {
margin:0;
}
.g-aiAbs {
position:absolute;
}
.g-aiImg {
display:block;
width:100% !important;
}
.g-aiPointText p { white-space: nowrap; }
#g-17-ai2html-machinist-gmslr02-604-wide {
position:relative;
overflow:hidden;
width:604px;
}
#g-17-ai2html-machinist-gmslr02-604-wide p {
font-family:'FoundersGroteskMono', Menlo, monospaced;
font-size:12px;
line-height:14px;
filter:alpha(opacity=100);
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity:1;
letter-spacing:0em;
text-align:left;
color:rgb(85,85,85);
text-transform:none;
padding-bottom:0;
padding-top:0;
mix-blend-mode:normal;
font-style:normal;
}
#g-17-ai2html-machinist-gmslr02-604-wide .g-pstyle0 {
font-family:'PublicoText', Georgia, 'Times New Roman', serif;
font-weight:700;
font-size:11px;
line-height:13px;
}
#g-17-ai2html-machinist-gmslr02-284-wide {
position:relative;
overflow:hidden;
width:284px;
}
#g-17-ai2html-machinist-gmslr02-284-wide p {
font-family:'PublicoText', Georgia, 'Times New Roman', serif;
font-weight:700;
font-size:11px;
line-height:13px;
filter:alpha(opacity=100);
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity:1;
letter-spacing:0em;
text-align:left;
color:rgb(85,85,85);
text-transform:none;
padding-bottom:0;
padding-top:0;
mix-blend-mode:normal;
font-style:normal;
}
#g-17-ai2html-machinist-gmslr02-284-wide .g-pstyle0 {
font-family:'FoundersGroteskMono', Menlo, monospaced;
}
#g-17-ai2html-machinist-gmslr02-284-wide .g-pstyle1 {
font-family:'FoundersGroteskMono', Menlo, monospaced;
font-size:12px;
line-height:14px;
}
</style>
<div id="g-17-ai2html-machinist-gmslr02-box" class="ai2html">
<!-- Artboard: 604-wide -->
<div id="g-17-ai2html-machinist-gmslr02-604-wide" class="g-artboard g-artboard-v3 g-show-medium g-show-large g-show-xlarge g-show-xxlarge" data-min-width="604" style="display: block;">
<img id="g-ai2-0" class="g-aiImg" src="https://static-projects.nbcnews.com/machinist/dist/2017/10/deal-island/assets/17-ai2html-machinist-gmslr02-604-wide_141d511572.png">
<div id="g-ai2-1" class="g-graphics g-aiAbs g-aiPointText" style="top:3.2759%;margin-top:-7.1px;left:3.0598%;width:16px;">
<p>12</p>
</div>
<div id="g-ai2-2" class="g-graphics g-aiAbs g-aiPointText" style="top:15.759%;margin-top:-7.1px;left:2.6105%;width:16px;">
<p>10</p>
</div>
<div id="g-ai2-3" class="g-graphics g-aiAbs g-aiPointText" style="top:22.8542%;margin-top:-7.2px;left:20.557%;width:238px;">
<p class="g-pstyle0">Trend based on tide gauges with uncertainty</p>
</div>
<div id="g-ai2-4" class="g-graphics g-aiAbs g-aiPointText" style="top:28.242%;margin-top:-7.1px;left:4.0527%;width:9px;">
<p>8</p>
</div>
<div id="g-ai2-5" class="g-graphics g-aiAbs g-aiPointText" style="top:40.725%;margin-top:-7.1px;left:4.0527%;width:9px;">
<p>6</p>
</div>
<div id="g-ai2-6" class="g-graphics g-aiAbs g-aiPointText" style="transform: matrix(0,-1,1,0,0,0);transform-origin: 50% 57.0703583511703%;-webkit-transform: matrix(0,-1,1,0,0,0);-webkit-transform-origin: 50% 57.0703583511703%;-ms-transform: matrix(0,-1,1,0,0,0);-ms-transform-origin: 50% 57.0703583511703%;top:46.9666%;margin-top:-7.1px;left:-2.2382%;width:44px;">
<p>Inches</p>
</div>
<div id="g-ai2-7" class="g-graphics g-aiAbs g-aiPointText" style="top:53.2081%;margin-top:-7.1px;left:4.0527%;width:9px;">
<p>4</p>
</div>
<div id="g-ai2-8" class="g-graphics g-aiAbs g-aiPointText" style="top:65.4197%;margin-top:-7.1px;left:4.0527%;width:9px;">
<p>2</p>
</div>
<div id="g-ai2-9" class="g-graphics g-aiAbs g-aiPointText" style="top:78.1742%;margin-top:-7.1px;left:4.0527%;width:9px;">
<p>0</p>
</div>
<div id="g-ai2-10" class="g-graphics g-aiAbs g-aiPointText" style="top:87.6721%;margin-top:-7.1px;left:93.557%;width:30px;">
<p>Year</p>
</div>
<div id="g-ai2-11" class="g-graphics g-aiAbs g-aiPointText" style="top:90.3858%;margin-top:-7.1px;left:3.1892%;width:16px;">
<p>-2</p>
</div>
<div id="g-ai2-12" class="g-graphics g-aiAbs g-aiPointText" style="top:97.1701%;margin-top:-7.1px;left:4.3903%;width:30px;">
<p>1880</p>
</div>
<div id="g-ai2-13" class="g-graphics g-aiAbs g-aiPointText" style="top:97.1701%;margin-top:-7.1px;left:17.1759%;width:30px;">
<p>1900</p>
</div>
<div id="g-ai2-14" class="g-graphics g-aiAbs g-aiPointText" style="top:97.1701%;margin-top:-7.1px;left:29.9616%;width:30px;">
<p>1920</p>
</div>
<div id="g-ai2-15" class="g-graphics g-aiAbs g-aiPointText" style="top:97.1701%;margin-top:-7.1px;left:42.7472%;width:30px;">
<p>1940</p>
</div>
<div id="g-ai2-16" class="g-graphics g-aiAbs g-aiPointText" style="top:97.1701%;margin-top:-7.1px;left:55.5312%;width:30px;">
<p>1960</p>
</div>
<div id="g-ai2-17" class="g-graphics g-aiAbs g-aiPointText" style="top:97.1701%;margin-top:-7.1px;left:68.3169%;width:30px;">
<p>1980</p>
</div>
<div id="g-ai2-18" class="g-graphics g-aiAbs g-aiPointText" style="top:97.1701%;margin-top:-7.1px;left:81.1024%;width:30px;">
<p>2000</p>
</div>
<div id="g-ai2-19" class="g-graphics g-aiAbs g-aiPointText" style="top:97.1701%;margin-top:-7.1px;left:93.8881%;width:30px;">
<p>2020</p>
</div>
</div>
<!-- Artboard: 284-wide -->
<div id="g-17-ai2html-machinist-gmslr02-284-wide" class="g-artboard g-artboard-v3 g-show-small g-show-smallplus g-show-submedium" data-min-width="284" data-max-width="603" style="display: none;">
<img id="g-ai3-0" class="g-aiImg" src="https://static-projects.nbcnews.com/machinist/dist/2017/10/deal-island/assets/17-ai2html-machinist-gmslr02-284-wide_1ce7f943ae.png">
<div id="g-ai3-1" class="g-graphics g-aiAbs g-aiPointText" style="top:2.5323%;margin-top:-6.9px;left:0.7042%;width:29px;">
<p class="g-pstyle0">12in</p>
</div>
<div id="g-ai3-2" class="g-graphics g-aiAbs g-aiPointText" style="top:9.4503%;margin-top:-7.2px;left:14.4944%;width:238px;">
<p>Trend based on tide gauges with uncertainty</p>
</div>
<div id="g-ai3-3" class="g-graphics g-aiAbs g-aiPointText" style="top:15.3345%;margin-top:-6.9px;left:0.2861%;width:16px;">
<p class="g-pstyle0">10</p>
</div>
<div id="g-ai3-4" class="g-graphics g-aiAbs g-aiPointText" style="top:28.1368%;margin-top:-6.9px;left:1.7368%;width:9px;">
<p class="g-pstyle0">8</p>
</div>
<div id="g-ai3-5" class="g-graphics g-aiAbs g-aiPointText" style="top:40.9391%;margin-top:-6.9px;left:1.7368%;width:9px;">
<p class="g-pstyle0">6</p>
</div>
<div id="g-ai3-6" class="g-graphics g-aiAbs g-aiPointText" style="top:53.4569%;margin-top:-6.9px;left:1.7368%;width:9px;">
<p class="g-pstyle0">4</p>
</div>
<div id="g-ai3-7" class="g-graphics g-aiAbs g-aiPointText" style="top:65.9746%;margin-top:-6.9px;left:1.7368%;width:9px;">
<p class="g-pstyle0">2</p>
</div>
<div id="g-ai3-8" class="g-graphics g-aiAbs g-aiPointText" style="top:79.0614%;margin-top:-6.9px;left:1.7368%;width:9px;">
<p class="g-pstyle0">0</p>
</div>
<div id="g-ai3-9" class="g-graphics g-aiAbs g-aiPointText" style="top:88.7829%;margin-top:-7.1px;left:89.1141%;width:30px;">
<p class="g-pstyle1">Year</p>
</div>
<div id="g-ai3-10" class="g-graphics g-aiAbs g-aiPointText" style="top:91.2947%;margin-top:-6.9px;left:-0.1884%;width:16px;">
<p class="g-pstyle0">-2</p>
</div>
<div id="g-ai3-11" class="g-graphics g-aiAbs g-aiPointText" style="top:98.4071%;margin-top:-6.9px;left:6.3019%;width:29px;">
<p class="g-pstyle0">1880</p>
</div>
<div id="g-ai3-12" class="g-graphics g-aiAbs g-aiPointText" style="top:98.4071%;margin-top:-6.9px;left:89.3087%;width:29px;">
<p class="g-pstyle0">2020</p>
</div>
</div>
</div>
<figcaption>
<span class="caption__source">Source: Commonwealth Scientific and Industrial Research Organisation (CSIRO)</span>
</figcaption>
</figure>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment