fcs03-card01

by velmurugansp

HTML

<div class="card">
  <div class="card-header">
    <img src="https://images.unsplash.com/photo-1500964757637-c85e8a162699?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8YmVhdXRpZnVsJTIwbGFuZHNjYXBlfGVufDB8fDB8fHww&w=1000&q=80" />
  </div>
  <div class="card-body">
    <img src="https://cdn-icons-png.flaticon.com/512/168/168724.png" />
    <h2>PERSON ONE</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus odio scelerisque ligula rutrum pellentesque. Donec tempus feugiat mi eget euismod. Curabitur non nisl vitae enim varius accumsan ut eu nunc. Phasellus mollis mattis arcu sit amet pharetra. Donec porta lorem ac mi dapibus sagittis. Suspendisse ante tellus</p>
  </div>
</div>

CSS

*{
  margin: 0;
  padding: 0;
  font-size: 100%;
}
body{
  background: #ccc;
}
.card{
  width: 400px;
  background: #fff;
  margin: 30px;
  border-radius: 12px 12px 12px 12px; /* New */
  box-shadow: #111 0 0 10px; /* New */
}
.card-header img{
  width: 100%;
  border-radius: 12px 12px 0 0; /* New */
}
.card-body{
  text-align: center;
  padding-left: 30px;
  padding-right: 30px;
  margin-top: -75px; /* Slightly New */
}
.card-body img{
  width: 150px;
  border: solid 4px #fff;
  border-radius: 50%; /* New */
}
.card-body h2{
  margin-top: 30px;
  margin-bottom: 30px;
}
.card-body p{
  padding-bottom: 60px;
}