Tutorial Membuat Profil Card Dengan Css dan Html Keren

Halo semua balik lagi nih sama calon hacker, udah lama gak ngepost. oke kali ini saya akan memberikan Tutorial Membuat Profil Card Dengan Css dan Html Keren ala calon hacker, simak yuk! 

Berikut  Code Profil card

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
}
.container {
padding: 0 16px;
}
.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;
}
</style>
<h1 style="text-align:center">Tutorial Membuat Profil Card Dengan Css dan Html Keren</h1>
<div class="card">
<img src="https://pbs.twimg.com/profile_images/825158502435819520/Pg3MrQ6k_400x400.jpg" alt="Ini foto saya" style="width:100%">
<div class="container">
<h1>Nurul jr</h1>
<p class="title">Developer Web</p>
<p>Sosial :</p>
<a href="link facebook kamu"><i class="fa fa-twitter"></i></a>
<a href="Link facebook kamu"><i class="fa fa-facebook"></i></a>
<p><a href='link tujuan'><button> My site</button></a></p>
<p><font size='2' ><a href='https://calonhacker-id.blogspot.co.id/2017/08/tutorial-membuat-profil-card-dengan-css.html'>Get This Widget</font></a></p>
</div>
</div>

Keterangan :
Warna  Hijau kalian bisa menggantinya dengan link source gambar kalian.
Warna  Merah kalian bisa menggantinya Sesuai Keinginan kalian.
Warna  Biru kalian bisa menggantinya dengan link yang ingin kalian tuju.

Nah bagaimana berhasil nggak? Jangan lupa like and share ya guys agar postingan ini bermanfaat bagi yang membacanya:)