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.

Pertama

Kedua

<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