CSS Profile Card UI Design.Today in this blog , we gonna learn about CSS Profile Card UI Design.
CSS Profile Card UI Design
Hi Friends!
Today in this blog, we gonna learn about CSS Profile Card UI Design. These Profile Cards are important for our portfolio websites. This is my First Profile Card UI Design.
This Profile Card UI Design is nice to see on our Portfolio websites. In the previous blog, we will learn about CSS Loading Balls Effect if you're a beginner I will recommend learning the loader effect first. If you've learned that and this blog will help you to learn about Profile Card UI Design. In this blog, I will give my video tutorial and source codes to download. if you have any doubts ask me in the comment section.
HTML file
[
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css profile card</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="profile">
<img src="profile.jpg">
<div class="about">
<h1>John Doe</h1>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quos eligendi, ut sit reiciendis aliquam error animi voluptatum corporis, repellendus possimus, voluptates quo dicta. Optio nulla numquam dolores repellendus quaerat quibusdam.
<span>Follow me on</span>
<div class="icons">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-twitter"></i>
</div>
</div>
</div>
</body>
</html>
]
You can copy this HTML file. and paste it into your HTML file. Now you will learn it clearly. and don't forget to save the file with the extension .HTML . This extension is more important to create a website page.
CSS file
[
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
background-color: #262626FF;
}
.circle1{
display: block;
position: absolute;
left: 35%;
height: 300px;
width: 300px;
border: 50px solid black;
border-radius: 50%;
}
.circle2{
display: block;
position: absolute;
left: 45%;
height: 300px;
width: 300px;
border: 50px solid black;
border-radius: 50%;
}
.box1{
display: block;
position: absolute;
left: 35%;
height: 50px;
width: 300px;
animation: anime 2s linear infinite;
}
.box2{
display: block;
position: absolute;
left: 45%;
height: 50px;
width: 300px;
animation: anime 2s linear 0.5s infinite;
}
span{
display: block;
position: absolute;
height: 50px;
width: 50px;
border-radius: 50%;
}
span:nth-child(1){
top: 0;
left: 0;
background: linear-gradient(45deg,coral,yellow);
box-shadow: 1px 1px 60px yellow,
1px 1px 60px yellow;
}
span:nth-child(2){
top: 0;
right: 0;
background: linear-gradient(45deg,limegreen,lime);
box-shadow: 1px 1px 60px lime,
1px 1px 60px lime;
}
@keyframes anime{
100%{
transform: rotate(360deg);
filter: hue-rotate(360deg);
}
}
]
Secondly, you can copy this CSS file. and paste it into your CSS file. and remember the file extension called .CSS . This will help you to design your webpage. If you want more clarity on this topic you can watch my video tutorial and If you have any doubts ask me in the comment section.
Video Tutorial
Watch this video fully and learn this Profile Card Effect. repeat the code for your practice this will help you to learn this Profile Card UI Design more effectively and This video is also helpful to learn faster. Profile Card UI Design Effects are an important part of our portfolio websites. I hope this tutorial will be helpful for learning Profile Card UI Design. I will give you Source Code and you can download it.
COMMENTS