A profile card is a place where you can organize all your information into one card. As a result, your followers can easily find out about you. These cards come in different forms. But today I will show you a new design that has a lot of features. Here you will find the option of black theme and light theme, which means you can use two types of themes using one button.
I designed it completely modern using only HTML and CSS programming code. Here you have the opportunity to give your picture, your name, some information about you, your social media account, etc. Hope you like this profile card and you can learn how to make it completely from this article. I have given all the necessary code for this above. You can also download them by clicking the download button below.
Some special information about this profile card
⏩I used simple HTML and CSS programming code to make it. So that designers of all levels can understand.
⏩There are two types of themes. You can use dark and light type themes by clicking on the button next to it, which is very professional and modern. Below are the full details of how these two types of themes are made.
⏩ First of all, here is the place where you give your own picture, below it your name and some information about yourself.
⏩Below that is the social media account where you can add the link to the social media account of your choice.
⏩The important point is that here you have the opportunity to show the number of followers on your social media account. This means that you can add the number of followers on the social media that you link to the account. There is a profit reaction above. Here your profile viewer can like your profile.
⏩ I have made the design of this profile card very modern and professional. This will definitely help you build your programming knowledge.
To create it, you must first create an HTML file. Copy and paste the structure given below into that file. Then you follow the instructions in the file and add the code to your HTML file. First, you copy the HTML code from the top then paste it in the structure above where the add HTML code is written. Then you copy the CSS codes given above and add them in the above structure where add CSS code is written.
Below I have shown how these codes work i.e. what programming code I have used for a job. All the details of making it I have given below step by step and tried to explain to you. Hope you understand.
Add HTML code to create the structure of the card
HTML codes have been used to enhance the structure of this profile card. These HTML codes have been used to add all kinds of links, add pictures, give details. Here I have used a small amount of this code. Below I show which code I have used for which work.
Title and Description
<div class="profile">
<img src="https://images.unsplash.com/photo-1484186139897-d5fc6b908812?ixlib=rb-0.3.5&s=9358d797b2e1370884aa51b0ab94f706&auto=format&fit=crop&w=200&q=80%20500w" class="thumbnail">
<div class="check"><i class="fas fa-check"></i></div>
<h3 class="name">Beverly Little</h3>
<p class="title">Javascript Developer</p>
<p class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque aliquam aliquid porro!</p>
<button type="button" class="btn">Hire Me</button>
</div>
<!-- /*width: 124px;height: 124px;display: -webkit-box;display: flex;margin-left: auto;margin-right: auto;margin-bottom: 1.5em;border-radius: 100%;box-shadow: 0 13px 26px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.2);*/-->
<div class="social-icons">
<div class="icon">
<a href="/"><i class="fa fa-dribbble"></i></a>
<h4>12.8k</h4>
<p>Followers</p>
</div>
<div class="icon">
<a href="#"><i class="fa fa-behance"></i></a>
<h4>12.8k</h4>
<p>Followers</p><!-- /*color: #fff;width: 130px;height: 42px;outline: none;border: none;display: block;cursor: pointer;/*width: 124px;height: 124px;display: -webkit-box;display: flex;margin-left: auto;margin-right: auto;margin-bottom: 1.5em;border-radius: 100%;box-shadow: 0 13px 26px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.2); font-weight: 300;margin-left: automargin-right: auto;border-radius: 70px;box-shadow: 0 13px 26px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 016);background: -webkit-gradient(linear, left top, right bottom, from(#C90A6D), to(#FF48A0));background: linear-gradient(to bottom right, #C90A6D, #FF48A0);*/-->
</div>
<div class="icon">
<a href="#"><i class="fa fa-twitter"></i></a>
<h4>12.8k</h4>
<p>Followers</p>
</div>
</div>
</div>
<!-- /*width: 124px;height: 124px;display: -webkit-box;display: flex;margin-left: auto;margin-right: auto;margin-bottom: 1.5em;border-radius: 100%;box-shadow: 0 13px 26px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.2);*/-->
<div class="wrapper">
<div class="top-icons">
<i class="fa fa-long-arrow-alt-left"></i>
<i class="fa fa-ellipsis-v"></i>
<i class="fa fa-heart"></i>
</div>
Add CSS code to make it professional
The role of CSS code in this profile card is much more. The role of CSS code is most important in designing it in a completely modern way and coloring it. I have also used this CSS code to use two types of themes here. Below I have shown the codes completely different and step by step which code is used for what purpose.
Body
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*width: 124px;height: 124px;display: -webkit-box;display: flex;margin-left: auto;margin-right: auto;margin-bottom: 1.5em;border-radius: 100%;box-shadow: 0 13px 26px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.2);*/
body {
width: 100%;
height: 100vh;
display: -webkit-box;
display: flex;
position: relative;
background: #eeeeec;
-webkit-box-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: center;
justify-content: center;
font-family: 'Open Sans', sans-serif;
font-size: 100%;
}
/*color: #fff;width: 130px;height: 42px;outline: none;border: none;display: block;cursor: pointer;/*width: 124px;height: 124px;display: -webkit-box;display: flex;margin-left: auto;margin-right: auto;margin-bottom: 1.5em;border-radius: 100%;box-shadow: 0 13px 26px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.2); font-weight: 300;margin-left: automargin-right: auto;border-radius: 70px;box-shadow: 0 13px 26px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 016);background: -webkit-gradient(linear, left top, right bottom, from(#C90A6D), to(#FF48A0));background: linear-gradient(to bottom right, #C90A6D, #FF48A0);*/
Title, Description
.wrapper .profile .name {
color: #2D354A;
font-size: 24px;
font-weight: 600;
text-align: center;
}
.wrapper .profile .title {
color: #7C8097;
font-size: .75em;
font-weight: 300;
text-align: center;
padding-top: .5em;
padding-bottom: .7em;
letter-spacing: 1.5px; /*color: #fff;width: 130px;height: 42px;outline: none;border: none;display: block;cursor: pointer;/*width: 124px;height: 124px;display: -webkit-box;display: flex;margin-left: auto;margin-right: auto;margin-bottom: 1.5em;border-radius: 100%;box-shadow: 0 13px 26px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.2); font-weight: 300;margin-left: automargin-right: auto;border-radius: 70px;box-shadow: 0 13px 26px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 016);background: -webkit-gradient(linear, left top, right bottom, from(#C90A6D), to(#FF48A0));background: linear-gradient(to bottom right, #C90A6D, #FF48A0);*/
text-transform: uppercase;
}
.wrapper .profile .description {
color: #080911;
font-size: 14px;
font-weight: 300;
text-align: center;
margin-bottom: 1.3em;
}
Hopefully, this article has completely helped you to create your profile card. You can only use HTML, CSS programming to make such cards. You can also use JavaScript programming code to make it more modern and designed.
I hope you like this design. Stay with me to get more designs like this and let me know in the comments what you think of the article. If you have any problems making this work, you can definitely let me know in the comments. I will definitely help you.
![Make Racing Car Game [Using JavaScript Code Only]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjrVmbtoZxLonUlDyWpFe9gEe9Z1b2zrrfm4i5dwOqw2YQ41SElTjXTvhWSxHTwMQBmWmFMoKTSxUtGc3hAjOh6T-8jMXBlvbXOnaGHq8RP74rRlg4mPR4EuER3Yhb5My-reWpoARLnS8/w680/Make+Racing+Car+Game+%255BUsing+JavaScript+Code+Only%255D.jpg)
