Profile Card Design using HTML and CSS

                                                                                































Hello Developers, we are thrilled to introduce a sophisticated and functional profile card snippet, crafted meticulously with HTML and CSS. This profile card is perfect for showcasing the expertise and skills of individuals in a visually appealing manner. Each card includes a photo, name, title, a brief bio, key skills, and contact information, providing a comprehensive snapshot of the individual. The profile card snippet is fully responsive, ensuring it looks fantastic on any device, from desktops to smartphones. The layout is clean and modern, with well-organized sections that effectively highlight the details. Interactive elements, such as hover effects, enhance user engagement, making the cards more dynamic and interesting. Additionally, social media icons and links to professional profiles like GitHub and LinkedIn can be included, allowing users to connect with the developer across various platforms. Integrating this HTML and CSS profile card snippet into your website not only enhances its visual appeal but also adds a professional touch. This snippet showcases your attention to detail and commitment to providing a rich user experience. Whether you are displaying your own profile, highlighting team members, or presenting clients, this stylish and functional card design will help you in an engaging and professional manner.

How to make Profile card Design 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 lang="en"> <head> <title>Responsive Profile card Using HTML & CSS</title> <meta name="description" content="Responsive Profile card Using HTML & CSS. Made by learningrobo.com"> <meta name="author" content="learningrobo.com"> <meta name="keywords" content="form,responsive,learningrobo.com,html & css projects,project,profile card"> <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> <title>Document</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet"> </head> <body> <!--Hello Future Developer Thanks for Using learningrobo.com, Share & Support us--> <div class="box"> <div class="p1"> <div class="c1"> <img src="https://cdn.pixabay.com/photo/2014/03/13/20/05/boy-286811_1280.jpg" alt="profile"> </div> <div class="c2"> <h1>Hello!</h1> <h4>I'm a creative multitalented graphic designer</h4> <p>I am creative graphic designer. I am an expert in the Adobe Creative Suit and have worked with a caried myraid of clients. Connecting your ideas to customer perception & all the digital dots in between...</p> <div class="logo"> <img src="https://www.edigitalagency.com.au/wp-content/uploads/facebook-icon-white-png-1200x1200.png" alt="facebook logo"> <img src="https://icon-library.com/images/twitter-icon-white-transparent/twitter-icon-white-transparent-24.jpg" alt="twitter logo"> <img src="https://toppng.com/uploads/thumbnail/twitter-logo-facebook-logo-instagram-logo-instagram-11562930824uod4gt5kfw.png" alt="instagram logo"> </div> </div> </div> <div class="p2"> <div class="c3"> <h3>Details</h3> <h4>NAME</h4> <h5>Fired Morrison</h5> <h4>ROLE</h4> <h5>Lead Designer</h5> <h4>EMAIL</h4> <h5>designer@example.com</h5> <h4>PHONE</h4> <h5>(+987) 987 654 321</h5> <h4>WEBSITE</h4> <h5>www.somewebsite.com</h5> </div> <div class="c4"> <div class="t1"> <h5>AWARDS</h5> <h1>17</h1> <h5>CLIENTS</h5> <h1>138</h1> </div> <div class="t2"> <h5>XP YEARS</h5> <h1>12+</h1> <h5>PROJECTS</h5> <h1>350</h1> </div> </div> </div> </div> <div class="credit">Made with <span>❤ </span>by<a href="https://www.learningrobo.com/">learningrobo</a></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
**/
body{
    font-family: 'Roboto', sans-serif;
}
.box{
    width: 45%;
    height: 750px;
    margin: auto;
    /* background-color: cornflowerblue; */
    display: flex;
    flex-direction: column;
}
.p1{
    width: 100%;
    height: 375px;
    /* background-color: antiquewhite; */
    display: flex;
    flex-direction: row;
}
.c1{
    width: 50%;
    height: 375px;
    /* background-color: bisque; */
    display: flex;
    flex-direction: column;
}
.c1 img{
    width: 100%;
    height: 375px;
}
.c2{
    width: 50%;
    height: 375px;
    background-color: #4B686F;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #d4d4d4;
}
.c2 h1,h4,p{
    margin: 20px 35px;
}
.c2 h1{
    color: white;
}
.c2 h4,p{
    font-weight: lighter;
    font-size: 15px;
}
.logo{
    width: 35%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 10px;
    
}
.logo img{
    width: 18px;
    height: 18px;
}
.p2{
    width: 100%;
    height: 375px;
    /* background-color: #6dffdf; */
    display: flex;
    flex-direction: row;
}
.c3{
    width: 50%;
    height: 375px;
    background-color: #4B686F;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    color: white;
}
.c3 h3,h4,h5{
    margin: 0%;
}
.c3 h3{
    font-weight: bold;
}
.c3 h4{
    font-weight: normal;
}
.c3 h5{
    font-weight: lighter;
}
.c4{
    width: 50%;
    height: 375px;
    background-color: #EDECE4;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.t1{
    width: 50%;
    height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    margin: 40px;
}
.t1 h1{
    color: #4B686F;
    font-size: 50px;
}
.t2 h1{
    color: #4B686F;
    font-size: 50px;
}
.t1 h1,h5{
    margin: 0%;
}
.t2 h1,h5{
    margin: 0%;
}
.t2{
    width: 50%;
    height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    margin: 40px;
}
@media (max-width:800px) {
    .p1{
        height: 750px;
        flex-direction: column;
    }
    .c1{
        width: 100%;
    }
    .c2{
        width: 100%;
    }
    .c3{
        width: 100%;
        border-top: 1px solid #EDECE4;
    }
    .c4{
        width: 100%;
    }
    .p2{
        height: 750px;
        flex-direction: column;
    }
}
.credit a {
    text-decoration: none;
    color: #121212;
    font-weight: 800;
  }
  
.credit{
    color: #121212;
    text-align: center;
    margin-top: 10px;
    font-family: Verdana,Geneva,Tahoma,sans-serif;
}
.credit span{
    color:#000;
    font-size:20px;
}     
We hope you would like this Profle Card Design using HTML and CSS.

Thank you for reading our blog. If you face any problem in Creating a Profile Card Design 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