How To Create a Card (Testing)

1<div class="card">
2  <img src="img_avatar.png" alt="Avatar" style="width:100%">
3  <div class="container">
4    <h4><b>John Doe</b></h4>
5    <p>Architect & Engineer</p>
6  </div>
7</div>

1.card {
2  /* Add shadows to create the "card" effect */
3  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
4  transition: 0.3s;
5}
6
7/* On mouse-over, add a deeper shadow */
8.card:hover {
9  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
10}
11
12/* Add some padding inside the card container */
13.container {
14  padding: 2px 16px;
15}

1.card {
2  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
3  transition: 0.3s;
4  border-radius: 5px; /* 5px rounded corners */
5}
6
7/* Add rounded corners to the top left and the top right corner of the image */
8img {
9  border-radius: 5px 5px 0 0;
10}