Untitled

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <title>Jobson</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <link rel='stylesheet' href="new.css">
</head>

 <body>

 <div class="jumbotron text-center jumbotron-with-background" style="margin-bottom:0">
  <h1 style='color:black;text-shadow: gray 0.1em 0.1em 0.2em'>Jobson</h1>
  <p style='color:black;text-shadow: gray 0.1em 0.1em 0.2em'>Aqui você tem o seu elo</p>
 </div>

 <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-center" id="collapsibleNavbar">
      <ul class="navbar-nav ">
          <li class="nav-item nav-items-size">
              <a class="nav-link" href="#">Inicios</a>
            </li>
        <li class="nav-item nav-items-size">
          <a class="nav-link " href="#">Elojob</a>
        </li>
        <li class="nav-item nav-items-size">
          <a class="nav-link " href="#">DuoBoost</a>
        </li>
        <li class="nav-item nav-items-size">
          <a class="nav-link" href="#">Coach</a>
        </li>
        <li class="nav-item nav-items-size">
            <a class="nav-link" href="#">MD3</a>
          </li>
        <li class="nav-item nav-items-size">
          <a class="nav-link" href="#">MD10</a>
        </li>
        <li class="nav-item nav-items-size">
          <a class="nav-link" href="#">Contatos</a>
        </li>
      </ul>
    </div>
  </nav>

 <div class="container" style='margin-top:30px'>
    <div class='row justify-content-md-center'>
        <div class="col-md-auto ">
          <form style='margin:0 auto'>
            <h2 class='textCenter'>Cálcule o valor do Elojob.</h3>
            <select class="selectAlign selectCss selectvalue"  >
                <option >Elo desejado</option>
                <option class='Ferro4 position0'>Ferro 4</option>
                <option class='Ferro3 position1'>Ferro 3</option>
                <option class='Ferro2 position2'>Ferro 2</option>
                <option class='Ferro1 position3'>Ferro 1</option>
                <option class='Bronze4 position4'>Bronze 4</option>
                <option class='Bronze3 position5'>Bronze 3</option>
                <option class='Bronze2 position6'>Bronze 2</option>
                <option class='Bronze1 position7'>Bronze 1</option>
                <option class='Prata4 position8'>Prata 4</option>
                <option class='Prata3 position9'>Prata 3</option>
                <option class='Prata2 position10'>Prata 2</option>
                <option class='Prata1 position11'>Prata 1</option>
                <option class='Gold4 position12'>Gold 4</option>
                <option class='Gold3 position13'>Gold 3</option>
                <option class='Gold2 position14'>Gold 2</option>
                <option class='Gold1 '>Gold 1</option>
                <option class='Platina4'>Platina 4</option>
                <option class='Platina3'>Platina 3</option>
                <option class='Platina2'>Platina 2</option>
                <option class='Platina1'>Platina 1</option>
                <option class='Diamante4'>Diamante 4</option>
                <option class='Diamante3'>Diamante 3</option>
                <option class='Diamante2'>Diamante 2</option>
                <option class='Diamante1'>Diamante 1</OPTION>
            </select>
            <h4 class="textCenter">Até</h4>
            <select class='align-self-center selectAlign selectCss selectvalue2'>
              <option >Elo atual</option>
              <option class='Ferro4'>Ferro 4</option>
              <option class='Ferro3'>Ferro 3</option>
              <option class='Ferro2'>Ferro 2</option>
              <option class='Ferro1'>Ferro 1</option>
              <option class='Bronze4'>Bronze 4</option>
              <option class='Bronze3'>Bronze 3</option>
              <option class='Bronze2'>Bronze 2</option>
              <option class='Bronze1'>Bronze 1</option>
              <option class='Prata4'>Prata 4</option>
              <option class='Prata3'>Prata 3</option>
              <option class='Prata2'>Prata 2</option>
              <option class='Prata1'>Prata 1</option>
              <option class='Gold4'>Gold 4</option>
              <option class='Gold3'>Gold 3</option>
              <option class='Gold2'>Gold 2</option>
              <option class='Gold1'>Gold 1</option>
              <option class='Platina4'>Platina 4</option>
              <option class='Platina3'>Platina 3</option>
              <option class='Platina2'>Platina 2</option>
              <option class='Platina1'>Platina 1</option>
              <option class='Diamante4'>Diamante 4</option>
              <option class='Diamante3'>Diamante 3</option>
              <option class='Diamante2'>Diamante 2</option>
              <option class='Diamante1'>Diamante 1</OPTION>
            </select><br>
            <button  href='#' onclick='onclick' class='botao  selectAlign'>Realizar</button>
            <br><br>
            <p class='resultado textCenterP'>R$00,00</p>
          </form>
        </div>
    </div>

  </div>


   <div class="jumbotron text-center footer-with-background justify-content-center" style="margin-bottom:0"></div>
  <script src='ScriptElojob.js'></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
  </body>
</html>