Hello! Welcome to EmadulAi.
In this article, we will learn how to make an amazing profile card using HTML and CSS with both Dark and Light Mode options for your website.
How to make Amazing Profile Card in HTML & CSS
Profile cards are creative card designs that display important details of a specific person in a brief and attractive way. They can include details like a person's name, email, and social media links along with other essential information.
We can often find this type of profile card on portfolio websites and other personal or professional sites. They help to make a great first impression while maintaining a clean and modern look.
Important!
Before we start adding codes in XML, I will recommend you to take a Backup of your current theme.
By chance if any problem occurs, you can restore it later.
- First of all Login to your Blogger Dashboard.
- On Blogger Dashboard, click Theme.
- Click the arrow down icon next to 'customize' button.
- Click Edit HTML, you will be redirected to editing page.
-
Now search the code
]]></b:skin>and paste the following CSS Codes just above to it.
If your template has a dark mode feature, and if you want a different color when in dark mode, you can customise the codes as per your need. Each template can have a different dark mode class, so please adjust it — you can replace the marked class with your template dark mode class.
/* Project start */.profile-card{display: flex;flex-direction: column;align-items: center;width: 300px;background: #fffdfc;border-radius: 15px;padding: 20px;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);position: relative;}
/* Dark */.drK .profile-card{background:var(--darkBs);}.drK .profile-card::before{background:var(--darkBs);opacity:1;background: #2d2d30;}
.profile-card::before{content: "";position: absolute;top: 0;left: 0;height: 35%;width: 100%;border-radius: 15px 15px 0 20px;background-color: #004aad;}
.image{position: relative;height: 150px;width: 150px;border-radius: 50%;background-color: #004aad;padding: 4px;margin-bottom: 10px;}
/* Dark */.drK .image{background: var(--darkBa);background: #2d2d30;}
.image .profile-img{height: 100%;width: 100%;object-fit: cover;border-radius: 50%;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);}
.profile-card .text-data{display: flex;flex-direction: column;align-items: center;}
.text-data .name{font-size: 22px;font-weight: 500;}
.text-data .job{font-size: 15px;font-weight: 400;opacity: 0.9;}
.profile-card .media-buttons{display: flex;align-items: center;margin-top: 15px;}
.media-buttons .nk{display: flex;align-items: center;justify-content: center;color: #fff;font-size: 18px;height: 34px;width: 34px;border-radius: 50%;margin: 0 8px;background-color: #482dff;text-decoration: none;border-radius: 50%;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);}
.media-buttons .nk:hover{border-radius: 50%;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);font-weight: 200;font-size: 20px;}
.profile-card .buttons{display: flex;align-items: center;margin-top: 25px;}
.buttons .ab{display: flex;color: #fff;text-decoration: none;font-size: 14px;font-weight: 400;border-radius: 38px;margin: 0 10px;padding: 8px 24px;background-color: #004aad;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);}
.ab:hover{box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);transition: 0.3s;}
.profile-card .analytics{display: flex;align-items: center;margin-top: 25px;}
.analytics .data{display: flex;align-items: center;padding: 0 20px;border-right: 1px solid rgb(167, 165, 165);opacity: 0.9;}
.data .ic{font-size: 18px;margin-right: 6px;}
.data:last-child {border-right: none;}/* Project end */
To get the following HTML code for the Profile Card, you need to create two files — one is an HTML file and another is a CSS file. After creating these two files, you can simply copy and paste the given codes into your document. You can also download all the source code files from the Download button below.
- First of all, login to your Blogger Dashboard.
- On Blogger Dashboard, click Layout.
- Click the sidebar 'Customize' button.
- Click Add a new gadget, you will be redirected to the editing page.
- Now search for the target code and paste the HTML codes just above that location in your theme or gadget editor.
<div class="profile-card">
<div class="image"><img src="profile.jpg" alt="" class="profile-img" /></div>
<div class="text-data"><span class="name">Emadul Tarafdra</span><span class="job">YouTuber & Blogger</span></div>
<div class="media-buttons"><a href="#" style="background: #4267b2" class="nk"><i class="bx bxl-facebook"></i></a><a href="#" style="background: #1da1f2" class="nk"><i class="bx bxl-twitter"></i></a><a href="#" style="background: #e1306c" class="nk"><i class="bx bxl-instagram"></i></a><a href="#" style="background: #ff0000" class="nk"><i class="bx bxl-youtube"></i></a></div>
<div class="analytics">
<div class="data"><i class="bx bx-heart ic"></i><span class="number">13k</span></div>
<div class="data"><i class="bx bx-message-rounded ic"></i><span class="number">18k</span></div>
<div class="data"><i class="bx bx-share ic"></i><span class="number">49k</span></div>
</div>
<div class="buttons">
<a target="_blank" href="#" class="ab">Subscribe</a>
<a href="https://www.youtube.com/@itsamadul" class="ab">Contract</a>
</div>
</div>
What is a Profile Card?
A Profile Card is a small card design that displays a person’s details like name, image, bio, and social links in a neat format.
Can I use this Profile Card in Blogger?
Yes, you can easily use this Profile Card in Blogger by adding the HTML code inside a gadget or in your post HTML view.
Does this Profile Card support Dark Mode?
Yes, this Profile Card is compatible with both Light and Dark modes. You can adjust colors using your theme’s dark mode class.
Can I add social media icons?
Of course! You can easily add links to your Facebook, Instagram, or LinkedIn profiles inside the social icon section of the HTML code.
Will this affect my site performance?
No, this design is built only with HTML and CSS, so it is lightweight and won’t slow down your Blogger website.
