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

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

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






Send Project Report Request


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 

 

More Tutorials

Web Technology Tutorials in Hindi

Web Technology Tutorials in Hindi

Read More
Diploma engineering tutorial for polytechnic collage

Diploma Engineering Tutorial

Read More
Final Year Projects for Computer Science with Source Code

Final Year Projects for Computer Science with Source Code

Read More