Cacher is the code snippet organizer for pro developers

<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.16/css/mdb.min.css" rel="stylesheet">





<!-- Material form contact -->
<div class="card">

    <h5 class="card-header secondary-color-dark white-text text-center py-4 random">
        <strong id="title">Survey Form</strong>

  </h5>

        



<div class="container">
  <p id="description">Please help us better our services by completing this survey.</p>
    <!--Card content-->
    <div class="card-body px-lg-5 pt-0">

        <!-- Form -->
        <form id="survey-form" class="text-center" style="color: #757575;">

            <!-- Name -->
            <div class="md-form mt-3">
                <input type="text" id="name" class="form-control">
                <label for="name" id="name-label">Name</label>
            </div>

            <!-- E-mail -->
            <div class="md-form">
                <input type="email" id="email" class="form-control">
                <label for="email" id="email-label">E-mail</label>
            </div>
    <!--           Age -->
             <div class="md-form">
                <input type="number" id="number" class="form-control" maxlength="100" minlength="18">
                <label for="number" id="age-label">Age</label>
            </div>
<!--           Which option best describes your current role? -->


<select class="browser-default custom-select" id="dropdown">

  <option selected>Which option best describes your current role?</option>
  <option value="1">Student</option>
  <option value="2">Full Time Learner</option>
  <option value="3">Full Time Job</option>
  <option value="3">Prefer Not To Say</option>
  <option value="3">Other</option>
</select>
          
<!--    * How likely is that you would recommend freeCodeCamp to a friend?        -->
          <!-- Group of default radios - option 1 -->
          <div class="md-form">
            <label> How likely is that you would recommend freeCodeCamp to a friend?</label>
            <br />
<div class="custom-control custom-radio">
  <input type="radio" class="custom-control-input" id="defaultGroupExample1" name="groupOfDefaultRadios">
  <label class="custom-control-label" for="defaultGroupExample1">Definitely</label>
</div>

<!-- Group of default radios - option 2 -->
<div class="custom-control custom-radio">
  <input type="radio" class="custom-control-input" id="defaultGroupExample2" name="groupOfDefaultRadios" checked>
  <label class="custom-control-label" for="defaultGroupExample2">May be</label>
</div>

<!-- Group of default radios - option 3 -->
<div class="custom-control custom-radio">
  <input type="radio" class="custom-control-input" id="defaultGroupExample3" name="groupOfDefaultRadios">
  <label class="custom-control-label" for="defaultGroupExample3">Not sure</label>
</div>
            </div>
<!-- Things that should be improved in the future
(Check all that apply): -->
<div class="md-form">
 <label> Things that should be improved in the future
   (Check all that apply):</label>
  <br />
          <div class="form-check">
  <input class="form-check-input" type="checkbox" value="Front-end Projects" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Front-end Projects
  </label>
</div>
  <br />
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="Back-end Projects" id="defaultCheck2">
  <label class="form-check-label" for="defaultCheck2">
    Back-end Projects
  </label>
</div>
  <br />
  <div class="form-check">
  <input class="form-check-input" type="checkbox" value="Data Visualization" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Data Visualization
</div>
  <br />
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="Challenges" id="defaultCheck2">
  <label class="form-check-label" for="defaultCheck2">
    Challenges
  </label>
</div>
     </br />
  <div class="form-check">
  <input class="form-check-input" type="checkbox" value="Open Source Community" id="defaultCheck2">
  <label class="form-check-label" for="defaultCheck2">
   Open Source Community
  </label>
</div>
  <br />
  <div class="form-check">
  <input class="form-check-input" type="checkbox" value="Gitter help rooms" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Gitter help rooms
  </label>
</div>
  <br />
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="Videos" id="defaultCheck2">
  <label class="form-check-label" for="defaultCheck2">
   Videos
  </label>
</div>
            <br />
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="City Meetups" id="defaultCheck2">
  <label class="form-check-label" for="defaultCheck2">
   City Meetups
  </label>
</div>
            <br />
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="Wiki" id="defaultCheck2">
  <label class="form-check-label" for="defaultCheck2">
   Wiki
  </label>
</div>
            <br />
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="Forum" id="defaultCheck2">
  <label class="form-check-label" for="defaultCheck2">
   Forum
  </label>
</div>
            <br />
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="Additional Courses" id="defaultCheck2">
  <label class="form-check-label" for="defaultCheck2">
   Additional Courses
  </label>
</div>
          </div>
  

          </div>
            <!--Message-->
            <div class="md-form">
                <textarea type="text" id="materialContactFormMessage" class="form-control md-textarea" rows="3" placeholder="Any Comments or Suggestions?"></textarea>
                <label for="materialContactFormMessage">Message</label>
            </div>

            <!-- Send button -->
            <button id="submit" class="btn btn-outline-secondary btn-rounded btn-block z-depth-0 my-4 waves-effect" type="submit">Send</button>

        </form>
        <!-- Form -->

    </div>

</div>
<!-- Material form contact -->

<!-- </div> Ends Container -->





















<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.16/js/mdb.min.js"></script>

$('#defaultChecked2').prop('indeterminate', true);

p {
  text-align:center;
}