  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<!-- <link rel="stylesheet" href="../assets/css/animate.css">
<h1 class="text-center mt-5">About Us</h1>
<div class=" border-bottom border-light " style="margin-left: 550px; margin-right: 550px;"></div>
<div class="row">
  <div class="col-md-6 " style="float : center;" align="center" id="one">
    <img src="../images/pa.png" class="m-5 rounded-circle border-left border-primary" alt="" >
  </div>
  <div class="col-md-1 border-left border-primary" style="margin-bottom: 40px; margin-top: 40px;"></div>
  <div class="col-md-5">
    <div id="manager">
    <div class=" mt-4 "><p class="pl-3 pr-3" align="justify" >
    <table class="table table-borderless flipInY animated">
    <tr>
    <th>Nama<span style="float: right;">:</span></th>
    <td>Mulki Anaz Aliza S.Kom</td>
    </tr>
    <tr>
    <th>Tempat Tanggal Lahir<span style="float: right;">:</span></th>
    <td>Mulki Anaz Aliza S.Kom</td>
    </tr>
    <tr>
    <th>Jabatan<span style="float: right;">:</span></th>
    <td> Fullstack Developer </td>
    </tr>
    <tr>
    <th>Alamat<span style="float: right;">:</span></th>
    <td>Garut</td>
    </tr>

    
    </table>

    </p></div>
    </div>
</div>
</div>
<div class="row">
<div class="col-md-6">
    <div id="nasep" style="display : none;">
    <div class="mt-4 ml-3 pl-3"><p class="pl-3 pr-3" align="justify" >
    <table class="table table-borderless flipInY animated">
    <tr>
    <th >Nama<span style="float: right;">:</span></th>
    <td>Nasep Ependi</td>
    </tr>
    <tr>
    <th >Tempat Tanggal Lahir<span style="float: right;">:</span></th>
    <td>Nasep Ependi</td>
    </tr>
    <tr>
    <th >Jabatan<span style="float: right;">:</span></th>
    <td> Analysis System </td>
    </tr>
    <tr>
    <th >Alamat <span style="float: right;">:</span></th>
    <td> Kp.Babakan Hantap </td>
    </tr>

    
    </table>

    </p></div>
  </div>
</div>
<div class="col-md-1 border-left border-primary" style="margin-bottom: 40px; margin-top: 40px;"></div>
  <div class="col-md-5" style="float : center;" align="center">
    <img src="../images/eek.png" class="m-5 rounded-circle border-right border-primary" alt="" id="three">
  </div>
</div>
<div class="row">
  <div class="col-md-6" style="float : center;" align="center">
    <img src="../images/dli.png " class="m-5 rounded-circle border-left border-primary" alt="" id="two">
  </div>
  <div class="col-md-1 border-left border-primary" style="margin-bottom: 40px; margin-top: 40px;"></div>
  <div class="col-md-5">
    <div id="aldi" style="display : none;">
    <div class=" mt-4"><p class="pl-3 pr-3" align="justify" >
    <table class="table table-borderless flipInY animated">
    <tr>
    <th>Nama<span style="float: right;">:</span></th>
    <td>Aldi Yunan Anwari</td>
    </tr>
    <tr>
    <th>Tempat Tanggal Lahir<span style="float: right;">:</span></th>
    <td> 04 Februari 2003 </td>
    </tr>
    <tr>
    <th>Jabatan<span style="float: right;">:</span></th>
    <td> Back End Developer </td>
    </tr>
    <tr>
    <th>Alamat<span style="float: right;">:</span></th>
    <td>Kp.Rantun</td>
    </tr>

    
    </table>

    </p></div>
</div>
  </div>
</div>
<div class="row">
<div class="col-md-6">
    <div id="4" style="display : none;">
    <div class="mt-5 ml-3 pl-3 mb-5"><p class="pl-3 pr-3" align="justify" >
    <table class="table table-borderless flipInY animated mb-5">
    <tr>
    <th >Nama<span style="float: right;">:</span></th>
    <td>Fadlan Abdul Rojak</td>
    </tr>
    <tr>
    <th >Tempat Tanggal Lahir<span style="float: right;">:</span></th>
    <td>Garut, 09 Agustus 2003</td>
    </tr>
    <tr>
    <th >Jabatan<span style="float: right;">:</span></th>
    <td>Fron-End Developer</td>
    </tr>
    <tr>
    <th >Alamat <span style="float: right;">:</span></th>
    <td>Bongkor</td>
    </tr>

    
    </table>

    </p></div>
  </div>
</div> 
  <div class="col-md-1 border-left border-primary" style="margin-bottom: 50px; margin-top: 50px;"></div>
  <div class="col-md-5 mb-5" style="float : center; " align="center" id="img">
    <img src="../images/dlan1.png" class="m-5 rounded-circle border-right border-primary" height="100" width="200" alt="" >
  </div>
</div> -->
<div class="container">
  <div class="row">
    <div class="col-md-12 mb-3">
    <br>
      <h2 align='center'> About Us</h2>
      <hr>
      <center>
      <img src="../images/pa.png" class="m-2 rounded-circle" alt="" >
        <h4> Mulki Anaz Aliza S.Kom </h4>
        <h5 class="small font-weight-bold"> Fullstack Developer </h5>
      <div class="row justify-content-center">
          <span class="fab fa-facebook text-primary fa-2x fa-fw"></span>
          <span class="fab fa-twitter-square rounded text-info fa-2x fa-fw"></span>
          <span class="fab fa-instagram text-danger fa-2x fa-fw"></span>
      </div>
      </center>
    </div>
    <br>
  <div class="col-lg-4 col-md-12 mb-5 col-sm-12">
  <center>
    <img src="../images/eek.png" height="100%" width="60%" class=" rounded-circle" alt="" >
      <h4 class='mt-3'> Nasep Ependi </h4>
      <h5 class="small font-weight-bold"> Analysis System </h5>
      <div class="row justify-content-center">
          <span class="fab fa-facebook text-primary fa-2x fa-fw"></span>
          <span class="fab fa-twitter-square rounded text-info fa-2x fa-fw"></span>
          <span class="fab fa-instagram text-danger fa-2x fa-fw"></span>
      </div>
  </center>
  </div>
  <div class="col-lg-4 col-md-12 mb-5 col-sm-12">
  <center>
    <img src="../images/dli.png" height="100%" width="60%" class=" rounded-circle" alt="" >
      <h4 class='mt-3'> Aldi Yunan Anwari </h4>
      <h5 class="small font-weight-bold"> Back End Developer </h5>
            <div class="row justify-content-center">
          <span class="fab fa-facebook text-primary fa-2x fa-fw"></span>
          <span class="fab fa-twitter-square rounded text-info fa-2x fa-fw"></span>
          <span class="fab fa-instagram text-danger fa-2x fa-fw"></span>
      </div>

  </center>
  </div>

  <div class="col-lg-4 col-md-12 col-sm-12 mb-5">
  <center>
    <img src="../images/dlan1.png" height="100%" width="60%" class="rounded-circle" alt="" >
      <h4 class='mt-3'> Fadlan Abdul Rojak </h4>
      <h5 class="small font-weight-bold"> Front End Developer </h5>
      <div class="row justify-content-center">
          <span class="fab fa-facebook text-primary fa-2x fa-fw"></span>
          <span class="fab fa-twitter-square rounded text-info fa-2x fa-fw"></span>
          <span class="fab fa-instagram text-danger fa-2x fa-fw"></span>
      </div>
  </center>
  </div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("#img").click(function(){
    $("#4").fadeToggle(1000);
    $("#nasep").fadeOut(1000);
    $("#aldi").fadeOut(1000);
    $("#manager").fadeOut(1000);
  });
});
</script>
<script> 
$(document).ready(function(){
  $("#one").click(function(){
    $("#manager").fadeToggle(1000);
    $("#nasep").fadeOut(1000);
    $("#aldi").fadeOut(1000);
    $("#4").fadeOut(1000);
  });
});
</script>

<script> 
$(document).ready(function(){
  $("#two").click(function(){
    $("#aldi").fadeToggle(1000);
    $("#nasep").fadeOut(1000);
    $("#manager").fadeOut(1000);
    $("#4").fadeOut(1000);
  });
});
</script>
<script> 
$(document).ready(function(){
  $("#three").click(function(){
    $("#nasep").fadeToggle(1000);
    $("#manager").fadeOut(1000);
    $("#4").fadeOut(1000);
    $("#aldi").fadeOut(1000);
  });
});
</script>
