Social Media Profile Card Design using HTML and CSS









Hello Developers, Learning Robo offers a dynamic and visually appealing profile card snippet that presents your information at a glance. This profile card snippet has been carefully crafted using HTML and CSS. The profile card snippet includes your name, description and profile picture at the top to give a good first impression, and further down the page you can add short captions and social media information to make it easy for anyone to contact you. Finally, the card is fully responsive, meaning it looks good on any device, whether it's a desktop, laptop, tablet or smartphone. This HTML and CSS profile card snippet isn't just about sharing information, it's also about demonstrating your professionalism and keeping up with the latest web design trends. Show off your skills and interact with the world with this creative and useful profile card snippet. Remark: CSS is a type of markup that is written in a separate file that is then associated with your HTML file.

How to Create Social Media 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> <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/2023/07/23/14/15/man-8145174_1280.jpg" alt="Profile Image"> <h6>Web developer</h6> <h2>Jack Horn</h2> <p>Hey, I'm [Your Name]. Web developer with a knack for crafting clean and dynamic online experiences. Turning ideas into interactive websites through code and creativity.</p> </div> <div class="cardin2"> <i class="fab fa-youtube"></i> <i class="fab fa-facebook"></i> <i class="fab fa-twitter"></i> <i class="fab fa-linkedin"></i> </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;
}
html{
    height: 100%;
}
body {
    font-family: Arial, sans-serif;
    padding: 20px;
    height: 100%;
    background-image: linear-gradient(to top, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
}
.section1{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.card{
    display: flex;
    flex-direction:column;
    justify-content: center;
    border-radius: 10px;
    width:400px;
    height:400px;
    background-color:#fff;
    padding: 20px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.cardin1{
    padding:10px 0;
    display: flex;
    flex-direction:column;
    align-items:left;
}
.cardin1 img{
    width: 130px;
    height: 130px;
    border-radius: 50%;
    margin:10px 0;
    border: 3px solid #ff9a9e;
}
.cardin1 h2{
    margin:2px 0;
    font-family: 'Play', sans-serif;
    font-size: 25px;
}
.cardin1 p{
    margin:10px 0;
}
.cardin1 h6{
    margin:2px 0;
    font-size:12px;
}
.cardin2{
    display: flex;
    flex-direction:row;
    padding: 10px 0; 
}
.cardin2 i{
    background-color: #fff;
    margin: 2px 4px;
    padding: 10px;
    border-radius:30px;
    color:#121212;
    font-size:20px;
    transition: .5s;
    border:2px solid #ff9a9e;
    box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
}
.cardin2 i:hover{
    transform: scale(1.1);
    cursor: pointer;
}
@media only screen and (max-width: 630px) {
    .card{
        width:98%;
    }
    .cardin1{
        align-items: center;
    }
    .cardin1 p{
        text-align: justify;
    }
    .cardin2{
        justify-content: center;
    }
}
.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 Social Media Profile Card Design using HTML and CSS.

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