index.html

<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>


<h1 align=center>Gender Diversity at <a href="https://github.com">GitHub</a><tab></tab><i class="fa fa-github"></i></h1>
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <h3>GitHub attempts to diversify the workplace by reaching out to exceptional individuals from unresourced communities and diverse backgrounds in order to both give them new opportunities and have them impact Github in a variety of ways, in both the non-technical and technical spheres. Unlike other fintech companies, GitHub proves to have hired a higher percentage of females, which is shown in this chart.</h3>
            <p></p>
            <p></p>
            <img src="githubCompany.png" alt="GitHub Company Members" style="width:600px;height:228px;">
:
        </div>
        <div class="col-md-6">
            <canvas id="myChart" width="200" height="200"></canvas>
        </div>
    </div>
</div>

<script src="node_modules/chart.js/dist/chart.min.js"></script>
<script>


var ctx = document.getElementById("myChart");

var options = {
        responsive: true,
        maintainAspectRatio: true,
        legend: {
            display: true,
            boxWidth: 80,
            fontSize: 200
        }
    };

var data = {
    labels: [
        "Male",
        "Female"
    ],
    datasets: [
        {
            data: [90, 14],
            backgroundColor: [
                "#FF6384",
                "#FFCE56"
            ],
            hoverBackgroundColor: [
                "#FF6384",
                "#FFCE56"
            ]
        }]
};
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: data,
    options: options
});

</script>
</body>
</html>