Scheda profilo






Codice HTML

<!-- 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>



Codice CSS

.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; }