Create a Simple Profile Card Design Using HTML & CSS

 <div class="profile-card-1"> <!--image--> <div class="img"> <img src="modi.jpg"/> </div> <a class="view-more" href=""> <i class="fa fa-plus-circle"></i> </a> <!--text--> <div class="mid-section"> <div class="name">Narendra Modi</div> <div class="description">Current Prime Minister of <a href="#">India</a></div> <div class="line"></div> <div class="stats"> <div class="stat">53.4M <div class="subtext">Followers</div> </div> <div class="stat">324K <div class="subtext">Liks</div> </div> <div class="stat">236K <div class="subtext">Shares</div> </div> </div> </div> <!--social icons--> <div class="links"> <a class="fb" href=""> <i class="fa fa-facebook-f" aria-hidden="true"></i> </a> <a class="twitter" href=""> <i class="fa fa-twitter" aria-hidden="true"></i> </a> <a class="follow" href=""> <i class="fa fa-rocket" aria-hidden="true"></i> </a> </div> </div> 

body{ background-color: #f2f2f2; font-family: "Ubuntu",sans-serif; } .profile-card-1{ width: 300px; height: 390px; background: white; margin: 0 auto; border-radius: 10px; text-align: center; box-shadow: 4px 4px 10px #999; position: relative; box-sizing: border-box; overflow: hidden; } .profile-card-1 .img img{ width: 160px; height: 160px; padding: 3px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.6); position: absolute; left: calc(50% - 84px); top: 26px; } .profile-card-1 .img { height: 130px; width: 100%; background-image: linear-gradient(rgba(46,204,113,0.4), rgba(46,204,113,0.95)), url("bac.jpg"); padding: 20px; box-sizing: border-box; position: relative; } .profile-card-1 .mid-section{ position: absolute; height: 200px; width: 100%; top: 200px; left: 0; padding: 10px 20px 0; box-sizing: border-box; background: white; } .profile-card-1 .mid-section .name{ color: #333333; font-size: 1.4em; padding-top: 5px; background: rgba(255,255,255,0.1); font-weight: bold; } .profile-card-1 .mid-section .description{ color: gray; text-decoration: none; font-size: 0.9em; } .profile-card-1 .mid-section .description a{ color: inherit; text-decoration: none; font-weight: bold; } .profile-card-1 .mid-section .line{ background: #7ee2a8; width: 80%; height: 2px; margin: 5px auto -3px; } .profile-card-1 .mid-section .stats{ display: flex; position: absolute; left: 10%; padding-top: 10px; width: 80%; justify-content: space-around; } .profile-card-1 .mid-section .stats .stat{ font-size: 1.3em; color: #333333; padding: 5px; font-weight: bold; } .profile-card-1 .mid-section .stats .stat .subtext{ color: gray; font-size: 0.6em; font-weight: normal; } .profile-card-1 .links .fb{ position: absolute; left: 0; width: 25%; height: 100%; background-color: #3b5998; } .profile-card-1 .links .fb:hover{ background-color: #2162db; } .profile-card-1 .links{ width: 100%; height: 50px; background: #f2f2f2; border-top: 1px solid #44d581; margin-top: 35px; border-radius: 5px; color: white; font-size: 2em; line-height: 1.5em; position: absolute; bottom: 0; } .profile-card-1 .links a{ color: white; } .profile-card-1 .links .twitter{ position: absolute; left: 25%; width: 25%; height: 100%; background-color: #55acee; } .profile-card-1 .links .twitter:hover{ background-color: #50dcff; } .profile-card-1 .links .follow { position: absolute; left: 50%; width: 50%; height: 100%; background-color: #2ecc71; } .profile-card-1 .links .follow:hover{ background-color: #03cc57; } /* image after effect */ .profile-card-1 .img::after{ content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; left:calc(50% - 91.5px); top: 20px; border: 3px solid rgba(255,255,255,0.4); } /* image before effect */ .profile-card-1 .img::before{ content: ""; position: absolute; width: 190px; height: 190px; border-radius: 50%; left: calc(50% - 95px); top: 15.5px; border: 2px solid rgba(255,255,255,0.2); } .profile-card-1 .view-more{ position: absolute; top: calc(50% - 0.5em); left: calc(50% - 0.5em); z-index: 2; font-size: 2em; color: #2ecc71; } .profile-card-1 .view-more .fa-plus-circle{ position: absolute; background: white; border-radius: 50%; width: 1.004em; }