Table of Contents

HTML & CSS Snippet 5 Source code w3pupil.com

Share Now :

Title : Portfolio Card Ui Using Html & Css with Glassmorphism Effect.

Description

Hello W3PUPIL!!

W3pupil provides a dynamic and visually appealing profile card snippet that showcases your information in a single glance. This profile card snippet is created with precision using HTML and CSS.

Your name, designation and profile picture are prominently displayed at the top of the left container, making a strong first impression. Further down, there’s space for displaying your details like name, age, mobile number, email and address ensuring that anyone can easily know about you. In the right container, a brief description and social media details are given. Further down, two buttons for contact me and share now are given ensuring that anyone interested can easily reach out. Lastly, this profile card snippet is fully responsive, ensuring a seamless viewing experience on various devices. Whether on a desktop, laptop, tablet, or smartphone, your information is always presented in an organized and visually appealing manner.

With this HTML and CSS-powered profile card snippet, you’re not just sharing information – you’re making a statement about your commitment to professionalism and modern web design. Impress, engage, and connect with the world through this creative and informative profile card snippet.

Let's know how to create a file..

Creating and managing files and folders efficiently is crucial for a seamless development experience.A step-by-step tutorial is provided below:

W3pupil’s suggestion is to download and install Visual Studio Code.

  • After the successful completion of downloading and installing, open Visual Studio Code.
  • Create a new folder in your desktop.
  • Go to file and then open the folder created.
  • Then add a file for html with “.html” or “.htm” extension.
  • Also add another file for css with “.css” extension.
  • Now, you have a blank HTML file and CSS file ready for your code.

Let's know how to open a downloaded file..

  • After downloading the snippet file from W3pupil, you will receive a zip file.
  • Extract the file and open it in Visual Studio Code.
  • Now you have the HTML file and CSS file to work with.
  • Take time to fully understand the code’s functionality before making any desired changes.

Let's take a look at a code snippet created by W3pupil team using HTML and CSS.

HTML SOURCE CODE LOGO

HTML Source Code

HTML (Hypertext Markup Language) is a standard markup language for creating web pages, defining their structure and content using a system of tags and elements. (index.html)

  
<!--Hello Future Developer Thanks for Using w3pupil.com, Share & Support us-->
<div class="section1">
<div class="card">
    <div class="left-container">
        <img src="https://cdn.pixabay.com/photo/2023/07/23/14/15/man-8145174_1280.jpg" alt="Profile Image">
        <h2>Jack Wanderlea</h2>
        <h6>Web Developer</h6>
        <table>
            <tr>
                <th>Name :</th>
                <td>John Doe</td>
            </tr>
            <tr>
                <th>Age :</th>
                <td>35</td>
            </tr>
            <tr>
                <th>Mobile :</th>
                <td>+91 XXXXXXXXXX</td>
            </tr>
            <tr>
                <th>Email :</th>
                <td>john@example.com</td>
            </tr>
            <tr>
                <th>Address :</th>
                <td>123 Main St, Anytown, USA</td>
            </tr>
        </table>
    </div>
    <div class="right-container">
        <div class="right-subcontainer1">
            <h3>My Details</h3>
        </div>
        <div class="right-subcontainer2">
            <h3>About me</h3>
            <p>Hello there! I'm [Your Name], a curious soul with a passion for exploring the world through words. As an avid writer and lifelong learner, I find joy in crafting stories that transport readers to new realms and sharing my insights on a wide range of topics. When I'm not lost in the realm of words, you might find me hiking through nature, experimenting with new recipes in the kitchen, or immersing myself in the melodies of classical music. Join me on this journey of discovery as we navigate life's intricacies one sentence at a time.</p>
            <h3>Social media</h3>
            <div class="wrapper">
                <div class="button">
                    <div class="icon"><i class="fab fa-facebook-f"></i></div>
                    <span>Facebook</span>
                </div>
                <div class="button">
                    <div class="icon"><i class="fab fa-instagram"></i></div>
                    <span>Instagram</span>
                </div>
                <div class="button">
                    <div class="icon"><i class="fab fa-twitter"></i></div>
                    <span>Twitter</span>
                </div>
                <div class="button">
                    <div class="icon"><i class="fab fa-youtube"></i></div>
                    <span>YouTube</span>
                </div>
            </div>
            <div class="right-containerbtn">
                <button>Contact me</button>
                <button>Share now</button>
            </div>
        </div>
        <div class="credit">Made with <span>❤ </span>by <a href="https://www.w3pupil.com/">W3pupil</a></div>
    </div>
</div>
</div>
<!--Check our website Regularly For New Snippets Post-->
  
CSS SOURCE CODE IMAGE

CSS Source Code

CSS (Cascading Style Sheet) enhances website aesthetics and layout, applying styles and design elements to create a visually appealing and responsive user interface. (style.css)

  /** 
Hello Future Developer Thanks for Using w3pupil.com, 
Check our website Regularly For New Snippets Post.

Share & Support us
**/
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
*{
    box-sizing: border-box;
}
html{
    height: 100%;
}
body{
    font-family: Arial, sans-serif;
    padding: 20px;
    height: 100%;
    background-image:url(Gradient Background Snip 5.png);
}
.section1{
    height: 95vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.card{
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 10px;
    width:70%;
    height:620px; 
}
.left-container{
    background-color: rgba(0, 0, 0, 0.20);
    backdrop-filter: blur(10px);
    width:35%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height:570px;
    margin:1vh;
    padding:10px 5px;
    border-radius: 10px;
}
.left-container img{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin:10px 0;
    border: 3px solid #fff;
}
.left-container h2{
    font-size: 24px;
    margin: 0;
    color:#fff;
}
.left-container h6{
    font-size: 12px;
    margin: 0;
    color:#ddd;
}
.right-container {
    display: flex;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.20);
    backdrop-filter: blur(10px);
    width:65%;
    height:570px;
    padding:10px 15px;
    margin: 1vh;
    border-radius:10px;
}
.right-subcontainer1{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin:10px 0 20px 0;
}
.right-subcontainer1 h3{
    color: #fff;
    font-size: 24px;
    margin-bottom: 5px;
    margin:0;
}
.right-subcontainer2{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin:20px 0 10px 0;
    padding:0 20px;
}
.right-subcontainer2 h3{
    color:#eee;
    font-size: 24px;
    margin-bottom: 5px;
    margin:0;
}
.right-subcontainer2 p{
    color:#ddd;
    font-size: 16px;
    margin-bottom: 5px;
    margin:15px 0; 
}
.right-subcontainer2 .right-containerbtn{
    display: flex;
    flex-direction:row;
    align-items: center;
    justify-content:space-evenly;
}
.right-containerbtn button{
    padding: 10px 20px;
    border-radius:5px;
    border: none;
    font-size:20px;
    background-color: rgba(0, 0, 0, 0.10);
    backdrop-filter: blur(10px);
    color:#eee;
    margin:5px 0;
    transition: transform .5s;
}
.right-containerbtn button:hover{
    cursor: pointer;
    transform: scale(1.1);
}
.wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    margin:20px 0;
}
.wrapper .button{
    display: inline-block;
    height: 40px;
    width: 40px;
    float: left;
    margin: 0 5px;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.10);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease-out;
    color:#fff
}
.wrapper .button:hover{
    width: 120px;
}
.wrapper .button .icon{
    display: inline-block;
    height: 40px;
    width: 40px;
    text-align: center;
    border-radius: 50px;
    box-sizing: border-box;
    line-height:40px;
    transition: all 0.3s ease-out;
}
.wrapper .button:nth-child(1):hover .icon{
    background: #4267B2;
}
.wrapper .button:nth-child(2):hover .icon{
    background: #E1306C;
}
.wrapper .button:nth-child(3):hover .icon{
    background: #1DA1F2;
}
.wrapper .button:nth-child(4):hover .icon{
    background: #ff0000;
}
.wrapper .button .icon i{
    font-size: 15px;
    line-height: 40px;
    transition: all 0.3s ease-out;
}
.wrapper .button:hover .icon i{
    color: #fff;
}
.wrapper .button span{
    font-size: 10px;
    font-weight: 500;
    line-height: 40px;
    margin-left: 10px;
    transition: all 0.3s ease-out;
}
table {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    border-collapse: collapse;
}
th{
    padding: 10px;
    border: none;
    color: #eee;
    text-align: right;
}
td {
    padding: 10px;
    border: none;
    color: #eee;
}
td:first-child {
    font-weight: bold;
}
@media only screen and (max-width: 1024px){
    .card{
        margin: 10px;
        height:100%;
        width: 95%;
    }
}
@media only screen and (max-width: 630px){
    .section1{
        height: fit-content; 
    }
    .card{
        flex-direction: column;
        margin: 10px;
        width: 100%;
        height: fit-content;
    }
    .left-container{
        width:100%;
        height: fit-content;
    }
    .right-container{
        width:100%;
        height: fit-content;
    }
    .right-subcontainer2 .right-containerbtn{
        flex-direction: column;
    }
    .wrapper{
        display: flex;
        flex-direction: column;
        margin:20px 0;
    }
    .wrapper .button{
        width: 120px;
        margin:5px 0;
    }
}
.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;
}  

Note :

  • The CSS is coded in a separate file and linked to the HTML file.
  • In this snippet glass morphism is used. If you want to change the blur, you can change in the CSS file –> .left-container & .right-container –> backdrop-filter: blur();

Download :

Share and Support W3pupil.com

Conclusion :

To modify the code, you can download the snippet’s source code files. To enhance your skills in HTML and CSS, you can try to recreate other creative HTML and CSS snippets available on W3pupil. In case you experience any technical related doubts, you are welcome to contact W3pupil. We’ll try to solve your request at the earliest.

Like Reaction
Like Reaction
Like Reaction
Like Reaction
Like Reaction

LivePreview :