Responsive Profile Card Design using HTML & CSS

Responsive Profile Card Design

If you want to create a Responsive Profile Card then this tutorial will help you. Here I shared a Responsive Profile Card Design and showed how to create it. I used HTML and CSS to create this simple profile card. 

Earlier I shared many more types of CSS profile card design tutorials. However, this project is completely responsive. As a result, users of any device will be able to use it very easily.

First, I have assigned various information of Responsive Profile Card Design using HTML. Then I designed it using CSS.

Responsive Profile Card Design

Profile Card is used in different places to show the information of a member or author in a beautiful way. Responsiveness is needed when we use profile cards for any professional purpose. 

So I have made this Simple Profile Card Design Complete Responsive. In this article, you will find step-by-step tutorials, source code, and live previews. Below I have given a live demo where you can learn how this design works.


See the Pen Untitled by Foolish Developer (@foolishdevweb) on CodePen.


First I made a box on the webpage. In this box, I have added some colorful effects that have been created using After and Before of CSS. 

Then I added a profile image that is completely round. Then there is some basic information, links to social media, some information on social media, and two buttons.

How to Create Responsive Profile Card using HTML CSS

When it is opened in the case of a responsive or small device, these elements will change their position nicely and become smaller. 

I have taken the help of HTML and CSS to create this Responsive Profile Card Design. If you know the basics of HTML CSS, you can easily create a simple profile page.

1. Basic structure of profile card

I have created the basic structure of this profile card using the following HTML and CSS codes. In other words, a box has been created on the webpage in which all the information can be found.


<div class="card">

</div>

Using the codes below, I designed the web page and added a background color.


* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Poppins', sans-serif;
align-items: center;
justify-content: center;
background-color: #ADE5F9;
min-height: 100vh;
}

Now the following CSSs have been used to design the basic structure of the profile card. Background-color light blue and box-shadow are used here.


body,
.card,
.stats {
display: flex;
}

.card {
padding: 2.5rem 2rem;
border-radius: 10px;
background-color: rgba(255, 255, 255, .5);
max-width: 500px;
min-height:200px;
min-width:300px;
box-shadow: 0 0 30px rgba(0, 0, 0, .15);
margin: 1rem;
position: relative;
transform-style: preserve-3d;
overflow: hidden;
}


Basic structure of profile card

2. Add color effect to profile card

Now I have added some elements using before and after-effects. As you can see above there are two round circles on the right side of the box. CSS's Before and After have been used here to create that.


.card::before,
.card::after {
content: '';
position: absolute;
z-index: -1;
}
.card::before {
width: 100%;
height: 100%;
border: 1px solid #FFF;
border-radius: 10px;
top: -.7rem;
left: -.7rem;
}
.card::after {
height: 15rem;
width: 15rem;
background-color: #4172f5aa;
top: -8rem;
right: -8rem;
box-shadow: 2rem 6rem 0 -3rem #FFF
}


Add color effect to profile card

3. Add a profile image to the card

Now I have added the profile image to this Responsive Profile Card. You can change this profile image to your liking. Image width: 8rem and min-width: 80px are used. I used a border-radius to make it round.


<div class="img">
  <img src="image.jpg">
</div>


.card::after,
.card img {
border-radius: 50%;
}
 
img {
max-width: 100%;
display: block;
} 

.card img {
width: 8rem;
min-width: 80px;
box-shadow: 0 0 0 5px #FFF;
}

Add a profile image to the card

4. Basic Information of Responsive Profile Card

Various information has been added to this profile card using the following HTML. First, the name, then some basic text, social media information, and the use of two buttons, etc. have been added. Later I will design all this information by CSS.


<div class="infos">

 <div class="name">
   <h2>Shantanu Jana</h2>
   <h4>@foolishdeveloper</h4>
 </div>

  <p class="text">
    I'm a Front End Developer, follow me to be the first who see my new work.
  </p>

  <ul class="stats">
    <li> <h3>15K</h3> <h4>Views</h4> </li>
    <li> <h3>82</h3> <h4>Projects</h4 </li>
    <li> <h3>1.3M</h3> <h4>Followers</h4> </li>
  </ul>

  <div class="links">
     <button class="follow">Follow</button>
     <button class="view">View profile</button>
  </div>

</div>

Basic Information of Responsive Profile Card

# Basic texts are designed

Basic texts have been designed..d by the following CSS. The CSS below has been used to design the names, social links, and descriptions added above.


.infos {
margin-left: 1.5rem;
}

.name {
margin-bottom: 1rem;
}
.name h2 {
font-size: 1.3rem;
}
.name h4 {
font-size: .8rem;
color: #333
}

.text {
font-size: .9rem;
margin-bottom: 1rem;
}

# Social information

I have designed the social media information using the following CSS.


.stats {
margin-bottom: 1rem;
}
.stats li {
min-width: 5rem;
}
.stats li h3 {
font-size: .99rem;
}
.stats li h4 {
font-size: .75rem;
}


Social information

# Design two buttons

Now it's time to design two buttons in this Responsive Profile Card Design.


.links button {
font-family: 'Poppins', sans-serif;
min-width: 140px;
padding: .6rem;
border: 1px solid #222;
border-radius: 5px;
font-weight: bold;
cursor: pointer;
transition: all .25s linear;
}
.links .follow,
.links .view:hover {
background-color: #222;
color: #FFF;
}
.links .view,
.links .follow:hover{
background-color: transparent;
color: #222;
}


Design two buttons

5. Make Profile Card Responsive by CSS

This simple profile card CSS is almost done. But now is the time to make it responsive so that it looks good on all devices. CSS has been used to make this HTML card responsive.


@media screen and (max-width: 450px) {
.card {
  display: block;
}
.infos {
  margin-left: 0;
  margin-top: 1.5rem;
}
.links button {
  min-width: 100px;
}
}


Responsive Profile Card Design using HTML

Hopefully, the above code and tutorials have helped you to know how I created this Responsive Profile Card design using HTML and CSS. 

Earlier I shared tutorials on different types of HTML CSS profile cards. Be sure to comment on how you like this tutorial. Below are all the source codes of this Responsive Profile Card.







Comments

Post a Comment

Tell me what you think ??😎

Popular posts from this blog

Simple Day Night Toggle Button Using HTML and CSS

Image
Day-Night Toggle Button is a common web element that is often found on websites. This Day Night Toggle Switch in the navigation bar helps to choose the dark and light theme of the website. Currently, the Day And Night Toggle Switch can be seen on almost all major websites starting from Facebook and Instagram. Demo Download This article will help you to know step by step how to create Day Night Toggle Button using CSS . This type of CSS Toggle Button is used to create HTML checkboxes . Here's how to easily create a Toggle Switch using the checkboxes. CSS Day Night Toggle Button Although there are many such tutorials on the Internet. But here I will tell you how to make Day Night Toggle Button and how to implement it in your project. A check box was first created using HTML input to create this button. Then that checkbox is shaped like a button by CSS. To make CSS Day Night Toggle Switch you must have some idea about HTML and CSS. This is not the first time I ha
Read more

Splash Image Mask Using HTML and CSS (Free Code)

Image
Here you will learn how to create Splash Image Mask using HTML CSS . The CSS mask image is a kind of simple design where there will be a background color on the image.  Some parts of that background will be transparent. As a result, we get to see some of the images in the background. You can use this CSS Splash Image Mask in any background image.  Here I used HTML in Aklin which added image. Then I designed it with CSS. You can use this CSS mask background image in the background of any project. Below is a preview that will help you to know how this Splash Image Mask CSS was created. See the Pen Splash Image Mask using Html CSS by Shantanu Jana ( @shantanu-jana ) on CodePen . Here HTML and CSS are used to create this CSS mask-image property . For this, you create an HTML and CSS file.  Copy all the code given below and add it to your file. Or use the download button at the bottom of the article to download the code for this Splash Image Mask . HTML Code: The following
Read more

Simple RGB Color Generator Using JavaScript & CSS

Image
In this article, you will learn how to create RGB Color Generator using JavaScript. Earlier I shared with you the project of different types of JavaScript color generators . Some projects create background colors, some gradient colors, and some generate random colors.  Using this simple RGB Color Generator you can manually generate RGB color . It is much more modern and professional than other color generators. Here you can mix different colors together and create gradients.  This JavaScript RGB Color Generator project has various control buttons. With the help of which you can create gradients by adding colors in different ways.  JavaScript RGB Color Generator Many times I use different applications or websites to create my gradient color . In that case, such a project will help you. You can get the required code of the color you have created from here. Which you can copy directly and use as CSS code. Below I have given a demo that will help you to know how this project (RGB Color
Read more