Creating a profile card using CSS typically involves creating an HTML structure for the card and then using CSS for Design the layout of the Profile card

So Let's Create a amazing profile card using CSS

HTML Code

<!DOCTYPE html>
<!-- created by coder vicky | insta => @codervicky_ -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Making Profile Card using HTML CSS </title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="container">
    <img src="logo.webp" alt="Codervicky" class="logo">    
    <h1 class="headline">Vicky Shinde | Web developer </h1>
    <h3 class="username">@codervicky</h3>
    <p class="bio">Hey,I'm Vicky Shinde I'm Web developer Last 3 year of experience </p>
    <div id="action-btn">
        <button class="follow">Follow</button>
        <button class="subscriber">subscriber</button>
    </div>
    </div>

</body>
</html>

CSS Code :

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15%;
}

#container {
    background: linear-gradient(to right, rgb(130, 4, 4), rgb(4, 1, 2));
    width: 500px;
    height: auto;
    text-align: center;
    border-radius: 10px;
    -webkit-box-shadow: -2px -2px 17px 1px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: -2px -2px 17px 1px rgba(0, 0, 0, 0.75);
    box-shadow: -2px -2px 17px 1px rgba(0, 0, 0, 0.75);
    border: 3px solid white;
    color: white;
}

.logo {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    border: 3px solid white;
    margin-top: 30px;
    margin-bottom: 15px;
    cursor: pointer;
}

.headline {
    letter-spacing: 1px;
    font-size: 28px;
    margin-bottom: 10px;
    font-weight: 600;

}

.username {
    font-size: 21px;
    margin-bottom: 5px;
    font-weight: 500;
    color: rgb(230, 230, 230);
}

.bio {
    font-size: 20px;
    margin-bottom: 15px
}

#action-btn {
    margin: 10px;
    width: 500px;
    justify-content: space-between;

}

.follow {
    font-size: 22px;
    outline: none;
    border: none;
    border: 3px soild red;
    background: rgb(75, 99, 255);
    color: white;
    padding: 10px;
    width: 150px;
    border-radius: 10px;
    border: 3px solid white;
    margin: 20px;
    cursor: pointer;
    transition: all ease-in-out .5s;
}

.follow:hover {
    background: black;
    transition: all ease-in-out .5s;
}

.subscriber {
    cursor: pointer;
    margin: 20px;
    font-size: 22px;
    outline: none;
    border: none;
    border: 3px soild red;
    background: rgb(253, 18, 18);
    color: white;
    padding: 10px;
    width: 150px;
    border-radius: 10px;
    border: 3px solid white;
    transition: all ease-in-out .5s;
}

.subscriber:hover {
    background: black;
    transition: all ease-in-out .5s;
}

in this Projects we have created a Basic User Profile card With an image,name,Username, Bio & 2 Call to Action Buttons the CSS Part is Design the Profile card with hover Effects on Buttons

0 comments

Write a comment

hello

See all posts from Coder Vicky - Frontend Developer