Profile card in HTML #html #new
Published: 2023-03-14 00:09:17

So this is how I made a profile card for a web page,

<!DOCTYPE html>

<html lang="en">
 
<head>

    <link rel="stylesheet" href="style.css">
    <link rel="preconnect"
    href="https://fonts.gstatic.com">
    <link href=
    "https://fonts.googleapis.com/css2? 
    family=Open+Sans+Condensed:wght@300&display=swap"
    rel="stylesheet">

</head>
 
<body>

    <div class="container">
    <div class="user-image">
    <img src="https://imageio.forbes.com/specials- 
    images/imageserve/627bd323672c41ea74c88a13/0x0.jpg?format=jpg&crop=1834,1833,x583,y167,safe&height=416&width=416&fit=bounds
            alt="this image contains user-image">
        </div>
 
        <div class="content">
            <h3 class="name">Jackson Schutt</h3>
            <p class="username">@Jackson</p>
 
 
 
            <p class="details">
              all your stats in 1 place
            </p>
 
 
            <a class="effect effect-4" href="#">
                Workouts 
            </a>
        </div>
    </div>
     
    <!-- This is link of adding small images
         which are used in the link section  -->
    <script src="https://kit.fontawesome.com/704ff50790.js"
        crossorigin="anonymous">
    </script>
</body>
</html>

**_

## And now the CSS,

_**
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
/* Assigning all the same properties to the body */
body{
    height: 100vh;
    display: flex;
    justify-content: center;
    background-color: rgb(0, 0, 0);
    align-items: center;
}
 
.container{
    width: 20em;
    background-color: rgb(255, 255, 255);
    overflow: hidden;
    border-radius: 1em;
    text-align: center;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 1em;
}
 
.user-image{
    padding: 3em 0;
    background-image: linear-gradient(70deg,#61A1DD,#0083FD);
}
 
.user-image img{
    width: 7em;
    height: 7em;
    border-radius: 50%;
    box-shadow:  0 0.6em 1.8em ;
    object-fit: cover;
}
 
.content{
    color: #565656;
    padding: 2.2em;
}
 
.name{
    font-size: 1.5em;
    text-transform: uppercase;
}
 
.username{
    font-size: 1em;
    color: #9e9e9e;
}
 
.links{
    display: flex;
    justify-content: center;
    margin: 1.5em 0;
}
 
a{
    text-decoration: none;
    color: #565656;
    transition: all 0.3s;
    font-size: 2em;
    margin-right: 1.2em;
}
 
a:last-child{
    margin: 0;
}
 
.insta:hover{
    color:rgb(255, 70, 101);
    transform: scale(2,2);
}
 
.git:hover{
    color:rgb(0, 0, 0);
    transform: scale(2,2);
}
 
.linkedin:hover{
    color:rgba(4, 0, 253, 0.842);
    transform: scale(2,2);
}
 
.facebook:hover{
    color:rgb(4, 0, 255);
    transform: scale(2,2);
}
 
.details{
    margin-bottom: 1.8em;
}
 
 
/* CSS for messagin link */
 
.effect {
    text-align: center;
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: rgb(48, 41, 41);
    text-transform: capitalize;
    width: 100%;
    background-image: linear-gradient(60deg,#0083FD,#61A1DD);
    font-size: 1.2em;
    padding: 1em 3em;
    border-radius: 5em;
    overflow: hidden;
}
   
.effect.effect-4:before {
    content: "\f2b6";
    font-family: FontAwesome;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 1.8em;
    transform: scale(0, 1);
}
.effect.effect-4:hover {
    text-indent: -9999px;
}
     
.effect.effect-4:hover:before {
transform: scale(1, 1);
text-indent: 0;
}