Profile Card using HTML and CSS

0













Hello Developers, Learning Robo offers a dynamic and visually appealing contact form snippet that shows your data at a glance. This contact form snippet was created precisely with HTML and CSS. In this profile card snippet your name and designation appear at the top, making a great first impression. Below that social media information can be provided. This profile card is also fully responsive, making it easy to view on different devices. Whether you’re looking at your profile on your desktop, laptop screen, tablet screen, or smartphone screen, your information will always be displayed in a well-organized and attractive way. In this HTML and CSS Contact form snippet, you’re not only sending your contact information, but you’re also showing your dedication to professionalism and up-to-date web design. Impress, engage, and share with the world with this creative and informational profile card snippet. Note: The CSS is stored in a separate file that is connected to the HTML file.

How to make 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"> </div> <div class="cardin2"> <h2>Jack Horn stanly</h2> <h6>Web developer</h6> <div class="info"> <div> <h5>60</h5> <p>Posts</p> </div> <div> <h5>34K</h5> <p>Folowers</p> </div> <div> <h5>20</h5> <p>Following</p> </div> </div> </div> <div class="credit">Made with <span style="color:tomato;font-size:20px;">❤ </span>by <a href="https://www.w3pupil.com/">W3pupil</a></div> </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 top, #c471f5 0%, #fa71cd 100%);
}
.card{
    display: flex;
    flex-direction:column;
    justify-content:space-between;
    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:center;
    border-radius: 10px;
    height:150px;
    background-image: linear-gradient(to top, #c471f5 0%, #fa71cd 100%);
}
.cardin1 img{
    width: 110px;
    height: 110px;
    border-radius: 50%;
    margin:80px 0px 0px 0px;
    border: 6px solid #fff;
    object-fit:contain;
}
.cardin2{
    display: flex;
    flex-direction:column;
    align-items: center;
    height:calc(400px - 150px);
    padding: 50px 0px 0px 0px; 
}
.cardin2 h2{
    margin:0px;
    font-family: 'Play', sans-serif;
    font-size: 25px;
}
.cardin2 h6{
    margin:0px;
    font-size:12px;
}
.cardin2 h5{
    margin:0px;
    font-size:18px;
    font-weight: 300;
}
.cardin2 p{
    margin:0px;
    font-size:16px;
    font-weight:100;
}
.cardin2 .info{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width:360px;
    height:60px;
    column-gap:40px;
    margin:10px 0px;
}
@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: #121212;
    font-weight: 800;
}
.credit{
    color: #121212;
    text-align: center;
    margin-top: 10px;
    font-family: Verdana,Geneva,Tahoma,sans-serif;
}
We hope you would like this Profile Card Using HTML and CSS.

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

Explore

Color picker Word counter Box shadow generator HTML encoder & Decoder online live editor More..
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.
Tags:

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