Simple html css profile card | profile card code – codewithrandom

Simple html css profile card | profile card code – codewithrandom

Hey friends, today we will see how to make this simple basic profile card that’s useful for CSS beginners.

Now let’s see the general use of this project. You can use this in various places. Firstly, maybe you can use it for a personal website     project. Secondly, you can make a few of this cards to use in a “our Team” Section in your company page.

Now let’s see the codes of this project:

HTML Codes

Paste the codes below:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<meta charset="utf-8">
<title>Simple CSS Profile Card</title>
</head>
<body>
<h2 style="text-align: center;">User Profile Card</h2>
<div class="card">
<div class="container">
<img src="https://images.unsplash.com/photo-1564564321837-a57b7070ac4f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1176&q=80" alt="" style="width: 100%">
<h2>John Doe</h2>
<p class="title">CEO & Founder</p>
<p>Random Company</p>
<div style="margin: 24px 0;">
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-facebook"></i></a>
<a href="#"><i class="fa-brands fa-twitter"></i></a>
<a href="#"><i class="fa-brands fa-linkedin"></i></a>

</div>
<p><button>Contact</button></p>
</div>
</div>
</body>
</html>

The output would be:

(the page is too long so I couldn’t paste the full page screenshot)

Now let’s use CSS to style it.

CSS Codes

Paste the CSS Codes below:

    @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');


body{
background: mediumseagreen;
font-family:poppins;
}
.card{
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: poppins, Helvetica, sans-serif;
}
.container{
background: #ffffff;

}
.title{
color: grey;
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;
}
a{
padding-right: 5px;
text-decoration: none;
font-size: 16px;
font-family:poppins;
color: black;
}
button:hover, a:hover{
opacity: 0.7;
}

The final output would be:

And that’s all for this project!

written by @codingporium

This Post Has 0 Comments

  1. Unknown

    hello, I'm Shivam dadhich. I tried your code of user profile card but i can't see the original output. I can't see the social media links means instagram icon.

Leave a Reply