Web Design Mastery: Create Neumorphism Profile Card using HTML and CSS only
In the vast landscape of web design, creating visually appealing and engaging user interfaces is a paramount goal. One key element that can significantly enhance the user experience is the profile card – a snippet of information that encapsulates the essence of an individual or entity.
In this blog post, we embark on a journey to master the art of crafting a stylish and modern profile card using the power of Cascading Style Sheets (CSS).
Also Read: Image Folding Effect on Hover Using HTML and CSS only
HTML Structure
<div class="main-container flex-c">
<div class="card">
<div class="header">
<span class="fas fa-arrow-left"></span>
<span class="fas fa-ellipsis-v"></span>
</div>
<div class="profile-img flex-c">
<img src="https://images.unsplash.com/photo-1568604032475-10f1a56527c9?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=800&ixid=MnwxfDB8MXxyYW5kb218MHx8bWFufHx8fHx8MTcwMjIwMDg3OQ&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
alt="Profile Picture">
</div>
<div class="name">John Doe</div>
<div class="about">Full-stack Web Developer</div>
<div class="rating">
<p class="stars">
<span>★</span>
<span>★</span>
<span>★</span>
<span>★</span>
<span>★</span>
</p>
<p class="rating-count">30.7K Ratings</p>
</div>
<div class="social-handles">
<a href="#"><span class="fab fa-youtube"></span></a>
<a href="#"><span class="fab fa-instagram"></span></a>
<a href="#"><span class="fab fa-github"></span></a>
<a href="#"><span class="fab fa-linkedin"></span></a>
<a href="#"><span class="fab fa-twitter"></span></a>
</div>
<div class="btns">
<button class="follow-btn">Follow</button>
<button class="hire-btn">Hire</button>
</div>
<div class="footer">
<div class="followers">
<span class="fas fa-user"></span>
<span class="follow-count">92K</span>
</div>
<div class="comments">
<span class="fas fa-comment"></span>
<span class="comment-count">420K</span>
</div>
<div class="shares">
<span class="fas fa-share"></span>
<span class="share-count">57K</span>
</div>
</div>
</div>
</div>Header Section contains some icons for navigation and additional options. Profile Image and Information Section displays the profile picture, name, and professional role. There is also a Rating section which has star rating with the count of ratings received.
Another container is for the icons for various social media platforms. There is a Button Section which includes buttons for actions like following and hiring and finally there is a footer section which displays statistics like followers, comments, and shares.
Also Read: Typing Text Effect using JavaScript | Without any Library
This well-organized HTML structure lays the groundwork for the subsequent CSS styling that will transform it into an eye-catching profile card. Let's move on to the next step in our exploration.
CSS Styling
With our HTML structure in place, it's time to breathe life into our profile card through CSS styling. This section will focus on styling the various components of the card, enhancing its visual appeal and ensuring a cohesive and modern design.
Main Container and Utility Class
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.css");
body {
background: #212121;
}
.flex-c {
display: flex;
align-items: center;
justify-content: center;
}
.main-container {
min-height: 100vh;
min-width: 450px;
}
a {
text-decoration: none;
}
a,
.card,
button {
color: white;
}
The above style sets the background color of the entire webpage to a dark shade (#212121) for better contrast. There is a utility class (flex-c) for flex container properties, ensuring centered content both vertically and horizontally.
Card and Other Styles
.card,
.social-handles span,
.btns button,
.profile-img {
box-shadow: 1.5px 1.5px 3px #0e0e0e, -1.5px -1.5px 3px rgb(95 94 94 / 25%), inset 0px 0px 0px #0e0e0e, inset 0px -0px 0px #5f5e5e;
}
.card {
width: 400px;
display: flex;
padding: 15px;
text-align: center;
border-radius: 10px;
background: #191A1E;
flex-direction: column;
font-family: 'calibri';
}
.header {
display: flex;
justify-content: space-between;
}
.header span {
padding: 10px;
}
.profile-img {
width: 140px;
height: 140px;
border-radius: 50%;
align-self: center;
margin-bottom: 12px;
}
.profile-img img {
width: 120px;
border-radius: 50%;
}
.name {
font-size: 20px;
font-weight: bold;
}
- Box Shadow Styling: Applies a subtle box shadow to the card, social handles, buttons, and profile image. This adds a lifted appearance to these elements, enhancing the overall design.
- Header Styling: Configures the header section within the card. Uses Flexbox for horizontal alignment and adds padding to the child spans for spacing.
- Profile Image Styling: Sets the dimensions and border-radius for the circular profile image. The align-self property centers the image horizontally within the card, and margin-bottom adds space between the image and the elements below. Styling is applied to the image tag within the profile-img class for further customization.
- Name Styling: Defines the appearance of the user's name, specifying the font size and weight for a bold and prominent display.
Rating and Other Styling
.rating {
margin: 8px 0 35px;
}
.stars span {
color: rgb(255, 171, 14);
}
.stars {
font-size: 28px;
}
.rating-count {
font-size: 14px;
}
.social-handles span {
margin: 0 5px;
padding: 12px;
font-size: 14px;
cursor: pointer;
border-radius: 50%;
}
.btns {
display: flex;
gap: 20px;
margin: 30px 5px;
}
.follow-btn,
.hire-btn {
width: 50%;
cursor: pointer;
padding: 8px 10px;
font-size: 16px;
border-radius: 20px;
background: #191A1E;
border: 1px solid rgba(17, 17, 17, 0.526);
}
.follow-btn:hover,
.hire-btn:hover,
.social-handles span:hover {
box-shadow: 0px 0px 0px #0e0e0e, 0px 0px 0px rgb(95 94 94 / 25%), inset 1.5px 1.5px 3px #0e0e0e, inset -1.5px -1.5px 3px #5f5e5e;
}
.footer {
display: flex;
justify-content: space-around;
margin-top: 20px;
}
.footer .fas {
margin-right: 2px;
}
- Social Handles Styling: Configures the appearance of each social handle icon. Defines margin, padding, font size, cursor behavior, and adds a circular border-radius for a clean and clickable design.
- Buttons Styling: Designs the container for buttons, setting the display, gap, and margin properties. The styles for both the "Follow" and "Hire" buttons include width, cursor behavior, padding, font size, border-radius, background, and border. Additionally, a hover effect is implemented with a box-shadow to create a lifted appearance.
- Footer Styling: Configures the appearance of the footer section, utilizing Flexbox for spacing elements evenly. Adds margin to the top for separation. The styling for icons within the footer includes margin-right for a subtle spacing effect.
Note: Here star rating is used to show an instance, you have to use JS logic to show the correct rating.
In this comprehensive exploration of creating a stylish profile card, we delved into various aspects of HTML and CSS to construct a visually appealing and functional design. From structuring the HTML elements to applying meticulous styles, each step played a crucial role in achieving the desired outcome.
