Thank you all for your responses to my previous post on Creating CSS Timeline. moving forward in your daily activities either as a developer, an engineer, a
designer, an analyst and soon. Using the internet to display your work and achivements needs a Profile Card that displays (at least a brief description) about
you on your portfolio page. Also if you are running a website that people seek for jobs there they would also need a Profile Card each to present their work
and achievements.
So lets write a few codes for a Profile Card Design
HTML5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Contact Card Design with Glassmorphism</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card">
<span class="pro">PRO</span>
<img class="img" src="https://randomuser.me/api/portraits/men/40.jpg">
<h3>Patric Smart</h3>
<h6>Carlifonia</h6>
<p>Front-end developer and <br> back-end developer</p>
<div class="buttons">
<button>Message</button>
<button>Following</button>
</div>
<div class="skills">
<h6>Skills</h6>
<ul>
<li>CSS</li>
<li>HTML</li>
<li>Python</li>
<li>UI / UX</li>
<li>Wordpress</li>
<li>JavaScript</li>
<li>Php</li>
</ul>
</div>
</div>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css?family=Montserrat');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
flex-direction: column;
background: #28223F;
font-family: Montserrat, sans-serif;
}
.card
{
position: relative;
width: 350px;
border-radius: 10px;
padding-top: 30px;
max-width: 100%;
color: #B3B8CD;
text-align: center;
border-radius: 10px;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 10px 2px -10px rgba(0, 0, 0, 0.75);
}
.card .pro
{
position: absolute;
top: 30px;
left: 30px;
font-size: 14px;
font-weight: bold;
border-radius: 3px;
color: #231E39;
padding: 3px 7px;
background: rgba(0, 0, 0, 0.15);
}
.card .img
{
padding: 7px;
border-radius: 50%;
border: 1px solid #28223F;
}
button
{
font-weight: 500;
border-radius: 3px;
border: 1px solid #0396cb;
padding: 10px 25px;
color: #028996;
background: transparent;
font-family: Monterrat, sans-serif;
}
button:hover
{
cursor: pointer;
color: #231E39;
background: #0396cb;
}
h3
{
margin: 10px 0;
}
h6
{
margin: 5px 0;
text-transform: uppercase;
}
p
{
font-size: 14px;
line-height: 21px;
}
.skills
{
padding: 15px;
margin-top: 30px;
text-align: left;
font-size: 20px;
border-radius: 10px;
backdrop-filter: blur(1.5px);
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.75);
}
.skills ul
{
margin: 0;
padding: 0;
list-style: none;
}
.skills ul li
{
padding: 7px;
font-size: 12px;
display: inline-block;
margin: 0 7px 7px 0;
border: 1px solid #2D2747;
}
Thank you for reading .
Top comments (0)