Modern Profile Card using HTML and CSS



















Hello Developers, Learning Robo provides you with a high-quality, dynamic, and eye-catching profile card snippet. The profile card snippet has been carefully crafted in HTML and CSS. At the top of the profile card snippet, the user's name, email address and profile picture are displayed to create a positive first impression. The profile card then displays the user's name and the date they joined to improve the quality of the profile card. The fully responsive profile card snippet can display profile details on desktop, laptop, tablet and mobile devices. With this HTML and CSS-powered profile card snippet, you're not only sharing information, but also making a statement about your commitment to professionalism and modern web design. Impress, engage and connect with the world through this creative and informative profile card snippet. Note: Keep in mind that the CSS is stored in its own file and is connected to the corresponding HTML file.

How to make Modern Profile Card using HTML and CSS.[Source Code]

To make this website, you would like to make two files: an HTML file, a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html> <head> <title>Profile Card UI design - learningrobo</title> <meta name="description" content="Profile Card UI design - learningrobo"> <meta name="author" content="learningrobo.com"> <meta name="keywords" content="profile card,responsive,learningrobo.com,html & css projects,project"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" type=image/x-icon href="#"> <link rel="stylesheet" href="style.css"> <meta charset="UTF-8"> <script src="https://kit.fontawesome.com/5d72166fb5.js" crossorigin="anonymous"></script> </head> <body> <!--Hello Future Developer Thanks for Using learningrobo.com, Share & Support us--> <div class="section1"> <div class="card"> <div class="cardin1"> <img src="https://cdn.pixabay.com/photo/2017/11/10/05/48/user-2935527_1280.png" alt="Profile Image"> <h2>Jack Joe (CTO)</h2> <h6>joe@example.com</h6> <h5><i class="fa-solid fa-briefcase"></i>Web developer</h5> <h5><i class="fa-solid fa-calendar-days"></i>Joined 12 August 2023</h5> </div> </div> <div class="credit">Made with <span style="color:tomato;font-size:20px;">❤ </span>by <a href="https://www.learningrobo.com/">Learningrobo</a></div> </div> <!--Check our website Regularly For New Snippets Post--> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css extension.


/** 
Hello Future Developer Thanks for Using learningrobo.com, 
Check our website Regularly For New Snippets Post.

Share & Support us
**/
@import url('https://fonts.googleapis.com/css2?family=Play&display=swap');
*{
    box-sizing: border-box;
}
body{
    font-family: Arial, sans-serif;
    margin:0%;
}
.section1{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
    background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
}
.card{
    display: flex;
    flex-direction:column;
    justify-content:center;
    border-radius: 10px;
    width:300px;
    height:300px;
    background-color:#fff;
    padding:10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
.cardin1{
    padding:10px 10px;
    display: flex;
    flex-direction:column;
    align-items:start;
    justify-content:center;
    border-radius: 10px;
    height:300px;
}
.cardin1 img{
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin:0px 0px 10px 0px;
    object-fit:contain;
}
.cardin1 h2{
    margin:10px 0px;
    font-family: 'Play', sans-serif;
    font-size: 25px;
}
.cardin1 h6{
    margin:0px 0px 20px 0px;
    font-size:12px;
}
.cardin1 h5{
    margin:5px 0px ;
    font-size:14px;
    font-weight: 300;
}
.cardin1 h5 i{
    margin:0px 10px 0px 0px ;
    font-size:14px;
}
@media only screen and (max-width: 630px){
    .card{
        width:70%;
    }
}
.credit a{
    text-decoration: none;
    color: #fff;
    font-weight: 800;
}
.credit{
    color: #fff;
    text-align: center;
    margin-top: 10px;
    font-family: Verdana,Geneva,Tahoma,sans-serif;
}
We hope you would like this Modern Profile Card using HTML and CSS.

Thank you for reading our blog. If you face any problem in Creating a Modern Profile Card using HTML and CSS., then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.

Press The Key ' p ' and say ' read article ' our voice assistant read our article.
In Our older post it doesnot work we working on that.

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome