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

We had made the slider in our previous angular laravel  project tutorial, in this angular project tutorial we will create a service block at home page

To create Service Block on Home Page you must open the following file

  1. HomeConponent.html

  2. HomeComponent.css

HomeComponent.html

  <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>

 

HomeComponent.css

.service_block {

    width: 100%;

    text-align: center;

}

.service_image >img {

    border-radius: 17px;

}

 

HomeComponent.html File 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>

 

HomeComponent.css File Complete Code

.carousel {

    position: relative;

    margin-left: -184px !important;

}

.slider_img{

    width: 100%; height: 400px;

}

.service_block {

    width: 100%;

    text-align: center;

}

.service_image >img {

    border-radius: 17px;

}

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

 

Tutorial Topics