Script Profile Page Keren Anime

Codepelajar – Profil halaman pada website merupakan aspek penting dalam membangun citra dan identitas yang kuat di dunia maya. Dengan mengoptimalkan elemen-elemen yang disebutkan di atas, profil halaman akan menjadi tempat yang menarik, informatif, dan tak terlupakan bagi pengunjung. Ingatlah bahwa profil halaman bukan hanya tentang diri atau perusahaan, tetapi juga tentang memberikan nilai tambah bagi pengunjung sehingga dapat menciptakan hubungan yang berarti dan saling menguntungkan.

Cara membuat profile page anime:

Dapat di pastikan terlebih dahulu script ini bisa dipasang pada Blogger, WordPress ataupun Website.

CSS

body {
  background-color:#ddd;
}
img {max-width:100%}
.winner-wrapper {
  position:relative;
  width:480px;
/*   height:640px; */
  background-color:#0984e3;
  margin:100px auto;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 5px 10px rgba(0,0,0,0.1), 0 10px 30px rgba(0,0,0,0.1);
  border-radius:24px;
  transform:scale(0);
  transition:.5s;
}


.winner-header {
  height:100px;
}
.shape.trophy {
  position:absolute;
  left:50%;
  top:-75px;
  width:150px;
  height:150px;
  background-color:#fff;
  border:14px;
  border-radius:150px;
  text-align:center;
  transform:translateX(-50%) translateY(100%);
  transition:.5s;
  opacity:0;
  display:flex;
  justify-content:center;
  align-items:center;
  vertical-align:middle;
  box-shadow:0 4px 8px rgba(0,0,0,0.4),
    0 8px 16px rgba(0,0,0,0.1
    )
}
.shape.trophy img {
  width:70%;
  height:auto;
  justify-content:center;
  align-items:center;
  vertical-align:middle;
}
.winner-pic {
  text-align:center;
}
.winner-pic img {
  margin:auto;
  width:300px;
  border:5px solid #fff;
  border-radius:3px;
  margin-top:14px;
}
.winner-text {
  text-align:center;
  padding:14px;
}
.winner-text h4 {
  font-size:32px;
  margin:0;
  color:#fff;
  font-family: "Ubuntu", sans-serif;
  margin-bottom:14px;
  line-height:1;
}
.winner-status {
  font-family: "Ubuntu", sans-serif;
  color:#fff;
  font-size:18px;
}
.winner-wrapper.show {
  transform:scale(1);
}
.shape.trophy.show {
  transform:translateX(-50%) translateY(0);
  opacity:1;
}

HTML

<div class='winner-wrapper'>
  <div class='winner-header'>
    <span class='winner-close'></span>
    <div class='decoration'>
      <div class='shape trophy'>
        <img src='https://4.bp.blogspot.com/-9RIx3vDvKyc/XDbvo3adZ_I/AAAAAAAACN0/RHTNXWdUwy4kochRLtzYbQwl_SHVl5LKwCLcBGAs/s1600/trophy-medal-winner-prize-37ca31b0a43c9f59-512x512.png' />
      </div>
    </div>
  </div>
  <div class='winner-body'>
    <div class='winner-pic'>
      <img src='https://4.bp.blogspot.com/-G33HlAzSsSU/XDbxH8DhLqI/AAAAAAAACOA/kI-gAIEUwv4CRQ7bJNY8OsW4fmknK6ddACLcBGAs/s1600/user-photo-aqua.png' />
    </div>
    <div class='winner-text'>
      <h4>Aqua-Sama</h4>
      <span class='winner-status'>Ketua OSIS Zaman Now</span>
    </div>
  </div>
</div>

Javascript

setTimeout(function(){
  document.getElementsByClassName('winner-wrapper')[0].classList.toggle('show');
  setTimeout(function(){
 document.getElementsByClassName('trophy')[0].classList.toggle('show');
  },500);
},1000)

Demo

Anda dapat menggunakan script ini sebagai kartu pengenal yang bagus untuk memperkenalkan bahwa anda adalah pemilik website yang kreatrif.