Home
Web Designing
Profile Card Design using HTML & CSS

Profile Card Design using HTML & CSS

Rajib 13 May 2020 Card Design, Profile Card, Profile Card Design, Profile Card Design Codepen

How to create a Profile Card Design using HTML & CSS – Solution: Profile Card Design with source code, demo, and also how you can execute full program easily. To complete the program you need to follow those steps given bellow

Live Demo

Live Demo Download Code

Also Helpful –

Bootstrap Rating Bar

Emoji Rating System

Google Pie Chart in 3D & 2D

Profile Card Design using HTML & CSS

Firstly, How do you need it? Here we post a simple but interesting profile card that also looks nice as well. More profile card designs coming soon.

For designing, you have to understand the CSS part. Here we use some CSS class ".card" for design the card format, ".line" for drow the line on the card, ".user-img" to set the image on the profile card, ".user-img:hover" for image hover, ".user-name, .user-profession, .user-description" to view those values on the needed position, and ".btn" for changing the button design.

Back to coding, To complete this program with debugging free code you have to create three files. The first file is to HTML and the second file gonna be CSS for design part and the third file JavaScript for function-related,

index.html

Create an HTML file named ‘index.html‘ and put those codes given below.

<!-- Coding Debugging (https://codingdebugging.com) -->
<!DOCTYPE html>
<html>
    <head>
    <title>Profile Card - Coding Debugging</title>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- My Stylesheet -->
    <link rel="stylesheet" href="style.css">

    </head>
    <body>
        <div class="card">
            <div class="clip-top-1"></div>
            <div class="line"></div>
            <img class="user-img" src="https://rajib.codingdebugging.com/images/rajib.jpg" alt="Coding Debugging - Rajib" border="0">
            <div class="user-name">Rajib Biswas</div>
            <div class="user-profession">Web Developer</div>
            <div class="user-description">
                Enter Your Description!!!
            </div>
            <a class="btn" href="https://codingdebugging.com/contact-us/">Contact Us</a>
            <div class="clip-bottom"></div>
        </div>

        <!-- Profile Card Script -->
        <script src="https://unpkg.com/scrollreveal"></script>

        <!-- Our Custom JS -->
        <script src="function.js"></script>
        
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Profile Card - Coding Debugging</title>

</head>

<body>

<div class="user-name">Rajib Biswas</div>

<div class="user-profession">Web Developer</div>

Enter Your Description!!!

</div>

<a class="btn" href="https://codingdebugging.com/contact-us/">Contact Us</a>

</div>

</body>

</html>

style.css

Create a CSS file named ‘style.css‘ and put those codes given below.

//Google Font API
@import url('https://fonts.googleapis.com/css?family=Krona+One|Montserrat|Raleway&display=swap');
html{
    visibility:hidden ;
}
body {
    background-color:#2F363F;
    margin:0;
    padding:0;
}
.card{
    width:92%;
    height:480px;
    background-color:#fefcf6;
    position:absolute ;
    left:50%;
    transform:translate(-50%, -50%);
    top:50%;
}
.clip-top-1{
    width:100%;
    height:175px;
    position:relative;
    background:linear-gradient(-45deg, #E8290B, #EC4849 );
    clip-path: polygon(100% 0%, 100% 50%, 0% 100%, 0% 0%);
}
.line{
    position:relative ;
    width:80px;
    height:2px;
    border-radius:10px;
    background-color:#fff;
    top:-25px;
    left:10px;
    transform:rotate(-15deg);
    box-shadow:240px 0px #fff,
                20px 20px #e8290b,
                230px 20px #e8290b;
}
.user-img{
    width:115px;
    height:auto ;
    border-radius:50%;
    position:absolute ;
    top:110px;
    left:50%;
    transform:translate(-50%, -50%);
    border:3.5px solid #fff;
    background-position:0px 0px;
    transition:0.3s;
}
.user-img:hover{
    width:140px;
    height:auto ;
    border-radius:50%;
    position:absolute;
    top:110px;
    left:50%;
    transform:translate(-50%, -50%);
    z-index:100;
    background-position:0px 0px;
}
.user-name{
    position:absolute ;
    font-size:20px;
    font-family: 'Montserrat' ;
    top:220px;
    font-weight:bolder ;
    left:50%;
    transform:translate(-50%, -50%);
}
.user-profession{
    position:absolute ;
    font-size:13.5px;
    font-family: 'Montserrat' ;
    top:245px;
    color:#616C6F;
    left:50%;
    transform:translate(-50%, -50%);
}
.user-description{
    position:absolute ;
    font-size:11px;
    font-family: 'Montserrat' ;
    top:300px;
    line-height:15px;
    left:50%;
    word-spacing:3px;
    text-align:center ;
    width:90%;
    transform:translate(-50%, -50%);
}
.btn{
    position:absolute ;
    font-size:15px;
    font-family: 'Montserrat' ;
    top:390px;
    background-color:#E44236;
    left:50%;
    align-items:center ;
    padding:15px 15px 15px 15px;
    word-spacing:3px;
    text-align:center ;
    color:#fff;
    text-decoration:none ;
    width:70%;
    transition:0.2s;
    transform:translate(-50%, -50%);
}
.clip-bottom{
    width:100%;
    height:6px;
    position:absolute ;
    bottom:0;
    background-color:#E44236;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

//Google Font API

@import url('https://fonts.googleapis.com/css?family=Krona+One|Montserrat|Raleway&display=swap');

html{

visibility:hidden ;

}

body {

background-color:#2F363F;

margin:0;

padding:0;

}

.card{

width:92%;

height:480px;

background-color:#fefcf6;

position:absolute ;

left:50%;

transform:translate(-50%, -50%);

top:50%;

}

.clip-top-1{

width:100%;

height:175px;

position:relative;

background:linear-gradient(-45deg, #E8290B, #EC4849 );

clip-path: polygon(100% 0%, 100% 50%, 0% 100%, 0% 0%);

}

.line{

position:relative ;

width:80px;

height:2px;

border-radius:10px;

background-color:#fff;

top:-25px;

left:10px;

transform:rotate(-15deg);

box-shadow:240px 0px #fff,

20px 20px #e8290b,

230px 20px #e8290b;

}

.user-img{

width:115px;

height:auto ;

border-radius:50%;

position:absolute ;

top:110px;

left:50%;

transform:translate(-50%, -50%);

border:3.5px solid #fff;

background-position:0px 0px;

transition:0.3s;

}

.user-img:hover{

width:140px;

height:auto ;

border-radius:50%;

position:absolute;

top:110px;

left:50%;

transform:translate(-50%, -50%);

z-index:100;

background-position:0px 0px;

}

.user-name{

position:absolute ;

font-size:20px;

font-family: 'Montserrat' ;

top:220px;

font-weight:bolder ;

left:50%;

transform:translate(-50%, -50%);

}

.user-profession{

position:absolute ;

font-size:13.5px;

font-family: 'Montserrat' ;

top:245px;

color:#616C6F;

left:50%;

transform:translate(-50%, -50%);

}

.user-description{

position:absolute ;

font-size:11px;

font-family: 'Montserrat' ;

top:300px;

line-height:15px;

left:50%;

word-spacing:3px;

text-align:center ;

width:90%;

transform:translate(-50%, -50%);

}

.btn{

position:absolute ;

font-size:15px;

font-family: 'Montserrat' ;

top:390px;

background-color:#E44236;

left:50%;

align-items:center ;

padding:15px 15px 15px 15px;

word-spacing:3px;

text-align:center ;

color:#fff;

text-decoration:none ;

width:70%;

transition:0.2s;

transform:translate(-50%, -50%);

}

.clip-bottom{

width:100%;

height:6px;

position:absolute ;

bottom:0;

background-color:#E44236;

}

function.js

Create a JavaScript file named ‘function.js‘ and put those codes given below.

//WAIT FOR POPUP
ScrollReveal().reveal('.card', {delay: 1000});

1 2	//WAIT FOR POPUP ScrollReveal().reveal('.card', {delay: 1000});

Thank you for visiting!

We appreciate you for your precious time. I hope you are learn something from here! If you have any queries about this coding comment down below we will reply ASAP.

Keep coding, Keep debugging!

Live Demo Download Code

Profile Card Design using HTML & CSS

Live Demo

Profile Card Design using HTML & CSS

Like this:

Related

Leave a Reply Cancel reply

Profile Card Design using HTML & CSS

Live Demo

Profile Card Design using HTML & CSS

Share this:

Like this:

Related

Leave a Reply Cancel reply