Create Profile Cards Using HTML and CSS | Download Source Code

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>

reecry