index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Show-Room</title>
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>
    <h1>This page is like a Show-Room</h1>
    <section class="html-forms">
      <h2>Styling Html 5 Forms - Ninja Net</h2>
      <header>
        <img src="img/forms/logo.png" alt="">
      </header>
      <form>
        <!--Gender -->
        <p>You are a...</p>
        <p>I just added it to make a commit</p>
        <input type="radio" id="male" name="gender">
        <label for="male">Male</label><br />
        <input type="radio" id="female" name="gender">
        <label for="female">Male</label>

        <!-- Interests -->
         <p>Who is interested in...</p>
         <input type="checkbox" id="web" />
         <label for="web">Web development</label><br/>
         <input type="checkbox" id="photoshop" />
         <label for="photoshop">Photoshop</label><br/>
         <input type="checkbox" id="madona" />
         <label for="madona">Singing Madona Songs</label>

         <!-- Contact details -->
         <fieldset>
           <legend>Contact Info</legend>
           <input type="email" placeholder="Email" required />
           <span class="tick"></span>
           <input type="telephone" placeholder="Phone number" required />
           <span class="tick"></span>
         </fieldset>

         <!-- Preferred -->
         <p>How would you like to be contacted?</p>
         <select>
           <option>By email</option>
           <option>By telephone</option>
           <option value="">By Skype</option>
         </select>
         <input type="submit" value="Become a Ninja" />
      </form>


    </section>
  </body>
</html>