Membuat Profil Card Keren Dengan Bootstrap

Tutorial kali ini ialah cara menciptakan profil card atau kartu profil keren ibarat gmail dengan css html dan bootstrap. Desain kartu profil ini sanggup menampilkan background, foto profil, nama, tombol follow, status dan pengikut.

Selain itu, desain profil card sanggup 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 ialah sebuah layout yang manampilkan isu 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 manis 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 sanggup gunakan untuk tokoh atau anggota organisasi yang ingin di tampilkan dalam sebuah web.

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

Cara menciptakan Profil Card Menggunakan CSS, HTML dan Boostrap

1.Buka notepad, sublime atau text editor lainnya. Buat File gres > Beri nama Index.html > Pastekan instruksi 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 gres lagi, Simpan dan beri nama Custom.css > Pastekan instruksi 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 semoga memudahkan dalam pemanggilan.

4. Sekarang kalian sanggup coba jalankan script nya, kalau berhasil maka akibatnya akan ibarat ini.
Kalian sanggup ubah sendiri dan edit CSS nya sesuai impian dan kebutuhan kalian sendiri, cara nya cukup pake inspect element biar tahu mana sintax yang mau kau edit.

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

Jika kau ingin melihat versi lain profil card berikut ini:

Desain Profil Card Dengan Bootstrap 4 V.2

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

Jika kau punya pertanyaan dan pendapat seputar cara menciptakan kartu profil berbasis web ini, sanggup olok-olokan saran dan komentarnya di kolom komentar dibawah ini. Sekian dari aku dan Happy Coding!