Untitled

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Tip calculator</title>

</head>

<body>
  <div class="container">
    <div class="tip_box">

      <div class="title text-center">
        <h1>Tip Calculator</h1>
      </div>

      <div class="bill">
        <h2>How much was your bill?</h2>
        <div class="form-group row">
          <div class="col-sm-10 m-2">
            <input type="text" class="form-control" id="inputPassword" placeholder="Bill account">
          </div>
        </div>
      </div>
<!--       tip option -->
      <div class="tip">
        <h2>What's your tip option?</h2>
        <select class="custom-select" id="tip">
          <option selected value=''>Open this select menu</option>
          <option value="0.3">30%</option>
          <option value="0.2">20%</option>
          <option value="0.15">15%</option>
          <option value="0.05">5%</option>
          <option value="0">0%</option>
        </select>
      </div>
<!--       people count -->
      <div class="tip">
        <h2>How many people gonna split it?</h2>
        <select class="custom-select" id="people">
          <option selected value=''>Open this select menu</option>
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
        </select>
      </div>


<!--       total amount -->
      <div class="amount mt-5 text-center">
        <button type="button" class="btn btn-danger" id ='calculate' >Calculate!</button>
      </div>
<!--       results -->
      <div class="result text-center mt-5"></div>
    </div>
  </div>


  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
    integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
    integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
    crossorigin="anonymous"></script>
</body>

</html>