stevemuir6.github.io_github_git_其他

<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CodePen - Greatest Guitar Player survey</title> <link rel="stylesheet" href="./style.css"> </head> <body>  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>  <div class="container"> <header> <h1 id="title" class="text-center">The Greatest Guitar Player of All Time? </h1> <p id="description" class="description text-center"> Help me decide for once and for ALL Time! </p> </header> <form id="survey-form"> <div class="form-group"> <label id="name-label" for="name">Shredder:</label> <input type="text" id="name" name="name" placeholder="Choose Wisely" required> </div> <div class="form-group"> <label id="email-label" for="e-mail"> E-mail:</label> <input type="email" name="email" id="email" class="form-control" placeholder="Enter your Email" required /> </div> <div class="form-group"> <label id="number-label" for="number"> Shred Cred:<span class="clue"></span></label> <input type="number" name="years shredding" id="number" min="1" max="69" class="form-control" placeholder="Years shredding?" required /> </div> <div class="form-group"> <p>Whats your shred style?</p> <select id="dropdown" name="role" class="form-control" required> <option disabled selected value>Select Favorite Style</option> <option value="50rock">'50's Rock 'n Roll</option> <option value="60rock">'60's Psychedelic Rock</option> <option value="70rock">'70's Acid Rock</option> <option value="80rock">'80's Hair Metal</option> <option value="90rock">'90's Grunge</option> <option value="00rock">'00's Nu Metal</option> </select> </div> <div class="form-group"> <p>How Many Axes Do You Own?</p> <label> <input name="user-recommend" value="1-3" type="radio" class="input-radio" checked />1-3</label> <label> <input name="user-recommend" value="4-7" type="radio" class="input-radio" />4-7</label> <label> <input name="user-recommend" value="5-9" type="radio" class="input-radio" />5-9</label> <label> <input name="user-recommend" value=">10" type="radio" class="input-radio" />10 or more</label> </div> <div class="form-group"> <p>Whats most important to your style?</p> <select id="most-like" name="most-like" class="form-control" required> <option disabled selected value>Select an option</option> <option value="Tone">Tone</option> <option value="Feel">Feel</option> <option value="Soul">Soul</option> <option value="Speed">Speed</option> <option value="Technique">Technique</option> <option value="Hair">Hair</option> </select> </div> <div class="form-group"> <p>Type of Pick-ups That You Own</p> <span class="clue"> (Check all that apply)</span> </p> <label> <input name="prefer" value="humbucker" type="checkbox" class="input-checkbox" />Humbucker </label> <label> <input name="prefer" value="single-coil" type="checkbox" class="input-checkbox" />Single-coil </label> <label> <input name="prefer" value="p90" type="checkbox" class="input-checkbox" />P-90 </label> <label> <input name="prefer" value="soapbar" type="checkbox" class="input-checkbox" />Soapbar </label> </div> <div class="form-group"> <p>Additional comments?</p> <textarea id="comments" class="input-textarea" name="comment" placeholder="Explain why you love your choice...."></textarea> </div> <div class="form-group"> <button type="submit" id="submit" class="submit-button">Submit</button> </div> </form> </div>  <script src="./script.js"></script> </body> </html>