Cara Membuat Halaman Profile Card Untuk Pemula

Hi web Developer, kembali lagi bersama dengan guru design. Beberapa waktu lalu ada salah satu pengunjung blog request Tutorial Cara Membuat Halaman Profie Card, berhubung saya sudah janji nanti kalau ada waktu luang akan saya buatkan maka saat ini saya akan membuat kan tutorialnya.

Baiklah jangan kebanyakan basa basi nanti pembaca kecewa hehe, tapi sebelumnya siapkan segelas kopi hangat untuk menemani mu supaya lebih semangat ngoding nya,

Ok lanjut ke tutorial, berikut adalah tutorial cara membuat halaman profile card:

Pertama

Buat halaman baru atau laman baru (jika sudah punya tidak perlu buat).

Kedua

Kemudian tambahkan kode dibawah ini pada tab HTML jangan tab Compose.

<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/AVvXsEjgzEJeCTO-BN7T0rAj6-15Dod2QT44-mQDVDkFqXXBIR8FtT8rpDEBZzUQ_BeIeYNi1qbK2a1wgdB6CQqyEgDgwZ0Wpc8ABwO35YJAZbNVxEI2FSOyMPlfs9Yr9IJ4SpGqAE3sCXf6qmY/s1600/IMG_20180801_170615.jpg"></img>
    </div>
    <h1>Guru Design</h1>
    <div id="bio">
        <p>Hai, nama saya rafiqi saya adalah seseorang yang menyukai design, baik web design atau-pun graphic design yang mencoba menjadi sosok yang lebih baik dan bermanfaat untuk orang lain.</p>
    </div>
    <div id="stats">
        <div class="col">
            <p class="stat">1K</p>
            <p class="label">Posts</p>
        </div>
                <div class="col">
            <p class="stat">2K</p>
            <p class="label">Followers</p>
        </div>
                <div class="col">
            <p class="stat">10K</p>
            <p class="label">Following</p>
        </div>
    </div>
    <div id="buttons">
        <a class="button" href="" >Follow</a>
        <a class="button" href="" id="msg">Message</a>
    </div>
</div>

• Pada link gambar yang saya blok warna merah silahkan ganti dengan link gambar kalian masing-masing.
• Untuk mengatur ukuran supaya sesuai dengan halaman kalian silahkan ubah ukuran width yang saya blok rwarna hijau sesuai dengan kebutuhan, atau jika ingin fullscreen maka ubah ke width:100%

Terakhir

Save dan lihat hasilnya
Result

Sekian semoga bermanfaat terimakasih.