User Profile Card using HTML CSS

Hey, developer today is Day 85 of our 90Projects in 90Days. And today in this challenge, we are going to Create a User Profile Card using HTML CSS.

To run the given code firstly you have to copy the HTML code and run it into your code editor and then create a CSS file and paste the given CSS code in your code's CSS file.

Preview

Responsive Footer Code in HTML and CSS, raju webdev, geeks help, responsive footer code in html and css



HTML Code

index.html

<!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> User Profile Card </title>
    <link rel="stylesheet" href="s.css">
</head>
<body>

    <div class="main-container">
        <div class="top-circle"></div>
        <img src="/user.png" alt="user Raju" class="user">
        <h2 class="userName"> Raju Sheoran </h2>
        <h4 class="job-title"> Frontend Developer </h4>
        <ul class="social">
            <li class="list-item"><span class="num">856</span><br><span>Posts</span></li>
            <li class="list-item"><span class="num">2012</span><br><span>Likes</span></li>
            <li class="list-item"><span class="num">28010</span><br><span>Followers</span></li>
        </ul>

        <p class="description">
            I'm specialize in Frontene web development. I love code and to build interesting thing from my learning.
        </p>
        <ul class="languages">
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>Python</li>
        </ul>
        <div class="buttons">
            <button class="active btn"> Follow </button>
            <button class="btn"> Message </button>
        </div>
    </div>

</body>
</html>




CSS Code

style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body {
    background-color: rgb(50, 11, 50);
    padding: 10px;
}

.main-container {
    background-color: #fff;
    padding: 15px;
    border-radius: 10px;
    width: 300px;
    overflow: hidden;
    position: relative;
}

.top-circle {
    width: 500px;
    height: 500px;
    background-color: #e65b00;
    position: absolute;
    bottom: 70%;
    left: -30%;
    border-radius: 50%;
    transform: rotate(30deg);
    z-index: 1;
}

.user {
    width: 90px;
    position: relative;
    display: block;
    z-index: 8;
    filter: drop-shadow(2px 2px 10px rgb(219, 206, 206));
    margin: 0 auto;
    transform: translateX(-50%);
    bottom: 13px;
    animation: moving;
    animation-duration: 1s;
    cursor: pointer;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.user:hover {
    animation-play-state: paused;
}

@keyframes moving {
    from {

        transform: translateY(3px);
    }

    to {
        transform: translateY(-3px);
    }
}

.userName {
    margin-top: 15px;
    margin-bottom: 5px;
    text-align: center;
    font-size: 18px;
    color: #e65b00;
}

.job-title {
    font-size: 10px;
    color: rgb(70, 78, 85);
    text-align: center;
    margin-bottom: 20px;
}

.social {
    list-style: none;
    display: flex;
    width: 100%;
    justify-content: space-around;
    margin-bottom: 10px;
    text-align: center;
}

.social span {
    color: #332c2c;
    font-size: 11px;
    line-height: 5px;
}

.social .num {
    font-size: 13px;
    color: #e65b00;
}

.description {
    width: 100%;
    text-align: center;
    font-size: 12px;
    margin: 10px 0;
}

.languages {
    display: flex;
    justify-content: space-around;
    list-style: none;
    margin: 10px 0;
}

.languages li {
    background-color: #e65c0058;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 12px;
    margin: 2px;
}

.buttons {
    width: 100%;
    margin: 5px auto;
    text-align: center;
}

.btn {
    border: 1px solid #e65b00;
    color: #e65b00;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    padding: 5px 10px;
    margin: 5px;
}

.active {
    background-color: #e65b00;
    color: #fff;
}


Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days, 90Projects Page- Visit Now

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad