Profile Card / About Us Design is a modern and responsive layout that showcases information about a person, team member, or professional. It includes a profile image, name, location, description, and social media links — all neatly arranged in a single card for an attractive and user-friendly presentation.
This layout is ideal for personal websites, portfolios, team member pages, or blogs. It allows visitors to quickly see all the important information about a person in one glance, helping to create a professional impression.
The design is built using HTML and CSS, making it lightweight, flexible, and fully responsive. Using flexbox and clean styling, it works perfectly on both mobile and desktop screens. Beginners can easily replace content such as images, names, descriptions, and social links without writing advanced code.
Table of Contents
How to Install Profile Card:
Follow these simple steps to add a Profile Card to your website. Copy the code fully and follow each instruction to ensure it works correctly.
Steps to Install and Replace Content:
- Copy Profile Card HTML code
<div class="wrapper"> <div class="profile-card js-profile-card"> <div class="profile-card__img"> <img alt="John Doe" title="John Doe" src="#" /> </div> <div class="profile-card__cnt js-profile-cnt"> <div class="profile-card__name"> <p style="text-align: center;">About John Doe</p> </div> <div class="profile-card__cnt"> <p style="text-align:center; font-family: cursive" class="profile-card-loc__txt"><b>New York, USA</b></p> <div class="profile-card__txt"> <p>Leads the <b>creative team</b> at <b>DemoSite.com</b>. Skilled in <code>HTML</code>, <code>CSS</code>, and <code>JavaScript</code>, ensuring a <b>smooth</b>, <b>responsive</b>, and <b>modern</b> experience for users.</p> <p>Passionate about <b>design innovation</b>, <b>web optimization</b>, and building <b>tools</b> that empower <b>students</b> and <b>developers</b>.</p> <p>For any <code>feedback</code> or <code>queries</code>, feel free to get in touch.</p> <p>Thanks for visiting <b>edusynth.in</b>, your suggestions are highly appreciated!</p> </div> <div class="profile-card__socials" style="text-align:center; margin-top:20px;"> <a href="#" target="_blank" class="social-btn facebook"> <i class="fab fa-facebook-f"></i></a> <a href="#" target="_blank" class="social-btn twitter"> <i class="fab fa-twitter"></i></a> <a href="#" target="_blank" class="social-btn instagram"> <i class="fab fa-instagram"></i></a> <a href="#" target="_blank" class="social-btn linkedin"> <i class="fab fa-linkedin-in"></i></a> <!-- Add more Social Media Buttons above --> </div> </div> </div> </div> </div> <!-- Font Awesome CDN for icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/> - Paste it into your webpage where you want the profile card to appear.
- Replace image-url with your profile image link.
- Change the name and location.
- Update the description inside <p> tags as needed.
- Replace the href="#" of each social button with your actual social links.
- Copy CSS Code
<style> .wrapper{color:#000;padding:20px 20px;padding-top:17%;display:flex;background-image:linear-gradient(-20deg,#ff2846 0%,#6944ff 100%)} @media screen and (max-width:768px){.wrapper{height:auto;min-height:100vh;padding-top:100px} } .profile-card{width:100%;min-height:460px;margin:auto;box-shadow:0px 8px 60px -10px rgba(13,28,39,0.6);background:#fff;border-radius:12px;max-width:700px;position:relative} .profile-card__img{width:150px;height:150px;margin-left:auto;margin-right:auto;transform:translateY(-50%);border-radius:50%;overflow:hidden;position:relative;z-index:4;box-shadow:0px 5px 50px 0px #6c44fc,0px 0px 0px 7px rgba(50,74,255,0.5)} @media screen and (max-width:576px){.profile-card__img{width:120px;height:120px} } .profile-card__img img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%} .profile-card__cnt{margin-top:-10px;padding:0 5px;padding-bottom:20px;transition:all .3s;font-size:16px} .profile-card__name{font-weight:700;font-size:24px;color:#6944ff;margin-bottom:10px} .profile-card__txt{font-family:sans-serif;font-size:14px} .social-btn{box-shadow:0px 4px 10px rgba(63,65,67,0.6);width:35px;height:35px;display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:5px;color:#fff;font-weight:600;border-radius:50px;text-decoration:none;font-size:14px;transition:transform 0.2s,opacity 0.2s} .social-btn:hover{transform:scale(1.1);opacity:0.9} code{background-color:#000;color:#fff;border-radius:5px;padding:3px 6px;font-size:12px} .facebook{background-color:#1877F2} .twitter{background-color:#1DA1F2} .instagram{background-color:#C13584} .linkedin{background-color:#0077B5} .youtube{background-color:#FF0000} .pinterest{background-color:#E60023} .tiktok{background-color:#010101;color:#fff} .snapchat{background-color:#FFFC00;color:#000} .reddit{background-color:#FF4500} .tumblr{background-color:#34526f} .whatsapp{background-color:#25D366} .telegram{background-color:#0088cc} .github{background-color:#333333} .medium{background-color:#00AB6C} .vimeo{background-color:#1AB7EA} .discord{background-color:#5865F2} .slack{background-color:#4A154B} .dribbble{background-color:#EA4C89} .behance{background-color:#1769FF} .byte{background-color:#69C9D0} </style> - Paste CSS below HTML
- Preview and save it
How to Add More Social Media Icons
If you want to add a social media button, follow the setup given below and read carefully.
Below is a list of some social media platforms. You can use any of them. If you only use these, you don’t need to make any changes in the CSS.
<!-- YouTube -->
<a href="#" target="_blank" class="social-btn youtube">
<i class="fab fa-youtube"></i>
</a>
<!-- Pinterest -->
<a href="#" target="_blank" class="social-btn pinterest">
<i class="fab fa-pinterest-p"></i>
</a>
<!-- TikTok -->
<a href="#" target="_blank" class="social-btn tiktok">
<i class="fab fa-tiktok"></i>
</a>
<!-- Snapchat -->
<a href="#" target="_blank" class="social-btn snapchat">
<i class="fab fa-snapchat-ghost"></i>
</a>
<!-- Reddit -->
<a href="#" target="_blank" class="social-btn reddit">
<i class="fab fa-reddit-alien"></i>
</a>
<!-- Tumblr -->
<a href="#" target="_blank" class="social-btn tumblr">
<i class="fab fa-tumblr"></i>
</a>
<!-- WhatsApp -->
<a href="#" target="_blank" class="social-btn whatsapp">
<i class="fab fa-whatsapp"></i>
</a>
<!-- Telegram -->
<a href="#" target="_blank" class="social-btn telegram">
<i class="fab fa-telegram-plane"></i>
</a>
<!-- GitHub -->
<a href="#" target="_blank" class="social-btn github">
<i class="fab fa-github"></i>
</a>
<!-- Medium -->
<a href="#" target="_blank" class="social-btn medium">
<i class="fab fa-medium-m"></i>
</a>
<!-- Vimeo -->
<a href="#" target="_blank" class="social-btn vimeo">
<i class="fab fa-vimeo-v"></i>
</a>
<!-- Discord -->
<a href="#" target="_blank" class="social-btn discord">
<i class="fab fa-discord"></i>
</a>
<!-- Slack -->
<a href="#" target="_blank" class="social-btn slack">
<i class="fab fa-slack-hash"></i>
</a>
<!-- Dribbble -->
<a href="#" target="_blank" class="social-btn dribbble">
<i class="fab fa-dribbble"></i>
</a>
<!-- Behance -->
<a href="#" target="_blank" class="social-btn behance">
<i class="fab fa-behance"></i>
</a>
<!-- Byte -->
<a href="#" target="_blank" class="social-btn byte">
<i class="fas fa-bolt"></i> <!-- Byte/TikTok Lite ke liye custom icon -->
</a>
- Whichever button you want, copy that button.
<!-- Add more Social Media Buttons above -->Paste that code above this.- Put your social media link in this
href='#'. - Save it
Add more social media icon manually
If you want to add a social media icon that is not included in this list, you can try the following:
- Search on any search engine example:
fab fa-app-name - Copy the
fab fa-appcode. - Replace it inside this code and also change the name of the
<div>.<!-- YouTube --> <a href="#" target="_blank" class="social-btn youtube"> <i class="fab fa-youtube"></i> </a> - Now, in the CSS code:
/* YouTube */ .youtube { background-color: #FF0000; - replace app name
- Replace the color code with the official color of that app (for example:
#FF0000). - Save it.
Your new icon/button will be added successfully.
Where can this profile card be used?
- Personal blogs and websites
- Portfolio pages
- Team member / staff pages
- About Us sections
- Landing pages for professionals
Profile Cards FAQ
How to add more social media icons?
Copy an existing social button, update the link, add the proper CSS class, and use the corresponding Font Awesome icon.
How to replace the profile image?
Replace the image URL in the <img> tag with your own image link and update the alt and title attributes accordingly.
How to change the name and location?
Simply edit the text inside the name and location <p> tags within the card content section.
How to customize card colors and fonts?
Modify the CSS classes for the wrapper, profile card, text, and buttons to change colors, fonts, shadows, and other styles.
How to use this card on multiple pages?
Copy the HTML block and CSS to each page you want it to appear on, or place the CSS in your theme’s head section to reuse across multiple pages.
Related Posts
Final Thought:
Profile Card / About Us Design is a modern, attractive, and fully responsive solution to showcase information about a person, team member, or professional. It is easy to implement using HTML and CSS, works well on all devices, and allows you to add social media links for better connectivity.
