Profile card in HTML #html #new

Jackson Schutt — Tue, 14 Mar 2023 00:09:17 +0000

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

<!DOCTYPE html>

<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">

<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>

**_

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;
}

DEV Community: Jackson Schutt

Profile card in HTML #html #new

And now the CSS,