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:

Simple html css profile card | profile card code - codewithrandom

(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:

Simple html css profile card | profile card code - codewithrandom

And that’s all for this project!

written by @codingporium

Share on:

0 thoughts on “Simple html css profile card | profile card code – codewithrandom”

Leave a Comment