"Profile Card"
Pure CSS 1.0.0 Snippet by absoftlab

Post to Facebook Tweet this

<link href="//cdnjs.cloudflare.com/ajax/libs/pure/1.0.0/pure-min.css" rel="stylesheet" id="bootstrap-css"> <script src=""></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title> Profile</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="profile_conteiner"> <div class="image_conteiner"> <div class="image"> <img src="https://scontent.fdac52-1.fna.fbcdn.net/v/t1.0-1/p160x160/51116857_456227228247679_4340289972750778368_n.jpg?_nc_cat=107&_nc_oc=AQk3K1SR-YtY-NMEEQ384h-eKtZn5_UNeHz9nV744Q0Tzzhj0mXnLMIJAoNqmUjkP4I&_nc_ht=scontent.fdac52-1.fna&oh=4622abf927817816fd26b47ef5185329&oe=5E4D921B"/> </div> </div> <div class="text_conteiner"> <div class="title"> <h3>Abdullah Al Mahmud</h3><br> <h4>Android Developer</h4><br> </div> <div class="objective"> <p>To secure a challenging and rewarding position as Android Developer with an established organization that can utilize my skills and experience.</p> </div><br> <div class="btn"> <center><a href="https://facebook.com/riksmamun1999"target="blank">View Profile</a></center> </div><br> <div class="social"><center> <a href="https://twitter.com/riksmamun1999"target="blank"><span><img src="https://pbs.twimg.com/media/EIi549jUUAEz4mD?format=png&name=small"></span></a> <a href="https://www.linkedin.com/in/abdullah-al-mahmud-068116b9/"target="blank"><span><img src="https://pbs.twimg.com/media/EIi549iVAAMcZ5I?format=png&name=small"></span></a> <a href="https://fiverr.com/absoftlab"target="blank"><span><img src="https://pbs.twimg.com/media/EIi549oUEAAep60?format=png&name=small"></span></a><center> </div> </div> </div> </body> </html>
*{ margin:0px; padding:0px; font-family:arial; box-sizing:border-box; } .profile_conteiner{ height:500px; width:320px; box-shadow: 0px 6px 10px -6px; border-radius:10px; margin:auto; margin-top:60px; margin-bottom:60px; overflow:hidden; } .image_conteiner{ height:150px; background:purple; } .image{ background:tomato; height:120px; width:120px; padding:5px; border-radius:50%; transform:translate(105px,90px); } .image img{ height:110px; width:110px; border-radius:50%; } .text_conteiner{ height:350px; background:white; padding:20px; padding-top:70px; } .text_conteiner h3,h4,p{ text-align:center; } .title h4{ color:lightcoral; } .btn{ background:purple; border-radius:20px; height:40px; width:140px; margin:auto; } .btn:hover{ background:none; color:purple; border:2px solid purple; border-style:double; transition:1s; } .btn a{ text-decoration:none; color:blue; line-height:40px; color:white; display:block; } .btn a:hover{ color:purple; transition:1s; top:0; } .social img{ height:20px; width:20px; margin:5px; display:inline-block; }

Related: See More

Rotating CSS Card

Questions / Comments: