User profile card design with short overview of user profile usign html,css and bootstrap 4. Our company team profile,customer list,client list,project list,project member list card weight design example. in this card design we are display image,name,status,city and some other information.

We allows to free snippets of profile card bootstrap 4 , you can download full code of html css card layout layout. Here in this post i will give you example of bootstrap 4 profile card snippet and you will get simple code of html, css and jquery. In user profile page html template snippet i give you three tab with html, css and js, you can easily get code of bootstrap profile card layout.


<!DOCTYPE html> <html> <head> <link href="https://fonts.googleapis.com/css?family=Barlow+Condensed" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container mt-5"> <div class="row"> <div class="col-lg-12 col-sm-12 col-12 main-section"> <div class="row text-center"> <div class="col-lg-4 col-sm-4 col-12"> <div class="row-fluid section"> <div class="col-lg-12 col-sm-12 col-12"> <img src="http://nicesnippets.com/demo/man.png"> <h1>Jhon Lesha</h1> <p>Designer</p> </div> <div class="col-lg-12 col-sm-12 col-12"> <div class="row user-detail"> <div class="col-lg-6 col-sm-12 col-6 text-left"> <h2><i class="fa fa-map-marker" aria-hidden="true"></i> India, IN</h2> </div> <div class="col-lg-6 col-sm-12 col-6 text-right"> <h2><i class="fa fa-money" aria-hidden="true"></i> $45 / hour</h2> </div> </div> </div> </div> </div> <div class="col-lg-4 col-sm-4 col-12"> <div class="row-fluid section"> <div class="col-lg-12 col-sm-12 col-12"> <img src="http://nicesnippets.com/demo/1499344631_malecostume.png"> <h1>Tim Jordan</h1> <p>Devloper</p> </div> <div class="col-lg-12 col-sm-12 col-12"> <div class="row user-detail"> <div class="col-lg-6 col-sm-12 col-6 text-left"> <h2><i class="fa fa-map-marker" aria-hidden="true"></i> Asia, AK</h2> </div> <div class="col-lg-6 col-sm-12 col-6 text-right"> <h2><i class="fa fa-money" aria-hidden="true"></i> $35 / hour</h2> </div> </div> </div> </div> </div> <div class="col-lg-4 col-sm-4 col-12"> <div class="row-fluid section"> <div class="col-lg-12 col-sm-12 col-12"> <img src="http://nicesnippets.com/demo/1499345224_female1.png"> <h1>Lisa Corner</h1> <p>Marketing</p> </div> <div class="col-lg-12 col-sm-12 col-12"> <div class="row user-detail"> <div class="col-lg-6 col-sm-12 col-6 text-left"> <h2><i class="fa fa-map-marker" aria-hidden="true"></i> Rassia, RS</h2> </div> <div class="col-lg-6 col-sm-12 col-6 text-right"> <h2><i class="fa fa-money" aria-hidden="true"></i> $70 / hour</h2> </div> </div> </div> </div> </div> </div> <div class="row text-center mt-3"> <div class="col-lg-4 col-sm-4 col-12"> <div class="row-fluid section"> <div class="col-lg-12 col-sm-12 col-12"> <img src="http://nicesnippets.com/demo/1499345372_maturewoman.png"> <h1>Mia Win</h1> <p>Managment</p> </div> <div class="col-lg-12 col-sm-12 col-12"> <div class="row user-detail"> <div class="col-lg-6 col-sm-12 col-6 text-left"> <h2><i class="fa fa-map-marker" aria-hidden="true"></i> USA, UA</h2> </div> <div class="col-lg-6 col-sm-12 col-6 text-right"> <h2><i class="fa fa-money" aria-hidden="true"></i> $25 / hour</h2> </div> </div> </div> </div> </div> <div class="col-lg-4 col-sm-4 col-12"> <div class="row-fluid section"> <div class="col-lg-12 col-sm-12 col-12"> <img src="http://nicesnippets.com/demo/1499345471_boy.png"> <h1>Jemsh Kook</h1> <p>Web Designer</p> </div> <div class="col-lg-12 col-sm-12 col-12"> <div class="row user-detail"> <div class="col-lg-6 col-sm-12 col-6 text-left"> <h2><i class="fa fa-map-marker" aria-hidden="true"></i> Dubai, DA</h2> </div> <div class="col-lg-6 col-sm-12 col-6 text-right"> <h2><i class="fa fa-money" aria-hidden="true"></i> $60 / hour</h2> </div> </div> </div> </div> </div> <div class="col-lg-4 col-sm-4 col-12"> <div class="row-fluid section"> <div class="col-lg-12 col-sm-12 col-12"> <img src="http://nicesnippets.com/demo/businessman.png"> <h1>Win Desal</h1> <p>Web Devloper</p> </div> <div class="col-lg-12 col-sm-12 col-12"> <div class="row user-detail"> <div class="col-lg-6 col-sm-12 col-6 text-left"> <h2><i class="fa fa-map-marker" aria-hidden="true"></i> Tokiyo, TK</h2> </div> <div class="col-lg-6 col-sm-12 col-6 text-right"> <h2><i class="fa fa-money" aria-hidden="true"></i> $50 / hour</h2> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>
body{ background-color: #96DFA8; } .main-section{ padding:15px; font-family: 'Barlow Condensed', sans-serif; } .section{ border-radius:5px; background-color: #fff; } .section .fa{ font-size:17px; margin-right: 5px; } .section:hover,.section:hover.section img{ box-shadow:1px 2px 24px 0px #000; transition:0.5s; } .section h1{ margin:0px; font-size:25px; color:#8B95A5; } .section p{ margin:0px; font-weight:500; margin-bottom:40px; letter-spacing: 1px; } .section img{ width:20%; height:20%; border-radius: 50%; margin:20px 0px 10px 0px; } .user-detail{ background-color:#FCFDDB; border-top:1px solid #d2d2d2; padding: 5px 0px; border-radius:0px 0px 5px 5px; } .user-detail h2{ font-size: 20px; color:#a2a2a2; font-weight:400; }

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:




Tags:- card8

Random Post


Random Blog