Created
January 26, 2016 10:52
-
-
Save yannski/742cdb9fff59ff2ce440 to your computer and use it in GitHub Desktop.
sample bar graph with striped background
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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