</head>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js">
</script>

<div class="container">
    <header>
            <h1 id="title">Most Favored Air Jordan</h1>
        <div>
            <p id="description">Which Jordan model is your favorite?</p>
        </div>
    </header>

  <form id="survey-form">
      <div class="form-group" >
      <label id="name-label" for="name">Name</label>
      <input 
        type="text" 
        id="name"
        class="form-control"
        placeholder="John Doe"
        required/>
        </div>

        <div class="form-group">
            <label id="email-label" for="email">Email</label>
            <input 
                type="email" 
                id="email" 
                class="form-control"
                placeholder="johndoe@gmail.com" 
                required>
        </div>

        <div class="form-group">
            <label id="number-label" for="number">Silhouette<span class="clue">(optional)</span>
            </label>
            <input
                type="number"
                name="Silhouette"
                id="number"
                min="1"
                max="26"
                class="form-control"
                placeholder="1"
            />
        </div>

        <div class="form-group">
            <label> Favorite Shoe Color</label>
            <input
            type="text"
            id="shoe-color"
            class="form-control"
            placeholder="Bred Toe"
            />
        </div>

        <div class="form-group">
            <p>Which Shoe has the most hype?</p>
            <select id="dropdown" name="hype" class="form-control" required>
                <option disable selected value>Pick One</option>
                <option value="retro-1">Jordan 1</option>
                <option value="retro-3">Jordan 3</option>
                <option value="retro-4">Jordan 4</option>
                <option value="retro-11">Jordan 11</option>
                <option value="other">Other</option> 
            </select>
        </div>

        <div class="form-group">
            <p>How many pairs of Jordans do you own?</p>
            <label>
                <input 
                name="collection"
                value="less-than-5"
                type="radio"
                class="input-radio"
                checked> Less than 5
            </label><br>
            <label>
                <input
                name="collection"
                value="more-than-5"
                type="radio"
                class="input-radio">
                6 - 9
            </label><br>
            <label>
                <input
                name="collection"
                value="10+"
                type="radio"
                class="input-radio">
                10+
            </label>
        </div> 

        <div class="form-group">
            <p>
                Do you wear other types of shoes besides Jordans?
            </p>
            <select id="other-brands" name="otherBrands"  class="form-control" required>
                <option disable selected value> Select and option</option>
                <option value="nike">Yes, Nike</option>
                <option value="asics">Yes, Asics</option>
                <option value="yeezy">Yes, Yeezy</option>
                <option value="adidas">Yes, Adidas</option>
                <option value="all">All the above</option>
                <option value="only-jordans"> Nah, only Jordans</option>
            </select>
        </div>

        <div class="form-group">
            <p>What's the most difficult part about being a sneakerhead?
                <span class="clue"> (Check all that apply)</span>
            </p>
            <label>
                <input
                name="difficult"
                value="retail"
                type="checkbox"
                class="input-checkbox"
                >Copping for retail</label>
            </label><br>
            <label>
                <input
                name="difficult"
                value="completing-sets"
                type="checkbox"
                class="input-checkbox"
                >Completing sets</label>
            </label><br>
            <label>
                <input
                name="difficult"
                value="budget"
                type="checkbox"
                class="input-checkbox"
                >Staying within your budget</label>
            </label><br>
            <label>
                <input
                name="difficult"
                value="partner"
                type="checkbox"
                class="input-checkbox"
                >Wife/ spouse complaing about your habbit</label>
            </label><br>
            <label>
                <input
                name="difficult"
                value="reseller"
                type="checkbox"
                class="input-checkbox"
                >Having to deal with resellers</label>
            </label><br>
            <label>
                <input
                name="difficult"
                value="authentic"
                type="checkbox"
                class="input-checkbox"
                >Finding authentic shoes for a reasonable price</label>
            </label>
            <label>
                <input
                name="difficult"
                value="other"
                type="checkbox"
                class="input-checkbox"
                >Something else</label>
            </label>
            <div class="form-group">
                <p>Comments or suggestions?</p>
                <textarea
                id="comments"
                class="input-textarea"
                name="comment"
                placeholder= "Enter your suggestions here..."
                ></textarea>
            </div>

            <div class="form-group">
                <button 
                type="submit" 
                id="submit" 
                class="submit-button"
                >Submit</button>
            </div>

        </div>
  </form>
</div>
</html>