Scribd
Upload
7 views3 pages

!doctype

The document is an HTML template for a user profile card featuring a UI/UX designer named Vel Kumar P. It includes sections for a profile picture, job title, project statistics, social media icons, and a button to view the profile. The design utilizes Tailwind CSS for styling and layout.

Uploaded by

TS Taiga
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
7 views3 pages

!doctype

The document is an HTML template for a user profile card featuring a UI/UX designer named Vel Kumar P. It includes sections for a profile picture, job title, project statistics, social media icons, and a button to view the profile. The design utilizes Tailwind CSS for styling and layout.

Uploaded by

TS Taiga
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tarjeta</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<!-- Primero -->
<body class="bg-white-900">
<div class="column-reverse grid justify-items-center">

<!-- Segundo -->


<div class="border-2 border-gray-250 mt-4 mb-1 ml-0 mr-0 content-center
bordered-lg w-1/4 ">

<div class="justify-self-end">
<svg class="w-6 h-6 duration-300 hover:scale-110" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path d="m12 7a2 2 0 1 0 -2-2 2 2 0 0 0 2 2zm0 10a2 2 0 1 0 2 2 2 2 0 0
0 -2-2zm0-7a2 2 0 1 0 2 2 2 2 0 0 0 -2-2z"/>
</svg>
</div>
<div class=" mt-4 mb-2 ml-1 mr-3 ">

<div class="mt-4 mb-1 ml-1 mr-3 flex justify-center items-center">


<img src="./images/profile-anom.png" alt="Rounded image"
class="rounded-full w-32 h-32 object-cover">
</div>
<div class="bg-grey-50. border mt-4 mb-2 ml-1 mr-3 default-lg text-
center font-bold">Vel Kumar P </div>
<div class="bg-grey-50 text-black mt-4 mb-2 ml-1 mr-3 default-lg text-
center font-light ">UI/UX Designer</div>
</div>
<!-- Tercero -->
<div class="column-reverse flex items-center justify-center ">
<div class="bg-grey-50 text-black mt-4 mb-1 ml-1 mr-3 default-lg text-
center font-default flex space-x-5">
<span> Projects </span>
<span> Following </span>
<span> Followers </span>

</div>
</div>
<div class="column-reverse flex items-center justify-center ">
<div class="bg-grey-50 text-black mt-1 mb-2 ml-1 mr-3 default-lg text-
center font-bold flex space-x-12">
<span>11</span>
<span>250</span>
<span>185</span>
</div>
</div>
<!-- Cuarto -->

<p class="bg-grey-50 text-black mt-4 mb-2 ml-1 mr-3 default-lg text-center


font-light ">Inserte descripcion</p>

<!-- Quinto -->


<div class="flex justify-center gap-6">
<!-- Twitter Icon -->
<svg class="w-6 h-6 duration-300 hover:scale-110"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#1da1f2">
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-
2.723 9.993 9.993 0 01-3.127 1.184 4.92 4.92 0 00-8.384 4.482A13.96 13.96 0 011.671
3.15 4.822 4.822 0 003.1 9.722a4.9 4.9 0 01-2.229-.616v.062a4.932 4.932 0 003.95
4.827 4.996 4.996 0 01-2.224.084 4.936 4.936 0 004.604 3.419A9.874 9.874 0 010
19.54a13.94 13.94 0 007.548 2.209c9.142 0 14.307-7.721 13.986-14.646a10.112 10.112
0 002.42-2.534z"/>
</svg>

<!-- Facebook Icon -->


<svg class="w-6 h-6 duration-300 hover:scale-110"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#1877F2">
<path d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.406.593 24
1.325 24H12.82V14.708h-3.13v-3.62h3.13V8.354c0-3.1 1.894-4.788 4.659-4.788 1.325 0
2.465.099 2.796.143v3.242h-1.918c-1.504 0-1.795.716-1.795 1.763v2.309h3.587l-.467
3.62h-3.12V24h6.102c.729 0 1.324-.594 1.324-1.324V1.325C24 .593 23.406 0 22.675
0z"/>
</svg>

<!-- Google Icon -->


<svg class="w-6 h-6 duration-300 hover:scale-110"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#EA4335">
<path d="M12 12v3.72h5.29c-.23 1.24-.92 2.29-1.92 3l2.89 2.23c1.66-
1.53 2.64-3.79 2.64-6.43 0-.43-.04-.84-.1-1.26H12z"/>
<path d="M12 12H6.66v2.79h4.89c-.21 1.23-.85 2.29-1.75
3.06v2.4h2.83c1.66-1.53 2.64-3.79 2.64-6.43 0-.43-.04-.84-.1-1.26z"
fill="#34A853"/>
<path d="M6.66 12H4.33V9.39h2.33c.2-.49.44-.95.7-
1.39H4.33V5.6H6.66c1.56-1.29 3.61-2.06 5.86-2.06C15.68 3.54 18 6 18 9.39c0 1.31-.24
2.55-.68 3.61H12v-3.72H9.24c-.12.4-.18.82-.18 1.23 0 .38.05.75.13 1.11z"
fill="#FBBC05"/>
<path d="M6.66 12H4.33V9.39h2.33c.2-.49.44-.95.7-
1.39H4.33V5.6H6.66c1.56-1.29 3.61-2.06 5.86-2.06C15.68 3.54 18 6 18 9.39c0 1.31-.24
2.55-.68 3.61H12v-3.72H9.24c-.12.4-.18.82-.18 1.23 0 .38.05.75.13 1.11z"
fill="#4285F4"/>
</svg>

<!-- YouTube Icon -->


<svg class="w-6 h-6 duration-300 hover:scale-110"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#FF0000">
<path d="M23.498 6.174a2.876 2.876 0 0 0-2.024-2.032C19.614 3.552 12
3.552 12 3.552s-7.614 0-9.474.59a2.877 2.877 0 0 0-2.024 2.032C0 8.052 0 12 0 12s0
3.947.502 5.826a2.876 2.876 0 0 0 2.024 2.032C4.386 20.448 12 20.448 12
20.448s7.614 0 9.474-.59a2.877 2.877 0 0 0 2.024-2.032C24 15.947 24 12 24 12s0-
3.947-.502-5.826zM9.546 15.568V8.432l6.251 3.568-6.251 3.568z"/>
</svg>
</div>

<!-- Sexto -->


<div class=" mt-4 mb-2 ml-1 mr-3 flex items-center justify-center">
<button class="bg-teal-400 text-white px-2 py-3 rounded-lg w-1/2">
<div class="text-white default-lg text-center font-default ">View
Profile</div>

</button>
</div>

</div>
</div>
</body>
</html>

You might also like