Kartu Pengenal Neumorphism
Oke, Kali ini saya ingin membagikan cara membuat profile card atau bisa disebut juga kartu pengenal, kartu ini berfungsi untuk menampilkan informasi penulis yang indah di blog kalian. Pasti sebagian dari kalian ingin memperkenalkan kalian kepada pembaca blog kalian.
Oleh karena itu saya membuat tutorial ini. Nama kartu pengenal ini sendiri, saya beri nama Kartu Pengenal Neumorphism. Karena tampilannya yang indah dan sangat rapih.
Informasi Tersedia
Informasi yang terdapat di kartu pengenal ini pun cukup banyak, kalian bisa menaruh informasi akun sosmed kalian dan lainnya. Berikut informasi yang tersedia.
- Sosial Media. Sosial media seperti facebook,twitter,instagram dan youtube ada di kartu pengenal ini.
- Website. Kalian juga dapat menampilkan situs kalian lainnya di kartu pengenal ini.
- Foto. Kalian dapat menaruh foto kalian di kartu pengenal ini.
- Contact. Kalian bisa menaruh informasi kontak kalian seperti email atau nomor HP.
Tampilan Kartu Pengenal Neumorphism
Untuk tampilannya pun sangat cantik dan modern. Yang pasti sangat cocok dipasang di berbagai blog atau situs kalian. Berikut tampilan kartu pengenalnya.
See the Pen profile-card-ui by Andra (@InfoAndra) on CodePen.
Nah, gimana cantik bukan? Bagi kalian yang ingin menambahkan kartu pengenal ini, simak tutorial berikut.
Cara Membuat Kartu Profil
- Pertama, kalian tambahkan dahulu font awesome ke blog kalian. Jika sudah, abaikan. Baca tutorialnya: Cara memasang font awesome
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
- Lalu, Tambahkan CSS berikut ke blog anda. Taruh di atas kode ]]></b:skin>.
.profile-card,.profile-card .img-area,.social-icons a,.buttons button{background:#ecf0f3;box-shadow:-3px -3px 7px #ffffff,3px 3px 5px #ceced1}
.profile-card{position:relative;width:350px;padding:30px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-direction:column}
.profile-card .icon{font-size:17px;color:#31344b;position:absolute;cursor:pointer;opacity:0.7;top:15px;height:35px;width:35px;text-align:center;line-height:35px;border-radius:50%;font-size:16px}
.profile-card .icon i{position:relative;z-index:9}
.profile-card .icon.arrow{left:15px}
.profile-card .icon.dots{right:15px}
.profile-card .img-area{height:150px;width:150px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.img-area .inner-area{height:calc(100% - 25px);width:calc(100% - 25px);border-radius:50%}
.inner-area img{height:100%;width:100%;border-radius:50%;object-fit:cover}
.profile-card .name{font-size:23px;font-weight:500;color:#31344b;margin:10px 0 5px 0}
.profile-card .about{color:#44476a;font-weight:400;font-size:16px}
.profile-card .social-icons{margin:15px 0 25px 0}
.social-icons a{position:relative;height:40px;width:40px;margin:0 5px;display:inline-flex;text-decoration:none;border-radius:50%}
.social-icons a:hover::before,.profile-card .icon:hover::before,.buttons button:hover:before{content:"";position:absolute;top:0;left:0;bottom:0;right:0;border-radius:50%;background:#ecf0f3;box-shadow:inset -3px -3px 7px #ffffff,inset 3px 3px 5px #ceced1}
.buttons button:hover:before{z-index:-1;border-radius:5px}
.social-icons a i{position:relative;z-index:3;text-align:center;width:100%;height:100%;line-height:40px}
.social-icons a.fb i{color:#4267B2}
.social-icons a.twitter i{color:#1DA1F2}
.social-icons a.insta i{color:#E1306C}
.social-icons a.yt i{color:#ff0000}
.profile-card .buttons{display:flex;width:100%;justify-content:space-between}
.buttons button{position:relative;width:100%;border:none;outline:none;padding:12px 0;color:#31344b;font-size:17px;font-weight:400;border-radius:5px;cursor:pointer;z-index:4}
.buttons button:first-child{margin-right:10px}
.buttons button:last-child{margin-left:10px}
.profile-card .social-share{display:flex;width:100%;margin-top:30px;padding:0 5px;justify-content:space-between}
.social-share .row{color:#31344b;font-size:17px;cursor:pointer;position:relative}
.social-share .row::before{position:absolute;content:"";height:100%;width:2px;background:#e0e6eb;margin-left:-25px}
.row:first-child::before{background:none}
.social-share .row i.icon-2{position:absolute;left:0;top:50%;color:#31344b;transform:translateY(-50%);opacity:0;pointer-events:none;transition:all 0.3s ease}- kemudian, Kalian klik simpan dan buat halaman baru.
- Setelah itu, ubah ke tampilan HTML dan taruh kode berikut untuk isinya. Kodenya saya sudah buatkan di file txt. Silahkan Download dibawah ini.
- Edit informasi yang kalian ingin ubah.
- Terakhir, beri nama halaman dan publish halaman tersebut.
Akhir kata
Oke, sekian tutorial dari saya, yang berjudul Cara Membuat Kartu Pengenal (Profile Card) Di Blog. Semoga bermanfaat.
Jika kalian punya saran atau pertanyaan, silahkan komen dibawah. Terimakasih.