design2.html

<script type="text/javascript" src="js/design2.js"></script>
<div id="design2">
    <h1 class="text-center">Happiness index</h1>
    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            Choose a theme
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
            <li><a href="#">Happiness index</a></li>
            <li><a href="#">Happiness index: gender comparison</a></li>
            <li><a href="#">Satisfaction with education</a></li>
            <li><a href="#">Satisfaction with present job</a></li>
            <li><a href="#">Satisfaction with present standard of living</a></li>
            <li><a href="#">Satisfaction with accommodation</a></li>
            <li><a href="#">Satisfaction with family life</a></li>
            <li><a href="#">Satisfaction with health</a></li>
            <li><a href="#">Satisfaction with social life</a></li>
            <li><a href="#">Satisfaction with economic situation of the country</a></li>
        </ul>
    </div>

    <div id="svg-container"><svg></svg></div>
    <div id="info-container">
        <div id="country"></div>
        <div id="mean"></div>
    </div>
    <div id="legend">
    </div>

    <div id="gradient-container">
    <div id="grad1">7.2</div><div id="grad2">8</div>
    <div id="gradient"></div>
    </div>
</div>