Create Profile Cards Using HTML and CSS | Download Source Code

Share on facebook
Share on linkedin
Share on twitter
Share on email
Use "ufd6qb86" For Offers
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>

<style type="text/css">
 margin: 0px;
 padding: 0px;

 font-family: "yu gothic";

 margin: 150px;
 width: 400px;
 height: 600px;
 background-color: #f7f7f7a6;
 border: none;
 border-radius: 20px;

 width: 200px;
 height: auto;
 margin-left: 25%;

 transform: skew(20deg)rotate(20deg);
 text-align: center;
 padding: 15px;

 width: 424px;
 height: auto;
 transform: rotate(-20deg)skew(-20deg);
 margin-left: -12px;
 background: linear-gradient( to right, #0df984, #1eb959);

 margin-top: 120px;

 margin: 5px;
 margin-right: 10px;
 width: 40px;
 height: auto;
 float: right;

 color: #373737c7;

 color: white;


<div class="card">
 <!-- Image -->
 <div class="image">
  <img class="profile-image" src="file:///F:/Work%20task/Stras/profile.png">
<!-- Dia Line -->
 <div class="box">
  <div class="content">
   <p>Studies in Himachal Pradesh University</p>
   <p>Visit Website</p>
<!-- Creating Div for Social Icons -->
 <div class="social-icons">
  <img class="social-site" src="">

  <img class="social-site" src="">

  <img class="social-site" src="">

Get 20% Off on Trading Fee Use "LG3RJV7Z"

More To Explore

Use "ufd6qb86" For Offers