Glassmorphism Profile Card using HTML and CSS

0





























Hello Developers, Learning Robo’s profile card snippet is a dynamic and eye-catching profile card snippet that shows the information in an easy-to-understand format. This profile card snippet is exactly how it looks using HTML and CSS. At the top of your profile card snippet is your name and profile photo, which makes a great first impression. Below your name is space for displaying your details, such as your areas of interest. Below that is your social media details. At the bottom of the container is a hire me button, which allows anyone interested to contact you. This profile card snippet is fully responsive, which means that your information is always visible on different devices, such as desktop, laptop, tablet, or smartphone. With this HTML and CSS-supported profile card snippet, you not only pass on information, but also set an example of your commitment to professionalism and modern web design. Make a statement and connect with people around the world with this innovative profile card snippet. Note: CSS is a type of markup language that is embedded in a standalone file that is linked to the HTML file. Glass morphism is used in this profile card snippet. If you would like to change the blur in this snippet, you can do so in the CSS file .container-card  backdrop-filter: blur();

How to make Glassmorphism Profile Card using HTML 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"> <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="container"> <div class="container-card"> <div class="container-card-top"> <h1>Alesia Carl</h1> </div> <div class="container-card-middle"> <div class="container-card-middle-left"> <img src="https://cdn.pixabay.com/photo/2015/01/06/16/14/woman-590490_1280.jpg"> </div> <div class="container-card-middle-right"> <div> <ul> <li>Web Developer</li> <li>Web Designer</li> <li>Graphic Designer</li> </ul> </div> <div class="container-card-middle-right-icon"> <i class="fa-brands fa-facebook"></i> <i class="fa-brands fa-instagram"></i> <i class="fa-brands fa-linkedin"></i> <i class="fa-brands fa-twitter"></i> </div> </div> </div> <div class="container-card-bottom"> <button>Hire Me</button> </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> </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{
    --color:#ddd;
}
*{
    box-sizing: border-box;
}
h1,h2,h3,h4,h5,h6{
    margin:0;
}
body{
    font-family: 'Mukta', sans-serif;
    background:url("https://cdn.pixabay.com/photo/2020/09/28/16/29/leaves-5610361_1280.png");
    background-position:center;
    background-size:cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color:var(--color);
}
.container{
    min-height:100vh;
    max-height:auto;
    display:flex;
    justify-content:center;
    align-items:center;
}
.container-card{
    width:500px;
    height:450px;
    border-radius: 30px;
    backdrop-filter:blur(10px);
    background-color:rgba(0,0,0,0.1);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border: 3px solid rgba(0,0,0,0.4);
}
.container-card-top{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    width:100%;
    height:fit-content;
    padding:15px;
}
.container-card-top h1{
    font-size:40px;
    margin-left:20px;
}
.container-card-middle{
    display:flex;
    flex-direction:row;
    width:100%;
    height:fit-content;
    padding:20px 30px 0px 30px;
}
.container-card-middle-left{
    display: flex;
    justify-content: space-between;
}
.container-card-middle-left img{
    width:170px;
    height:170px;
    border-radius: 50%;
    border:5px solid transparent;
    outline:5px dashed #6DBC9B;
    object-fit:cover;
}
.container-card-middle-right{
    display:flex;
    flex-direction:column;
    align-items:end;
    margin:0px 0px 20px 60px;
}
.container-card-middle-right ul li{
    list-style-type:none;
    font-size:18px;
    font-weight: 300;
    padding: 5px;
}
.container-card-middle-right ul li::before{
    content:"◎ ";
}
.container-card-middle-right-icon{
    display:flex;
    flex-direction:row;
}
.container-card-middle-right-icon i{
    display:flex;
    justify-content: center;
    align-items: center;
    height:30px;
    width:30px;
    font-size:20px;
    border-radius: 50%;
    margin-left: 15px;
    border:1px solid var(--color);
}
.container-card-middle-right-icon i:hover{
    cursor: pointer;
    background-color:#000;
    transition:.5s;
}
.container-card-bottom{
    display: flex;
    flex-direction:row;
    justify-content:right;
    align-items: center;
    padding:0 40px;
}
.container-card-bottom button{
    background-color:rgba(255, 255, 255, 0.6);
    color: #000000;
    padding:10px 18px;
    border: none;
    border-radius: 20px;
    width:40%;
    border:2px solid transparent;
    transition:.5s;
    margin:10px 0px;
}
.container-card-bottom button:hover{
    cursor: pointer;
    background-color: #121212;
    color:var(--color);
    border:2px solid #6DBC9B;
}
@media only screen and (max-width: 1024px){
    .container-card{
        width:500px;
        height:450px;
    }
}
@media only screen and (max-width: 630px){
    .container-card{
        width:400px;
        height:600px;
    }
    .container-card-top{
        display:flex;
        justify-content:center;
        padding:15px;
    }
    .container-card-top h1{
        margin-left:0px;
    }
    .container-card-middle{
        display:flex;
        flex-direction:column;
        justify-content: center;
        align-items: center;
        padding:0px;
    }
    .container-card-middle-left{
        display: flex;
        justify-content:center;
    }
    .container-card-middle-right{
        width:100%;
        margin:0px;
        align-items:center;
    }
    .container-card-bottom{
        display: flex;
        justify-content:center;
        align-items: center;
        width:100%;
        margin:5px;
        padding:0px;
    }
}
.credit a{
    text-decoration: none;
    color: #fff;
    font-weight: 800;
}
.credit{
    color: #fff;
    text-align: center;
    font-family: Verdana,Geneva,Tahoma,sans-serif;
}
We hope you would like this Glassmorphism Profile Card using HTML CSS.

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

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