Hey there, web design fans! Get ready to make some waves with the hottest trend: glass morphism! This cool style uses see-through backgrounds, blurry edges like frosted glass, and popping colors to create a sleek, futuristic look.
Today, we’re going to build a gorgeous glass morphism portfolio card – your own personal online ID! And guess what? We’ll do it using just plain HTML and CSS, no fancy tools needed. By the end, you’ll have a stunning, modern card ready to impress the world on your website or even wow potential employers. So, get ready and let’s get building!
Glass morphism is a UI design trend to give a look of frosted glass. A personal portfolio card should be well designed.
Watch Video Tutorial of this Portfolio Card in HTML & CSS
If you find it easy to learn by watching videos, then you can watch this step by step tutorial. It is highly recommended to watch this video tutorial, because that’s how you can learn how to make this glass morphism portfolio card in HTML and CSS easily and understand the steps.
Steps:
- Setting Up the Project:
- Learn how to set up the project, create the necessary files, and organize the project structure.
- Designing the HTML Structure:
- Begin crafting the portfolio card by creating the HTML structure, including sections for your image, personal information, and skills.
- Applying Glass morphism with CSS:
- Dive into the world of CSS to style your card with a glassmorphism effect, including blurred backgrounds, frosted glass elements, and vibrant color palettes.
- Styling the Profile Image:
- Discover how to style your profile image with CSS, including circular frames and hover effects for added interactivity.
- Adding Personal Information:
- Insert your personal information, such as your name, title, and a short bio, styled to fit the glassmorphism aesthetic.
- Showcasing Your Skills:
- Learn how to present your skills in a visually appealing way, using CSS to create progress bars and icons.
- Making It Responsive:
- Ensure that your glassmorphism portfolio card looks stunning on various screen sizes by implementing responsive design techniques.
- Hover Effects for Interactivity:
- Add interactive hover effects to your portfolio card to engage users and make it more dynamic.
To make this personal card, we are going to start by.
Creating a HTML File and add the following codes.
HTML Codes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<title>Card</title>
</head>
<body>
<section>
<div class="card">
<div class="top">
<span>John Doe</span>
<i class="bx bx-dots-vertical-rounded"></i>
<p>My Portifolio</p>
</div>
<div class="middle">
<div class="left">
<img src="images/avatar.jpg" alt="">
</div>
<div class="right">
<label for="">Skills:</label>
<div>
<ul>
<li>Web Designer</li>
<li>Programmer</li>
<li>Graphic Designer</li>
</ul>
</div>
<div class="social-icon">
<span><i class="bx bxl-facebook"></i></span>
<span><i class="bx bxl-linkedin"></i></span>
<span><i class="bx bxl-instagram"></i></span>
<span><i class="bx bxl-github"></i></span>
</div>
</div>
</div>
<div class="bottom">
<input type="submit" class="btn" value="Hire">
</div>
</div>
</section>
</body>
</html>
CSS Codes
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
body{
font-family: 'Poppins';
background: url(images/bg.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
color: #fff;
}
section{
min-height: 97vh;
display: flex;
justify-content: center;
align-items: center;
}
.card{
position: relative;
width: 550px;
height: 350px;
backdrop-filter: blur(25px);
background: rgba(255,255,255,0.1);
box-shadow: 0 25px 45px rgba(0,0,0,0.25);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 30px;
}
.top{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 12px 15px;
border-bottom: 1px solid #d5cccc24;
}
.top span{
font-size: 20px;
margin-left: 20px;
}
.top i{
font-size: 30px;
padding: 10px;
border-radius: 30%;
}
.top i:hover{
background: rgba(0,0,0,0.1);
cursor: pointer;
}
.top p{
position: absolute;
top: 50px;
right: 15px;
background: rgba(0,0,0,0.15);
padding: 10px 20px;
border-radius: 10px;
opacity: 0;
transition: .5s ease-in-out;
}
.top i:hover ~ p{
opacity: 1;
transition: .5s ease-in-out;
}
.middle{
display: flex;
flex-direction: row;
padding: 20px 30px 0px 30px;
}
.middle img{
width: 170px;
border-radius: 50%;
border: 5px solid transparent;
outline: 3px dashed rgba(255,255,255,0.25);
}
.middle .right{
margin: 20px 0px 10px 50px;
}
ul li{
list-style-type: circle;
}
.social-icon{
display: flex;
flex-direction: row;
}
.social-icon span{
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #fff;
border-radius: 50%;
height: 30px;
width: 30px;
margin: 0 5px;
transition: .4s;
cursor: pointer;
}
.social-icon i{
font-size: 20px;
}
.social-icon span:hover{
color: #3c79db;
background: #fff;
transform: translateY(-4px);
box-shadow: inset 0 0 0 15px #fff;
}
.bottom{
display: flex;
flex-direction: row;
justify-content: right;
padding: 0 30px;
}
.btn{
background: #3c79db;
color: #fff;
padding: 12px 20px;
border-radius: 20px;
border: none;
margin: 0 5px;
cursor: pointer;
transition: .3s;
}
.btn:hover{
box-shadow: inset 0 0 0 20px #83ace2;
}
Think it was understandable. If you have any problem, leave a comment. I will be pleased to help.
Download Assets Files from the link down below:
Conclusion
By following the steps in this blog post, you’ve learned how to create a glass morphism portfolio card in HTML and CSS.
If you face any problems about this tutorial or your code is not working as expected, you can download the source code files for this portfolio card. It’s free to download and it contains the project folder with source code files.
