DEV Community

loading...

Creating A Profile Card Design

ope79321153 profile image Opeyemi Ogunsanya ・2 min read

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)

pic
Editor guide