Scheda profilo

<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<div class="card">
 <img src="http://www.puntoinformaticofree.it/pagine_tutorial/avatar/uomo_avatar.jpeg" alt="John" style="width:100%">
 <h1>John Ford</h1>
 <p class="title">Ricercatore</p>
 <br>
 <p>Harvard University</p>
 <br>
 <a href="#"><i class="fa fa-dribbble"></i></a>
 <a href="#"><i class="fa fa-twitter"></i></a>
 <a href="#"><i class="fa fa-linkedin"></i></a>
 <a href="#"><i class="fa fa-facebook"></i></a>
 <br>
 <br>
 <p><button>Contact</button></p>
</div>

.card {
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 max-width: 300px;
 margin: auto;
 text-align: center;
}


.title {
 color: grey;
 font-size: 18px;
}

button {
 border: none;
 outline: 0;
 display: inline-block;
 padding: 8px;
 color: white;
 background-color: #000;
 text-align: center;
 cursor: pointer;
 width: 100%;
 font-size: 18px;
}

a {
 text-decoration: none;
 font-size: 22px;
 color: black;
}

button:hover, a:hover {
 opacity: 0.7;
}