Scheda profilo | Guida creare con i CSS

Scheda profilo


John

John Ford

Ricercatore


Harvard University






Codice HTML

<div class="card">
 <img src="https://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;
}