CybroAddons/theme_zen/views/contact/contact.xml

<?xml version="1.0" encoding="UTF-8" ?>
<odoo>
    <template id="contsct" inherit_id="website.snippets" name="Blogs content">
    <xpath expr="//div[@id='snippet_feature']/div[hasclass('o_panel_body')]" position="inside">
        <t t-snippet="theme_zen.contact_content"
                t-thumbnail="/theme_zen/static/src/img/snippets/contact.png"/>
    </xpath>
</template>
    <template id="contact_content" name="Contact snippet">

<section class="main_body_contact">
    <section class="header">
      <div class="container-fluid p-0">
        <div class="col-3">
        </div>
        <div id="menu">
          <div id="menu-bar" onclick="menuOnClick()">
            <div id="bar1" class="bar"></div>
            <div id="bar2" class="bar"></div>
            <div id="bar3" class="bar"></div>
          </div>
          <nav class="nav" id="nav">
            <ul>
              <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="services.html">Services</a></li>
            <li><a href="portfolio.html">Portfolio</a></li>
            <li><a href="blog.html">Blog</a></li>
            <li><a href="contact.html">Contact</a></li>
            </ul>
          </nav>
        </div>
        <div class="menu-bg" id="menu-bg"></div>
        <div class="menu-bg2" id="menu-bg2"></div>
        <div class="wrapper_abt">
          <div id="banner ">
            <div>
              <div class="banner">
                <div class="row p-0 m-0">
                  <div class="col-lg-6 col-12 p-0 m-0">
                    <div class="banner_bg">

                      <div class="card w-75">
                        <div class="card-body">

                          <p class="card-text first" id="demo">the best <br/>agency for<br/>your Bussiness </p>
                          <p class="text-bottom second">

                            <span> XOXO fam brunch retro intelligentsia live-edge vegan </span>
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-6  p-0 m-0">
                    <div class="banner_left">
                      <div class="card w-75">
                        <div class="card-body">

                          <p class="card-text first" id="demo">the best <br/>agency for<br/>your Bussiness </p>
                          <p class="text-bottom second">

                            <span> XOXO fam brunch retro intelligentsia live-edge vegan </span>
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="b_wrapp">
            <a href="#section03" class="btn btn-down">Scroll</a>
           </div>
        </div>
      </div>
    </section>
    <!-- Header Section ends here -->


    <!-- Contact section starts here -->

    <section class="contact" id="section03">

        <div class="container-fluid">
            <div class="wrapper">
                <div class="heading">
                    <h1 class="he">
                    CONTACT US
                    </h1>
                    <p>
                        Succulents mlkshk hammock jean shorts flexitarian chicharrones,
                        skateboard 90's knausgaard heirloom sustainable fixie forage. Vegan cloud bread forage lyft,
                         cornhole food truck salvia portland locavore mlkshk. Etsy synth taxidermy godard DIY, tote bag fingerstache.
                    </p>
                  </div>


<div class="contact_details">
    <div class="row">
        <div class="col-lg-4 col-md-4 col-12">
            <div class="wrapper_c">
                <h5>
                    EMAIL US
                </h5>
                <p class="e_details">
                    palo listicle<br/>
                    vape banjo<br/>
                    meditation
                </p>

                <div class="mail">
                    <ul>
                        <li><a href="mailto:mail@Cybrosys.com">mail@Cybrosys.net</a></li>
                        <li><a href="mailto:mail@Cybrosys.com">mail@Cybrosys.net</a></li>
                    </ul>

                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-4 col-12">
            <div class="wrapper_c">
                <h5>
                   VISIT US
                </h5>
                <p class="e_details">
                    PO Box 223158<br/>
                    Oliver Street<BR/>
                    Victoria 2006
                </p>

                <div class="mail">
                    <ul>
                        <li><a href="mailto:mail@Cybrosys.com">OPEN IN GOOGLE MAPS</a></li>

                    </ul>

                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-4 col-12">
            <div class="wrapper_c">
                <h5>
                   CALL US
                </h5>
                <p class="e_details">
                    organic cred<br/>
Echo park DIY<br/>
hashtag irony


                </p>

                <div class="mail">
                    <ul>
                        <li><a href="tel:+123456789">+23 8 8532 7834</a></li>

                    </ul>

                </div>
            </div>
        </div>
    </div>
</div>

            </div>
        </div>
    </section>
    <!-- Contact section starts here -->




     <!-- Contact form section starts here -->
     <section class="contact_form">
      <div class="container">

        <h4 class="he">
          Lets Get In Touch!
        </h4>
        <form>
          <div class="row">
            <div class="col-lg-4 col-md-4 col-12">
              <div class="form-group">
                <label for="first_name" class="form-label transform">First name</label>
                <input type="text" class="form-control" id="usr" placeholder=" "  value=" "/>

              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-12">
              <div class="form-group">
                <input type="text" class="form-control" id="usr1" placeholder=""/>
                <label for="first_name" class="form-label transform">Last name</label>
              </div>
            </div>

            <div class="col-lg-4 col-md-4 col-12">
              <div class="form-group">
                <input type="email" class="form-control" id="usr2" placeholder=""/>
                <label for="first_name" class="form-label transform">Email</label>
              </div>
            </div>
            <div class="col-12">
              <div class="form-group pt-4">
                <label for="first_name" class="form-txt1 transform"> Your Message</label>
                <textarea name="" class="txt" cols="" rows="6" style="width: 100%;" id="usr" placeholder=" "></textarea>
              </div>
            </div>
            <a href="#" class="btn btn-primary_c " style="margin:auto;">Book Now</a>
          </div>
        </form>
      </div>
  </section>
</section>
    </template>

</odoo>