Hello guys,
today i will be showing how I created this cool profile card, let's get started..
Create a workspace
cd /Desktop
mkdir profile_card
cd profile_card
touch index.html
touch style.css
cd /Desktop: is use to change directory to the desktop 🖥️
mkdir profile_card: this command is use to create a folder called ptofile_card.
cd profile_card: the command is use to navigate inside the profile_card folder.
touch index.html: create a index.html file inside the profile_card folder.
touch style.css: create a style.css file inside the profile_card folder.
create profile card
<!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>Profile page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="profile-block">
<div class="cover-img">
<img src="c.png" alt="cover-photo">
</div>
<div class="profile-image-box">
<img src="a.jpg" alt="profile picture">
</div>
<span>Ayebidun Ezekiel</span>
<p>Full_stack Developer</p>
<div class="more">
<button type="button" >Portfolio</button>
</div>
</div>
</body>
</html>
styling our profile card
*{
width: 100%;
margin: 0;
padding: 0;
}
.profile-block{
top: 20%;
left: 15%;
width: 250px;
position: absolute;
border-radius: 5px;
box-shadow: 0px 0px 4px 0px #5c75b1;
}
.cover-img{
width: 100%;
height: 150px;
}
.cover-img img{
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat:no-repeat;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.profile-image-box {
top: 80px;
left: 65px;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
border: solid 7px #4d6cb2;
box-shadow: 0px 0px 4px 0px #5c75b1;
}
.profile-image-box img{
width: 100%;
height: 100%;
border-radius: 50%;
}
.profile-block span{
font-size: 25px;
font-weight: bold;
margin-top: 50px;
position: absolute;
text-align: center;
font-family: 'franklin gothic medium', 'arial narrow', arial, sans-serif;
}
.profile-block p{
margin-top: 80px;
text-align: center;
font-weight: lighter;
}
.more{
text-align: center;
}
.more button{
width: 150px;
height: 30px;
border: none;
margin-top: 40px;
color: #ffffff;
font-weight: bold;
margin-bottom: 50px;
background-color: #5c75b7;
}%
Top comments (1)
Feel free to ask any question related to these post