Skip to content

Instantly share code, notes, and snippets.

@datapolitan

datapolitan/legend_snippet.html

Created September 8, 2015 13:37
Show Gist options
  • Save datapolitan/47bc614cd271ade28fa7 to your computer and use it in GitHub Desktop.
Save datapolitan/47bc614cd271ade28fa7 to your computer and use it in GitHub Desktop.
Download ZIP
Snippet of HTML and CSS for the legend box
Raw
legend_snippet.html
<html>
<head>
<style>
#legend {
position:absolute;
bottom:20px;
right: 5px;
background: #D3D3D3;
border-radius: 10px;
display: block;
padding: 10px;
color: #6E6E6E;
font-family:sans-serif;
text-align:center;
width:160px;
border:1px solid black;
}
ul{
padding:0;
margin-left:10px;
margin-right:0px;
}
li {
font-family:sans-serif;
font-size: 0.8em;
list-style-type: none;
margin-top:10px;
margin-bottom:10px;
vertical-align:middle;
padding-right:50px;
padding-left:30px;
}
.header {
margin: 1px 1px 1px 1px;
text-align: center;
font-weight:bold;
}
.circle {
position:relative;
border-radius: 50%;
width: 15px;
height: 15px;
float:left;
}
<style>
</head>
<body>
<div id='legend'>
<div class="header">% Structural <br>Components in SGR</div>
<ul>
<li id="3">
<div class="circle" style="background:#d73027" id="3"></div>
61-79%
</li>
<li id="2">
<div class="circle" style="background:#FF6600" id="2"></div>
41-60%
</li>
<li id="1">
<div class="circle" style="background:#ffff00" id="1"></div>
21-40%
</li>
<li id="0">
<div class="circle" style="background:#1a9850" id="0"></div>
0-20%
</li>
</ul>
</div>
</body>
</html>
@SaffatHasan
Copy link

There's a typo on line 45 <style> should be </style>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment