mycontrolpanel/src/app/home-page/home-page.component.html

<carousel>
  <slide>
    <img src="../../assets/images/home-page/custo2.png" alt="first slide" style="display: block; width: 100%;">
    <div class="carousel-caption d-none d-md-block">
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>    
  </slide>
  <slide>
    <img src="../../assets/images/home-page/home.jpg" alt="second slide" style="display: block; width: 100%;">
    <div class="carousel-caption d-none d-md-block">
      <h3>Second slide label</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </slide>
  <slide>
    <img src="../../assets/images/home-page/news2.jpg" alt="third slide" style="display: block; width: 100%;">
    <div class="carousel-caption d-none d-md-block">
      <h3>Third slide label</h3>
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
    </div>
  </slide>
  <slide>
    <img src="../../assets/images/home-page/network3.png" alt="fourth slide" style="display: block; width: 100%;">
    <div class="carousel-caption d-none d-md-block">
      <h3>Fourth slide label</h3>
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
    </div>
  </slide>
</carousel>
<alert type="info" style="text-align: center">
  <h4 class="alert-heading">Still not registered?</h4>
  <p>Sign in now to access to your configuration panel</p>
  <button type="button" class="btn btn-primary btn-primary">
    Sign in !
    <i class="fas fa-pencil-alt"></i>
  </button>
</alert>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6">
      <!--  <span class="glyphicon glyphicon-globe logo slideanim"></span>-->
      <img src="../../assets/images/home-page/logoNew.png" class="img-rounded img-responsive"
        alt="MyMirror">
    </div>
    <div class="col-sm-5 offset-1">
      <h2>MIOTech</h2>
      <br>
      <h4>
        <strong>Histoire :</strong>
        bla bla
      </h4>
      <br>
      <h4>
        <!--  <strong><fmt:message key="home.MyMirrorObjectifO"/> :</strong> <fmt:message key="home.MyMirrorObjectif"/>-->
      </h4>
    </div>
  </div>
</div>

<div class="container-fluid bg-grey">
  <div class="row">
    <div class="col-sm-8">
      <h2>
        Plan
      </h2>
      <br>
      <h4>
        Plan
      </h4>
      <br>
      <p>
        Plan
      </p>
    </div>
    <div class="col-sm-3">
      <span style="font-size: 10em; color: #3366ff;">
        <i class="fas fa-check-square"></i>
      </span>
    </div>
  </div>
</div>

<div class="container">
  <div class="row justify-content-around">
    <div class="col-3 ">
      <div class="card" style="border: solid 4px #f5f5f5;" appBorderCard>
        <div class="card-body">
          <h5 class="card-title">HUBERT</h5>
          <img class="card-img" src="../../assets/images/home-page/Hubert.jpg" style="margin-bottom: 2em">
          <h6 class="card-subtitle mb-2 text-muted">Ce beau goss</h6>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <ul class="social-network social-circle" style="text-align : center">
            <li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
            <li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
            <li><a href="#" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="col-3">
      <div class="card" style="border: solid 4px #f5f5f5;" appBorderCard>
        <div class="card-body">
          <h5 class="card-title">FRANSOLET</h5>
          <img class="card-img" src="../../assets/images/home-page/Thomas.jpg" style="margin-bottom: 2em">
          <h6 class="card-subtitle mb-2 text-muted">Cette gribouille</h6>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <ul class="social-network social-circle">
            <li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
            <li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
            <li><a href="#" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="col-3" > 
      <div class="card" style="border: solid 4px #f5f5f5;" appBorderCard>
        <div class="card-body">
          <h5 class="card-title">MICHEL</h5>
          <img class="card-img" src="../../assets/images/home-page/Michel2.jpg" style="margin-bottom: 2em">
          <h6 class="card-subtitle mb-2 text-muted">Ce poseur</h6>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <ul class="social-network social-circle">
            <li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
            <li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
            <li><a href="#" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>