<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>The Home Depot - Checkout</title>
   </head>
   <body>
      <checkout-form name="pickupDetailsSection">
         <shipping>
            <div>
               <hd-address type="shipping">
                  <hd-address-field label="Shipping Address" type="type">
                     <div name="addressFieldForm">
                        <div>
                           <div>
                              <div>
                                 <hd-name-field name="firstName" label="First Name" analytics-tag="pickup options">
                                    <span name="firstName">
                                       <label for="inputField">
<span>First Name</span>
</label>
<input type="text" id="firstName" name="inputField" maxlength="30" placeholder="" required="required">
                                    </span>
                                 </hd-name-field>
                              </div>
                              <div>
                                 <hd-name-field name="lastName" label="Last Name" analytics-tag="pickup options">
                                    <span name="lastName">
                                       <label for="inputField">
<span>Last Name</span>
</label>
<input type="text" id="lastName" name="inputField" maxlength="30" placeholder="" required="required">
                                    </span>
                                 </hd-name-field>
                              </div>
                           </div>
                           <div>
                              <div>
                                 <hd-email-field name="emailInput" label="Email" placeholder="you@domain.com" analytics-tag="pickup options">
                                    <span name="emailInput">
                                       <label for="inputField">
<span>Email</span>
</label>
<input id="emailInput" type="email" name="inputField" placeholder="you@domain.com" required="required">
                                    </span>
                                 </hd-email-field>
                              </div>
                           </div>
                           <div>
                              <create-account>
                                 <div>
                                    <div>
                                       <div>
<span role="button" tabindex="0">Create an account</span> to track your order history and check out faster - all we need is a password.</div>
                                       <div>
                                          <p>Check out faster, access past orders, and organize products into lists.</p>
                                       </div>
                                    </div>
                                    <div>
                                       <div>
                                          <hd-password-field label="Password" name="password">
<span name="hdPasswordField">
<label for="textPasswordInput">
<span>Password</span>
</label>
<input type="password" name="inputField">
<span>
</span>
</span>
</hd-password-field>
                                       </div>
                                       <div>
                                          <hd-password-field name="confirmPassword" label="Confirm Password">
<span name="hdPasswordField">
<label for="textPasswordInput">
<span>Confirm Password</span>
</label>
<input type="password" name="inputField">
<span>
</span>
</span>
</hd-password-field>
                                       </div>
                                       <div>
                                          <div>
                                             <hd-check-box field-value="" label="SHOW PASSWORD" tab-index-hd="-1">
                                                <div>
                                                   <div>
<input tabindex="-1" type="checkbox" name="hdCheckBox_3" id="hdCheckBox_3">
<label for="hdCheckBox_3">SHOW PASSWORD</label>
</div>
                                                </div>
                                             </hd-check-box>
                                          </div>
                                          <div>
                                             <span>Passwords are case sensitive and must be at least 8 characters.</span>
                                             <div>
                                                <span>Create a strong password by:</span>
                                                <ul>
                                                   <li>Including numbers or symbols</li>
                                                   <li>Mixing upper/lowercase</li>
                                                </ul>
                                             </div>
                                          </div>
                                          <div>
<a target="_blank">Terms &amp; Conditions</a> &nbsp;|&nbsp; <a target="_blank">Privacy &amp; Security</a>
</div>
                                       </div>
                                       <create-account-button>
</create-account-button>
                                    </div>
                                 </div>
                              </create-account>
                           </div>
                           <div>
                              <div>
                                 <hd-phone-field name="phone" label="Phone" analytics-tag="pickup options">
                                    <span name="phone">
                                       <label for="inputField">
<span>Phone</span>
</label>
<input id="phone" name="inputField" type="tel" inputmode="numeric" placeholder="(___) ___-____" required="required">
                                    </span>
                                 </hd-phone-field>
                              </div>
                           </div>
                        </div>
                        <div>
                           <div>
                              <div>
                                 <label for="billingAddress">
<span>Shipping Address</span>
</label>
                              </div>
                              <span name="streetInput">
                                 <hd-type-ahead id="billingAddress" name="billingAddress" label="Billing Street Address" placeholder="Address Line 1" pause="700" input-class="form-input__field">
                                    <div>
                                       <input id="billingAddress_value" name="billingAddress" type="text" maxlength="30" placeholder="Address Line 1" required="">
                                    </div>
                                 </hd-type-ahead>
                              </span>
                           </div>
                        </div>
                        <div>
<span role="button" tabindex="0">Add an apartment, suite, building, etc.</span>
</div>
                        <div>
                           <div>
                              <span name="zipInput">
                                 <label for="zip">
<span>ZIP Code</span>
</label>
<input type="tel" name="zip" maxlength="5" required="">
                              </span>
                           </div>
                           <div>
                              <span>
                                 <label>
<span>City, State</span>
</label>
                                 <span>
<b>MOUNTAIN VIEW, CA</b>
</span>
                              <div>
                                 <span name="stateInput">
                                    <select id="cityStateListSelector" autocomplete="billing street-address" name="pickupLocation">
                                       <option value="? object:null ?" selected="selected">
</option>
                                    </select>
                                 </span>
                              </div>
                           </div>
                        </div>
                     </div>
                  </hd-address-field>
               </hd-address>
               <div>
                  <hd-check-box field-value="checkoutFlags.hideBillingAddress" label="Use as Billing Address" checked="checked">
                     <div>
                        <div>
<input tabindex="" type="checkbox" name="hdCheckBox_1" id="hdCheckBox_1" checked="checked">
<label for="hdCheckBox_1">Use as Billing Address</label>
</div>
                     </div>
                  </hd-check-box>
               </div>
            </div>
         </shipping>
      </checkout-form>
      <card-field form-is-valid="formIsValid">
         <div name="cardForm">
            <div>
<input name="expiryMonth" type="tel" autocomplete="cc-exp-month" tabindex="-1">
<input name="expiryYear" type="tel" autocomplete="cc-exp-year" tabindex="-1">
</div>
            <div>
               <div>
                  <span>Payment</span>
               </div>
            </div>
            <div>
               <div>
                  <input type="radio" value="PayPal" id="payPal" name="paymentOptions">
                  <label for="payPal" tabindex="10">
                     <span>
</span>
                     <div>
</div>
                  </label>
               </div>
               <div>
<input type="radio" select-payment="" value="creditCard" id="creditCard" name="paymentOptions" checked="checked">
<label for="creditCard" tabindex="10">
<span>
</span>Credit Card</label>
</div>
               <div>
                  <span>
                     <label>
                     </label>
                     <input id="cardNumber" name="cardNumber" type="tel" mask-field="" mask="0000 0000 0000 0000 0000 0" maxlength="26" placeholder="Enter credit card number" required="required">
<span id="ccIcon" tabindex="-1" role="button">
</span>
                  </span>
               </div>
               <div>
                  <div>
                     <div>
                        <div>
                           <span>Expiration</span>
                           <span>
                              <select id="ccMonth" name="ccMonth" required="">
                                 <option value="" selected="selected">Month</option>
                                 <option label="01 - January" value="object:17">01 - January</option>
                                 <option label="02 - February" value="object:18">02 - February</option>
                                 <option label="03 - March" value="object:19">03 - March</option>
                                 <option label="04 - April" value="object:20">04 - April</option>
                                 <option label="05 - May" value="object:21">05 - May</option>
                                 <option label="06 - June" value="object:22">06 - June</option>
                                 <option label="07 - July" value="object:23">07 - July</option>
                                 <option label="08 - August" value="object:24">08 - August</option>
                                 <option label="09 - September" value="object:25">09 - September</option>
                                 <option label="10 - October" value="object:26">10 - October</option>
                                 <option label="11 - November" value="object:27">11 - November</option>
                                 <option label="12 - December" value="object:28">12 - December</option>
                              </select>
                           </span>
                        </div>
                     </div>
                     <div>
                        <div>
                           <span>
                              <select id="ccYear" name="ccYear" required="">
                                 <option value="" selected="selected">Year</option>
                                 <option label="2017" value="object:29">2017</option>
                                 <option label="2018" value="object:30">2018</option>
                                 <option label="2019" value="object:31">2019</option>
                                 <option label="2020" value="object:32">2020</option>
                                 <option label="2021" value="object:33">2021</option>
                                 <option label="2022" value="object:34">2022</option>
                                 <option label="2023" value="object:35">2023</option>
                                 <option label="2024" value="object:36">2024</option>
                                 <option label="2025" value="object:37">2025</option>
                                 <option label="2026" value="object:38">2026</option>
                                 <option label="2027" value="object:39">2027</option>
                                 <option label="2028" value="object:40">2028</option>
                                 <option label="2029" value="object:41">2029</option>
                                 <option label="2030" value="object:42">2030</option>
                                 <option label="2031" value="object:43">2031</option>
                                 <option label="2032" value="object:44">2032</option>
                                 <option label="2033" value="object:45">2033</option>
                                 <option label="2034" value="object:46">2034</option>
                                 <option label="2035" value="object:47">2035</option>
                              </select>
                           </span>
                        </div>
                     </div>
                  </div>
                  <div>
                     <span>
                        <label>
                           <span>
                              CVV (on back)
                           </span>
                        </label>
                        <input id="cvv" name="cvv" type="tel" placeholder="ñññ" minlength="3" required="">
<span id="ccIcon">
</span>
                     </span>
                  </div>
               </div>
               <div>
                  <span role="button" tabindex="0">Apply a Gift Card</span>
                  <span>&nbsp;|&nbsp;</span>
                  <span role="button" tabindex="0">Have a PO/Job Code for this order?</span>
               </div>
            </div>
            <div>
            </div>
            <div>
            </div>
         </div>
      </card-field>
      <base>
      <div>
         <ui-view>
            <div id="checkout" analytics="">
               <div name="checkout">
                  <div>
                     <div>
                        <div>
                           <myapron-display>
                              <div>
                                 <div>
<span name="myApronID">
<label for="myapron">
<span>myApron ID (Optional)</span>
</label>
<input type="tel" name="myapron" maxlength="10">
</span>
</div>
                              </div>
                           </myapron-display>
                           <email-subscribe>
                              <div>
                                 <div>
                                    <hd-check-box field-value="user.emailSubscribed" name="emailSubscribed" label="Yes, I would like to receive emails about unadvertised &amp; online only specials, new products and store promotions." checked="true">
                                       <div>
                                          <div>
<input tabindex="" type="checkbox" name="emailSubscribed" id="hdCheckBox_2" checked="checked">
<label for="hdCheckBox_2">Yes, I would like to receive emails about unadvertised &amp; online only specials, new products and store promotions.</label>
</div>
                                       </div>
                                    </hd-check-box>
                                 </div>
                              </div>
                           </email-subscribe>
                        </div>
                     </div>
                  </div>
               </div>
               <div>
                  <right-rail pick-up-options="pickUpOptions" messages="checkoutModel.messagesSummary">
                     <div>
                        <div>
                           <promotions-summary promotions="order.promotionsModel" messages="messages">
                              <div name="promoForm">
                                 <div>
<span role="button" tabindex="0">Have a promo code?</span>
</div>
                                 <div>
                                    <div>
<span>
<span>
</span>
</span>
</div>
                                 </div>
                                 <div>
                                    <span>
<input id="promoId" name="promoId" type="text">
</span>
<span>
<a>
<span>Apply</span>
</a>
</span>
                                 </div>
                              </div>
                           </promotions-summary>
                        </div>
                     </div>
                  </right-rail>
               </div>
            </div>
         </ui-view>
      </div>
   </body>
</html>
