Untitled


<style>


#jacob {


    position:absolute;top:123px;
    position:absolute;left: 196px;
    border-radius: 50%;
    width: 42px;
    height: 42px;


}


#jacob {


    opacity: 0;
    transition: opacity 200ms ease-in-out;


}

#jacob:hover {


    opacity: 1;

}


.jacobpic {

    transition: transform 300ms ease-in-out;


}

.jacobpic:hover {


    -ms-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}


.tablewidth {

width:50%;
border: 1px solid lightgray;
margin:20px;


}


.mark {

    opacity:0;
    transition: opacity 200ms ease-in-out;
    margin:20px;
}

.mark:hover {

    opacity:1;


}

.mark {


    border-radius: 50%;
    width:45px;
    height:45px;
    display:inline;
    transition: transform 400ms ease-in-out 100ms;

    position:absolute;top:54px;
    position:absolute;left:175px;


}

.mark:hover {

   transform: scale(1.05);
   -webkit-transform: scale(1.05);
   -ms-transform: scale (1.05);

}


.tableformark {

    border: 2px solid lightgray;
    border-radius : 5px;
    margin: 0 0;
    width:80%;

}
.headdataformark {

    color:   #ffcc33;


}

.headdataformark {

    border:  1px solid lightgray;

}

.profilepic {

    border-radius:50%;
    width:100px;
    height:100px;
    margin: 0 40%;
    }

.profilepic {


    opacity: 0.3;
    transition: opacity 400ms ease-in-out;


}


.profilepic:hover {

    opacity: 1;

    }


.profilepic {

    transition: transform 2s ease-in-out;

}


.profilepic:hover {
     -webkit-transform: rotate(360deg);
     -ms-transform: rotate(360deg);
     transform: rotate(360deg);

}


</style>


</head>


<body>
<div class="tablewidth">
<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
</div>


<!-- Button trigger modal -->

 <img id="jacob" src="../lect1.html/images/man.png" data-toggle="modal" data-target="#exampleModalCenter"/>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Employee's Profile</h5>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>

      </div>
      <div class="modal-body">
      <img   class="profilepic"  src="../lect1.html/images/boy.png"/>


      <hr />
       <table class="table table-dark" class="tableforjacob">
       <tr  class="tableforjacob">
       <th class="headdataforjacob" class="tableforjacob" >Name</th>
       <th class="headdataforjacob" class="tableforjacob" >Age</th>
       <th class="headdataforjacob" class="tableforjacob" >Job</th>
       </tr>

       <tr class="tableforjacob">
       <td  class="tableforjacob">Jacob Thornton</td>
       <td  class="tableforjacob">35</td>
       <td class="tableforjacob">Sofrware Engineer</td>
       </tr>
       </table>
        <h5>Quick Brief</h5>
        <hr />
        <p class="jacobpara">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s

</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


<!-- Button trigger modal -->

 <img class="mark" src="../lect1.html/images/boy.png" data-toggle="modal" data-target="#exampleModalCenter"/>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Employee's Profile</h5>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>

      </div>
      <div class="modal-body">
       <img   class="profilepic"  src="../lect1.html/images/boy.png"/>
      <hr />
       <table class="table table-dark" class="tableformark">
       <tr  class="tableformark">
       <th class="headdataformark" class="tableformark" >Name</th>
       <th class="headdataformark" class="tableformark" >Age</th>
       <th class="headdataformark" class="tableformark" >Job</th>
       </tr>

       <tr class="tableformark">
       <td  class="tableformark">Mark Otto</td>
       <td  class="tableformark">30</td>
       <td class="tableformark">Web developer</td>
       </tr>
       </table>
        <h5>Quick Brief</h5>
        <hr />
        <p class="markpara">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s

</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>