Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (home page service section angular 8 project ) Part 16

We had made the Service block in our previous angular laravel  project tutorial, in this angular project tutorial we will create a contact section at home page.in contact section we will create two block 

  • Google Map Section 
  • Contact Form 

To create Contact Section on Home Page you must open the following file

  1. HomeConponent.htm

 

HomeComponent.html 

<div class="container">

  <div class="row mt-4">
      <div class="col-sm-6">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3667.7553145456345!2d75.7629231144451!3d23.179128916276408!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x396375255b13bac9%3A0xb240786696dde6ed!2smy%20project%20hd!5e0!3m2!1sen!2sin!4v1587295364997!5m2!1sen!2sin" width="500" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
      </div>
      <div class="col-sm-6">
        <div class="row">
          <div class="col-sm-12">
            <h4 class="text-center">Contect Form</h4>
          </div>
          <div class="col-sm-12">
            <div class="form-group">
              <label>Enter Name</label>
              <input type="text"  class="form-control">
            </div>
            <div class="form-group">
              <label>Enter E-Mail</label>
              <input type="text"  class="form-control">
            </div>
            <div class="form-group">
              <label>Enter Mobile No</label>
              <input type="text"  class="form-control">
            </div>
            <div class="form-group">
              <label>Enter Message</label>
              <textarea  class="form-control"></textarea>
            </div>
            <div class="form-group">
              <button class="btn btn-info">Send</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

The process of integrating the Google Map to Angular project is described in the video.

HomeComponent.html Complete Code

<div id="demo" class="carousel slide" data-ride="carousel">

    <!-- Indicators -->
    <ul class="carousel-indicators">
      <li data-target="#demo" data-slide-to="0" class="active"></li>
      <li data-target="#demo" data-slide-to="1"></li>
      <li data-target="#demo" data-slide-to="2"></li>
    </ul>
    
    <!-- The slideshow -->
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="slider_img" src="{{ base_url }}public/images/slider/slide1.jpeg" alt="Slide 1" >
      </div>
      <div class="carousel-item">
        <img class="slider_img" src="{{ base_url }}public/images/slider/slide2.jpg" alt="Slide 2" >
      </div>
      <div class="carousel-item">
        <img class="slider_img" src="{{ base_url }}public/images/slider/slide3.jpeg" alt="Slide 3" >
      </div>
    </div>
    
    <!-- Left and right controls -->
    <a class="carousel-control-prev" href="#demo" data-slide="prev">
      <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#demo" data-slide="next">
      <span class="carousel-control-next-icon"></span>
    </a>
  </div>
  <div class="container">
  <div class="row mt-4">
    <div class="col-3">
      <div class="service_block">
        <div class="service_image">
          <img src="https://via.placeholder.com/50" alt="image">
        </div>
        <div class="service_title">
          <h5>Service Name 1</h5>
        </div>
        <div class="service_description">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
        </div>
      </div>
    </div>
    <div class="col-1"></div>
    <div class="col-3">
      <div class="service_block">
        <div class="service_image">
          <img src="https://via.placeholder.com/50" alt="image">
        </div>
        <div class="service_title">
          <h5>Service Name 1</h5>
        </div>
        <div class="service_description">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
        </div>
      </div>
    </div>
    <div class="col-1"></div>
    <div class="col-3">
      <div class="service_block">
        <div class="service_image">
          <img src="https://via.placeholder.com/50" alt="image">
        </div>
        <div class="service_title">
          <h5>Service Name 1</h5>
        </div>
        <div class="service_description">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
        </div>
      </div>
    </div>
  </div>
   
    <div class="row mt-4">
      <div class="col-sm-6">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3667.7553145456345!2d75.7629231144451!3d23.179128916276408!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x396375255b13bac9%3A0xb240786696dde6ed!2smy%20project%20hd!5e0!3m2!1sen!2sin!4v1587295364997!5m2!1sen!2sin" width="500" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
      </div>
      <div class="col-sm-6">
        <div class="row">
          <div class="col-sm-12">
            <h4 class="text-center">Contect Form</h4>
          </div>
          <div class="col-sm-12">
            <div class="form-group">
              <label>Enter Name</label>
              <input type="text"  class="form-control">
            </div>
            <div class="form-group">
              <label>Enter E-Mail</label>
              <input type="text"  class="form-control">
            </div>
            <div class="form-group">
              <label>Enter Mobile No</label>
              <input type="text"  class="form-control">
            </div>
            <div class="form-group">
              <label>Enter Message</label>
              <textarea  class="form-control"></textarea>
            </div>
            <div class="form-group">
              <button class="btn btn-info">Send</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

After use this step you can use ng server command for run your angular project

 

 

Tutorial Topics