Personal profile card using HTML and CSS

0































Hello Developers, we provide you with a dynamic and eye-catching Contact form HTML using only HTML and CSS to display your information at a glance. This Contact form html snippet has been designed with accuracy using HTML and CSS to create an easy-to-use authentication experience. The Contact form snippet includes entry fields for your user’s name, email address, and subtle placeholders to help your user navigate the contact form. It also includes a message box where your message can be written. The contact form also includes a submit button. You can also add your organization’s address on the left side of the Contact form. Your contact form will always look neat and organized no matter whether it’s a desktop, laptop, tablet, or smartphone. By using this HTML & CSS Contact form html snippet, you are not only sharing information, but you’re also demonstrating your commitment to professionalism and modern web design. In conclusion, show off and engage with the world using this innovative and creative Contact form html snippet. Note: We have coded CSS in a separate file and linked it to the HTML file to create the HTML snippet for the contact form.

How to make Personal 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="sec1"> <div class="container"> <div class="profile-card"> <div class="d1"> <div class="pic"> <img src="https://cdn.pixabay.com/photo/2017/11/10/05/48/user-2935527_1280.png" alt="Profile Picture"> </div> </div> <div class="info"> <h2>Chris Hemsworth</h2> <p>Web Developer and Programmer</p> <div class="location"> <ion-icon name="location-outline"></ion-icon> <span>INDIA</span> </div> <br> <div class="buttons"> <button>Message</button> <button>Follow</button> </div> </div> <div class="skills"> <div class="skills-title">Skills</div> <ul> <li>Html</li> <li>Css</li> <li>Javascript</li> <li>PHP</li> <li>React JS</li> <li>Dart</li> </ul> </div> </div> </div> <div class="credit">Made with <span>❤ </span>by <a href="https://www.learningrobo.com/">learningrobo</a></div> </div> <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script> <!--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
**/
*{
    box-sizing: border-box;
}
body{
    margin: 0;
    color: #ffffff; 
    font-family:sans-serif;
}
.sec1{
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content: center; 
    width:100%;
    height:100vh;
    background-image: linear-gradient(to top, #505285 0%, #585e92 12%, #65689f 25%, #7474b0 37%, #7e7ebb 50%, #8389c7 62%, #9795d4 75%, #a2a1dc 87%, #b5aee4 100%);
}
.container{
    display: flex;
    flex-direction: column;
    align-items:center;
    background: linear-gradient(to bottom, #363636, #121212); 
    border-radius: 10px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
    width: 400px;
    height: 580px;
}
.profile-card{
    display: flex;
    flex-direction: column;
    height: fit-content;
}
.d1{
    width: 400px;
    height: 250px;
    background: linear-gradient(to bottom, #272727, #0e0e0e); 
    border-radius: 10px 10px 0px 0px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.pic img{
    border-radius: 50%;
    width: 190px;
    height: 190px;
    display: flex;
    object-fit: cover;
}
.info{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    color: #ffffff; 
    text-align: center;
}
h2{
    font-size: 24px;
    color: #dddddd; 
    margin: 0;
}
p{
    color: #565656; 
    margin: 10px 0;
}
.location{
    display: flex;
    align-items: center;
    color: #dddddd; 
}
.location ion-icon{
    margin-right: 5px;
}
.buttons{
    display: flex;
    margin-top: 10px;
}
button{
    border: none;
    border-radius: 10px;
    height: 30px;
    width: 90px;
    margin-right: 10px;
    text-align: center;
    line-height: 30px;
    color: #dddddd; 
    background-color: #333; 
    cursor: pointer;
}
button:hover{
    color: white;
    background-color: coral;
}
.skills-title{
    text-align: left;
    margin:  0 47px; 
    color: #dddddd; 
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 10px;
}
.skills ul{
    display: flex;
    flex-wrap: wrap;
    list-style: none; 
}
.skills li{
    background-color: #666666; 
    color: #ffffff; 
    padding: 5px 10px;
    margin: 5px;
    border-radius: 5px;
}
@media screen and (max-width: 630px){
    .d1{
        width:100%;
    }
    .container{
        width: 98%;
        height: fit-content;
    }
}
.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:tomato;
    font-size:20px;
}
We hope you would like this Personal profile card using HTML and CSS.

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

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

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