html legend
The HTML <legend> element represents a title caption for the content of
its parent <fieldset>.html legend
The HTML <legend> element represents a title caption for the content of
its parent <fieldset>.legend in html
#legend in html
<ul class="legend">
<li><span class="greendot"></span>Text</li><br></br>
<li><span class="yellowdot"></span>Text</li><br></br>
<li><span class="reddot"></span>Text</li><br></br>
<li><span class="blackdot"></span>Text</li><br></br>
</ul>
<style>
.legend { list-style: none; margin-left:10px;}
.legend li { float: left; margin-right: 15px;}
.legend span { border: 1px solid #ccc; float: left; width: 10px; height: 12px; margin: 2px;}
.legend {
position: fixed;
top: 62%;
left: 10%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
/* your colors */
.legend .greendot { background-color: #00ff00;}
.legend .yellowdot { background-color: #ffff33; }
.legend .reddot { background-color: #ff3333; }
.legend .blackdot{ background-color: #000000; }
</style>making a legend in html
<ul class="legend">
<li><span class="greendot"></span>High amounts of available beds</li><br></br>
<li><span class="yellowdot"></span>Medium amounts of available beds</li><br></br>
<li><span class="reddot"></span>Low amounts of available</li><br></br>
<li><span class="blackdot"></span>Data of available beds N/A</li><br></br>
</ul>
https://hospitable.live to see how it worksCopyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
