codemediaweb.com

Code Media

hire me

Simple Profile Card Using Only HTML & CSS

by
Simple Profile Card Using Only HTML & CSS

In this article, you will learn how to create a Simple Profile Card using HTML and CSS. simple profile page design is basically used to show the user’s information on different websites.

In this article, I have made a simple CSS profile card. Here are some profile images, names, email ids, mobile numbers, and some social media icons. You can also add some necessary text about yourself here.

I have taken the help of HTML and CSS to make a simple profile card CSS. Using HTML, I have added a variety of information, images, and icons to social media.

Simple Profile Card Design HTML CSS

In the following tutorial, I have shown you how to create a simple profile card using HTML and CSS. First I created a box at the top of the webpage. I have divided this box into two parts. 

The first part contains images and names and the second part contains all the information. I have used blue as the background color of the first part and white as the background color of the second part.

See the Pen Untitled by Raj Template (@RajTemplate) on CodePen.

The second part of the profile page has email ids, phone numbers, and five social media icons. Hopefully, the demo above has helped you to know how this design works. 

You need to have basic knowledge of HTML and CSS to create this HTML profile page. First, you create an HTML and CSS file then follow the tutorials below step-by-step.

Step 1: Basic structure of profile card

Now I have created a box at the top of the web page using the following HTML and CSS code. I split this box into two parts and then added all the information.

<div class=”wrapper”>
</div>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  font-family: ‘Josefin Sans’, sans-serif;
}
body{
   background-color: #f3f3f3;
   font-family: sans-serif;
}
.wrapper{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 500px;
  display: flex;
  box-shadow: -10px 5px 20px rgba(0, 0, 0, 0.1);
}
Basic structure of profile card

Step 2: Make the right side of the card

Now I have designed the first part and added information to it. The first part has a profile image and a name. The first part is 40% width and the background color is blue using a linear gradient. Here the length of the image is 145 px.

<div class=”left”>
   <img src=”img.jpg” alt=”user” width=”145″>
   <h4>Anamika Roy</h4>
   <p>Web Designer</p>
</div>
.wrapper .left{
  width: 40%;
  background: linear-gradient(to right,#083885,#086cb3);
  padding: 30px 25px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  text-align: center;
  color: #fff;
}
.wrapper .left img{
  border-radius: 5px;
  margin-bottom: 10px;
}
.wrapper .left h4{
  margin-bottom: 10px;
  font-size: 20px;
  font-family: sans-serif; 
}
.wrapper .left p{
  font-size: 15px;
}
Make the right side of the card

Step 3: Design the left side of the profile

Now I have designed the second part, its width has been used 65%.

<div class=”right”>
</div>
.wrapper .right{
  width: 65%;
  background: #fff;
  padding: 30px 25px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
Design the left side of the profile

Step 4: Add basic information to the profile card

Now I have added all the information like email id, mobile number in the second part. First I added all the information using HTML code then designed it using CSS.

<div class=”info”>
  <h3>About Me</h3>
  <div class=”info_data”>
     <div class=”data”>
        <h4>Email</h4>
        <p>alex@gmail.com</p>
     </div>
     <div class=”data”>
        <h4>Phone</h4>
        <p>0001-213-998761</p>
     </div>
  </div>
</div>
.info,
.projects{
  margin-bottom: 25px;
}
.info h3,
.projects h3{
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid #e0e0e0;
    color: #353c4e;
    text-align: center;
  text-transform: uppercase;
  letter-spacing: 5px;
}
.info_data,
.projects_data{
  display: flex;
  justify-content: space-between;
}
.info_data .data,
.projects_data .data{
  width: 45%;
}
.info_data .data h4,
.projects_data .data h4{
    color: #353c4e;
    font-size: 17px;
    margin-bottom: 5px;
}
.info_data .data p,
.projects_data .data p{
  font-size: 15px;
  margin-bottom: 10px;
  color: #4a4f54;
}
Add basic information to the profile card

Step 5: Add social icons to the Simple Profile page

Now I have added icons to social media using the following codes. Here I have used four social icons you can increase or decrease the amount of your choice if you want. The background width of the icons is 45px and the font size is 18px.

<div class=”social_media”>
   <ul>
     <li><a href=”#”><i class=”fab fa-facebook-f”></i></a></li>
     <li><a href=”#”><i class=”fab fa-twitter”></i></a></li>
     <li><a href=”#”><i class=”fab fa-instagram”></i></a></li>
     <li><a href=”#”><i class=”fab fa-youtube”></i></a></li>
   </ul>
</div>
.social_media ul{
  display: flex;
  margin-top: 50px;
  margin-left: 20px;
}
.social_media ul li{
  width: 45px;
  height: 45px;
  background: linear-gradient(to right,#083885,#086cb3);
  margin-right: 10px;
  border-radius: 5px;
  text-align: center;
  line-height: 45px;
}
.social_media ul li a{
  color :#fff;
  display: block;
  font-size: 18px;
}
Add social icons to the Simple Profile page

Now, this design (Simple Profile Card Using Only HTML & CSS) is ready to use for any purpose. But it needs to be made responsive which I will share in the next tutorial.

Hope you learned from this tutorial how profile pages are created using HTML and CSS.

Leave a comment