Create Profile Display Card Using HTML And CSS


John

Mr. Fiction Name

Enter qualification with title

Fiction Group

Its features:

  • It is completely responsive.

  • You can add a link to the name of each button.

  • You can use the image you need instead of the fiction image.

  • You can change the hover color via CSS if you want.

Try to create like yourself by following the codes below :


Step 1) Add to folder :
First make one folder and put an images that you like.
Step 2) Add to head :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Step 3) Add to html :
<h2>Create Profile Display Card Using HTML And CSS</h2><br> <div class="fifteen"> <div class="card"> <img src="v01.png" alt="John" style="width:90%"> <h1>Mr. Fiction Name</h1> <p class="title">Enter qualification with title</p> <p>Fiction Group</p> <div style="margin: 24px 0;"> <a href="#"><i class="fa fa-youtube"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-instagram"></i></a> <a href="#"><i class="fa fa-facebook"></i></a> </div> <p><button>Learn More</button></p> </div> </div>
Step 4) Add to css :
.fifteen{ max-width: 350px; height:px; background-image: linear-gradient(90deg,#bbb, #ddd, #bbb); margin: auto; border-radius:10px; } .card { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); width: 300px; margin: auto; text-align: center; font-family: arial; } .card img{ border:5px solid #aaa; border-radius:50%; margin-top:10px; } .title { color: black; font-size: 18px; } button { border: none; outline: 0; display: inline-block; padding: 8px; color: white; background-color: #000; text-align: center; cursor: pointer; width: 100%; font-size: 18px; } .card a { text-decoration: none; font-size: 22px; color: black; } .fa:hover { color:red; } button:hover{ background:#224b1f; }



Thank you sir

Congratulations to you on visiting our page.

If you have any feedback, you can give advice through the "Contact Me" form.