Profile Card using HTML and CSS

0





























Hello Developers, Learning Robo provides a dynamic and eye-catching product card snippet to display your details at a glance. This product card snippet is exactly how it looks in HTML and CSS. A product card snippet shows the name of your product along with an image at the top of the card to give a good first impression of your product. You can also add a short description of your product further down the page. At the bottom of the page, you can use the "Add to cart" option to add your product to the cart. With CSS you can add hover effects and a responsive design. The product card snippet is interactive and can be displayed on multiple devices. It is fully responsive, so you can display your product information on your desktop, laptop, tablet or smartphone. By using this product card snippet in HTML and CSS format, you’re not only sharing your information, but you’re also demonstrating your dedication to professionalism and contemporary web design. Impress the world with this creative and informative product card and make a connection. Note: CSS is a piece of code that is stored in a separate file that is connected to the HTML file. The transform property is used in this snippet. If you want to change it, you can do so in the CSS file  @keyframes spin  transform: rotate();

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,resposive,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"> </head> <body> <!--Hello Future Developer Thanks for Using learningrobo.com, Share & Support us--> <div class="container"> <h1>Profile</h1> <p>I'm a creative Webdeveloper</p> <img src="https://cdn.pixabay.com/photo/2015/07/20/12/57/ambassador-852766_1280.jpg" alt="image"> <div class="abt"> <h3>About me</h3> <p>I am an allround web developer. I am a senior programmer with good knowledge of front-end techniques. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis placeat nulla enim facilis quidem! Accusantium voluptatibus in explicabo facilis sequi! A, sint. Qui consequatur voluptas eveniet ratione necessitatibus aspernatur pariatur.</p> </div> <h2>Details</h2> <h3>Name:</h3> <h4>Hunter Newton</h4> <h3>Age:</h3> <h4>33 years</h4> <h3>Location:</h3> <h4>North America, Earth</h4> <div class="logo"> <a href="#"><i class="fa-brands fa-facebook"></i></a> <a href="#"><i class="fa-brands fa-square-instagram"></i></a> <a href="#"><i class="fa-brands fa-linkedin"></i></a> </div> <div class="credit">Made with <span>❤ </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
**/
*{
    box-sizing: border-box;
}
body{
    font-family: 'Merriweather Sans', sans-serif;
    background-color: rgb(224, 224, 224);
    background-color:#121212;  
}
.container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width:100%;
    height:98vh;
    border-width: 5px;
    border-style: solid;
    background-color:#121212;
    color:rgb(224, 224, 224);
    border-image: linear-gradient(120deg, rgb(240, 62, 246), rgb(253, 239, 85)) 1;
}
h1{
    margin: 0%;
}
h1{
    margin-top: 10px;
}
p{
    margin: 0px;
}
img{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-top: 30px;
    object-fit:cover;
    object-position:top center;
    border:3px solid transparent;
    outline:3px solid rgb(224, 224, 224);
}
.abt{
    width: 60%;
    height: auto;
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 10px;
    margin-top: 20px;
    border-radius:5px;
    color:#121212;
}
.abt h3{
    margin: 10px;
}
h2,h3,h4{
    margin: 0;
}
h3{
    margin-top: 15px;
}
h2{
    margin-top: 10px;
}
h4{
    font-weight: lighter;
}
.logo{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.logo a i{
    margin: 20px 10px;
    color:rgb(224, 224, 224);
    font-size: 20px;
}
.logo a i:hover{
    cursor: pointer;
}
@media screen and (max-width:630px){
    .container{
        height: fit-content;
    }
    .abt{
        width:90%;
    }
}
.credit a{
    text-decoration: none;
    color: #ddd;
    font-weight: 800;
}
.credit{
    color: #ddd;
    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 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

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

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