Hello Viewers, welcome to my other blog. In this blog, I'm going to create a profile card design by using HTML, CSS. Earlier I have shared create a covid website using HTML and CSS and now this time I will Profile card design.

These projects are used for diploma and other engineering students like B.E., B-tech, M.E., M-tech to complete their microprojects and other developers to create something new.

On this website, we have created a profile card design. You see in card design we have to add one image, subscribe button, social icons, and their skill. The website with the orange and red background looks good and their card design show attractive. The card color i,e. grey looks attractive with a background color.

Step to create profile card in HTML and CSS

Open code editor
Create a Folder and that's name is Profile card
Create two files
first is index.html
second is style.css
Link CSS file with HTML file
Write HTML & CSS code in these files. That code we have provided at the end of the blog.

Which CSS properties we have used?

Flexbox
Transform
Scale
Transition
Position
Box Shadow
Alignment

How to adjust the card in the Center?

We have the flexbox to align the card design in the center. We have applied the,

display:flex;
justify-content:center;
align-items:center;

above property apply the parents class of the HTML tag.

Colors used in profile card.

Web page background color = linear-gradient(orange, red)
Profile card color = rgb(192, 192, 192)

You might also read :

Profile card design by using HTML, CSS & JAVASCRIPT | Free Source Code

To copy-paste the given codes of this Profile card design, first of all, you need to create three files, one is an HTML and CSS file. You can also download all source code files from the given download button.

Document

HTML CODE:

                <!DOCTYPE html>
                <html lang="en">
                
                <head>
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <title>Profile</title>
                    <link rel="stylesheet" href="style.css">
                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
                
                </head>
                
                <body>
                    <div class="wrapper">
                        <div class="image">
                            <img src="https://images.pexels.com/photos/1858175/pexels-photo-1858175.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
                        </div>
                        <div class="text">
                            <div class="name">
                                Spiritual Codes
                            </div>
                            <div class="skill">
                                Front-end Developer
                            </div>
                        </div>
                        <div class="btn">
                            <button>
                                SUBSCRIBE
                            </button>
                        </div>
                        <div class="social">
                            <div class="icon">
                                <i class="bi bi-facebook"></i>
                            </div>
                            <div class="icon">
                                <i class="bi bi-twitter"></i>
                            </div>
                            <div class="icon">
                                <i class="bi bi-instagram"></i>
                            </div>
                            <div class="icon">
                                <i class="bi bi-linkedin"></i>
                            </div>
                            <div class="icon">
                                <i class="bi bi-youtube"></i>
                            </div>
                        </div>
                    </div>
                </body>
                
                </html>

CSS CODE:

                @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
                @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css");
                * {
                    margin: 0;
                    padding: 0;
                    box-sizing: border-box;
                    font-family: 'Noto Sans JP', sans-serif;
                }
                
                body {
                    position: relative;
                    width: 100%;
                    height: 100vh;
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    background-image: linear-gradient(orange, red);
                    align-items: center;
                }
                
                .wrapper {
                    background-color: rgb(192, 192, 192);
                    width: 200px;
                    height: auto;
                    padding: 20px 30px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    border-radius: 20px;
                    box-shadow: 5px 5px 15px black;
                    border-bottom: 1px solid white;
                    border-right: 1px solid white;
                }
                
                .wrapper .image {
                    width: 100px;
                    height: 100px;
                    background-color: black;
                    border-radius: 50%;
                    margin-bottom: 20px;
                    overflow: hidden;
                    border: 2px solid rgb(255, 255, 255);
                    box-shadow: 2px 2px 10px black;
                }
                
                .wrapper .image img {
                    width: 100%;
                    height: 100%;
                }
                
                .wrapper .text {
                    text-align: center;
                }
                
                .wrapper .text .skill {
                    font-size: 10px;
                    font-family: 'Noto Sans JP', sans-serif;
                }
                
                .wrapper .btn {
                    margin: 10px 0;
                }
                
                .wrapper .btn button {
                    padding: 2px 30px;
                    border: none;
                    outline: none;
                    cursor: pointer;
                    box-shadow: 0.5px 0.5px 5px inset rgb(123, 123, 123);
                    background-color: rgb(192, 192, 192);
                    transition: all 0.3s ease-in;
                    letter-spacing: 3px;
                }
                
                .wrapper .btn button:focus {
                    box-shadow: 0.5px 0.5px 5px rgb(123, 123, 123);
                    background-color: rgb(208, 206, 203);
                }
                
                .wrapper .social {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 4px 0;
                }
                
                .wrapper .social .icon {
                    width: 20px;
                    height: 20px;
                    background-color: rgb(182, 182, 181);
                    margin: 0 5px;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                    box-shadow: 3px 3px 5px black;
                    border-bottom: 2px solid white;
                    outline: none;
                    transition: all 0.3s ease-in;
                }
                
                .wrapper .social .icon i {
                    font-size: 10px;
                }
                
                .wrapper .social .icon:hover {
                    background-color: rgb(228, 228, 228);
                    border: 0.3px solid white;
                    color: black;
                }
                
                .wrapper .social .icon i:hover {
                    color: black;
                }

Download Files

Create a Profile Card using HTML AND CSS