Untitled

<!DOCTYPE html>
<head>
  <title>Coders Unleashed: Apply</title>
  <link href="css/main.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Manuale|Montserrat" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
  <script src="js/main.js"></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" />
</head>
<body>
  <nav>
    <a href="index.html" class="strong">Coders Unleashed</a><a href="apply.html">Apply Online Now</a><a href="login.html">Login</a>
  </nav>
  <main>
    <h1 class="sf">Application Form</h1>
    <div class="div_m">
      <h3>Personal Information</h3>
      <div><label>First Name: </label>  <input type="text" name="firstname" id="firstname" /></div>
      <div><label>Last Name: </label>   <input type="text" name="lastname" id="lastname" /></div>
      <div><label>Email: </label>       <input type="email" name="email" id="email" /></div>
      <div><label>Phone: </label>       <input type="tel" name="phone" id="phone" /></div>
      <div><label>Program: </label> <select name="program" id="program"><option>Choose a Program</option></select></div>
      <div class="btm20"><a href="#" class="a_next">Next Step</a></div>
    </div>
    <div class="div_m">
      <h3>Address</h3>
      <div><label>Street: </label>    <input type="text" name="street" id="street" /></div>
      <div><label>House: </label>     <input type="text" name="house" id="house" /></div>
      <div><label>City: </label>      <input type="text" name="city" id="city" /></div>
      <div><label>State: </label>     <select name="state" id="state" class="s_states"><option>Choose a State</select></div>
      <div><label>Zip Code: </label>      <input type="number" name="zip" id="zip" /></div>
      <div class="btm20"><a href="#" class="a_previous">Previous Step</a> <a href="#" class="a_next">Next Step</a></div>
    </div>
    <div class="div_m">
      <h3>Fees</h3>
      <div><label>Application: </label>             <input type="checkbox" name="fee_app" id="fee_app" value="100" /></div>
      <div><label>Housing: </label>                 <input type="checkbox" name="fee_house" id="fee_house" value="2500" /></div>
      <div><label>Transcript Evaluation: </label>   <input type="checkbox" name="fee_trans" id="fee_trans" value="250" /></div>
      <div><label>Tuition Fees Insurance: </label>  <input type="checkbox" name="fee_ins" id="fee_ins" value="50" /></div>
      <div class="btm20"><a href="#" class="a_previous">Previous Step</a> <a href="#" class="a_next">Next Step</a></div>
    </div>
    <div class="div_m">
      <h3>Billing Address</h3>
      <div><label><input type="checkbox" name="sameasaddress" id="sameasaddress" /> Same as Address Above</label></div>
      <div><label>Street: </label>    <input type="text" name="b_street" id="b_street" /></div>
      <div><label>House: </label>     <input type="text" name="b_house" id="b_house" /></div>
      <div><label>City: </label>      <input type="text" name="b_city" id="b_city" /></div>
      <div><label>State: </label>     <select name="b_state" id="b_state" class="s_states"><option>Choose a State</select></div>
      <div><label>Zip Code: </label>      <input type="number" name="b_zip" id="b_zip" /></div>
      <div class="btm20"><a href="#" class="a_previous">Previous Step</a> <a href="#" class="a_next">Next Step</a></div>
    </div>
    <div class="div_m">
      <h3>Payment Information</h3>
      <div>
        <a class="paylink" onclick="$('#div_paypal').slideToggle(); $('#div_creditpay').hide();">Pay with PayPal</a>
        <a class="paylink" onclick="$('#div_creditpay').slideToggle(); $('#div_paypal').hide();">Pay with Credit or Debit Card</a>
      </div>
      <div id="div_paypal" class="paydiv">
        <a href="https://www.paypal.me/yamentou"><i class="fab fa-cc-paypal"></i></a>
      </div>
      <div id="div_creditpay" class="paydiv">
        <div><label>Card Number: </label>     <input type="number" name="cc_number" id="cc_number" /></div>
        <div>
          <label>Expiration Date: </label>
          <select name="cc_expm" id="cc_expm"><option>Choose Month</option></select>
          <select name="cc_expy" id="cc_expy"><option>Choose Year</option></select>
        </div>
        <div><label>CCV Code: </label>      <input type="number" name="cc_ccv" id="cc_ccv" /></div>
      </div>
      <div class="btm20"><a href="#" class="a_previous">Previous Step</a> <a href="#" class="a_next">Next Step</a></div>
    </div>
    <div class="div_m">
      <h3>Confirm and Submit</h3>
      <div><label>Your IP Address: </label>    <input type="text" name="ipaddress" id="ipaddress" /></div>
      <div><label>Date and Time: </label>      <span id="dant"></span></div>
      <div>
        <label>Confirm everything is accurate? </label>
        <input type="radio" name="confirmed" value="0" /> No
        <input type="radio" name="confirmed" value="1" /> Yes
      </div>
      <div class="btm20"><a href="#" class="a_previous">Previous Step</a> <a href="#" class="a_next">Submit My Application</a></div>
    </div>
  </main>
  <footer>
    <small>Coders Unleashed &copy; 2019 All Rights Reserved. A Project of the Web Dev Students @ Platt College.</small>
  </footer>
</body>
</html>