Mobile Menu Design

Memasang kode Mobile Menu Design  
Kode ini menampilkan gambar berbentuk handphon yang berisikan front menu serta rear menu.
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

@import url(https://fonts.googleapis.com/css?family=Lato);
* {
  margin: 0;
  padding: 0;
}
*,
*:after,
*:before {
  box-sizing: border-box;
}
ol,
ul {
  list-style: none;
}
a {
  color: #000;
  text-decoration: none;
}
html {
  line-height: 1.2;
}
body {
  background-color: #fff;
  color: #333;
  font-family: "Lato", arial, sans-serif;
  font-size: 16px;
}
.mobile {
  background-color: #19b698;
  border: 0 solid #333;
  border-width: 50px 15px;
  border-radius: 12px;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.6);
  margin: 20px auto;
  max-width: 300px;
  height: 560px;
  overflow: hidden;
  position: relative;
}
header {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  height: 50px;
}
.logo {
  color: #fff;
  font-size: 20px;
  line-height: 50px;
  padding: 0 0 0 20px;
  text-transform: capitalize;
}
/* menu button */
.menuBtn {
  height: 30px;
  width: 30px;
  position: absolute;
  right: 20px;
  top: 10px;
  z-index: 101;
}
.menuBtn > span {
  background-color: #fff;
  border-radius: 1px;
  height: 2px;
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -1px 0 0 -15px;
  -webkit-transition: height 100ms;
  transition: height 100ms;
}
.menuBtn > span:after,
.menuBtn > span:before {
  content: '';
  background-color: #fff;
  border-radius: 1px;
  height: 2px;
  width: 100%;
  position: absolute;
  left: 50%;
  margin-left: -15px;
  -webkit-transition: all 200ms;
  transition: all 200ms;
}
.menuBtn > span:after {
  top: -7px;
}
.menuBtn > span:before {
  bottom: -7px;
}
.menuBtn.act > span {
  height: 0;
}
.menuBtn.act > span:after,
.menuBtn.act > span:before {
  background-color: #008877;
  top: 1px;
}
.menuBtn.act > span:after {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.menuBtn.act > span:before {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
/* main menu block */
.mainMenu {
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  height: 100%;
  width: 100%;
  display: table;
  text-align: center;
  opacity: 0;
  -webkit-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transform: scale(0);
          transform: scale(0);
}
.mainMenu.act {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.mainMenu.act ul li {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.mainMenu ul {
  display: table-cell;
  vertical-align: middle;
}
.mainMenu li {
  padding: 8px 0;
  -webkit-transition: all 400ms 510ms;
  transition: all 400ms 510ms;
  opacity: 0;
}
.mainMenu li:nth-child(odd) {
  -webkit-transform: translateX(30%);
          transform: translateX(30%);
}
.mainMenu li:nth-child(even) {
  -webkit-transform: translateX(-30%);
          transform: translateX(-30%);
}
.mainMenu li:last-child {
  -webkit-transform: none;
          transform: none;
}
.mainMenu a {
  color: #19b698;
  display: inline-block;
  font-size: 18px;
}
.mainMenu a.suBtn {
  color: #fff;
}
/* sign up button */
.suBtn {
  background-color: #19b698;
  border-radius: 5px;
  padding: 10px 20px;
}

<div class="mobile">
 <div class="mainContainer">
  <header>
   <a href="#" class="logo">logo</a>
   <a href="#" class="menuBtn">
    <span class="lines"></span>
   </a>
   <nav class="mainMenu">
    <ul>
     <li>
     <a href="Link Title">Intro</a>
     </li>
     <li>
     <a href="Link Title">Services</a>
     </li>
     <li>
     <a href="Link Title">Team</a>
     </li>
     <li>
     <a href="Link Title">Pricing</a>
     </li>
     <li>
     <a href="Link Title" class="suBtn">Sing Up</a>
     </li>
    </ul>
   </nav>
  </header>
  <div class="container">
  </div>
  <footer>
  </footer>
 </div>
</div>

<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>

<script>
$(document).ready(function () {
    $('.menuBtn').click(function () {
        $(this).toggleClass('act');
        if ($(this).hasClass('act')) {
            $('.mainMenu').addClass('act');
        } else {
            $('.mainMenu').removeClass('act');
        }
    });
});
//# sourceURL=pen.js
</script>

Edited by. Myscript2010
Sources by. Vijayakumar on Codepen

DEMOSHOW

Category: Mobile Menu Design

Mobile menu, CSS only

Memasang kode Mobile menu, CSS only  
Kode ini menampilkan gambar berbentuk handphon yang berisikan menu serta box search.
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

@import url("http://fonts.googleapis.com/css?family=Lato");

*,
*:before,
*:after { /* Slow, yes I know :) */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: Lato, Sans-serif;
  font-size: 12px;
  background: #353138;
  background: -moz-radial-gradient(center, ellipse cover,  #353138 0%, #1a181c 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #353138), color-stop(100%, #1a181c));
  background: -webkit-radial-gradient(center, ellipse cover,  #353138 0%,#1a181c 100%);
  background: -o-radial-gradient(center, ellipse cover,  #353138 0%,#1a181c 100%);
  background: -ms-radial-gradient(center, ellipse cover,  #353138 0%,#1a181c 100%);
  background: radial-gradient(ellipse at center,  #353138 0%,#1a181c 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#353138', endColorstr='#1a181c', GradientType=1);
}
.container {
  margin: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
  -webkit-perspective: 1500px;
  -moz-perspective: 1500px;
  -ms-perspective: 1500px;
  perspective: 1500px;
  position: relative;
}
.toggle {
  color: #fff;
  display: inline-block;
  line-height: 16px;
  font-size: 20px;
  float: left;
}
.menu {
  margin: 100px auto;
  position: relative;
  background: #62278d;
  background: -moz-linear-gradient(top,  #62278d 0%, #2cc09b 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#62278d), color-stop(100%,#2cc09b));
  background: -webkit-linear-gradient(top,  #62278d 0%,#2cc09b 100%);
  background: -o-linear-gradient(top,  #62278d 0%,#2cc09b 100%);
  background: -ms-linear-gradient(top,  #62278d 0%,#2cc09b 100%);
  background: linear-gradient(to bottom,  #62278d 0%,#2cc09b 100%);
  width: 300px;
  border-width: 20px 0;
  border-style: solid;
  border-color: #fff;
  color: #fff;
  height: 540px;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
       -o-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;
  -webkit-box-shadow: 0 0 50px 0 #444;
     -moz-box-shadow: 0 0 50px 0 #444;
          box-shadow: 0 0 50px 0 #444;
}
input.toggle:checked ~ .menu {
  -webkit-transform: translateY(-200px) translateZ(-150px) rotateX(45deg) rotateZ(45deg);
     -moz-transform: translateY(-150px) rotateX(45deg) rotateZ(45deg);
      -ms-transform: translateY(-150px) rotateX(45deg) rotateZ(45deg);
       -o-transform: translateY(-150px) rotateX(45deg) rotateZ(45deg);
          transform: translateY(-150px) rotateX(45deg) rotateZ(45deg);
}
.menu:before {
  content: '';
  position: absolute;
  height: 30px;
  width: 300px;
  top: 520px;
  left: 0px;
  -webkit-transform: rotateX(90deg) translateY(-15px) translateZ(15px);
     -moz-transform: rotateX(90deg) translateY(-15px) translateZ(15px);
      -ms-transform: rotateX(90deg) translateY(-15px) translateZ(15px);
       -o-transform: rotateX(90deg) translateY(-15px) translateZ(15px);
          transform: rotateX(90deg) translateY(-15px) translateZ(15px);
  background: #fff;
  pointer-events: none;
}
.menu:after {
  content: '';
  position: absolute;
  height: 540px;
  width: 30px;
  top: -20px;
  right: -30px;
  -webkit-transform: rotateY(90deg) translateZ(-15px) translateX(15px);
     -moz-transform: rotateY(90deg) translateZ(-15px) translateX(15px);
      -ms-transform: rotateY(90deg) translateZ(-15px) translateX(15px);
       -o-transform: rotateY(90deg) translateZ(-15px) translateX(15px);
          transform: rotateY(90deg) translateZ(-15px) translateX(15px);
  border-width: 20px 0;
  border-style: solid;
  border-color: #fff;
  background: #62278d;
  background: -moz-linear-gradient(top,  #62278d 0%, #2cc09b 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#62278d), color-stop(100%,#2cc09b));
  background: -webkit-linear-gradient(top,  #62278d 0%,#2cc09b 100%);
  background: -o-linear-gradient(top,  #62278d 0%,#2cc09b 100%);
  background: -ms-linear-gradient(top,  #62278d 0%,#2cc09b 100%);
  background: linear-gradient(to bottom,  #62278d 0%,#2cc09b 100%);
  pointer-events: none;
}
.menu .top {
  padding: 15px 15px 15px 20px;
  width: 100%;
}
.menu .top .search {
  position: relative;
  display: inline-block;
}
.menu .top .search input {
  background-color: transparent;
  -webkit-transition: all 100ms ease-in-out;
     -moz-transition: all 100ms ease-in-out;
      -ms-transition: all 100ms ease-in-out;
       -o-transition: all 100ms ease-in-out;
          transition: all 100ms ease-in-out;
  color: transparent;
  border: 1px solid #fff;
  border-radius: 20px;
  padding: 10px 30px 10px 15px;
  outline: 0 none;
  width: 60px;
  height: 40px;
  position: relative;
  -webkit-transform: translateZ(1px);
     -moz-transform: translateZ(1px);
      -ms-transform: translateZ(1px);
       -o-transform: translateZ(1px);
          transform: translateZ(1px);
  z-index: 2;
}
.menu .top .search input:focus {
  width: 200px;
  color: #fff;
}
.menu .top .search:after {
  content: '\f002';
  font-family: 'FontAwesome';
  font-size: 16px;
  position: absolute;
  color: #fff;
  top: 11px;
  right: 18px;
  width: 20px;
  height: 20px;
  pointer-events: none;
  -webkit-transform: translateZ(1px);
     -moz-transform: translateZ(1px);
      -ms-transform: translateZ(1px);
       -o-transform: translateZ(1px);
          transform: translateZ(1px);
  z-index: 1;
}
.menu .top .exit {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  outline: 0 none;
  float: right;
  cursor: pointer;
  -webkit-transform: translateZ(1px);
     -moz-transform: translateZ(1px);
      -ms-transform: translateZ(1px);
       -o-transform: translateZ(1px);
          transform: translateZ(1px);
  z-index: 2;
}
.menu .top .exit:focus,
.menu .top .exit:active {
  border: 1px solid #fff;
  border-radius: 20px;
}
.menu .top .exit:before {
  content: '';
  pointer-events: none;
  position: absolute;
  display: block;
  width: 30px;
  height: 30px;
  top: 14px;
  left: -6px;
  border-width: 0 2px 0 0;
  border-style: solid;
  border-color: #fff;
  -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
  z-index: 1;
}
.menu .top .exit:after {
  content: '';
  pointer-events: none;
  position: absolute;
  display: block;
  width: 30px;
  height: 30px;
  top: -6px;
  left: -6px; 
  border-width: 0 2px 0 0;
  border-style: solid;
  border-color: #fff;
  -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg);
}
.menu .middle {
  position: relative;
  min-height: 40px;
  list-style: none;
  padding: 0;
  margin: 0;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 15px;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.menu .middle li {
  margin: 0;
  padding: 15px 0 15px 40px;
  outline: 0 none;
  position: relative;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: translateZ(1px);
     -moz-transform: translateZ(1px);
      -ms-transform: translateZ(1px);
       -o-transform: translateZ(1px);
          transform: translateZ(1px);
  z-index: 1;
}
.menu .middle li:hover {
  -webkit-box-shadow: inset 0 0 80px 0 rgba(255, 255, 255, 0.3);
     -moz-box-shadow: inset 0 0 80px 0 rgba(255, 255, 255, 0.3);
          box-shadow: inset 0 0 80px 0 rgba(255, 255, 255, 0.3);
  cursor: pointer;
}
.menu .middle li:hover:before,
.menu .middle li:focus:before {
  content: '\f0da';
  font-family: 'FontAwesome';
  font-size: 16px;
  position: absolute;
  top: 15px;
  left: 20px;
}
.menu .middle li:focus,
.menu .middle li:focus:after {
  color: #3EAC9E;
  background-color: #62278d;
}
.menu .middle li .fa {
  padding-right: 15px;
}
.menu .middle li:focus:after,
.menu .middle li:hover:after {
  content: '';
  position: absolute;
  height: 48px;
  width: 30px;
  top: 0px;
  right: -30px;
  -webkit-transform: rotateY(90deg) translateZ(-14px) translateX(15px);
     -moz-transform: rotateY(90deg) translateZ(-14px) translateX(15px);
      -ms-transform: rotateY(90deg) translateZ(-14px) translateX(15px);
       -o-transform: rotateY(90deg) translateZ(-14px) translateX(15px);
          transform: rotateY(90deg) translateZ(-14px) translateX(15px);
  pointer-events: none;
  
}
.menu .middle li:hover:after {
  -webkit-box-shadow: inset 0 0 80px 0 rgba(255, 255, 255, 0.3);
     -moz-box-shadow: inset 0 0 80px 0 rgba(255, 255, 255, 0.3);
          box-shadow: inset 0 0 80px 0 rgba(255, 255, 255, 0.3);
}
.menu .bottom {
  height: 40px;
}
.menu-back {
  position: absolute;
  background: transparent;
  top: -20px;
  left: 0;
  width: 300px;
  height: 540px;
  -webkit-transform: translateZ(-29px);
     -moz-transform: translateZ(-29px);
      -ms-transform: translateZ(-29px);
       -o-transform: translateZ(-29px);
          transform: translateZ(-29px);
  -webkit-box-shadow: 100px 100px 50px -30px #111;
     -moz-box-shadow: 100px 100px 50px -30px #111;
          box-shadow: 100px 100px 50px -30px #111;
  z-index: 0;
}
.glass-reflection {
  position: absolute;
  -webkit-transition: box-shadow 1s;
     -moz-transition: box-shadow 1s;
      -ms-transition: box-shadow 1s;
       -o-transition: box-shadow 1s;
          transition: box-shadow 1s;
  -webkit-transform: rotateZ(-1deg) translateZ(1px) skewY(60deg);
     -moz-transform: rotateZ(-1deg) translateZ(1px) skewY(60deg);
      -ms-transform: rotateZ(-1deg) translateZ(1px) skewY(60deg);
       -o-transform: rotateZ(-1deg) translateZ(1px) skewY(60deg);
          transform: rotateZ(-1deg) translateZ(1px) skewY(60deg);
  
  -webkit-box-shadow: inset 0px -40px 0px -50px rgba(255, 255, 255, 0.0);
     -moz-box-shadow: inset 0px -40px 0px -50px rgba(255, 255, 255, 0.0);
          box-shadow: inset 0px -40px 0px -50px rgba(255, 255, 255, 0.0);
  border-radius: 200px 0 20px 0 ;
  top: 85px;
  left: 95px;
  width: 200px;
  height: 100px;
  background-color: transparent;
}
input.toggle:checked ~ .menu .glass-reflection {
  -webkit-box-shadow: inset 0px -40px 150px -50px rgba(255, 255, 255, 0.15);
     -moz-box-shadow: inset 0px -40px 150px -50px rgba(255, 255, 255, 0.15);
          box-shadow: inset 0px -40px 150px -50px rgba(255, 255, 255, 0.15);
}

<div class="container">
  <input type="checkbox" class="toggle" id="toggle" checked="checked" /><label class="toggle" for="toggle"> Toggle tilt</label>
  <div class="menu">
    <div class="top">
      <span class="search">
        <input type="text">
      </span>
      <a class="exit" href="#" tabindex="0"></a>
    </div>
    <ul class="middle">
      <li tabindex="0"><i class="fa fa-calendar"></i>Calendar</li>
      <li tabindex="0"><i class="fa fa-camera"></i>Photos</li>
      <li tabindex="0"><i class="fa fa-check-square-o"></i>Tasks</li>
      <li tabindex="0"><i class="fa fa-map-marker"></i>Places</li>
      <li tabindex="0"><i class="fa fa-codepen"></i>Codepen</li>
      <li tabindex="0"><i class="fa fa-dribbble"></i>Dribbble</li>
      <li tabindex="0"><i class="fa fa-user"></i>User account</li>
      <li tabindex="0"><i class="fa fa-cogs"></i>Settings</li>
    </ul>
    <div class="bottom"></div>
    <div class="menu-back"></div>
    <div class="glass-reflection"></div>
  </div>
</div>

Edited by. Myscript2010
Sources by.  poppe1219 on Codepen

DEMOSHOW

Category: CSS only, Mobile menu

CSS Animated Identity Card

Memasang kode CSS Animated Identity Card  
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

* {
  box-sizing: border-box;
}

body {
  background-color:  #888;
}

.card {
  width: 600px;
  margin: 40px auto;
  background-color:  #C71585;
  color: #444;
  overflow: hidden;
  box-shadow: 5px 5px 0 0 #aaa;
}
.card h1 {
  margin: 0;
  padding: 20px;
  text-align: center;
  font-family: Roboto Slab;
  font-weight: 700;
  background-color: #778899 ;
  animation: fadein 1.2s;
}
.card img {
  float: left;
  width: 200px;
  height: 200px;
  margin: 20px;
  position: relative;
  z-index: 1;
  animation: grow 0.6s;
}
.card .bio {
  position: relative;
  margin: 20px;
  font-family: Merriweather Sans;
  animation: slidein 1.2s;
}

@keyframes fadein {
  from {
    color: transparent;
  }
  to {
    color: inherit;
  }
}
@keyframes grow {
  from {
    transform: scale(0);
  }
  80% {
    transform: scale(1.1);
  }
  to {
    transform: scale(1);
  }
}
@keyframes slidein {
  from {
    opacity: 0;
  }
  49.9% {
    opacity: 0;
  }
  50% {
    left: -240px;
  }
  to {
    left: 0;
  }
}
.comment {
  font-family: Merriweather Sans;
  font-size: 12px;
  color: #ddd;
  text-align: center;
}

<div class='card'>
<h1>
IDENTITY CARD
</h1>
<img src='http://Link Gambar.png'>
<p class='bio'>

<p>Name :</p>

<p>No. Identity :</p>

<p>Field of work :</p>
</div>
<div class='comment'>
<a href="http://myscript2010s.blogspot.co.id" target="_blank"title="Myscript2010">
IDENTITY CARD DESIGN VISIT MYS2010 </font>
</div>

Edited by. Myscript2010
Sources by. Assaf Gelber Codepen

DEMOSHOW

Category: CSS Animated Identity Card

Credit Card

Memasang kode Credit Card 
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

@import url(http://fonts.googleapis.com/css?family=Iceland);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800);
body {
  background-color: #ecf0f1;
}
.card {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 85.60mm;
  height: 53.98mm;
  color: #fff;
  font: 22px/1 'Iceland', monospace;
  background: #23189a;
  border: 1px solid #1e1584;
  -webkit-border-radius: 10px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 10px;
  -moz-background-clip: padding;
  border-radius: 10px;
  background-clip: padding-box;
  overflow: hidden;
}
.bank-name {
  float: right;
  margin-top: 15px;
  margin-right: 30px;
  font: 800 28px 'Open Sans', Arial, sans-serif;
}
.chip {
  position: relative;
  z-index: 1000;
  width: 50px;
  height: 40px;
  margin-top: 50px;
  margin-bottom: 10px;
  margin-left: 30px;
  background: #fffcb1;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #fffcb1 0%, #b4a365 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #fffcb1), color-stop(100%, #b4a365));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, #fffcb1 0%, #b4a365 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #fffcb1 0%, #b4a365 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, #fffcb1 0%, #b4a365 100%);
  /* IE10+ */
  background: linear-gradient(135deg, #fffcb1 0%, #b4a365 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fffcb1", endColorstr="#b4a365", GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
  border: 1px solid #322d28;
  -webkit-border-radius: 10px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 10px;
  -moz-background-clip: padding;
  border-radius: 10px;
  background-clip: padding-box;
  -webkit-box-shadow: 0 1px 2px #322d28, 0 0 5px 0 0 5px rgba(144, 133, 87, 0.25) inset;
  -moz-box-shadow: 0 1px 2px #322d28, 0 0 5px 0 0 5px rgba(144, 133, 87, 0.25) inset;
  box-shadow: 0 1px 2px #322d28, 0 0 5px 0 0 5px rgba(144, 133, 87, 0.25) inset;
  overflow: hidden;
}
.chip .side {
  position: absolute;
  top: 8px;
  width: 12px;
  height: 24px;
  border: 1px solid #322d28;
  -webkit-box-shadow: 0 0 5px rgba(144, 133, 87, 0.25) inset, 0 0 5px rgba(144, 133, 87, 0.25), 0 0 4px rgba(0, 0, 0, 0.1), 0 0 4px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 0 5px rgba(144, 133, 87, 0.25) inset, 0 0 5px rgba(144, 133, 87, 0.25), 0 0 4px rgba(0, 0, 0, 0.1), 0 0 4px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0 0 5px rgba(144, 133, 87, 0.25) inset, 0 0 5px rgba(144, 133, 87, 0.25), 0 0 4px rgba(0, 0, 0, 0.1), 0 0 4px rgba(0, 0, 0, 0.1) inset;
}
.chip .side.left {
  left: 0;
  border-left: none;
  -webkit-border-radius: 0 2px 2px 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0 2px 2px 0;
  -moz-background-clip: padding;
  border-radius: 0 2px 2px 0;
  background-clip: padding-box;
}
.chip .side.right {
  right: 0;
  border-right: none;
  -webkit-border-radius: 2px 0 0 2px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 2px 0 0 2px;
  -moz-background-clip: padding;
  border-radius: 2px 0 0 2px;
  background-clip: padding-box;
}
.chip .side:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: inline-block;
  width: 100%;
  height: 0px;
  margin: auto;
  border-top: 1px solid #322d28;
  -webkit-box-shadow: 0 0 5px rgba(144, 133, 87, 0.25) inset, 0 0 5px rgba(144, 133, 87, 0.25), 0 0 4px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 5px rgba(144, 133, 87, 0.25) inset, 0 0 5px rgba(144, 133, 87, 0.25), 0 0 4px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 5px rgba(144, 133, 87, 0.25) inset, 0 0 5px rgba(144, 133, 87, 0.25), 0 0 4px rgba(0, 0, 0, 0.1);
}
.chip .vertical {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 8.66666667px;
  height: 12px;
  border: 1px solid #322d28;
  -webkit-box-shadow: 0 0 5px rgba(144, 133, 87, 0.25) inset, 0 0 5px rgba(144, 133, 87, 0.25), 0 0 4px rgba(0, 0, 0, 0.1), 0 0 4px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 0 5px rgba(144, 133, 87, 0.25) inset, 0 0 5px rgba(144, 133, 87, 0.25), 0 0 4px rgba(0, 0, 0, 0.1), 0 0 4px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0 0 5px rgba(144, 133, 87, 0.25) inset, 0 0 5px rgba(144, 133, 87, 0.25), 0 0 4px rgba(0, 0, 0, 0.1), 0 0 4px rgba(0, 0, 0, 0.1) inset;
}
.chip .vertical.top {
  top: 0;
  border-top: none;
}
.chip .vertical.top:after {
  top: 12px;
  width: 17.33333333px;
}
.chip .vertical.bottom {
  bottom: 0;
  border-bottom: none;
}
.chip .vertical.bottom:after {
  bottom: 12px;
}
.chip .vertical:after {
  content: '';
  position: absolute;
  left: -8.66666667px;
  display: inline-block;
  width: 26px;
  height: 0px;
  margin: 0;
  border-top: 1px solid #322d28;
  -webkit-box-shadow: 0 0 5px rgba(144, 133, 87, 0.25) inset, 0 0 5px rgba(144, 133, 87, 0.25), 0 0 4px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 5px rgba(144, 133, 87, 0.25) inset, 0 0 5px rgba(144, 133, 87, 0.25), 0 0 4px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 5px rgba(144, 133, 87, 0.25) inset, 0 0 5px rgba(144, 133, 87, 0.25), 0 0 4px rgba(0, 0, 0, 0.1);
}
.data {
  position: relative;
  z-index: 100;
  margin-left: 30px;
  text-transform: uppercase;
}
.data .pan,
.data .month,
.data .year,
.data .year:before,
.data .name-on-card,
.data .date {
  position: relative;
  z-index: 20;
  letter-spacing: 1px;
  text-shadow: 1px 1px 1px #000;
}
.data .pan:before,
.data .month:before,
.data .year:before,
.data .year:before:before,
.data .name-on-card:before,
.data .date:before,
.data .pan:after,
.data .month:after,
.data .year:after,
.data .year:before:after,
.data .name-on-card:after,
.data .date:after {
  position: absolute;
  z-index: -10;
  content: attr(title);
  color: rgba(0, 0, 0, 0.2);
  text-shadow: none;
}
.data .pan:before,
.data .month:before,
.data .year:before,
.data .year:before:before,
.data .name-on-card:before,
.data .date:before {
  top: -1px;
  left: -1px;
  color: rgba(0, 0, 0, 0.1);
}
.data .pan:after,
.data .month:after,
.data .year:after,
.data .year:before:after,
.data .name-on-card:after,
.data .date:after {
  top: 1px;
  left: 1px;
  z-index: 10;
}
.data .pan {
  position: relative;
  z-index: 50;
  margin: 0;
  letter-spacing: 1px;
  font-size: 26px;
}
.data .first-digits {
  margin: 0;
  font: 400 10px/1 'Open Sans', Arial, sans-serif;
}
.data .exp-date-wrapper {
  margin-top: 5px;
  margin-left: 64px;
  line-height: 1;
  *zoom: 1;
}
.data .exp-date-wrapper:before,
.data .exp-date-wrapper:after {
  content: " ";
  display: table;
}
.data .exp-date-wrapper:after {
  clear: both;
}
.data .exp-date-wrapper .left-label {
  float: left;
  display: inline-block;
  width: 40px;
  font: 400 7px/8px 'Open Sans', Arial, sans-serif;
  letter-spacing: 0.5px;
}
.data .exp-date-wrapper .exp-date {
  display: inline-block;
  float: left;
  margin-top: -10px;
  margin-left: 10px;
  text-align: center;
}
.data .exp-date-wrapper .exp-date .upper-labels {
  font: 400 7px/1 'Open Sans', Arial, sans-serif;
}
.data .exp-date-wrapper .exp-date .year:before {
  content: '/';
}
.data .name-on-card {
  margin-top: 10px;
}
.lines-down:before {
  content: '';
  position: absolute;
  top: 80px;
  left: -200px;
  z-index: 10;
  width: 550px;
  height: 400px;
  border-top: 2px solid #392db2;
  -webkit-border-radius: 40% 60% 0 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 40% 60% 0 0;
  -moz-background-clip: padding;
  border-radius: 40% 60% 0 0;
  background-clip: padding-box;
  box-shadow: 1px 1px 100px #4035b2;
  background: #2d21a6;
  /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover, rgba(45, 33, 166, 0) 100%, #2d21a6 100%);
  /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(45, 33, 166, 0)), color-stop(100%, #2d21a6));
  /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover, rgba(45, 33, 166, 0) 100%, #2d21a6 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover, rgba(45, 33, 166, 0) 44%, #2d21a6 100%);
  /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover, rgba(45, 33, 166, 0) 44%, #2d21a6 100%);
  /* IE10+ */
  background: radial-gradient(ellipse at center, rgba(45, 33, 166, 0) 44%, #2d21a6 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="rgba(45, 33, 166, 0)", endColorstr="#2d21a6", GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}
.lines-down:after {
  content: '';
  position: absolute;
  top: 20px;
  left: -100px;
  z-index: 10;
  width: 350px;
  height: 400px;
  border-top: 2px solid #392db2;
  -webkit-border-radius: 20% 80% 0 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 20% 80% 0 0;
  -moz-background-clip: padding;
  border-radius: 20% 80% 0 0;
  background-clip: padding-box;
  box-shadow: inset -1px -1px 44px #4035b2;
  background: #2d21a6;
  /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover, rgba(45, 33, 166, 0) 100%, #2d21a6 100%);
  /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(45, 33, 166, 0)), color-stop(100%, #2d21a6));
  /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover, rgba(45, 33, 166, 0) 100%, #2d21a6 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover, rgba(45, 33, 166, 0) 44%, #2d21a6 100%);
  /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover, rgba(45, 33, 166, 0) 44%, #2d21a6 100%);
  /* IE10+ */
  background: radial-gradient(ellipse at center, rgba(45, 33, 166, 0) 44%, #2d21a6 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="rgba(45, 33, 166, 0)", endColorstr="#2d21a6", GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}
.lines-up:before {
  content: '';
  position: absolute;
  top: -110px;
  left: -70px;
  z-index: 2;
  width: 480px;
  height: 300px;
  border-bottom: 2px solid #392db2;
  -webkit-border-radius: 0 0 60% 90%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0 0 60% 90%;
  -moz-background-clip: padding;
  border-radius: 0 0 60% 90%;
  background-clip: padding-box;
  box-shadow: inset 1px 1px 44px #4035b2;
  background: #4031b2;
  /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover, rgba(64, 49, 178, 0) 100%, #23189a 100%);
  /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(64, 49, 178, 0)), color-stop(100%, #23189a));
  /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover, rgba(64, 49, 178, 0) 100%, #23189a 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover, rgba(64, 49, 178, 0) 44%, #23189a 100%);
  /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover, rgba(64, 49, 178, 0) 44%, #23189a 100%);
  /* IE10+ */
  background: radial-gradient(ellipse at center, rgba(64, 49, 178, 0) 44%, #23189a 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="rgba(64, 49, 178, 0)", endColorstr="#23189a", GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}
.lines-up:after {
  content: '';
  position: absolute;
  top: -180px;
  left: -200px;
  z-index: 1;
  width: 530px;
  height: 420px;
  border-bottom: 2px solid #4035b2;
  -webkit-border-radius: 0 40% 50% 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0 40% 50% 50%;
  -moz-background-clip: padding;
  border-radius: 0 40% 50% 50%;
  background-clip: padding-box;
  box-shadow: inset 1px 1px 44px #4035b2;
  background: #2d21a6;
  /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover, rgba(45, 33, 166, 0) 100%, #2d21a6 100%);
  /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(45, 33, 166, 0)), color-stop(100%, #2d21a6));
  /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover, rgba(45, 33, 166, 0) 100%, #2d21a6 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover, rgba(45, 33, 166, 0) 44%, #2d21a6 100%);
  /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover, rgba(45, 33, 166, 0) 44%, #2d21a6 100%);
  /* IE10+ */
  background: radial-gradient(ellipse at center, rgba(45, 33, 166, 0) 44%, #2d21a6 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="rgba(45, 33, 166, 0)", endColorstr="#2d21a6", GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}

<div class="card">
    <div class="bank-name" title="BestBank">BestBank</div>
    <div class="chip">
        <div class="side left"></div>
        <div class="side right"></div>
        <div class="vertical top"></div>
        <div class="vertical bottom"></div>
    </div>
    <div class="data">
        <div class="pan" title="4123 4567 8910 1112">4123 4567 8910 1112</div>
        <div class="first-digits">4123</div>
        <div class="exp-date-wrapper">
            <div class="left-label">EXPIRES END</div>
            <div class="exp-date">
                <div class="upper-labels">MONTH/YEAR</div>
                <div class="date" title="01/17">01/17</div>
            </div>
        </div>
        <div class="name-on-card" title="John Doe">John Doe</div>
    </div>
    <div class="lines-down"></div>
    <div class="lines-up"></div>
</div>

Edited by. Myscript2010
Sources by. Jan on Codepen

DEMOSHOW

Category: Credit Card

Profile Card

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

Category: Profile Card

Css3 Card Design

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

html {
  font-family: 'Arial';
  background: url('http://Link Gambar.png');
}a {
  color: #c20;
  text-decoration: underline;
}
.centered {
  margin: 0 auto;
}
.finer-print {
  font-size: 15px;
}
.span2 {
  width: 40%;
  padding: 0;float: left;
}
.business-card {
  position: relative;
  background: #eeeeec;
  color: #2e3436;
  width: 400px;
  height: 240px;
  font-size: 20px;
  border-bottom: 2px solid #d3d7df;
  border-radius: 15px;
  box-shadow: 0 0 10px 1px #000;
  margin-top: 5%;
}.business-card .title {
  background: #c00;
  color: #fff;
  height: 30px;
  padding: 10px;
  font-weight: bold;
  font-size: 25px;
  border-top: 2px solid #ef2929;
  border-left: 2px solid #ef2929;
  border-radius: 14px 14px 0 0;
}.business-card .content {
  font-weight: bold;
  padding: 15px;
}.business-card .avatar {
  float: right;
  max-width: 100px;
  max-height: 100px;
  box-shadow: 0 0 10px 1px #777;
  border-radius: 3px;
}.business-card .footer {
  position: absolute;
  bottom: 10px;
  left: 2%;
  font-size: 15px;
  padding-top: 5px;
  border-top: 1px solid;
  width: 96%;
}

<div class="business-card centered">
  <div class="title">
   Your Text  </div>
  <div class="content span2">
   Your Text<br />
    <span class="finer-print">Your Text<br />    
    </span>
  </div>
  <div class="content span2">
    <img src="http://Link Gambar.png" alt="avatar" class="avatar" />
  </div>
  <div class="footer">
    &copy; 2013 <a href="http://Link Title">Top Page Design</a>
  </div>
</div>

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

Edited by. Myscript2010
Sources by. Mark Fischer, Jr on Codepen

DEMOSHOW

Category: Css3 Card Design

CSS flat folded corner

Memasang kode Card UI 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

@import url(http://fonts.googleapis.com/css?family=Rosario:400,700); 

body{
  background: grey;
}

.folded_corner{
  position:relative;
  width:210px;
  margin:4vh auto;
  padding:40px;
  color:#fff;
  font: 20px'Rosario', sans-serif;
  background: #58a;
  background: linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.4) 0) no-repeat 100% 0 / 2em 2em,
    linear-gradient(-135deg, transparent 1.5em, #58a 0);
  
  -webkit-filter: drop-shadow(20px 30px rgba(0,0,0,0.1));
  filter: drop-shadow(20px 30px rgba(0,0,0,0.1));
}
.folded_corner::before{
  content: ' ';
  position:absolute;
  top:2em; 
  right:0;
  background: linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,0.1) 0) 100% 0 no-repeat;
  width: 2em;
  height:2em;
  transform: rotate(180deg)
}

<div class="folded_corner">
  <p>Your Text or Link Image.</p>
</div>

/* inspired by:
  CSS secret 19: play.csssecrets.io/folded-corner 
  &
  CSS secret 16: play.sccsecrets.io/drop-shadow  
  
*/

Penjelasan :
Edit code warna tambahkan teks atau gunakan link gambar sesuai kinginan

Edited by. Myscript2010
Sources by.   Sandra Robotos on Codepen

DEMOSHOW

Category: CSS flat folded corner