<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/4.4.95/css/materialdesignicons.css"> <!-- partial --> <div class="main-panel"> <div class="container"> <div class="row"> <div class="col-md-4 grid-margin stretch-card"> <div class="card"> <div class="profile-card"> <div class="profile-header"> <div class="cover-image"> <img src="https://cdn.pixabay.com/photo/2019/10/19/14/16/away-4561518_960_720.jpg" class="img img-fluid"> </div> <div class="user-image"> <img src="https://scontent.fslv1-1.fna.fbcdn.net/v/t1.0-1/p240x240/71764978_543119796448430_5969446522109034496_n.jpg?_nc_cat=105&_nc_oc=AQnoaTQx8fxeyzbIbtQyvZXghFdEQl-ds6NQr_13xAXuGmWnigS1zJHTuH8sKv5e9-TSN3KRAuptCtwM-LlwxidP&_nc_ht=scontent.fslv1-1.fna&oh=52752a53e6b91980d3f9bf227064a95d&oe=5E5A25B9" class="img "> </div> </div> <div class="profile-content"> <div class="profile-name">Santosh Ghimire</div> <div class="profile-designation">Webdeveloper</div> <p class="profile-description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p> <ul class="profile-info-list"> <a href="" class="profile-info-list-item"><i class="mdi mdi-eye"></i>Timeline</a> <a href="" class="profile-info-list-item"><i class="mdi mdi-bookmark-check"></i>Saved</a> <a href="" class="profile-info-list-item"><i class="mdi mdi-movie"></i>Medias</a> <a href="" class="profile-info-list-item"><i class="mdi mdi-account"></i>About</a> </ul> </div> </div> </div> </div> <div class="col-md-8 grid-margin stretch-card"> <div class="card"> <div class="card-body"> <p class="card-title font-weight-bold">Copy from <a href="https://bootsnipp.com/snippets/pNlEa">https://bootsnipp.com/snippets/pNlEa</a></p> <hr> <p class="card-description">User Information</p> <ul class="about"> <li class="about-items"><i class="mdi mdi-account icon-sm "></i><span class="about-item-name">Name:</span><span class="about-item-detail">Santosh Ghimire</span><a href="" class="about-item-edit">Edit</a></li> <li class="about-items"><i class="mdi mdi-mail-ru icon-sm "></i><span class="about-item-name">username:</span><span class="about-item-detail">santoshghimire</span> <a href="" class="about-item-edit">Edit</a></li> <li class="about-items"><i class="mdi mdi-lock-outline icon-sm "></i><span class="about-item-name">Password:</span><span class="about-item-detail">**********</span> <a href="" class="about-item-edit">Edit</a></li> <li class="about-items"><i class="mdi mdi-format-align-left icon-sm "></i><span class="about-item-name">Bio:</span><span class="about-item-detail">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto totam, nemo quidem delectus dolores vero porro inventore perferendis minus perspiciatis.</span> <a href="" class="about-item-edit">Edit</a></li> <li class="about-items"><i class="mdi mdi-trophy-variant-outline icon-sm "></i><span class="about-item-name">Badges:</span><span class="about-item-detail"> <button type="button" class="btn btn-success btn-rounded btn-icon"> <i class="mdi mdi-star text-white"></i> </button> <button type="button" class="btn btn-info btn-rounded btn-icon"> <i class="mdi mdi-check text-white"></i> </button> <button type="button" class="btn btn-danger btn-rounded btn-icon"> <i class="mdi mdi-check text-white"></i> </button> </span> <a href="" class="about-item-edit">View</a></li> </ul> <p class="card-description">Contact Information</p> <ul class="about"> <li class="about-items"><i class="mdi mdi-phone icon-sm "></i><span class="about-item-name">Phone:</span><span class="about-item-detail">+9779861106179</span><a href="" class="about-item-edit">Edit</a></li> <li class="about-items"><i class="mdi mdi-map-marker icon-sm "></i><span class="about-item-name">Address:</span><span class="about-item-detail">254 National Highway , Hisar India</span> <a href="" class="about-item-edit">Edit</a></li> <li class="about-items"><i class="mdi mdi-email-outline icon-sm "></i><span class="about-item-name">Email:</span><span class="about-item-detail"><a href="">reasonghimire706@gmail.com</a></span> <a href="" class="about-item-edit">Edit</a></li> <li class="about-items"><i class="mdi mdi-web icon-sm "></i><span class="about-item-name">Site:</span><span class="about-item-detail"><a href="google.com">www.google.com</a></span> <a href="" class="about-item-edit">Edit</a></li> </ul> <p class="card-description">Basic Information</p> <ul class="about"> <li class="about-items"><i class="mdi mdi-cake icon-sm "></i><span class="about-item-name">Birthday:</span><span class="about-item-detail">Aug 3 , 1998</span><a href="" class="about-item-edit">Edit</a></li> <li class="about-items"><i class="mdi mdi-account icon-sm "></i><span class="about-item-name">Gender:</span><span class="about-item-detail">Male</span> <a href="" class="about-item-edit">Edit</a></li> <li class="about-items"><i class="mdi mdi-clipboard-account icon-sm "></i><span class="about-item-name">Profession:</span><span class="about-item-detail">Student</span> <a href="" class="about-item-edit">Edit</a></li> <li class="about-items"><i class="mdi mdi-water icon-sm "></i><span class="about-item-name">Blood Group:</span><span class="about-item-detail">AB+</span> <a href="" class="about-item-edit">Edit</a></li> <li class="about-items"><i class="mdi mdi-human-male-female icon-sm "></i><span class="about-item-name">Relationship Status:</span><span class="about-item-detail">Single</span> <a href="" class="about-item-edit">Edit</a></li> </ul> </div> </div> </div> </div> </div> <!-- content-wrapper ends --> <!-- partial:partials/_footer.html --> <!-- partial --> </div> <!-- main-panel ends -->

body{ background-color: #f3f3f3; margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #000; } p { font-size: 0.875rem; margin-bottom: .5rem; line-height: 1.3rem; } .card { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid #e7eaed; border-radius: 0; } .card .card-description { margin-bottom: .875rem; font-weight: 400; color: #76838f; } .profile-header { height: 150px; width: 100%; position: relative; } .cover-image { height: 150px; width: 100%; overflow: hidden; } .user-image { position: absolute; height: 80px; width: 80px; border-radius: 50%; bottom: -50%; left: 50%; /* top: 50%; */ transform: translate(-50%, -50%); z-index: 5; } .user-image img { height: 80px; width: 80px; border-radius: 50%; top: -40px; border: 5px solid #777; } .profile-card .profile-content { padding: 50px 20px 30px 20px; } .profile-card .profile-name { font-size: 1.2rem; color: #3249b9; font-weight: 600; text-align: center; } .profile-card .profile-designation { font-size: 13px; color: #777; text-align: center; } .profile-card .profile-description { padding: 10px; font-size: 13px; color: #777; margin: 5px 0px; background-color: #F1F2F3; border-radius: 5px; } .profile-card ul.profile-info-list { padding: 0; margin: 10px 0; list-style: none; font-size: 1rem; font-weight: 500; color: #777; } .profile-card ul.profile-info-list a { text-decoration: none; color:inherit; } .profile-card a.profile-info-list-item { margin: 10px 0; padding:15px; background-color: #F1F2F3; display: block; -webkit-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } .profile-card a.profile-info-list-item:hover { background-color: #9E9E9E; color: white; -webkit-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } .profile-card a.profile-info-list-item i { padding: 10px; } ul.about { list-style: none; color: black; padding: 0; } li.about-items { margin: 10px; font-size: 0.9rem; /* font-family: sans-serif; */ /* font-weight: 400; */ } li.about-items i { color:#607d8b; } span.about-item-name { width: 100px; display: inline-flex; margin-left: 10px; } span.about-item-detail { display: inline-flex; width: calc(100% - 160px); } span.about-item-detail > button{ margin-right: 10px; } .btn.btn-icon { width: 40px; height: 40px; padding: 0; } .btn.btn-rounded { border-radius: 50px; } a.about-item-edit { float: right; }