In this post How to make Amazing Profile Card in HTML, CSS | Dark mode or Lite mode.
|
| © Finestap | Amazing Profile Card |
How to make Amazing Profile Card in HTML & CSS.
Profile cards are card design that contains important details of a specific person in a brief way. It could contain details like a person's name, email, social media links for that person, and other important details. We can find this type of profile card on websites like portfolio websites and other types of websites.
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.
Step 1: First of all Login to your Blogger Dashboard.
Step 2: On Blogger Dashboard, click Theme.
Step 3: Click the arrow down icon next to 'customize' button.
Step 4: Click Edit HTML, you will be redirected to editing page.
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.
Step 5: Now search the code ]]></b:skin> and paste the following CSS Codes just above to it.
/* 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 then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.
Important!Before we start adding codes in layout, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.
Step 1: First of all Login to your Blogger Dashboard.
Step 2: On Blogger Dashboard, click Layout.
Step 3: Click the side bar 'customize' button.
Step 4: Click Add a new gadget, you will be redirected to editing page.
<div class="profile-card"> <div class="image"><img src="profile.jpg" alt="" class="profile-img" /></div> <div class="text-data"><span class="name">CryptoTUD</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="#" class="ab">Contract</a> </div> </div>
Step 5: Now search the code paste HTML Codes just above to it.