index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Homepage</title>
  <meta charset="utf-8">
  <!-- Viewport Meta Tag -->
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <!-- CONTENT-->
  <div class="container container-bg">
      <div class="jumbotron jumbo-header">
          <h1 class="display-4 jumbo-display">Under Construction</h1>
          <p class="lead display-paragraph">Welcome to my homepage. Here I will be documenting various data visualization projects.</p>
          <hr class="my-4">
          <p>This site is under construction.</p>
          <p class="lead">
            <!-- <a class="btn btn-primary btn-lg learn-more-btn" href="#" role="button">Learn more</a> -->
          </p>
        </div>
    <div class = "col-md-12 left-column">

    </div>
  </div>


  <!-- JavaScript: placed at the end of the document so the pages load faster -->
  <!-- jQuery library -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>

  <!-- Popper -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>

  <!-- Latest compiled and minified Bootstrap JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>
</body>


</html>