I need help with this webpage creation, merging the desk tools into the index, and jQuery...

Your task is to take the desk.html program and using HTML/CSS and jQuery, to build a Web page that accomplishes the same task. Use the provided files for the application. Ensure you use the text data to confirm functionality. You DO NOT need to worry about validating for proper input. We will learn that in an upcoming learning plan. Use the document.ready functio, use a jQuery event handler, along with the .html and .val jQuery functions.

//desk.html//

//index.html//

Tough Guy Carpentry

Contact us for a custom quote on your premium desk!

Length:

Width:

Wood Type: Mahogany Oak Pine

Number of Drawers:

//styles.css//

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic); * { margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased; font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body { font-family: "Roboto", Helvetica, Arial, sans-serif; font-weight: 100; font-size: 12px; line-height: 30px; color: #777; background: #4CAF50; }

.container { max-width: 400px; width: 100%; margin: 0 auto; position: relative; }

#contact select, #contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"] { font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif; }

#contact { background: #F9F9F9; padding: 25px; margin: 150px 0; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); }

#contact h3 { display: block; font-size: 30px; font-weight: 300; margin-bottom: 10px; }

#contact h4 { margin: 5px 0 15px; display: block; font-size: 13px; font-weight: 400; }

fieldset { border: medium none !important; margin: 0 0 10px; min-width: 100%; padding: 0; width: 100%; }

#contact select, #contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea { width: 100%; border: 1px solid #ccc; background: #FFF; margin: 0 0 5px; padding: 10px; }

#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover { -webkit-transition: border-color 0.3s ease-in-out; -moz-transition: border-color 0.3s ease-in-out; transition: border-color 0.3s ease-in-out; border: 1px solid #aaa; }

#contact textarea { height: 100px; max-width: 100%; resize: none; }

#contact button[type="submit"] { cursor: pointer; width: 100%; border: none; background: #4CAF50; color: #FFF; margin: 0 0 5px; padding: 10px; font-size: 15px; }

#contact button[type="submit"]:hover { background: #43A047; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; transition: background-color 0.3s ease-in-out; }

#contact button[type="submit"]:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); }

.copyright { text-align: center; }

#contact input:focus, #contact textarea:focus { outline: 0; border: 1px solid #aaa; }

::-webkit-input-placeholder { color: #888; }

:-moz-placeholder { color: #888; }

::-moz-placeholder { color: #888; }

:-ms-input-placeholder { color: #888; }

#quote-submit { background-color:#44c767; border-radius:28px; border:1px solid #18ab29; display:inline-block; cursor:pointer; color:#ffffff; font-family:Arial; font-size:17px; padding:16px 31px; text-decoration:none; text-shadow:0px 1px 0px #2f6627; }

#message{ text-align:center; color: white; font-size: 30px; }