Card UI Design

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

<style class="Mys2010-styles">
body {);color:#333;height:100%;overflow:hidden;}
body {
  background: #151515;
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  0px 0;
  position: fixed;
  top: -15px;
  width: 100%;
text-align: center;
text-shadow: 0px 0px #fff;  
font-size:  6px;
background: -moz-linear-gradient(top, #333 0%, rgba(53,02,01,1) 100%);
  border-bottom: 3px solid #dad;  
}
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 60px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
text-shadow: 0px 0px #FFf;  
font-size:  11px;
background:  #111;
border-top: 2px solid #f0f;
z-index: 9999;
} 
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #666 50%, transparent 90%); 
} 
#M-2010, #teks, #posisi, #dibawah  {
    position: absolute;
    font-size: 11px;
    margin: 2px
}
#M-2010, #teks div {
    text-decoration: underline;
    cursor: pointer
}
#teks, #posisi {
    text-align: right;
    right:  50px;
}
#teks, #dibawah {
    text-align: left;
    left:  50px;
}
 #dibawah, #posisi {
    bottom: 17px;
}
.btn {
  text-decoration: none;
  color: #fff;
  background-color: #555;
  text-align: center;
  letter-spacing: .5px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  vertical-align: middle;
  z-index: 1;
  will-change: opacity, transform;
  transition: all .3s ease-out;
  border: none;
  border-radius: 2px;
  display: block;
  width: 20%;
  height: 36px;
  line-height: 36px;
  outline: 0;
  padding: 0 2rem;
  margin: 0 auto;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.btn:hover {
  background: #808080;
}
.btn i {
  margin-right: 8px;
}
.card {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  max-width: 30%;
  margin: 0 auto .75rem;
  background-color: #888;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  border-radius: 2px;
  transform: translate(-50%, -50%);
}
.card-top-section {
  position: relative;
  padding: 0 20px;
  background: #444;
}
.card-block {
  padding: 1.25rem 2rem;
}
.card-action {
  border-top: 1px solid rgba(160, 160, 160, 0.4);
  padding: 20px;
}
.card-title {
  margin-top:40px;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 2em;
  text-align: center;
  letter-spacing: -0.03em;
  font-weight: 900;
}
.card-img-top {
  position: relative;
  border-radius: 100%;
  width: 140px;
  height: 140px;
  margin: 0 auto;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_a1lTOhqieieh0g3HFt0JS06sVoXF4_JoEejzIG9ZhR2w3Vo55pwcA0qQjxVh03ZDfp8KIqlHBfVjHz4CL8xL7pvC2BU-mfmudOtNPzmB8r-06NYH3ioHEcT7tqhrz25dX8vvqAQou6BU/s1600-r/M-2010.png) center top no-repeat;
  background-size: cover;
  bottom: -53px;}
</style>

<div class="card">
<div class="card-top-section">
<div class="card-img-top">
</div>
</div>

<div class="card-block">
<h4 class="card-title">
<span style="color:#800000;font-size:14pt">Myscript2010</h4>
<p class="card-text">
Hallo my friend<br>
I have a website, 
named M-2010<br>
I stayed in cibeber cimahi 
thank you</p>
</div>
<div class="card-action">
<a href="http://myscript2010s.blogspot.co.id"target="_blank" title="Myscript2010"class="btn wave-ripples"> 
<span style="color:#800000;font-size:10pt">visit..</a>
</div>
</div>

<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#dad;"> EDITED BY. <a href="http://Link Download"target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#dad;"> COPYRIGHT <a href="https://codepen.io/Myscript2010/pen/EPrrXj" target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; CODEPEN </a> 
</div>
<h2>
<audio id="mys2010" src="https://sites.google.com/site/kodesite/svn/Fade-mys2010.mp3"controls="controls"></audio></h2>
</a></div>
</div>
<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/02/card-ui-design.html" target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">LET'S STUDY</a>  </h2>
</a>  
</div>
</header>

<ul class="mys2010-list">
<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>  
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>   <script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'>
</script> 
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js">
</script>

<script>
      $(function () {
$('video,audio').mediaelementplayer({
success: function (mediaElement, domObject) {
var audio_src = $('li.current').attr('data-url');
mediaElement.setSrc(audio_src);
mediaElement.addEventListener('ended', function (e) {
mys2010PlayNext(e.target);
}, false);
},
keyActions: []
});
$('.mys2010-list li').click(function () {
$(this).addClass('current').siblings().removeClass('current');
var audio_src = $(this).attr('data-url');
$('audio#mys2010:first').each(function () {
this.player.pause();
this.player.setSrc(audio_src);
this.player.play();
});
});
});
function mys2010PlayNext(currentPlayer) {
if ($('.mys2010-list li.current').length > 0) {
var current_item = $('.mys2010-list li.current:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('if ' + audio_src);
} else {
var current_item = $('.mys2010-list li:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('elseif ' + audio_src);
}
if ($(current_item).is(':last-child')) {
$(current_item).removeClass('current');
} else {
currentPlayer.setSrc(audio_src);
currentPlayer.play();
}}    
</script>

<script>
var card = new TimelineMax();
card.set('.card', { autoAlpha: 0 }).set('.card-top-section', {
    y: -100,
    autoAlpha: 0
}).set('.card-block, .card-action', {
    y: 100,
    autoAlpha: 0
}).set('.card-img-top', {
    autoAlpha: 0,
    scale: 0.5
}).to('.card', 0.5, {
    autoAlpha: 1,
    ease: Quad.easeInOut
}).to('.card-top-section, .card-block, .card-action', 0.35, {
    autoAlpha: 1,
    y: 0,
    ease: Quad.easeInOut
}).to('.card-img-top', 0.5, {
    autoAlpha: 1,
    scale: 1,
    ease: Elastic.easeInOut
});     
</script>

Audio Code by. Jereme Causing
Design code is edited by. M - 2010 on Codepen

DEMOSHOW

* If you want to directly copy and paste you canDownload Here Card UI Design Audio

Category: Card UI Design

Mys2010 on Codepen

POPULAR

Blog Archive