When showing others what you do you don't always need to show your portfolio website containing 50+ things about you and what you've done. Instead, you should sometimes find a way to quickly show the main things about you, and that's where profile cards come in!
Profile cards are easy to make with good knowledge of HTML and CSS, you just have to have an idea of what your profile card would look like. In this blog, I'll show how I made my profile card, but if you have any suggestions to put on it comment down below.
Making the card
First, I made a card div with a white background and a width of 360px with a height of 455px. I gave it a border-radius of 10px and a box shadow to make it look good. Then I gave the card a padding of 10px for every side except for the bottom to make it seem full. Finally, I gave it a display of flex and made it a flex column with everything having a gap of 15px.
HTML
<div class="card>
</card>
CSS
.card {
width: 360px;
height: 455px;
border-radius: 10px;
background-color: white;
padding: 10px 10px 0 10px;
box-shadow: 10px 15px;
display: flex;
flex-direction: column;
gap: 15px;
}
Introduction
What I like to call the introduction, is the top part of a profile card where you show your name and occupancy/what you do (people also add pfp's in web designs). First, we made a div that contains our profile image, h2 element (name), and h3 element (occupancy). The div has a text-align of center and a font-family of Poiret One. For the profile image, we give it a small width of 60px and a border radius of 50%.
HTML
<div class="pfp">
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--TaFBhrk---/c_fill,f_auto,fl_progressive,h_320,q_auto,w_320/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/933459/4c8158c5-9aaf-4354-98c1-3c67f6fc49ba.jpg" alt="catPhoto">
<h2>Lens Dorsainvil</h2>
<h3>Web Developer</h3>
</div>
CSS
.pfp {
text-align: center;
font-family: Poiret One;
}
.pfp > img {
border-radius: 50%;
width: 60px;
border: solid;
}
description
All I did for the description text was make a paragraph element with a font-family of Red Hat Display and a text-align of center.
HTML
<p class="intro">A 13 year old boy learning web-development and UX/UI design for fun and for a future job. Wanting to explore computer science and game development. Hoping to be a software engineer one day!</p>
CSS
.intro {
text-align: center;
font-family: Red Hat Display;
font-weight: 300;
}
Programming skills
I also added all the programming languages that I use. I got the icons from Devicon so go check it out! I contained all the icons in a div and gave it a display of flex to space them evenly. Of course, I also had to give them a small width.
HTML
<div class="programmingLanguages">
<img class="language" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg" />
<img class="language" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg" />
<img class="language" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" />
<img class="language" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" />
<img class="language" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/csharp/csharp-original.svg" />
</div>
CSS
.programmingLanguages {
display: flex;
justify-content: space-around;
}
.language {
width: 40px;
}
Email and Socials
For my email, I just made a div with a padding and black background.
<div class="email">
lensdorsainvi711@outlook.com
</div>
.email {
background-color: black;
color: white;
display: flex;
justify-content: center;
font-family: Poppins;
border-radius: 5px;
transition: 0.3s;
}
/*BONUS: hover effect*/
.email:hover {
background-color: #00D9C0;
}
However, for my social media icons I got from Ionicons (except for the DEV icon) I contained them all in a div and set it to flex so I can put them at the bottom right with justify-content: flex-end.
<div class="socials">
<img src="https://d2fltix0v2e0sb.cloudfront.net/dev-black.png" alt="dev">
<ion-icon name="logo-codepen"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
<ion-icon name="logo-github"></ion-icon>
</div>
.socials {
display: flex;
justify-content: flex-end;
/*Also a gap to space them out*/
gap: 8px;
}
.socials > img {
width: 25px;
}
ion-icon {
font-size: 25px;
}
There's lots of other profile card designs you can see such as on web design web apps like Dribbble. You can also make a profile card just for practice with HTML and CSS, in fact, I think this is great for beginners! If you have any question or things to say just comment them, you can also comment a profile card that you made if you want. If you want to use my design fork it on Codepen or the GitHub repo and customize it your way! Have a good day/night 👋.
Top comments (0)