How to Create Responsive Profile Card using HTML and CSS





Hello Developers, Learning Robo's profile card snippet is a dynamic, eye-catching, and informative profile card that displays all your information in a single view. The card is designed with exact HTML and CSS coding, with your name, title, and profile picture at the top. This makes a great first impression, and at the bottom, there is a space for a ‘Follow’ button and a ‘Message’ button, so that anyone who wants to get in touch with you can easily do so. This profile card is fully responsive, so it can be displayed on any device, and your information is always displayed in a clear and attractive way. By designing a profile card using HTML and CSS, not only you are sharing information, but you are also showing your dedication to professionalism and cutting-edge web design. Connect with the world!

How to Create Responsive 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="learningrobo.com flexbox,Profile card,profile page,Responsive,learningrobo.com,html & css projects"> <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"> </head> <body> <!--Hello Future Developer Thanks for Using learningrobo.com, Share & Support us--> <div class="container"> <div class="flex-container"> <div class="left-container"> <img src="https://cdn.pixabay.com/photo/2018/01/06/09/25/hijab-3064633_1280.jpg"> <h2><b>Haxel Luna</b></h2> <h6>Web Developer</h2> <button>FOLLOW</button> <button>MESSAGE</button> </div> <div class="right-container"> <div class="right-container-child"> <h2><b>1500</b></h2> <h4>Posts</h4> </div> <div class="right-container-child"> <h2><b>1768</b></h2> <h4>Followers</h4> </div> <div class="right-container-child"> <h2><b>700</b></h2> <h4>Following</h4> </div> </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=Mukta:wght@300&family=Nunito+Sans:opsz,wght@6..12,300&display=swap');
:root{
    --bg:#ffffff;
}
h1,h2,h3,h4,h5,h6{
    margin:0;
}
body{
    font-family: 'Mukta', sans-serif;
    color:#a48f84;
    background:linear-gradient(to right,#fdb46a, #e89466);
}
.container{
    Height:100vh;
    display:flex;
    justify-content:center;
    flex-direction: column;
    align-items:center;
}
.flex-container{
    display:flex;
    flex-direction:row;
    align-items:center; 
    width:45vw;
    height:70vh;
    background-color: #e89466;
    border-radius: 5px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.left-container{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:5vh 5vw;
    width:60%;
    height:60vh;
    background:var(--bg);
    border-radius:5px 0 0 5px;
    column-gap:5px;
}  
.right-container{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width:40%;
    height:70vh;
    background:var(--bg);
    border-radius:0 5px 5px 0;
    gap:.5vh;
}
.right-container-child{
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width:100%;
    height:23vh;
    background:#fae9e0;
    border-radius: 5px;
}
h2{
    font-size: 35px;
}
h6{
    font-size: 15px;
}
.left-container img{
    height:150px;
    width:150px;
    border-radius: 50%;
    border:5px solid #e89466;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.left-container button{
    border-radius:30px;
    margin:10px;
    padding:5px;
    width:70%;
    height:40px;
    background:var(--bg);
    border: 3px solid #b8a99b;
    color:#a48f84;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.left-container button:hover{
    cursor: pointer;
    background-color:#a48f84;
    color:#ffffff;
    transition:.5s;
}
@media only screen and (max-width: 1024px){
    .container{
        height:fit-content;
    }
    img{
        height:100px;
        width:100px;
    }
    .flex-container{
        width:70vw;
        height:50vh;
        background-color: #e89466;
        border-radius: 5px;
    }
    .left-container{
        height:40vh;
    }
    .right-container{
        height:50vh;
    }
}
@media only screen and (max-width: 630px){
    img{
        height:100px;
        width:100px;
    }
    .flex-container{
        flex-direction: column;
        width:80%;
        height:100%;
        background-color: #e89466;
        border-radius:5px;
    }
    .left-container{
        height:auto;
        width:100%;
        border-radius: 5px 5px 0 0;
    }
    .right-container{
        width:100%;
        height:50vh;
        padding:5vh 5vw;
        border-radius: 0 0 5px 5px;
    }
}
.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 Responsive Profile Card using HTML CSS.

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

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome