intermediate_html/part_one.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Mock Two</title>
</head>
<body>
  <header>
    Inside of header - let's add a navbar with some essential links
    <nav>
      <a href="#">Home</a>
      <a href="#"> About</a>
      <a href="#"> Contact</a>
    </nav>
  </header>
  <hr>
  <section>
    <h2>Here is the main section of our page - it consists of a new articles</h2>
  <article>
  <h2>Article 1 - 1995 was a pretty crazy year for programming languages!</h2>
  <p>Don't believe me? Just check this table out:</p>
  <table>
    <thead>
        <tr>
            <th>Language</th>
            <th>Designed By</th>
            <th>First Appeared</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>C++</td>
            <td>Bjarne Stroustrup</td>
            <td>1983</td>
        </tr>
        <tr>
            <td>Python</td>
            <td>Guido van Rossum</td>
            <td>1991</td>
        </tr>
        <tr>
            <td>Ruby</td>
            <td>Yukihiro Matsumoto ("Matz")</td>
            <td>1995</td>
        </tr>
        <tr>
            <td>JavaScript</td>
            <td>Brendan Eich</td>
            <td>1995</td>
        </tr>
        <tr>
            <td>Java</td>
            <td>James Gosling</td>
            <td>1995</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>PHP</td>
            <td>Rasmus Lerdorf</td>
            <td>1995</td>
        </tr>
    </tfoot>
</table>
</article>
  <article>
    <h2>Article 2 - Coming soon...</h2>
  </article>

  <h2>Contact us!</h2>
    <form action="#">
    <h2>General Information</h2>
      <div>
        <label for="fname">First Name</label>
        <input type="text" id="fname">
      </div>
      <div>
        <label for="lname">Last Name</label>
        <input type="text" id="lname">
      </div>
      <div>
        <label for="email">Email</label>
        <input type="email" id="email">
      </div>
      <div>
        <label for="dob">Date Of Birth</label>
        <input type="date" id="dob">
      </div>
      <h2>Essential Questions</h2>
        <span>What kind of work do you need?</span>
        <div>
          <label for="programming">Programming: </label>
          <input type="checkbox" id="programming" name="programming">
        </div>
        <div>
          <label for="design">Design: </label>
          <input type="checkbox" id="design">
        </div>
        <div>
          <label for="singing">Singing: </label>
          <input type="checkbox" id="singing">
        </div>
        <div>
          <label for="comedy">Comedy: </label>
          <input type="checkbox" id="comedy">
        </div>
        <br>
        <span>How interested are you in our design skills?</span>
        <div>
          <label for="very_low">Very Low</label>
          <input type="radio" id="very_low" name="interest" value="very low">
        </div>
        <div>
        <label for="low">Low</label>
          <input type="radio" id="low" name="interest" value="low">
        </div>
        <div>
          <label for="medium">Medium</label>
          <input type="radio" id="medium" name="interest" value="medium">
        </div>
        <div>
          <label for="high">High</label>
          <input type="radio" id="high" name="interest" value="high">
        </div>
        <div>
          <label for="very_high">Very High</label>
          <input type="radio" id="very_high" name="interest" value="very high">
        </div>
        <div>
          <input type="submit" value="Submit me!">
        </div>
    </form>
  </section>
  <footer>
    Here is our footer - let's make sure we copyright &copy; this!
  </footer>
</body>
</html>