Stylish Social Media card using HTML and CSS

0















Hello Developers, Learning Robo offers a dynamic and visually appealing product card snippet that presents the information at a glance. This product card snippet was precisely created using HTML and CSS. The profile card snippet shows your name, description and profile picture at the top of the card. This makes a good first impression. Next, your social media information is displayed. At the bottom of the card is space for a contact button so you can easily get in touch with each other. The profile card is fully responsive, so you can view the information on any device, whether it’s a desktop, laptop, tablet or smartphone. All this information is clearly displayed. With this HTML and CSS-powered product card snippet, you're not only sharing information, but also making a statement about your commitment to professionalism and modern web design. Impress, engage and connect with the world through this creative and informative product card snippet. Note: CSS is located in a separate file attached to the HTML file.

How to make Stylish Social Media 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/2015/01/06/16/14/woman-590490_1280.jpg" alt="Profile Image"> <h2>Jasmine Lilly</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> <button>Contact</button> <div class="credit">Made with <span style="color:tomato;font-size:20px;">❤ </span>by <a href="https://www.learningrobo.com/">W3pupil</a></div> </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;
}
:root{
    --color:#eee;
}
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(-225deg, #5271C4 0%, #B19FFF 48%, #ECA1FE 100%);
}
.card{
    display: flex;
    flex-direction:column;
    align-items: center;
    justify-content:center;
    border-radius: 10px;
    width:300px;
    height:450px;
    background-color: #121212;
    padding:20px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
.cardin1{
    padding:10px 0;
    display: flex;
    flex-direction:column;
    align-items:center;
    border-radius: 10px;
    height:360px;
    width:400px;
    background-image: linear-gradient(-225deg, #FFFEFF 0%, #D7FFFE 100%);
}
.cardin1 img{
    width: 110px;
    height: 110px;
    border-radius: 50%;
    margin:20px 0px;
    border: 6px solid #121212;
    object-fit:cover;
}
.cardin1 h2{
    margin:0px;
    font-family: 'Play', sans-serif;
    font-size: 25px;
}
.cardin1 h6{
    margin:0px;
    font-size:12px;
}
.cardin1 h5{
    margin:0px;
    font-size:18px;
    font-weight: 300;
}
.cardin1 p{
    margin:0px;
    font-size:16px;
    font-weight:100;
}
.cardin1 Button{
    margin:0px;
    font-size:18px;
    font-weight:100;
    border: none;
    border-radius: 12px;
    padding: 10px 25px;
    background-color: #121212;
    color: var(--color);
    transition: .5s;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
.cardin1 Button:hover{
    transform: scale(1.05);
    cursor: pointer;
}
.cardin1 .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:300px;
    }
    .cardin1{
        width:350px;
    }
}
.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 Stylish Social Media Card Using HTML and CSS.

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