Mys2010 on Codepen

Memasang kode Css3 Card Design 
Untuk menerapkan kode tersebut Langkah awal
Login ke akun blog klik tombol blog baru   buat satubuah link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut ini
Get Blank Template  edit background warna sesuai keinginan dan klik simpan selesai

Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

body {
  margin: 0 auto;
  padding: 0;
  background: #222;
}

.left {
  left: 25px;
}

.right {
  right: 25px;
}

.center {
  text-align: center;
}

.bottom {
  position: absolute;
  bottom: 25px;
}

#gradient {
  background: #999955;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.2, #DAB046), color-stop(0.2, #D73B25), color-stop(0.4, #D73B25), color-stop(0.4, #C71B25), color-stop(0.6, #C71B25), color-stop(0.6, #961A39), color-stop(0.8, #961A39), color-stop(0.8, #601035));
  background-image: -webkit-linear-gradient(#CCC 20%, #CCC 20%, #CCC 40%, #CCC 40%, #CCC 60%, #961A39 60%, #CCC 80%, #CCC 80%);
  background-image: -moz-linear-gradient(#DAB046 20%, #D73B25 20%, #D73B25 40%, #C71B25 40%, #C71B25 60%, #961A39 60%, #961A39 80%, #601035 80%);
  background-image: -o-linear-gradient(#DAB046 20%, #D73B25 20%, #D73B25 40%, #C71B25 40%, #C71B25 60%, #961A39 60%, #961A39 80%, #601035 80%);
  background-image: linear-gradient(#CCC 20%, #333 20%, #333 40%, #CCC 40%, #CCC 60%, #333 60%, #333 80%, #CCC 80%);
  margin: 0 auto;
  margin-top: 100px;
  width: 100%;
  height: 150px;
}

#gradient:after {
  content: "";
  position: absolute;
  background: #E9E2D0;
  left: 50%;
  margin-top: -67.5px;
  margin-left: -270px;
  padding-left: 20px;
  border-radius: 5px;
  width: 520px;
  height: 275px;
  z-index: -1;
}

#card {
  position: absolute;
  width: 450px;
  height: 225px;
  padding: 25px;
  padding-top: 0;
  padding-bottom: 0;
  left: 50%;
  top: 67.5px;
  margin-left: -250px;
  background: #E9E2D0;
  box-shadow: 0 0 5px black;
  box-shadow: -20px 0 35px -25px black, 20px 0 35px -25px black;
  z-index: 5;
}

#card img {
  width:125px;
  height:125px;
  float: left;
  border-radius: 0px;
  margin-right: 20px;
  -webkit-filter: sepia(1);
  -moz-filter: sepia(1);
  filter: sepia(1);
  border:solid 2px #ccc;
}

#card h2 {
  font-family: courier;
  color: #333;
  margin: 0 auto;
  padding: 0;
  font-size: 15pt;
}

#card p {
  font-family: courier;
  color: #555;
  font-size: 12px;
}

#card span {
  font-family: courier;
}

<div id="gradient"></div>
<div id="card">
  <img src="https://Link Gambar.jpg"/>
  <h2>Your Text..</h2>
  <p> Your Text.</p> 
  <p> Your Text.</p>
  <p> Your Text. ;)</p>
  <span class="left bottom">tel: 530 283 ****</span>
  <span class="right bottom">Your Text</span>
</div>

Penjelasan :
Edit code warna tambahkan teks serta link gambar sesuai kinginan

Edited by. Myscript2010
Sources by. Nuri Özdoğan on Codepen

DEMOSHOW