contact page

Contact us 
<a herf="url">index.html</a>
<a herf="url">About.html</a>
<a herf="url">Product.html</a>
<a href="url">clints.html</a>

<div class="div">
  <div class="div-2">
    <div class="div-3">
      <div class="div-4">
        <div class="column">
          <img
            loading="lazy"
            srcset="https://cdn.builder.io/api/v1/image/assets/TEMP/72258e5e6d7cbbd9e08f6cb89c4be590c3c430148d75c1433b4cb6302d03560e?apiKey=5fba2fa4729f49769b148a610c2548d5&width=100 100w, https://cdn.builder.io/api/v1/image/assets/TEMP/72258e5e6d7cbbd9e08f6cb89c4be590c3c430148d75c1433b4cb6302d03560e?apiKey=5fba2fa4729f49769b148a610c2548d5&width=200 200w, https://cdn.builder.io/api/v1/image/assets/TEMP/72258e5e6d7cbbd9e08f6cb89c4be590c3c430148d75c1433b4cb6302d03560e?apiKey=5fba2fa4729f49769b148a610c2548d5&width=400 400w, https://cdn.builder.io/api/v1/image/assets/TEMP/72258e5e6d7cbbd9e08f6cb89c4be590c3c430148d75c1433b4cb6302d03560e?apiKey=5fba2fa4729f49769b148a610c2548d5&width=800 800w, https://cdn.builder.io/api/v1/image/assets/TEMP/72258e5e6d7cbbd9e08f6cb89c4be590c3c430148d75c1433b4cb6302d03560e?apiKey=5fba2fa4729f49769b148a610c2548d5&width=1200 1200w, https://cdn.builder.io/api/v1/image/assets/TEMP/72258e5e6d7cbbd9e08f6cb89c4be590c3c430148d75c1433b4cb6302d03560e?apiKey=5fba2fa4729f49769b148a610c2548d5&width=1600 1600w, https://cdn.builder.io/api/v1/image/assets/TEMP/72258e5e6d7cbbd9e08f6cb89c4be590c3c430148d75c1433b4cb6302d03560e?apiKey=5fba2fa4729f49769b148a610c2548d5&width=2000 2000w, https://cdn.builder.io/api/v1/image/assets/TEMP/72258e5e6d7cbbd9e08f6cb89c4be590c3c430148d75c1433b4cb6302d03560e?apiKey=5fba2fa4729f49769b148a610c2548d5&"
            class="img"
          />
        </div>
        <div class="column-2">
          <div class="div-5">
            <div class="div-6">
              PDP ENTERPRISES
              <br />
              POOL SERVICES
            </div>
            <a href='/'>HOME</a>
            <a href='/about'>
              ABOUT US
            </a>
          </div>
        </div>
        <div class="column-3">
          <div class="div-7">
            <a href='/product'>
              PRODUCTS
            </a>
            <a href='/clints'>
              CLIENTS
            </a>
            <div class="div-8">CONTACT US</div>
          </div>
        </div>
      </div>
    </div>
    <div class="div-9">
      <a href='/'>HOME</a>
      <div class="div-10">
        <img
          loading="lazy"
          src="https://cdn.builder.io/api/v1/image/assets/TEMP/a9f5b42c0fa1117e39334484b07e0e0adb667fee824045958736fa493c3c9833?apiKey=5fba2fa4729f49769b148a610c2548d5&"
          class="img-2"
        />
      </div>
    </div>
    <div class="div-11">
      <div class="div-12">Contact Us</div>
      <div class="div-13">
        <div class="div-14">
          <div class="column-4">
            <div class="div-15">
              <FormForm
                sendSubmissionsTo="email"
                sendSubmissionsToEmail="your@email.com"
                name="My form"
                contentType="application/json"
                method="POST"
                previewState="unsubmitted"
                successUrl="https://www.google.com/"
                class="form-form"
                data-el="form-form"
              >
                <div class="div-16"><span>Enter your name</span></div>
                <FormInput
                  name="name"
                  placeholder="Jane Doe"
                  type="text"
                  class="form-input"
                  data-el="form-input"
                ></FormInput>
                <div class="div-17"><span>Enter your email</span></div>
                <FormInput
                  name="email"
                  placeholder="jane@doe.com"
                  type="email"
                  class="form-input-2"
                  data-el="form-input-2"
                ></FormInput>
              </FormForm>
              <FormSubmitButton
                text="Submit"
                class="form-submit-button"
              ></FormSubmitButton>
            </div>
          </div>
          <div class="column-5">
            <div class="div-21">
              <span style="color: rgba(0, 0, 0, 1)">GET IN TOUCH</span>
              <br />
              <br />
              <br />
              <span style="color: rgba(0, 0, 0, 1)">
                #1049, 11th Cross Road
              </span>
              <br />
              <span style="color: rgba(0, 0, 0, 1)">
                Udaya Nagar A Narayanapura
              </span>
              <br />
              <span style="color: rgba(0, 0, 0, 1)">Bangalore-560 016.</span>
              <br />
              <span style="color: rgba(0, 0, 0, 1)">
                Mobile : +91 6362223274
              </span>
              <br />
              <span style="color: rgba(0, 0, 0, 1)">
                E-Mail : rajanbabur727@gmail.com
              </span>
              <br />
              <span style="color: rgba(0, 0, 0, 1)">SERVICES</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="div-22">
      <div class="div-23">
        <div class="div-24">
          <div class="column-6">
            <div class="div-25">
              GET IN TOUCH
              <br />
              <br />
              <br />
              <span style="color: rgba(255, 235, 235, 1)">
                #1049, 11th Cross Road
              </span>
              <br />
              <span style="color: rgba(255, 235, 235, 1)">
                Udaya Nagar A Narayanapura
              </span>
              <br />
              <span style="color: rgba(255, 235, 235, 1)">
                Bangalore-560 016.
              </span>
              <br />
              <span style="color: rgba(255, 235, 235, 1)">
                Mobile : +91 6362223274
              </span>
              <br />
              <span style="color: rgba(255, 235, 235, 1)">
                E-Mail : rajanbabur727@gmail.com
              </span>
              <br />
              <span style="color: rgba(255, 235, 235, 1)">SERVICES</span>
            </div>
          </div>
          <div class="column-7">
            <img
              loading="lazy"
              srcset="https://cdn.builder.io/api/v1/image/assets/TEMP/927a522cb8a07ca5b922b6dd14a0c6482f98b246cbcf512ad2086877e19759e9?apiKey=5fba2fa4729f49769b148a610c2548d5&width=100 100w, https://cdn.builder.io/api/v1/image/assets/TEMP/927a522cb8a07ca5b922b6dd14a0c6482f98b246cbcf512ad2086877e19759e9?apiKey=5fba2fa4729f49769b148a610c2548d5&width=200 200w, https://cdn.builder.io/api/v1/image/assets/TEMP/927a522cb8a07ca5b922b6dd14a0c6482f98b246cbcf512ad2086877e19759e9?apiKey=5fba2fa4729f49769b148a610c2548d5&width=400 400w, https://cdn.builder.io/api/v1/image/assets/TEMP/927a522cb8a07ca5b922b6dd14a0c6482f98b246cbcf512ad2086877e19759e9?apiKey=5fba2fa4729f49769b148a610c2548d5&width=800 800w, https://cdn.builder.io/api/v1/image/assets/TEMP/927a522cb8a07ca5b922b6dd14a0c6482f98b246cbcf512ad2086877e19759e9?apiKey=5fba2fa4729f49769b148a610c2548d5&width=1200 1200w, https://cdn.builder.io/api/v1/image/assets/TEMP/927a522cb8a07ca5b922b6dd14a0c6482f98b246cbcf512ad2086877e19759e9?apiKey=5fba2fa4729f49769b148a610c2548d5&width=1600 1600w, https://cdn.builder.io/api/v1/image/assets/TEMP/927a522cb8a07ca5b922b6dd14a0c6482f98b246cbcf512ad2086877e19759e9?apiKey=5fba2fa4729f49769b148a610c2548d5&width=2000 2000w, https://cdn.builder.io/api/v1/image/assets/TEMP/927a522cb8a07ca5b922b6dd14a0c6482f98b246cbcf512ad2086877e19759e9?apiKey=5fba2fa4729f49769b148a610c2548d5&"
              class="img-3"
            />
          </div>
        </div>
      </div>
      <div class="div-26">
        Copyright © 2016 All Rights Reserved | PDP Enterprises
        <br />
        Best Swimming Pool Construction Company | Powered by : Vishal Raj p
      </div>
    </div>
  </div>
</div>
<style>
  .div {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .div-2 {
    border-radius: 5px;
    background-color: #fff;
    display: flex;
    width: 100%;
    padding-top: 10px;
    flex-direction: column;
  }
  @media (max-width: 991px) {
    .div-2 {
      max-width: 100%;
    }
  }
  .div-3 {
    background-color: #cde9f4;
    width: 100%;
    padding: 0 20px;
  }
  @media (max-width: 991px) {
    .div-3 {
      max-width: 100%;
    }
  }
  .div-4 {
    gap: 20px;
    display: flex;
  }
  @media (max-width: 991px) {
    .div-4 {
      flex-direction: column;
      align-items: stretch;
      gap: 0px;
    }
  }
  .column {
    display: flex;
    flex-direction: column;
    line-height: normal;
    width: 17%;
    margin-left: 0px;
  }
  @media (max-width: 991px) {
    .column {
      width: 100%;
    }
  }
  .img {
    aspect-ratio: 1.03;
    object-fit: auto;
    object-position: center;
    width: 228px;
    max-width: 100%;
    flex-grow: 1;
  }
  @media (max-width: 991px) {
    .img {
      margin-top: 40px;
    }
  }
  .column-2 {
    display: flex;
    flex-direction: column;
    line-height: normal;
    width: 47%;
    margin-left: 20px;
  }
  @media (max-width: 991px) {
    .column-2 {
      width: 100%;
    }
  }
  .div-5 {
    display: flex;
    align-items: center;
    gap: 20px;
    align-self: stretch;
    font-size: 24px;
    font-weight: 400;
    justify-content: space-between;
    margin: auto 0;
  }
  @media (max-width: 991px) {
    .div-5 {
      margin-top: 40px;
      flex-wrap: wrap;
    }
  }
  .div-6 {
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    background: linear-gradient(90deg, #e43f3f 16.4%, #3860eb 76.4%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    align-self: stretch;
    font: 48px Inter, sans-serif;
  }
  @media (max-width: 991px) {
    .div-6 {
      max-width: 100%;
      font-size: 40px;
    }
  }
  .a {
    font-family: Inter, sans-serif;
    justify-content: center;
    background-color: #cde9f4;
    align-self: stretch;
    color: rgba(0, 0, 0, 0.7);
    white-space: nowrap;
    cursor: pointer;
    pointer-events: auto;
    margin: auto 0;
    padding: 10px;
  }
  @media (max-width: 991px) {
    .a {
      white-space: initial;
    }
  }
  .a-2 {
    font-family: Inter, sans-serif;
    justify-content: center;
    background-color: #cde9f4;
    align-self: stretch;
    color: #4a4242;
    cursor: pointer;
    pointer-events: auto;
    margin: auto 0;
    padding: 10px;
  }
  .column-3 {
    display: flex;
    flex-direction: column;
    line-height: normal;
    width: 36%;
    margin-left: 20px;
  }
  @media (max-width: 991px) {
    .column-3 {
      width: 100%;
    }
  }
  .div-7 {
    display: flex;
    gap: 20px;
    align-self: stretch;
    font-size: 24px;
    color: #4a4242;
    font-weight: 400;
    justify-content: space-between;
    margin: auto 0;
  }
  @media (max-width: 991px) {
    .div-7 {
      max-width: 100%;
      margin-top: 40px;
      flex-wrap: wrap;
    }
  }
  .a-3 {
    font-family: Inter, sans-serif;
    justify-content: center;
    background-color: #cde9f4;
    white-space: nowrap;
    cursor: pointer;
    pointer-events: auto;
    padding: 10px;
  }
  @media (max-width: 991px) {
    .a-3 {
      white-space: initial;
    }
  }
  .a-4 {
    font-family: Inter, sans-serif;
    justify-content: center;
    background-color: #cde9f4;
    white-space: nowrap;
    cursor: pointer;
    pointer-events: auto;
    padding: 10px;
  }
  @media (max-width: 991px) {
    .a-4 {
      white-space: initial;
    }
  }
  .div-8 {
    font-family: Inter, sans-serif;
    justify-content: center;
    background-color: #cde9f4;
    color: #000;
    font-weight: 700;
    padding: 10px;
  }
  .div-9 {
    justify-content: center;
    background-color: #ffc3bb;
    display: flex;
    gap: 10px;
    padding: 10px 0 10px 10px;
  }
  @media (max-width: 991px) {
    .div-9 {
      flex-wrap: wrap;
    }
  }
  .a-5 {
    color: #000;
    flex: 1;
    cursor: pointer;
    pointer-events: auto;
    font: 300 40px Inter, sans-serif;
  }
  @media (max-width: 991px) {
    .a-5 {
      max-width: 100%;
    }
  }
  .div-10 {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: auto 0;
  }
  .img-2 {
    aspect-ratio: 1.22;
    object-fit: auto;
    object-position: center;
    width: 33px;
    stroke-width: 5px;
    stroke: #000;
    border-color: rgba(0, 0, 0, 1);
    border-style: solid;
    border-width: 5px;
    cursor: pointer;
    pointer-events: auto;
  }
  .div-11 {
    display: flex;
    margin-top: 32px;
    width: 100%;
    padding-left: 68px;
    flex-direction: column;
  }
  @media (max-width: 991px) {
    .div-11 {
      max-width: 100%;
      padding-left: 20px;
    }
  }
  .div-12 {
    color: #000;
    font: 300 40px Inter, sans-serif;
  }
  @media (max-width: 991px) {
    .div-12 {
      max-width: 100%;
    }
  }
  .div-13 {
    margin-top: 98px;
  }
  @media (max-width: 991px) {
    .div-13 {
      max-width: 100%;
      margin-top: 40px;
    }
  }
  .div-14 {
    gap: 20px;
    display: flex;
  }
  @media (max-width: 991px) {
    .div-14 {
      flex-direction: column;
      align-items: stretch;
      gap: 0px;
    }
  }
  .column-4 {
    display: flex;
    flex-direction: column;
    line-height: normal;
    width: 50%;
    margin-left: 0px;
  }
  @media (max-width: 991px) {
    .column-4 {
      width: 100%;
    }
  }
  .div-15 {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    font-size: 20px;
    color: #000;
    font-weight: 300;
    padding-bottom: 200px;
  }
  @media (max-width: 991px) {
    .div-15 {
      max-width: 100%;
      margin-top: 40px;
    }
  }
  .form-form {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-bottom: 15px;
    margin: 15px 0 91px;
  }
  .div-16 {
    margin-top: 10px;
  }
  .form-input {
    margin-top: 10px;
  }
  .div-17 {
    margin-top: 10px;
  }
  .form-input-2 {
    margin: 10px 0 11px;
  }
  .div-18 {
    margin-top: 10px;
  }
  .div-19 {
    margin-top: 10px;
  }
  .div-20 {
    margin-top: 10px;
  }
  .form-submit-button {
    margin: 10px 0 100px;
  }
  .column-5 {
    display: flex;
    flex-direction: column;
    line-height: normal;
    width: 50%;
    margin-left: 20px;
  }
  @media (max-width: 991px) {
    .column-5 {
      width: 100%;
    }
  }
  .div-21 {
    color: rgba(0, 0, 0, 0.9);
    margin-top: 105px;
    font: 800 48px Inter, sans-serif;
  }
  @media (max-width: 991px) {
    .div-21 {
      max-width: 100%;
      margin-top: 40px;
      font-size: 40px;
    }
  }
  .div-22 {
    background-color: #000;
    display: flex;
    margin-top: 217px;
    width: 100%;
    flex-direction: column;
    padding: 35px 52px 0;
  }
  @media (max-width: 991px) {
    .div-22 {
      max-width: 100%;
      margin-top: 40px;
      padding: 0 20px;
    }
  }
  .div-23 {
    margin-right: 47px;
  }
  @media (max-width: 991px) {
    .div-23 {
      max-width: 100%;
      margin-right: 10px;
    }
  }
  .div-24 {
    gap: 20px;
    display: flex;
  }
  @media (max-width: 991px) {
    .div-24 {
      flex-direction: column;
      align-items: stretch;
      gap: 0px;
    }
  }
  .column-6 {
    display: flex;
    flex-direction: column;
    line-height: normal;
    width: 66%;
    margin-left: 0px;
  }
  @media (max-width: 991px) {
    .column-6 {
      width: 100%;
    }
  }
  .div-25 {
    color: rgba(255, 235, 235, 0.9);
    font: 800 48px Inter, sans-serif;
  }
  @media (max-width: 991px) {
    .div-25 {
      max-width: 100%;
      margin-top: 40px;
      font-size: 40px;
    }
  }
  .column-7 {
    display: flex;
    flex-direction: column;
    line-height: normal;
    width: 34%;
    margin-left: 20px;
  }
  @media (max-width: 991px) {
    .column-7 {
      width: 100%;
    }
  }
  .img-3 {
    aspect-ratio: 1.28;
    object-fit: auto;
    object-position: center;
    width: 100%;
    align-self: stretch;
    margin: auto 0;
  }
  @media (max-width: 991px) {
    .img-3 {
      max-width: 100%;
      margin-top: 40px;
    }
  }
  .div-26 {
    color: #fff;
    text-align: center;
    align-self: center;
    margin-top: 108px;
    width: 970px;
    font: 800 24px Inter, sans-serif;
  }
  @media (max-width: 991px) {
    .div-26 {
      max-width: 100%;
      margin-top: 40px;
    }
  }
</style>
<script>
  (() => {
    const state = {};

    let context = null;
    let nodesToDestroy = [];
    let pendingUpdate = false;

    function destroyAnyNodes() {
      // destroy current view template refs before rendering again
      nodesToDestroy.forEach((el) => el.remove());
      nodesToDestroy = [];
    }

    // Function to update data bindings and loops
    // call update() when you mutate state and need the updates to reflect
    // in the dom
    function update() {
      if (pendingUpdate === true) {
        return;
      }
      pendingUpdate = true;

      document.querySelectorAll("[data-el='form-form']").forEach((el) => {
        el.setAttribute("sendWithJs", true);

        el.setAttribute("validate", true);
      });

      document.querySelectorAll("[data-el='form-input']").forEach((el) => {
        el.setAttribute("required", true);
      });

      document.querySelectorAll("[data-el='form-input-2']").forEach((el) => {
        el.setAttribute("required", true);
      });

      destroyAnyNodes();

      pendingUpdate = false;
    }

    // Update with initial state on first load
    update();

    // Helper text DOM nodes
    function renderTextNode(el, text) {
      const textNode = document.createTextNode(text);
      if (el?.scope) {
        textNode.scope = el.scope;
      }
      if (el?.context) {
        child.context = el.context;
      }
      el.after(textNode);
      nodesToDestroy.push(el.nextSibling);
    }
  })();
</script>