DEV Community

Opeyemi Ogunsanya
Opeyemi Ogunsanya

Posted on

Creating A Profile Card Design

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.
Alt Text

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

For full script reference watch

Thank you for reading .

Discussion (0)