This Tutorial will teach you How to Create Profile Card Using HTML and CSS
Level –
Beginner’s (Easily follow this if they have basic knowledge of HTML and CSS)
Learn HTML and CSS Here – YouTube HTML CSS Playlist
Code :
<!DOCTYPE html>
<html>
<head>
<title>Cards</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body{
font-family: "yu gothic";
}
.card{
margin: 150px;
width: 400px;
height: 600px;
background-color: #f7f7f7a6;
border: none;
border-radius: 20px;
}
.profile-image{
width: 200px;
height: auto;
margin-left: 25%;
}
.content{
transform: skew(20deg)rotate(20deg);
text-align: center;
padding: 15px;
}
.box{
width: 424px;
height: auto;
transform: rotate(-20deg)skew(-20deg);
margin-left: -12px;
background: linear-gradient( to right, #0df984, #1eb959);
}
.social-icons{
margin-top: 120px;
}
.social-site{
margin: 5px;
margin-right: 10px;
width: 40px;
height: auto;
float: right;
}
h1{
color: #373737c7;
}
p{
color: white;
}
</style>
</head>
<body>
<div class="card">
<!-- Image -->
<div class="image">
<img class="profile-image" src="file:///F:/Work%20task/Stras/profile.png">
</div>
<!-- Dia Line -->
<div class="box">
<div class="content">
<h1>
Reecry</h1>
<br/>
<p>Studies in Himachal Pradesh University</p>
<br>
<p>Visit Website</p>
</div>
</div>
<!-- Creating Div for Social Icons -->
<div class="social-icons">
<img class="social-site" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/Facebook_icon_2013.svg/2000px-Facebook_icon_2013.svg.png">
<img class="social-site" src="https://vignette.wikia.nocookie.net/roblox/images/3/3e/Twitter-icon.png.png">
<img class="social-site" src="http://pngimg.com/uploads/youtube/youtube_PNG14.png">
</div>
</div>
</body>
</html>
