Skip to content

Instantly share code, notes, and snippets.

@yannski

yannski/index.html

Created January 26, 2016 10:52
Show Gist options
  • Save yannski/742cdb9fff59ff2ce440 to your computer and use it in GitHub Desktop.
Save yannski/742cdb9fff59ff2ce440 to your computer and use it in GitHub Desktop.
Download ZIP
sample bar graph with striped background
Raw
index.html
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,500,400italic,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
</head>
<body>
<div style="display:block;width:500px;height:50px;border:#8bc34a solid 2px;background:linear-gradient(to right, #8bc34a 0%,#8bc34a 71%,white 71.1%,white 100%);position:fixed;top:100px;left:200px;">
<div style="display:block;width:2px;height:10px;background-color:8bc34a;position:absolute;top:-12px;left:70.5%;">
<div style="display:block;position:absolute;top:-16px;left:-18px;font-size:10px;font-family: 'Roboto';font-weight:300;">
2mn30s
</div>
</div>
<div style="display:block;width:2px;height:10px;background-color:8bc34a;position:absolute;top:-12px;left:100%;">
<div style="display:block;position:absolute;top:-16px;left:-18px;font-size:10px;font-family: 'Roboto';font-weight:300;">
3mn40s
</div>
</div>
</div>
<div style="display:block;width:500px;height:50px;border:#8bc34a solid 2px;background:linear-gradient(to right, #8bc34a 0%,#8bc34a 71%,white 71.1%,white 100%);position:fixed;top:250px;left:200px;">
<div style="display:block;position:absolute;top:0;bottom:0;left:0;right:29.6%;background:repeating-linear-gradient(135deg,#8bc34a,#8bc34a 10px,white 10px,white 20px);">
</div>
<div style="display:block;width:2px;height:10px;background-color:8bc34a;position:absolute;top:-12px;left:70.5%;">
<div style="display:block;position:absolute;top:-16px;left:-18px;font-size:10px;font-family: 'Roboto';font-weight:300;">
2mn30s
</div>
</div>
<div style="display:block;width:2px;height:10px;background-color:8bc34a;position:absolute;top:-12px;left:100%;">
<div style="display:block;position:absolute;top:-16px;left:-18px;font-size:10px;font-family: 'Roboto';font-weight:300;">
3mn40s
</div>
</div>
</div>
<div style="display:block;width:500px;height:50px;border:#8bc34a solid 2px;background:repeating-linear-gradient(135deg,#8bc34a,#8bc34a 10px,white 10px,white 20px);position:fixed;top:400px;left:200px;">
<div style="display:block;width:4px;height:64px;background-color:red;position:absolute;top:-12px;left:70.5%;">
<div style="display:block;position:absolute;top:-16px;left:-18px;font-size:10px;font-family: 'Roboto';font-weight:300;">
2mn30s
</div>
</div>
<div style="display:block;width:2px;height:10px;background-color:8bc34a;position:absolute;top:-12px;left:100%;">
<div style="display:block;position:absolute;top:-16px;left:-18px;font-size:10px;font-family: 'Roboto';font-weight:300;">
3mn40s
</div>
</div>
</div>
<div style="display:block;width:500px;height:50px;border:#8bc34a solid 2px;background:linear-gradient(to right, #8bc34a 0%,#8bc34a 71%,white 71.1%,white 100%);position:fixed;top:550px;left:200px;">
<div style="display:block;position:absolute;top:0;bottom:0;left:0;right:29.6%;background:repeating-linear-gradient(135deg,#8bc34a,#8bc34a 10px,white 10px,white 20px);">
</div>
<div style="display:block;position:absolute;top:0;bottom:0;left:71%;right:0;background:repeating-linear-gradient(135deg,#ccc,#ccc 10px,white 10px,white 20px);">
</div>
<div style="display:block;width:4px;height:64px;background-color:red;position:absolute;top:-12px;left:70.5%;">
<div style="display:block;position:absolute;top:-16px;left:-18px;font-size:10px;font-family: 'Roboto';font-weight:300;">
2mn30s
</div>
</div>
<div style="display:block;width:2px;height:10px;background-color:8bc34a;position:absolute;top:-12px;left:100%;">
<div style="display:block;position:absolute;top:-16px;left:-18px;font-size:10px;font-family: 'Roboto';font-weight:300;">
3mn40s
</div>
</div>
</div>
<div style="display:block;width:500px;height:50px;border:#8bc34a solid 2px;position:fixed;top:700px;left:200px;">
<div style="display:block;position:absolute;top:0;bottom:0;left:0;right:0;background:repeating-linear-gradient(135deg,#ccc,#ccc 10px,white 10px,white 20px);opacity:0.3;">
</div>
<div style="display:block;position:absolute;top:0;bottom:0;left:0;right:29.4%;background:repeating-linear-gradient(135deg,#8bc34a,#8bc34a 10px,white 10px,white 20px);">
</div>
<div style="display:block;width:4px;height:64px;background-color:red;position:absolute;top:-12px;left:70.5%;">
<div style="display:block;position:absolute;top:-16px;left:-18px;font-size:10px;font-family: 'Roboto';font-weight:300;">
2mn30s
</div>
</div>
<div style="display:block;width:2px;height:10px;background-color:8bc34a;position:absolute;top:-12px;left:100%;">
<div style="display:block;position:absolute;top:-16px;left:-18px;font-size:10px;font-family: 'Roboto';font-weight:300;">
3mn40s
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment