Some html code and output not showing on browser?

June 9, 2022

I am creating a profile page for users. I have created a form and some fields in it. But whatever part code has been written under the section is not showing on the browser. I tried to inspect the elements, but the code written under the section is not showing on the browser.

.profile-page {
  width: 50%;
  margin: auto;
  background-color: #f4f5fa;
  box-shadow: 2px 2px 5px 2px gray;
}

.profile-heading {
  width: 100%;
  background-color: #0b2b88;
  color: white;
  padding: 10px;
}

.profile-details {
  width: 100%;
  padding: 10px;
}

.input-field {
  display: flex;
  width: 100%;
  margin: auto;
}

.form-heading {
  width: 30%;
}

.form-input {
  width: 30%;
}

.form-input input {
  border: none;
}

.form-button {
  width: 50%;
  text-align: center;
}

.form-button button {
  background-color: #0b2b88;
  color: white;
  padding: 20px;
}

.edit-button {
  width: 30%;
}

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/96c1212185.js" crossorigin="anonymous"></script>

<div class="profile-page">
  <div class="profile-heading">
    <h3>Profile Details</h3>
  </div>
  <div class="profile-details">
    <form class="profile-form">
      <div class="input-field">

        <div class="form-heading">
          <label for="fname">First Name</label>
        </div>

        <div class="form-input">
          <input type="text" id="fname" name="fname" value="ABC" class="form-input-field" readonly />
        </div>

      </div>

      <div class="input-field">
        <div class="form-heading">
          <label for="email">Email</label>
        </div>
        <div class="form-input">
          <input type="email" id="email" name="email" value="admin@gmail.com" class="form-input-field" readonly/>
        </div>
      </div>

      <div class="input-field">
        <div class="form-heading">
          <label for="country">Country</label>
        </div>
        <div class="form-input">
          <select id="country" name="country" class="">
            <option value="---">---</option>
        </div>
      </div>

      <div class="knxnvknfd">
        <div class="jnsdjjdi">
          <button type="submit" id="edit-button" name="" value="" class="form-input-field">Edit</button>
        </div>
      </div>
    </form>
  </div>
</div>

>Solution :

select is not closed

<div class="form-input">
          <select id="country" name="country" class="">
            <option value="---">---</option>
          </select>
        </div>