AMP Custom Website Development Templates

AMP Custom Website Development Templates

Due to the trends of the website industry and mobile webpages revolution makes it, even more, stronger to move on the amp for website development.

AMP recent times acquired large markets for consumers

it is highly recommended for top search engines and social media giants like Facebook, LinkedIn, Twitter.

Building an amp Website is crucial one, before get into the plan must understand the possibility of the AMP Components available.

you can do develop with an amp website builder for your projects but the facts are custom code development is a rule where the possibility of code reduces and a smart line of code encourages the speed of real being to get a smooth experience.

Custom AMP Code development

Header Section

<!DOCTYPE html>
<html >

<head>
  <meta charset="utf-8" />
  <meta name="title" content="Free Legal Advices Best Coimbatore Advocate Civil Family Senior Lawyers">
  <meta name="description" content="TOP 10 Coimbatore Advocate DRT Court- Civil and Family Senior Lawyers also Credit Card and Personal Loan Cases" />
  <meta name="keywords" content="Best Coimbatore Advocate,Civil Family Senior Lawyers">
  <meta name="robots" content="index, follow">
  <meta name="language" content="English">
  <meta name="author" content="freelegaladvices">
  <meta property="og:image" content="http://freelegaladvices.co.in/img/slide1.jpg">
  <link rel="canonical" href="http://freelegaladvices.co.in/" />
  <meta name="viewport" content="width=device-width" />
  <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
  <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
  <style amp-boilerplate>
  body {
      -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
      -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
      -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
      animation: -amp-start 8s steps(1, end) 0s 1 normal both
    }

    @-webkit-keyframes -amp-start {
      from {
        visibility: hidden
      }

      to {
        visibility: visible
      }
    }

    @-moz-keyframes -amp-start {
      from {
        visibility: hidden
      }

      to {
        visibility: visible
      }
    }

    @-ms-keyframes -amp-start {
      from {
        visibility: hidden
      }

      to {
        visibility: visible
      }
    }

    @-o-keyframes -amp-start {
      from {
        visibility: hidden
      }

      to {
        visibility: visible
      }
    }

    @keyframes -amp-start {
      from {
        visibility: hidden
      }

      to {
        visibility: visible
      }
    }
  </style>
  <noscript>
    <style amp-boilerplate>
  body {
        -webkit-animation: none;
        -moz-animation: none;
        -ms-animation: none;
        animation: none
      }
    </style>
  </noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
  <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;800;900&display=swap">

AMP Custom Css

Custom  Code CSS

  <style amp-custom>
  h1 {
      margin: 1rem;
    }

    body {
      background-color: #fff;
      font-family: 'Roboto Slab', serif;
    }

    .home-button {
      margin-top: 8px;
    }

    .headerbar {
      height: 70px;
      position: fixed;
      z-index: 999;
      top: 0;
      width: 100%;
      display: flex;
      align-items: center;
      background: #51050F;
    }

    .site-name {
      margin: auto;

      font-weight: 900;
      padding: auto .8em;
      font-size: 1.6em;
      color: #F78812;

    }

    .container {
      margin: auto 100px;
    }

    .section {
      padding: 4em 2em;
      width: 100%;

    }

    #values p {
      width: 90%;
    }

    #about {
      background: #F78812;
      color: #51050F;
      border-bottom: 10px solid #E02401;
    }



    #service {
      padding: 4em 2em;

    }

    section h1 {
      text-align: center;
      font-size: 3em;
      color: #51050F;


    }


    #service h5 {
      margin: auto 4em;
    }

    #about {
      padding: 4em 2em;
    }

    #about p {
      font-size: 1.2em;
      font-weight: 400;
      color: #000;
      padding: auto 5em;

    }



    h4 {
      text-transform: capitalize;
      font-size: 1.6em;
      font-weight: 900;
      letter-spacing: 1px;
      margin: 5px 0;


      color: #000;
    }

    #service p {
      font-size: 1.2em;
      font-weight: 400;
      line-height: 28px;
      color: #000;

      width: 90%;
    }

    #service img {
      width: 80px;
    }

    #faq section h2 {
      padding: 10px;
      font-size: 18px;
    }

    #faq section div {
      padding: auto 20px;
      font-size: 16px;
    }

    #contact {
      padding: auto 4em;
    }

    #contact input,
    #contact textarea {
      border: 1px solid #ccc;
      padding: 10px;

      margin: 10px 0;
      width: 320px;
      border-radius: 5px;
    }


    article {
      margin-top: 50px;
    }

    .hamburger {
      padding-left: 50px;
      color: #F78812;
    }

    #sidebar1 {
      background: #F78812;

    }

    .sidebar {
      padding: 10px;
      margin: 0;
    }

    .sidebar>li>a {
      list-style: none;
      font-size: 1.4em;
      padding: 1em 3em;
      color: #51050F;
      text-decoration: none;
    }

    .sidebar>li {
      list-style-type: none;

      padding-top: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid #fff;
    }


    .close-sidebar {
      font-size: 1.5em;
      padding-left: 80%;
    }

    /*  SECTIONS  */
    .section {
      clear: both;
      padding: 0px;
      margin: 0px;
    }

    .section .group {
      padding: auto 4em;
    }

        
  </style>
</head>

AMP Menu and Sidebar

<body>
  <header class="headerbar">
    <div role="button" on="tap:sidebar1.toggle" tabindex="0" class="hamburger">☰</div>
    <div class="site-name">Court Cases </div>
  </header>
  <amp-sidebar id="sidebar1" layout="nodisplay" side="left">
    <div role="button" aria-label="close sidebar" on="tap:sidebar1.toggle" tabindex="0" class="close-sidebar">✕</div>
    <ul class="sidebar">
      <li>
        <a href="#top">Home</a>
      </li>
      <li>
        <a href="#service">Service</a>
      </li>
      <li>
        <a href="#about">About</a>
      </li>
      <li>
        <a href="#contact">Contact</a>
      </li>
    </ul>
  </amp-sidebar>

AMP Carousals

  <amp-base-carousel loop="true" width="600" height="400" layout="responsive">
    <amp-img src="./img/slide1.jpg" width="600" height="400" layout="responsive">
    </amp-img>
    <amp-img src="./img/slide2.jpg" width="600" height="400" layout="responsive">
    </amp-img>
    <amp-img src="./img/slide3.jpg" width="600" height="400" layout="responsive">
    </amp-img>
  </amp-base-carousel>

AMP Values Three One Grid with Three Columns Section



  <section id="values">
    <h1>Our Core Values</h1>
    <div class="container">
      <div class="columns  ">
        <div class="column col-2">
        </div>
        <div class="column col-lg-4 col-xs-12">
          <amp-img src="./img/2178616.png" width="80" height="80" alt="Transparent fee" noloading>
          </amp-img>
          <h4>Transparent fee</h4>
          <p>The fee structure may vary on the location, details of the case, and the prestige of the lawyer you choose. Our billing process is very transparent and is communicated before the procedure begins.</p>
        </div>
        <div class="column  col-lg-4 col-xs-12">
          <amp-img src="./img/423096.png" width="80" height="80" alt="Experience" noloading>
          </amp-img>
          <h4>Experience</h4>
          <p>The factor that distinguishes us from others is the vast experience of our lawyers in their respective fields. The professionalism that they follow is prominent and it marks them among the top choices.</p>
        </div>
        <div class="column col-lg-4 col-xs-12">
          <amp-img src="./img/4371433.png" width="80" height="80" alt="Trust" noloading>
          </amp-img>
          <h4>Trust</h4>
          <p>Building trust among our clients and in this field of business is predominant to us. We consider this as the foundation of every relationship with the clients that we build.</p>
        </div>
        <div class="column col-2">
        </div>
      </div>
    </div>
  </section>

AMP About page Two Column

About Section 

  <section id="about">
    <h1>About</h1>
    <!-- vertical divider element with text -->
    <div class="container">
      <!-- vertical divider element with text -->
      <div class="columns">
        <div class="column  ">
          <!-- column content -->
          <p>We thoroughly believe that it is the primary duty of lawyers to defend public interests, ensure the rule of law, and promote equal opportunities of rights and justice to all.
            <br />
            <br />Getting the right lawyer whom you can trust and who is skilled enough to handle the intricacies of your case can be very difficult.</p>
        </div>
        <div class="divider-vert">
        </div>
        <div class="column   ">
          <!-- column content -->
          <p>
            <!-- column content -->The solution to this problem is offered by our firm by presenting our team of lawyers who are experienced, are trusted in the industry, and are very well versed with the law.
            <br />
            <br />We will solve you case, as it is our own.
            <br />We build trust and relation and will move heaven and earth to get you your desired results.</p>
        </div>
      </div>
    </div>
  </section>

Service Section with 3 column and 3 rows


  <section id="service">
    <center>
      <h1>SERVICE</h1>
      <p>The services provided by the lawyers are irreplaceable. The professionalism and the security that they bring into every case are supreme. They make the complete process of any legal matter efficient and stress-free. Our organization has a team of very proficient lawyers in multiple domains that covers all areas of interest of the clients. They are well versed in law and have an excellent track record. Some of the domains that we serve are mentioned below.</p>
    </center>
    <br />
    <br />
    <div class="section group">
      <div class="container" style="padding: auto 100px;">
        <div class="columns">
          <div class="col-1 col-xs-12">
          </div>
          <div class="col-3 col-xs-12">
            <amp-img src="img/icons/6139883.png" width="80" height="80">
            </amp-img>
            <h4 class="title">Corporate law</h4>
            <p class="description">Many big firms rely on the services of our lawyers in every step of business. We handle the business contracts, real estate transactions, employee-related issues, the formation of an organization, or if you are just trying to reduce the workload and lead a little stress-free life.</p>
          </div>
          <div class="col-3 col-xs-12">
            <amp-img src="img/icons/6139987.png" width="80" height="80">
            </amp-img>
            <h4 class="title">Criminal law</h4>
            <p class="description">We build trust with our clients and very calmly pay attention to the details of the case. Our team is highly specialized in this field of law and is passionately winning several cases helping those who are innocent</p>
          </div>
          <div class="col-3 col-xs-12">
            <amp-img src="img/icons/6139835.png" width="80" height="80">
            </amp-img>
            <h4 class="title">High court lawyers</h4>
            <p class="description">Our lawyers will make you feel comfortable, will carefully interpret your problem, and offer desirable solutions. They communicate very efficiently and would get you justice by putting in their best efforts.</p>
          </div>
          <div class="col-1">
          </div>
        </div>
        <div class="columns">
          <div class="col-1">
          </div>
          <div class="col-3 col-xs-12">
            <amp-img src="img/icons/6139299.png" width="80" height="80">
            </amp-img>
            <h4 class="title">Family law</h4>
            <p class="description">We have a very dynamic team of lawyers who have been practicing matrimonial or family law for several years now. They are skilled negotiators and very reasonable while giving advice</p>
          </div>
          <div class="col-3 col-xs-12">
            <amp-img src="img/icons/6139898.png" width="80" height="80">
            </amp-img>
            <h4 class="title">Legal services</h4>
            <p class="description">Contact us for legal assistance in every domain. We are always available at your service and offer assistance at every step.</p>
          </div>
          <div class="col-3 col-xs-12">
            <amp-img src="img/icons/6138663.png" width="80" height="80">
            </amp-img>
            <h4 class="title">Property lawyer</h4>
            <p class="description">Stuck in a property dispute or need advice on real estate matters, our team of property lawyers is very adept in this field of law. They offer the best solutions and make the procedure quick and efficient.</p>
          </div>
          <div class="col-1">
          </div>
        </div>
        <div class="columns">
          <div class="col-1">
          </div>
          <div class="col-6 col-xs-12">
            <h4 class="title">DRT</h4>
            <p class="description">The main objective and role of DRT is the recovery of funds from borrowers which is payable to banks and financial institutions. The Tribunals power is limited to settle cases regarding the restoration of the unpaid amount from NPAs as declared by the banks under the RBI guidelines.</p>
            <h4 class="title">Creditcard Cases</h4>
            <p class="description">This period might fluctuate starting with one Mastercard supplier then onto the next. This will in general effect your financial assessment and it will be hard for you to get supported for credits later on. Whenever you are recorded as a charge card defaulter, you become a danger for any credit commitment.</p>
          </div>
          <div class="col-4 col-xs-12">
            <amp-img src="./img/card.jfif" width="388" height="513">
            </amp-img>
          </div>
        </div>
  </section>

FAQ According

According Section


  <section id="faq">
    <div class="columns">
      <div class="column  col-12">
        <h1>FAQ</h1>
      </div>
      <div class="col-2  ">
      </div>
      <div class="col-8 ">
        <amp-accordion expand-single-section>
          <section>
            <h2>1. What type of cases does your law firm handle?</h2>
            <p>In our organization, we handle all levels of litigations. Our areas of business include corporate law, divorce law, criminal law, property law, and various other legal assistance.</p>
          </section>
          <section>
            <h2>2. How long has your firm been in business?</h2>
            <div>We have been in business long enough to gain enough clout to provide services. Our lawyers have a successful track record in their respective domains and are trusted in the industry.</div>
          </section>
          <section>
            <h2>3. Do I need to visit your offices for legal advice, or the phone calls would suffice?</h2>
            <div>It is always advisable to meet in person to interact better and establish a firm grasp of the case. In case of any inconvenience contact our offices and we set up a meeting as per your convenience.</div>
          </section>
          <section>
            <h2>4. What are the business hours to contact you?</h2>
            <div>The business hours have been provided on the website. Kindly contact us for any further details and assistance.</div>
          </section>
          <section>
            <h2>5. Do I need to book an appointment before visiting the offices?</h2>
            <div>It is always advisable to make an appointment to ensure the process and the meetings are efficient. Directly reaching the offices is also acceptable.</div>
          </section>
          <section>
            <h2>6. What are your legal fees cost on my case?</h2>
            <div>The costs of fees may vary due to multiple factors depending on the details of the case, the type of lawyer you chose, or the duration of services you might require. All the costs are communicated before the process starts.</div>
          </section>
          <section>
            <h2>7. Do you add any additional charges midway through the trails?</h2>
            <div>Our billing process is very transparent and we strive to bill a relation of trust. We do not add any costs that are not communicated beforehand. We try to make the entire process stress-free.</div>
          </section>
          <section>
            <h2>8. Who do I contact in case of any queries?</h2>
            <div>We have a team of very professional customer representatives who are working relentlessly to assist you through any issues you might have. Kindly feel free to contact them during business hours.</div>
          </section>
          <section>
            <h2>9. How long will it take for my case to get resolved?</h2>
            <div>The time for the justice to be delivered may vary greatly from case to case. Many factors decide the duration that is not controlled by us. We recommend being patient and trust us as we are giving our hundred percent to get you the desired results.</div>
          </section>
          <section>
            <h2>10. Do I have to visit the court every time with the lawyer?</h2>
            <div>No, it might not be necessary to visit the court every time. We try our best to handle the cases at our end. The majority of the cases are solved even before going to trials. In case you are required to visit the court, we will prepare you well before that.</div>
          </section>
        </amp-accordion>
      </div>
    </div>
  </section>

Contact form AMP

<section id="contact">
    <div class="container">
      <div class="columns">
        <div class="column  col-12">
          <h1>Contact</h1>
        </div>
        <div class="column  col-2">
        </div>
        <div class="column  col-lg-3 col-xs-12">
          <h4>Email:</h4>
          <p>freelegalhelpassociation@gmail.com</p>
          <h4>Chennai :</h4>
          <p>1St Floor, Sri Vidya Apartment,Flat C1, No 16, Vembuliamman Koil St, KK Nagar West,
            <br />Chennai, Tamil Nadu 600078</p>
          <h4>Coimbatore 2:</h4>
          <p>253, 254, Raj Rathna - 1st Floor , Lawley Road,
            <br />Coimbatore, Tamil Nadu 641003</p>
          <p>
            <strong>Mobile</strong>: 094433 68855</p>
        </div>
        <div class="column  col-lg-3 col-xs-12">
          <form class="sample-form" method="post" action-xhr="/documentation/examples/api/submit-form-input-text-xhr" target="_top">
            <div class="row">
              <div class="col-md-6 form-group">
                <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" required>
              </div>
              <div class="col-md-6 form-group mt-3 mt-md-0">
                <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" required>
              </div>
            </div>
            <div class="form-group mt-3">
              <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" required>
            </div>
            <div class="form-group mt-3">
              <textarea class="form-control" name="message" rows="5" placeholder="Message" required>
              </textarea>
            </div>
            <input type="submit" value="Subscribe">
            <div submit-success>
              <template type="amp-mustache">Success! Thanks {{name}} for trying the <code>amp-form</code> demo! Try to insert the word "error" as a name input in the form to see how <code>amp-form</code> handles errors.</template>
            </div>
            <div submit-error>
              <template type="amp-mustache">Error! Thanks {{name}} for trying the <code>amp-form</code> demo with an error response.</template>
            </div>
          </form>
        </div>
      </div>
  </section>
  <footer style="background: #e6a500; padding: 2em;">
    <center>
      <a href="https://venktertech.com" rel="nofollow" title="venkter" target="_blank" style="color:#fff; text-decoration: none;">Develped with VENKTER</a>
    </center>
  </footer>
</body>

</html>

Website Demo : http://freelegaladvices.co.in/

Category