CSS Profile Card Design

Hello friends. Today we will learn how to design CSS profile cards. We used CSS Flexbox to design this profile card snippet. Watch the video tutorial below to understand the snippet. We have over 1000 videos on front-end development on our YouTube channel. If you want, you can subscribe to our YouTube channel.

We hope you have watched the video tutorial and understood how profile cards are designed and made responsive. The question is, what is a profile card? A profile card is one of the many elements of a website. These profile cards are like business cards. This profile card has a brief introduction of those who are working in your company. If a user or visitor wants to know about your company and the qualifications of your company's employees, this profile card will help them understand.

In this project, three boxes have been taken inside a div called a wrapper. Inside every 'box' div, we have added an image and some information related to the image. At the beginning of CSS, we have removed the default margin and padding of the project. The body element is then given a display grid so that its child content ''wrapper'' moves to the center of the viewport. Then the 'wrapper' div was given a certain width. The child elements of 'wrapper' div were brought side by side using the CSS display flex property.

Then each 'box' div is given a specific width and height. The 'box' div has been given a position relative value as the content of the 'info' div will be animated based on it. Then the rest of the elements of the project have been styled through CSS. Here, the CSS clip-path has been used to create the overlay animation in the hover. Watch the video above to understand the project better.

You May also like:

CSS Profile Card Design [ Source Code ]:

To create a project, you first need to create an HTML and a CSS file. Then copy the code from the code box below and paste it into your project. If you have any problem with the code given below, download the code from the download button.

ADD HTML

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <title>CSS Profile Card Design</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">    
</head>
<body>
    <div class="wrapper">
        <div class="box">
            <img src="img/1.jpg" alt="">
            <div class="info">
                <h2>Person Name</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
            </div>
        </div>

        <div class="box">
            <img src="img/2.jpg" alt="">
            <div class="info">
                <h2>Person Name</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>           
            </div>
        </div>

        <div class="box">
            <img src="img/3.jpg" alt="">
            <div class="info">
                <h2>Person Name</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>         
            </div>
        </div>
    </div>
</body>
</html>

ADD CSS:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: grid;
    place-items: center;
    min-height: 100vh;
    background: #f9f9f9;
    font-family: 'Montserrat', sans-serif;
    width: 100%;
}
.wrapper{
    width: 90%;
    height: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}
.box{
    width: 300px;
    height: 400px;
    position: relative;
    border: none;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    overflow: hidden;
    cursor: pointer;
    margin: 10px 5px;
}
.box img{
    width: 105%;
    height: 105%;
    object-fit: cover;
}
.info{
    display: grid;
    place-content: center;
    text-align: center;
    position:absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;    
    background: linear-gradient(45deg, rgba(0, 168, 255, 0.8), rgba(0, 168, 255, 0.8));
    transition: all 0.5s linear;
    clip-path: circle(0% at 50% 50%);
}
        .info h2 {
            font-family: impact;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 30px;
	color: #ffffff;
	line-height: 1.5;
	letter-spacing: 2px;
	
}
.info p{
    font-size: 15px;
    color: #ffffff;
    line-height: 1.6;
}
.box:hover .info{
    clip-path: circle(70% at 50% 50%);
}

I hope you have implemented the code correctly. We regularly share front-end development-related code on our blog. To get more source code like this, visit our blog regularly and share the articles of our blog. Thank you for visiting our website.

DOWNLOAD CODE

CSS Profile Card Design [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

CSS Profile Card Design

CSS Profile Card Design [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form