Profile Card Using HTML and CSS

0






































Hello Developers, We offer you an exceptional Profile Card HTML snippet, meticulously crafted to showcase your information with style and efficiency. Our snippet is a testament to precision, utilizing HTML and CSS to create a visually appealing and functional profile card. With our snippet, you can effortlessly display all crucial details, from your bio to contact information and social media links, ensuring seamless interaction for your users. A well-designed profile card enhances the aesthetics of your website and provides a captivating introduction to your online persona. Responsive and adaptable, our Profile Card HTML snippet guarantees optimal display across all devices, whether it's a desktop, laptop, tablet, or smartphone. By utilizing our HTML & CSS Profile Card HTML Snippet, you're not just sharing information – you're showcasing your dedication to professionalism and contemporary web design. It's your opportunity to stand out and connect with the world. Experience the difference with our Profile Card HTML snippet and redefine your online presence today!

How to make Profile card UI 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 & CSSt. Made by learningrobo.com"> <meta name="author" content="learningrobo.com"> <meta name="keywords" content="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="#"> <meta charset="UTF-8"> <script src="https://kit.fontawesome.com/5d72166fb5.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="styles.css"> </head> <body> <!--Hello Future Developer Thanks for Using learningrobo.com, Share & Support us--> <div class="container"> <div class="p1"> <div class="d1"> <div class="image"> <h3>Raymond</h3> <h5>Developer</h5> </div> <div class="circle"> <h1>+</h1> </div> </div> <div class="d2"> <div class="sub1"> <header>Project</header> <strong>153</strong> </div> <div class="sub2"> <header>Views</header> <strong>31,323</strong> </div> <div class="sub3"> <header>Likes</header> <strong>12,239</strong> </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. 


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');
*{
    box-sizing: border-box;
}
.container{
    height: 100vh;
    width: 100vw;
    background-color: rgb(142, 132, 132);
    display: flex;
    margin: 0;
    padding: 0;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
}
.p1{
    height: 430px;
    width:330px ;
    display: flex;
    flex-direction: column;
    margin: auto;
    border-radius: 20px;
    box-shadow: -3px -3px 7px #ffffff,3px 3px 5px #ceced1;
}
.d1{
    height: 70%;
    width: auto;
    border-radius: 20px 20px 0 0;
    background: url('https://cdn.pixabay.com/photo/2016/03/27/17/40/man-1283231_1280.jpg');
    background-size: 440px;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    color: white;
}
.circle{
    height: 70px;
    width: 70px;
    background-color: rgb(117, 114, 119);
    border-radius: 50%;
    margin-bottom: -35px;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.3em;
    box-shadow: 1px 5px 6px rgb(128, 122, 122);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}
.image{
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
}
.d2{
    background-color: rgb(255, 255, 255);
    height: 30%;
    width: auto;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 0 0 20px 20px;
}
.d2 header{
    color: #707070;
}
.d2 h5{
    color: black;

}
.circle:hover{
    transform: scale(1.1);
    border: 2px solid white;
}
.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 Profile card UI design using html and css.

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

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