mycontrolpanel/src/app/control-panel/home/home.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>Praeseddnt 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" (click)="OpenSignInModal()">
    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-6">
      <div class="card" style="border: solid 2px #f5f5f5;" appBorderCard>
        <div class="card-body">
          <h5 class="card-title">FRANSOLET</h5>
          <div style="justify-content: center;">
            <img class="card-img" src="../../assets/images/home-page/Thomas.jpg" style="width: 50%; margin-bottom: 2em">
          </div>
          <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-6" > 
      <div class="card" style="border: solid 2px #f5f5f5;" appBorderCard>
        <div class="card-body">
          <h5 class="card-title">MICHEL</h5>
          <img class="card-img" src="../../assets/images/home-page/Michel2.jpg" style="width: 50%;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>

<div id="contact" class="container-fluid bg-grey">
  <h2 class="text-center">
    Contact
  </h2>
  <div class="row">
    <div class="col-5">
      <p>
        Contact
      </p>
      <p>
          
        <span style="font-size: 1em; color: #3366ff;">
            <i class="fas fa-map-marked"></i>
        </span>
        Adresse
      </p>
      <p>
        <span style="font-size: 1em; color: #3366ff;">
            <i class="fas fa-phone"></i>
        </span>
        Numéro
      </p>
      <p>
        <span style="font-size: 1em; color: #3366ff;">
            <i class="fas fa-at"></i>
        </span>
        e-mail
      </p>
    </div>
    <div class="col-7 slideanim">
      <div class="row">
        <div class="col-sm-6 form-group">
          <input class="form-control" id="name" name="name"
            placeholder="Numéro" type="text"
            required>
        </div>
        <div class="col-sm-6 form-group">
          <input class="form-control" id="email" name="email"
            placeholder="e-mail" type="email"
            required>
        </div>
      </div>
      <textarea class="form-control" id="comments" name="comments"
        placeholder="Commentaire" rows="5"></textarea>
      <br>
      <div class="row">
        <div class="col-sm-12 form-group">
          <button class="btn btn-primary btn-primary" type="submit">
            Envoyer
            <i class="far fa-paper-plane"></i>
          </button>
          
        </div>
      </div>
    </div>
  </div>
</div>