Halaman Bussines Card  adalah Halaman informasi bisnis tentang perusahaan atau individu mengenai Anda. dan kali ini Blog Mas-Yudha akan berbagi artikel tentang html dan css lagi yaitu  Membuat Halaman Bussines Card Simpel dan Keren.

membuat halaman business card simple dan keren


Demo
click to view
 Langsung saja masuk ke pengcodingan CSS dan HTMLnya :
 @import url(http://fonts.googleapis.com/css?family=Old+Standard+TT:400,400italic,700);

@import url(http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900);

@import url(http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css);

::selection {

  color: #fff;

  background: #2a2b39;

}



::-moz-selection {

  color: #fff;

  background: #2a2b39;

}



body, html {

  font-family: 'Raleway', sans-serif;

  background-image: url(http://imgh.us/bg_1.svg);

  -webkit-background-size: cover;

  -moz-background-size: cover;

  background-size: cover;

  margin: 0;

  padding: 0;

  width: 100%;

  height: 100%;

  overflow: hidden;

  z-index: 9;

}



p {

  padding: 0;

  margin: 0;

  display: inline-block;

}



a {

  color: #2a2b39;

  text-decoration: none;

  -moz-transition: all 0.2s ease-in-out;

  -o-transition: all 0.2s ease-in-out;

  -webkit-transition: all 0.2s ease-in-out;

  transition: all 0.2s ease-in-out;

}

a:hover {

  color: #6acd79;

}



.bussinesscard {

  height: 320px;

  width: 427px;

  overflow: hidden;

  box-shadow: 0px 0px 43px -10px black;

  position: absolute;

  left: 50%;

  top: 50%;

  -moz-transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  -webkit-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

}

.bussinesscard .flip {

  -moz-transition: all 0.5s ease;

  -o-transition: all 0.5s ease;

  -webkit-transition: all 0.5s ease;

  transition: all 0.5s ease;

}

.bussinesscard .front {

  z-index: 11;

  width: 100%;

  position: absolute;

  height: 100%;

  background: #fff;

  box-shadow: 0px 0px 33px -1px rgba(0, 0, 0, 0.45);

  -moz-transform: scale(1, 1);

  -ms-transform: scale(1, 1);

  -webkit-transform: scale(1, 1);

  transform: scale(1, 1);

  -moz-transition: all 0.6s ease;

  -o-transition: all 0.6s ease;

  -webkit-transition: all 0.6s ease;

  transition: all 0.6s ease;

}

.bussinesscard .front .top {

  height: 50%;

  background: #2a2b39;

}

.bussinesscard .front .top:after {

  position: absolute;

  content: '';

  pointer-events: none;

}

.bussinesscard .front .top:after {

  left: 50%;

  width: 2em;

  height: 2em;

  -moz-transform: translateX(-50%) rotate(45deg);

  -ms-transform: translateX(-50%) rotate(45deg);

  -webkit-transform: translateX(-50%) rotate(45deg);

  transform: translateX(-50%) rotate(45deg);

  bottom: 9em;

  z-index: 10;

  background: inherit;

}

.bussinesscard .front .top .logo {

  display: inline-block;

  background: #6acd79;

  color: #fff;

  z-index: 11;

  padding: .16em;

  border: 8px solid #fff;

  position: relative;

  pointer-events: none;

  -moz-transform: translateX(-50%);

  -ms-transform: translateX(-50%);

  -webkit-transform: translateX(-50%);

  transform: translateX(-50%);

  left: 50%;

  margin-top: .4em;

  font-size: 4em;

}

.bussinesscard .front .top .logo .fat {

  font-weight: 800;

}

.bussinesscard .front .top .logo .skinny {

  font-weight: 100;

}

.bussinesscard .front .nametroduction {

  margin-top: 2.4em;

  -moz-transform: translateY(0);

  -ms-transform: translateY(0);

  -webkit-transform: translateY(0);

  transform: translateY(0);

  z-index: 8;

}

.bussinesscard .front .name {

  color: #2a2b39;

  font-weight: 400;

  font-size: 3.2em;

  text-align: center;

  position: relative;

  margin-bottom: .35em;

}

.bussinesscard .front .name:after {

  content: '';

  position: absolute;

  top: 1.3em;

  width: 20%;

  left: 40%;

  right: 40%;

  height: 1px;

  background: #2a2b39;

}

.bussinesscard .front .introduction {

  text-align: center;

  color: #2a2b39;

  font-family: 'Old Standard TT', serif;

  font-style: italic;

}

.bussinesscard .front .contact {

  color: #2a2b39;

  margin-left: 1.7em;

  font-weight: 300;

  font-size: 1.6em;

  -moz-transform: translateY(400%);

  -ms-transform: translateY(400%);

  -webkit-transform: translateY(400%);

  transform: translateY(400%);

}

.bussinesscard .front .contact span {

  color: #2D3244;

  font-size: 1.7em;

  width: 1.3em;

  display: inline-block;

}

.bussinesscard .front .contact a {

  position: relative;

  bottom: .24em;

}

.bussinesscard .back {

  width: 100%;

  height: 100%;

  background: #fff;

  backface-visibility: hidden;

  position: absolute;

}



.tooltip {

  position: absolute;

  left: 1em;

  bottom: 1em;

  color: #fff;

  font-weight: 300;

  padding: .4em;

  background: #2a2b39;

}



/* HOVER ANIMATIONS */

.front .top .logo, .front .top, .front .top:after, .front .nametroduction, .front .contact {

  -moz-transition: 0.7s all ease-in-out;

  -o-transition: 0.7s all ease-in-out;

  -webkit-transition: 0.7s all ease-in-out;

  transition: 0.7s all ease-in-out;

}



.flip:hover .front .top .logo {

  margin-top: .28em;

  font-size: 1.3em;

  border: 3px solid #fff;

  margin-left: .15em;

  -moz-transform: translateX(0);

  -ms-transform: translateX(0);

  -webkit-transform: translateX(0);

  transform: translateX(0);

  left: 0;

}



.flip:hover .front .top {

  height: 15%;

}

.flip:hover .front .top:after {

  width: 1.5em;

  height: 1.5em;

  bottom: 16.3em;

}



.flip:hover .front .nametroduction {

  -moz-transform: translateY(400%);

  -ms-transform: translateY(400%);

  -webkit-transform: translateY(400%);

  transform: translateY(400%);

}



.flip:hover .front .contact {

  -moz-transform: translateY(-52%);

  -ms-transform: translateY(-52%);

  -webkit-transform: translateY(-52%);

  transform: translateY(-52%);
}

 <section class="bussinesscard">
  <div class="flip">
<div class="front">
<div class="top">
<div class="logo">
<span class="fat">Y</span><span class="skinny">D</span></div>
</div>
<div class="nametroduction">
<div class="name">
Yudha dhesockerz</div>
<div class="introduction">
Blogger Newbie Asal Malang</div>
</div>
<div class="contact">
<div class="website">
<span class="ion-earth"></span>
      <a href="#">maseyudha.blogspot.com</a>
     </div>
<div class="twitter">
<span class="ion-social-twitter"></span>
      <a href="#">@yudhadhesockerz</a> 
     </div>
<div class="phone ">
<span class="ion-ios7-telephone"></span> 
      <a href="#">0118 999 7253</a> 
     </div>
<div class="email ">
<span class="ion-paper-airplane"></span>
      <a href="#">yudhadhesockerz@gmail.com</a>
     </div>
</div>
</div>
<div class="back">
</div>
<!--FIXES FONT RENDERING -->
  </div>
</section>
 <section class="tooltip">
  Hover over the card to see the back.
  


 </section>

Note:
Ganti "YD" dengan logo anda sendiri
ganti tanda "#" dengan Url

Selamat Berkreasi

19 komentar:

  1. pertamax diamankan mas , hehe
    numpang izin make :D

    BalasHapus
    Balasan
    1. selamat gan :-bd
      silahkan dipake gan :)

      Hapus
  2. dapet apa nih gan , hehe :D
    oke mas yudha , thank udah maau berbagi :)

    BalasHapus
    Balasan
    1. dapat penghargaan dari ane :D
      sama2 gan khoirun,,makasih sudah sering mampir kesini :-bd

      Hapus
  3. hehe kita ngupi yuks |o|
    masama mas udah mampir ke blog saya juga

    BalasHapus
    Balasan
    1. ayuks udah siap setermos ini kopinya =D

      Hapus
  4. macam kuli aja mas disediain kopi setermos hehe

    BalasHapus
    Balasan
    1. emang kuli gan...kuli keybord =D

      Hapus
    2. haha , sama kuli mouse gan ... satu perangkat jadinya dah

      Hapus
    3. o iya mousenya ketinggalan... :D

      Hapus
    4. siip sudah kayak mau orkesan ini :D

      Hapus
    5. tinggal manggung dah kita haha ,..

      Hapus
  5. Balasan
    1. wah mas Bahtiq rozikin akhirnya muncul juga disini :-bd
      silahkan dicoba mas |o|

      Hapus
  6. ciyeee, akhirnya ketemu, makasih akang :v

    BalasHapus
    Balasan
    1. ketemu ma siapa tuh kang @@,
      wah brati ane sekarang tenar dong :asik

      Hapus

 
Top