Responsive Glass morphism horizontal profile card with social icons and bio details Using HTML CSS.

Responsive Glass morphism horizontal profile card with social icons and bio details Using HTML CSS.





Hello developers, In today's world, web design has become more than just a means of conveying information. It has now become an art form where designers can express themselves and create stunning visuals that engage users. One popular design trend that has been making waves in recent years is glass morphism. Glass morphism is a design style that mimics the look of frosted glass and is characterized by its translucent effect, soft blur, and subtle shadows. In this article, we will be discussing how to create a glass morphism horizontal profile card with social icons and bio details using HTML and CSS.


Creating a Responsive Glass morphism horizontal profile card with social icons and bio details Using HTML CSS.[Source Code]

To make this website, you would like to make three 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> <meta charset="UTF-8"> <title>Glass morphism Profile Card</title> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <section> <div class="card1"> <div class="card"> <div class="left-container"> <img src="https://cdn.pixabay.com/photo/2020/10/19/09/44/woman-5667299__480.jpg" alt="Profile Image"> <h2 class="gradienttext">John Doe</h2> <p>Web Developer</p> </div> <div class="right-container"> <h3 class="gradienttext">Profile Details</h3> <table> <tr> <td>Name :</td> <td>John Doe</td> </tr> <tr> <td>Age :</td> <td>35</td> </tr> <tr> <td>Mobile :</td> <td>+91 XXXXXXXXXX</td> </tr> <tr> <td>Email :</td> <td>john@example.com</td> </tr> <tr> <td>Address :</td> <td>123 Main St, Anytown, USA</td> </tr> </table> <div class="social-icons"> <a href="#"><i class="fa fa-facebook-f"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-linkedin"></i></a> <a href="#"><i class="fa fa-github"></i></a> </div> <div class="credit">Made with <span style="color:tomato;font-size:20px;">❤ </span>by<a href="https://www.learningrobo.com/"> Learning Robo</a></div> </div> </div> </div> </section> </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@200;300;400;500;600&display=swap');
*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

body{
    background-color: #1c1c25;
    font-family: Arial, sans-serif;
    padding: 20px;
}

html, body {
    height: 100%;
  }
  section{
    height:100vh;
    width:100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
section::before,
.card1::before{
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50% 20px;
    opacity:.8;
}

section::before{
    top: 6%;
    left: 75%;
    background: linear-gradient(#AAFFA9, #11FFBD);
}

.card1::before{
    bottom:2%;
    left: 10%;
    background: linear-gradient(#0098f0, #0457d3);
}
.card {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-radius: 30px;
    padding: 10px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    width: 900px;
    height: 480px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    background-color: rgba(255,255,255,0.05);
    filter: blur(0.2px);
}
.left-container {
    flex: 1;
    max-width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height:100%;
    padding: 10px;
    margin: 30px;
    border-right: 1px solid #e4e4e4;
  }
  
  .right-container {
    flex: 1;
    max-width:70%;
    height:430px;
    padding: 10px;
    margin: 20px;
    border-radius:30px;
  }
  @media only screen and (max-width: 860px) {
    .card
     {
     flex-direction: column;
     margin: 10px;
     height: auto;
     width: 100%;
    }
    .left-container{
        flex: 1;
        max-width:100%; 
        border:none;
    }
 section::before{
        top:4%;
        left:51%;
    }
  }
  @media only screen and (max-width: 600px) {
    .card
     {
     flex-direction: column;
     margin: 10px;
    }
    .left-container{
        flex: 1;
        max-width:100%; 
    }
    .card1::before{
        bottom: -14%;
        left: 1%;
    }


  }
  img {
    border: double 5px transparent;
    border-radius: 50%;
    background-image: linear-gradient(white, white), 
                      linear-gradient(to right, #ee00ff,#fbff00);
    background-origin: border-box;
    background-clip: content-box, border-box;
    width: 200px;
    height: 200px;
    max-width: 200px;
    margin-top: 70px;
  }
  
  h2 {
    font-size: 24px;
    margin-bottom: 5px;
  }
  h3 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 5px;
  }
  .gradienttext{
    background-image: linear-gradient(to right, #00c6ff 0%, #0072ff 100%);
    color: transparent;
    -webkit-background-clip: text;
  }
  .social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .social-icons a {
    background-image: linear-gradient(to right, #00c6ff 0%, #0072ff 100%);
    display: inline-block;
    margin-right: 15px;
    padding:15px ;
    width:30px;
    height:30px;
    border-radius:30px;
    text-align: center;
  }
  
  .social-icons i {
    font-size: 24px;
    color:rgba(255, 255, 255, .7);
    transition: all 0.3s ease;
  }
  
  .social-icons i:hover {
    color: rgba(255, 255, 255, 1);
  }
  p {
    font-size: 18px;
    margin-bottom: 20px;
    color:aliceblue
  }
  
  table {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 280px;
    border-collapse: collapse;
  }
  
  td {
    
    padding: 10px;
    border: none;
    border-radius: 20px;
    color: white;
  }
  
  td:first-child {
    font-weight: bold;
  }
  .credit a {
  text-decoration: none;
  color: #fff;
  font-weight: 800;
}

.credit {
    color: #fff;
  text-align: center;
  margin-top: 10px;
  font-family: Verdana,Geneva,Tahoma,sans-serif;
}

We hope you would like this Responsive Glass morphism horizontal profile card with social icons and bio details Using HTML CSS.

Thank you for reading our blog. If you face any problem in creating this Responsive Glass morphism horizontal profile card with social icons and bio details Using HTML CSS., then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.

code developed by our student SUBHASRI K

Click the Live edit to edit the template online with live preview and download it.🤩

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

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