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;
}
Top comments (0)