How to make a profile card with HTML & CSS
Tags: webdev, css, html, tutorial
Published: 2023-04-07 21:10:11

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.

{% codepen https://codepen.io/lensco825/pen/yLRLQwz %}

## 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
```html
<div class="card>
</card>
```
####CSS

```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;
}


```
<hr>
## 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
```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

```css
.pfp {
text-align: center;
font-family: Poiret One;
}

.pfp > img {
    border-radius: 50%;
    width: 60px;
  border: solid;
}

```
<hr>
## 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

```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

```css
.intro {
    text-align: center;
    font-family: Red Hat Display;
    font-weight: 300;
}

```
<hr>
## Programming skills
I also added all the programming languages that I use. I got the icons from [Devicon](https://devicon.dev/) 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
```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

```css

.programmingLanguages {
  display: flex;
  justify-content: space-around;
}

.language {
  width: 40px;
}
```
<hr>
## Email and Socials
For my email, I just made a div with a padding and black background. 

```html
      <div class="email">
        lensdorsainvi711@outlook.com
      </div>
```

```css

.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;
}

```

<br>
However, for my social media icons I got from [Ionicons](https://ionic.io/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`.

```html
    <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>
```

```css
.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;
}
```

<hr>
There's lots of other profile card designs you can see such as on web design web apps like [Dribbble](https://dribbble.com/). 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](https://codepen.io/lensco825/pen/yLRLQwz) or the [GitHub repo](https://github.com/Lensco825/profile-card) and customize it your way! Have a good day/night 👋.