Cara Buat Halaman Profile Card Simpel

Hai sob pernah gak sih kepikiran mempunyai halaman profil simpel tapi masih enak dilihat?, admin sendiri pernah pastinya. Nah pada kesempatan kali ini, admin akan membagikan bagaimana cara membuat halaman profil card yang simpel dan keren. Sebelumnya saya mendapatkan tutorial ini dari Blog Guru Design, yang pengen berkunjung ke blognya nanti bisa cek linknya di akhir artikel ya.

Halaman Profil adalah tampilan singkat profil kamu. Di halaman profil, kamu dapat melihat biodata singkat, akun sosial media, artikel yang pernah ditulis dan lainnya. Nah karna tutorial kali ini lebih ke halaman profil yang simpel jadi tidak terlalu banyak data yang bisa dimasukkan, kedepannya saya akan membagikan halaman profil yang lebih lengkap. Oleh karena itu, jangan lupa pantau terus blog PayuBaco.

Cara Buat Halaman Profile Card Simpel

Silahkan sobat buka halaman blog sobat.
Selanjutnya pilih Halaman lalu buat Halaman Baru.
Jika pada mode Compose atau Tampilan Menulis silahkan ubah ke Tampilan HTML.
Lalu pastekan semua kode dibawah ini pada halaman yang dibuat tadi.

<style type="text/css">
/*Create By www.gurudzgn.com*/
#card{
    background-color: #fff;
    height: auto;
    width: 350px;
    max-width: 100%;
    margin: 15px auto;
    border-radius: 25px;
    padding-bottom: 1px;
    box-shadow:5px 5px 10px rgba(0, 0, 0, 0.5);
}
#card:hover{
    box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5);
}
.card-head{
    background: linear-gradient(to right, #3ec2f2,#0067b0);
    text-align: center;
    width: 100%;
    background-color: #E6EBEE;
    border-radius: 25px 25px 0 0;
    color: #393B45;
    height: 130px;
    font-weight: 800;
    margin: 0;
}
h1 {
    text-align: center;
    width: 100%;
    color: #038CCF;
    font-weight: 800;
}

.image-crop {
    display: block;
    position: relative;
    background-color: #E6EBEE;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    margin-top: -80px;
    overflow: hidden;
    border-radius: 50%;
    box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5);
    border:3px solid #fff;
}
#avatar {
    display: inline;
    height: 230px;
    width: auto;
    margin-left: -34px;
}
#bio {
    margin: 30px 15px;
    height: auto;
    display: block;
}
#bio p {
    color: #222;
    font-weight: lighter;
    font-size: 14px;
    text-align: justify;
}
#stats {
    display: flex;
    flex-direction: row;
    height: auto;
    width: 280px;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    font-weight: 500;
}
.col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: auto;
}
.stat {
    font-size: 25px;
    margin: 0;
}

.label {
    margin: 0;
}
#buttons {
    display: flex;
    margin: 0 auto;
    justify-content: space-between;
    width: 280px;
}
.button {
    position: relative;
    padding: 10px 0;
    width: 130px;
    margin: 30px 0;
    border-radius: 25px;
    border: none;
    letter-spacing: 0.2px;
    font-weight: 500;
    background-color: #038ccf;
    color: #E6EBEE;
    text-align: center;
    display:inline-block;
    font-family:'Open Sans',sans-serif;
    text-decoration:none;
    box-shadow:inset 0 0 0 #22313F;
    font-size:16px;
    text-transform:uppercase;
    transition:all 0.3s ease-out;
}
.button:focus {
    display: none;
}
.button:hover {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow:inset 0 -50px 0 #22313F;
}
#msg{
    background-color: #E6EBEE;
    color: #393B45;
    border: 1px solid #393B45;
}
#msg:hover{
    color: #fff;
}
</style>
<div id="card">
    <div class="card-head">
    </div>
    <div class="image-crop">
        <img id="avatar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrORAIyV4CV1Jmqr0QU60fusTWQHRWzdsuhdxdtf3KI20R1ds6t4Nar-f75fvr1xzlRy_5m1DL93KL1zQ9p2CekgHjJiL9esyq-zN6JmEvDNb0L8NWLROjN0VOkgZZOTHNGYNnvVR-N-Fn/"></img>
    </div>
    <h1>Suprianto SA</h1>
    <div id="bio">
        <p>Hai, nama saya suprianto saya adalah seseorang mahasiswa dan seorang blogger. Saya sangat menyukai design grafik dan memasak. Apapun yang saya lakukan saya selalu berharap bisa selalu bermanfaat untuk orang lain.</p>
    </div>
    <div id="stats">
        <div class="col">
            <p class="stat">29</p>
            <p class="label">Posts</p>
        </div>
                <div class="col">
            <p class="stat">3K</p>
            <p class="label">Followers</p>
        </div>
                <div class="col">
            <p class="stat">2K</p>
            <p class="label">Following</p>
        </div>
    </div>
    <div id="buttons">
        <a class="button" href="https://www.instagram.com/supriantosa" >Follow</a>
        <a class="button" href="https://api.whatsapp.com/send?phone=6282186969076&text=Admin%20Payubaco%20saya%20ingin%20bertanya!" id="msg">Message</a>
    </div>
</div>

Pada kode ditas terdapat 2 bagian yang diberi tanda merah, silahkan ganti kedua kode tersebut.

1. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrORAIyV4CV1Jmqr0QU60fusTWQHRWzdsuhdxdtf3KI20R1ds6t4Nar-f75fvr1xzlRy_5m1DL93KL1zQ9p2CekgHjJiL9esyq-zN6JmEvDNb0L8NWLROjN0VOkgZZOTHNGYNnvVR-N-Fn/ = ganti dengan url foto/gambar.

2. 350px = Silahkan ganti dengan ukuran yang sobat inginkan. Jika ingin fullscreen sobat tinggal ganti menjadi 100%.

Selesai silahkan sobat terbitkan halaman dan hasilnya akan seperti ini.

Mudah sekali bukan, tentunya karna pada dasarnya tutorial ini tidak begitu mengharuskan kita untuk faham HTML dan CSS. Kita hanya mengganti apa saja informasi yang ingin diganti pada kode yang telah disiapkan diatas. Oke itu dulu tutorial yang dapat admin berikan pada sobat kali ini, jika dirasa ada yang kurang dimengerti silahkan bertanya di kolom komentar. Bantu share untuk perkembangan blog ini kedepannya, terima kasih dan sampai jumpa diartikel selanjutnya.

Sumber : https://www.gurudzgn.com/2020/07/cara-membuat-halaman-profile-card.html