iklan bagian Header

Membuat Profil Card Keren Dengan Bootstrap

Tutorial kali ini adalah cara membuat profil card atau kartu profil keren seperti gmail dengan css html dan bootstrap.  Desain kartu profil ini bisa menampilkan background, foto profil, nama, tombol follow, status dan pengikut.

Membuat Profil Card Keren Dengan Bootstrap

Selain itu, desain profil card dapat anda gunakan dalam tampilan grid view untuk sebuah konten. Desain kartu profil ini sepenuhnya responsive  dan support untuk smua browser.

Profil card (kartu profil) berbasis web adalah sebuah layout yang manampilkan informasi singkat mengenai profil seseorang atau tokoh dalam sebuah web. Informasi yang disampaikan biasanya berupa foto profil, background, nama, sekolah, atau jabatan sekalipun. Tergantung hal-hal yang dianggap penting untuk di tampilkan.

Menggunakan profil card pada sebuah web sangatlah bagus apalagi untuk sebuah web yang punya member, tentu membutuhkan sebuah profil card untuk menampilkan identitas singakt seseorang. Tapi profil card tak hanya sebatas untuk web yang punya member. Kamu juga bisa gunakan untuk tokoh atau anggota organisasi yang ingin di tampilkan dalam sebuah web.

Nah untuk itu, kamu bisa jadikan yang satu ini referensi desain layout profil card yang kamu gunakan pada web kamu. Disini kita menggunakan sedikit custom css, html dan bootstrap. Kamu bisa ikuti langkah-langkah berikut ini:

Cara membuat Profil Card Menggunakan CSS, HTML dan Boostrap

1.Buka  notepad, sublime atau text editor lainnya. Buat File baru > Beri nama Index.html > Pastekan kode dibawah ini > Save.

<!DOCTYPE html>
<html lang="en">
<head>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
      <link rel="stylesheet" type="text/css" href="custom.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-offset-4 col-sm-6 col-xs-12 profile-badge">
                <img src="bg.jpg">
                <div class="profile-pic">
                    <img src="img.png">
                </div>
                <div class="user-detail text-center">
                  <h3>Kang Yogik</h3>
                  <h4>Harvard University</h4>
                  <p>Web Developer</p>
                  <button class="btn btn-defualt"><i class="fa fa-google-plus" aria-hidden="true"></i> Follow</button><br>
                  <div class="hover-detail">
                      <div class="row">
                        <div class="col-md-12 col-sm-12 col-xs-12 checkbox Following">
                            <label><input type="checkbox" value="">Following<span>8</span></label>
                        </div>
                        <div class="col-md-12 col-sm-12 col-xs-12 checkbox">
                            <label><input type="checkbox" value="">Followers<span>120</span></label>
                        </div>
                        <div class="col-md-12 col-sm-12 col-xs-12 checkbox">
                            <label><input type="checkbox" value="">Family<span>100</span></label>
                        </div>
                        <div class="col-md-12 col-sm-12 col-xs-12 checkbox">
                            <label><input type="checkbox" value="">Friends<span>8</span></label>
                        </div>
                      </div>
                  </div>
                  <span>120K Followers</span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
2. Buat file baru lagi, Simpan dan beri nama Custom.css > Pastekan kode dibawah ini > Save

body{
    background-color: #8BDFE2;
}
.profile-badge{
    border:1px solid #c1c1c1;
    padding:5px;
    position: relative;
}
.profile-badge img{
    height: 200px;
    width: 100%;
}
.user-detail{
    background-color: #fff;
    position: relative;
    padding:65px 0px 10px 0px;
    color:#8B8B89;
}
.user-detail h3, h4{
    margin: 0px;
    margin:0px 0px 5px 0px;
    color: #000;
}
.user-detail p{
    font-size:14px;
}
.user-detail .btn{
    margin-bottom:10px;
    background-color: #fff;
    border:1px solid #DEDEDE;
    border-radius: 0px;
    color:black;
}
.user-detail .btn i{
    color:#D35B4D;
    padding-right:18px;
}
.profile-pic{
    position: absolute;
    height:120px;
    width:120px;
    left: 50%;
    transform: translateX(-50%);
    top: 140px;
    z-index: 1001;
}
.profile-pic img{
    height: 100%;
    width: 100%;
    border-radius: 50%;
    box-shadow: 0px 0px 5px 0px #c1c1c1;
}
.hover-detail{
    background-color: #fff;
    border:1px solid #7C7C7C;
    position: absolute;
    width: 200px;
    box-shadow: 0px 0px 6px 0px #7C7C7C; 
    display:none;
    top: 145px;
    left: 50%;
    transform: translateX(-50%);
}
.hover-detail:hover,
.user-detail .btn:hover ~ .hover-detail{
    display: block;
}
.checkbox label{
    text-align: left;
    width: 100%;
}
.Following label{
    padding-bottom: 5px;
    border-bottom:1px solid #c2c2c2;
}
.checkbox label span{
    float:right;
}
.hover-detail{
    padding:5px;
}
3. Jangan lupa untuk mengganti Foto dan Background nya dengan gambar kalian sendiri dan letakkan di dalam satu folder yang sama dengan index.html dan custom.css tadi agar memudahkan dalam pemanggilan.

4. Sekarang kalian bisa coba jalankan script nya, jika berhasil maka hasilnya akan seperti ini.
Kalian bisa ubah sendiri dan edit CSS nya sesuai keinginan dan kebutuhan kalian sendiri, cara nya cukup pake inspect element biar tahu mana sintax yang mau kamu edit.

profil card dengan css dan bootstrap

Demikian tutorial singkat tentang cara membuat profil card dengan CSS HTML dan Bootstrap. Semoga kalian suka dengan desain nya, jangan lupa untuk membagikan keteman-teman kamu yang lainnya.

Jika kamu ingin melihat versi lain profil card berikut ini:

  1. Desain Profil Card Dengan Bootstrap 4 V.2


Ada juga tutorial pembuatan live chat box dengan css, html dan bootstrap yang bisa kamu aplikasikan kedalam project web kamu biar makin keren.

Jika kamu punya pertanyaan dan pendapat seputar cara membuat kartu profil berbasis web ini, bisa ajukan saran dan komentarnya di kolom komentar dibawah ini. Sekian dari saya dan Happy Coding!

0 Response to "Membuat Profil Card Keren Dengan Bootstrap"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel