Table of Contents

Design a Beautiful Profile Card with CSS

Share Now :

Title : Design a Beautiful Profile Card with CSS | W3Pupil

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.

This profile card snippet is a great way to make a good first impression. It has your name, id, and profile picture right at the top. You can add descriptions and social media details further down, so anyone can get in touch with you. Plus, there are two buttons at the bottom for contact and follow, so anyone interested can easily connect. And it’s totally responsive, so you can use it on any device – desktop, laptop, tablet, or even a smartphone.

This HTML and CSS profile card snippet is not just about sharing information – it’s a great way to show off your expertise and stay ahead of the web design trends. Get creative with this profile card snippet and show off your skills.

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="cardbg"></div>
    <div class="card">
        <div class="cardin1">
            <img src="https://cdn.pixabay.com/photo/2023/06/02/21/24/portrait-8036356_1280.jpg" alt="Profile Image">
        </div>
        <div class="cardin2">
            <h2>Jack mersi</h2>
            <h6>@jackmersidev</h6>
            <p>Web developer with a knack for crafting clean and dynamic online experiences. Turning ideas into interactive websites through code and creativity.</p>
            <div class="sicons"> 
                <i class="fab fa-youtube"></i>
                <i class="fab fa-facebook"></i>
                <i class="fab fa-twitter"></i>
                <i class="fab fa-linkedin"></i>
            </div>  
            <div class="button">
                <button>Follow</button>
                <button>Contact</button>  
            </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://fonts.googleapis.com/css2?family=Play&display=swap');
*{
    box-sizing: border-box;
}
html{
    height: 100%;
}
body {
    font-family: Arial, sans-serif;
    height: 100%;
    background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
}
.section1{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.card{
    display: flex;
    flex-direction:row;
    justify-content: center;
    border-radius: 50px;
    width:700px;
    height:400px;
    padding:40px 20px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    background-color: rgba(255,255,255, 0.30);
    backdrop-filter: blur(0px);
}
.cardbg{
    z-index:0;
    position: absolute;
    border-radius: 50px;
    width:650px;
    height:400px;
    margin-top:50px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    background-color: rgba(255,255,255,.3);
    backdrop-filter: blur(10px);
}
.cardin1{
    display: flex;
    flex-direction:column;
    align-items:left;
    width:30%;
    padding:0 10px;
}
.cardin1 img{
    width: 130px;
    height: 130px;
    border-radius: 50%;
    margin:10px 0;
    border: 5px solid #fff;
    object-fit: cover;
}
.cardin2 h2{
    margin:2px 0;
    font-family: 'Play', sans-serif;
    font-size: 25px;
}
.cardin2 p{
    margin:10px 0;
}
.cardin2 h6{
    margin:2px 0;
    font-size:12px;
}
.cardin2{
    display: flex;
    flex-direction:column;
    justify-content: center;
    width:70%;
}
.sicons{
    display: flex;
    flex-direction: row;
    margin:12px 0;
}
.sicons i{
    background-color: #121212;
    margin: 2px 4px;
    padding: 10px;
    border-radius:30px;
    color:rgba(255,255,255, 0.90);
    font-size:20px;
    transition: .5s;
    box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
}
.button{
    margin:12px 0;
    display: flex;
}
.button button:nth-child(1){
    font-size:16px;
    padding:15px 40px;
    background-color: #121212;
    border: none;
    margin:0 4px;
    color: #fff;
    border-radius: 5px;
    transition: .5s;
}
.button button:nth-child(2){
    font-size:16px;
    padding:15px 40px;
    background-color: #fff;
    border: none;
    margin:0 4px;
    color: #121212;
    border-radius: 5px;
    transition: .5s;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
.sicons i:hover{
    transform: scale(1.1);
    cursor: pointer;
}
.button button:hover{
    transform: scale(1.1);
    cursor: pointer;
}
@media only screen and (max-width: 630px) {
    .card{
        width:98%;
        flex-direction:column;
        height: fit-content;
    }
    .cardbg{
        display: none;
    }
}
.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;
}  

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 –> .card & .cardbg –> 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 :