CSS Business Card

CSS Business Card - Sebelumnya selamat melaksanakan ibadah puasa bagi teman2 yang menjalankannya, dan mohon maaf lahir bathin.

Setelah sebelumnya cukup lumayan lama gak update sebuah postingan kali ini JPB akan mengawali dengan pembuatan sebuah kartunama atau business name card, yang tentunya dalam hal ini membuat bukan dengan sebenarnya melainkan dengan CSS dan HTML, nah untuk freview hasil jadi kurang lebih tampilannya seperti pada gambar dibawah ini :

LIHAT DEMONYA

Nah untuk cara pembuatannya sobat hanya perlu merangkai kode CSS dan HTML dan mengemasnya hehhehhe,
Untuk panduan pemasangan widget silakan klik DISINI

UNTUK KODE HTML NYA

 <div id="efect_warna"></div>
<div id="kartu">
  <img src="DIISI DENGAN LINK GAMBAR SOBAT"/>
  <h2>NAMA SOBAT MUNGKIN</h2>
  <p>JUDUL CONTEN SOBAT</p> 
  <p>CONTEN SOBAT</p>
  <p>CONTEN SOBAT ;)</p>
  <span class="left bottom">+62-8572394-XXXX </span>
  <span class="right bottom">Adress: Sukabumi - Jabar.</span>
</div>

UNTUK KODE CSS NYA

 .left {
  left: 25px;
}

.right {
  right: 25px;
}

.center {
  text-align: center;
}

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

#efect_warna {
  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(#DAB046 20%, #D73B25 20%, #D73B25 40%, #C71B25 40%, #C71B25 60%, #961A39 60%, #961A39 80%, #601035 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(#DAB046 20%, #D73B25 20%, #D73B25 40%, #C71B25 40%, #C71B25 60%, #961A39 60%, #961A39 80%, #601035 80%);
  margin: 0 auto;
  margin-top: 100px;
  width: 100%;
  height: 150px;
}

#efect_warna: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;
}

#kartu {
  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;
}

#kartu img {
  width: 150px;
  float: left;
  padding: 5px;
  border-radius: 5px;
  margin-right: 20px;
  -webkit-filter: sepia(1);
  -moz-filter: sepia(1);
  filter: sepia(1);
}

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

#kartu p {
  font-family: courier;
  color: #555;
  font-size: 13px;
}

#kartu span {
  font-family: courier;
}