ic card design

This commit is contained in:
krishnenduPanja 2025-03-12 18:45:55 +05:30
parent eebf535cf3
commit 75ad9920e8
2 changed files with 95 additions and 30 deletions

View File

@ -283,15 +283,15 @@
</div>
<div class="tab-content active">
<div class="flex justify-center">
<!-- <div class=""
style="width: 330px; margin: 0 auto; box-shadow: 0 2px 5px rgba(0,0,0,0.2); border-radius: 15px; overflow: hidden; position: relative;">
<div class=""
style="width: 320px; height: 500px; margin: 0 auto; box-shadow: 0 2px 5px rgba(0,0,0,0.2); border-radius: 15px; overflow: hidden; position: relative;">
<div style="position: absolute; top: -25px;">
<img src="../assets/images/Card_bg1.png" style="width: 100%;"
alt="image" />
</div>
<div class="content" style="padding: 95px 30px 30px 30px;">
<div class="content" style="padding: 85px 30px 30px 30px;">
<div class="profile_image"
style="border: 8px solid #ffffff; border-radius: 50%; height: 140px; width: 140px; margin: 0 auto; overflow: hidden; background-color: #f5f5f5; position: relative; box-shadow: 0px 2px 3px #00000028;">
style="border: 8px solid #ffffff; border-radius: 50%; height: 155px; width: 155px; margin: 0 auto; overflow: hidden; background-color: #f5f5f5; position: relative; box-shadow: 0px 2px 3px #00000028;">
<img src="../assets/images/women.png" alt="image"
width="140px" height="140px"
style="border-radius: 50%;" />
@ -304,22 +304,64 @@
style="margin-top: 3px; text-align: center; color: #121212; font-style: normal; font-size: 14px;">
UI/UX Designer</p>
</div>
<div class="other_details" style="margin-top: 25px;">
<div style="text-align: left; padding: 10px 0px; font-size: 14px; color: #444; display: flex; flex-direction: column; justify-content: center; width: 260px; margin: 0 auto;">
<p style="font-size: 12px; color: #121212; display: flex;"><strong style="width: 95px;" >Employee ID:</strong> <span style="display: flex; justify-content: flex-start; align-items: flex-start; flex: 1; text-align: start;">10068</span></p>
<p style="font-size: 12px; color: #121212; display: flex;"><strong style="width: 95px;">Blood Group:</strong> <span style="display: flex; justify-content: flex-start; align-items: flex-start; flex: 1; text-align: start;">B+</span></p>
<p style="font-size: 12px; color: #121212; display: flex;"><strong style="width: 95px;">DOB:</strong> <span style="display: flex; justify-content: flex-start; align-items: flex-start; flex: 1; text-align: start;">22/09/1998</span></p>
<p style="font-size: 12px; color: #121212; display: flex;"><strong style="width: 95px;">Phone:</strong> <span style="display: flex; justify-content: flex-start; align-items: flex-start; flex: 1; text-align: start;">+000-000-00</span></p>
</div>
</div>
</div>
<div style="padding: 7.5px 0; text-align: center; background-color: #c5cae954;">
<p style="font-size: 12px; color: #121212; opacity: 0.8; color: #3949AB;">Powered By GeeksId</p>
</div>
</div> -->
<div class="other_details" style="margin-top: 20px;">
<div
style="width: 330px; height: 500px; margin: 0 auto; box-shadow: 0 2px 5px rgba(0,0,0,0.2); border-radius: 15px; overflow: hidden; position: relative;">
style="text-align: left; padding: 10px 0px; font-size: 14px; color: #444; display: flex; gap: 12px;">
<div style="width: 50%; display: flex; align-items: flex-end; flex-direction: column;">
<p
style="font-size: 12px; color: #121212;">
<strong style="width: 76px;">Employee ID :</strong>
</p>
<p
style="font-size: 12px; color: #121212;">
<strong style="width: 76px;">Phone NUmber :</strong>
</p>
<p
style="font-size: 12px; color: #121212;">
<strong style="width: 76px;">Blood
Group :</strong>
</p>
<p
style="font-size: 12px; color: #121212;">
<strong style="width: 76px;">Date Of Birth:</strong>
</p>
</div>
<div style="width: 50%;">
<p
style="font-size: 12px; color: #121212;">
<span
style="display: flex; justify-content: flex-start;text-align: start;">10068</span>
</p>
<p
style="font-size: 12px; color: #121212;">
<span
style="display: flex; justify-content: flex-start;text-align: start;">+8420029198</span>
</p>
<p
style="font-size: 12px; color: #121212;">
<span
style="display: flex; justify-content: flex-start;text-align: start;">B+</span>
</p>
<p
style="font-size: 12px; color: #121212;">
<span
style="display: flex; justify-content: flex-start;text-align: start;">22-09-1998</span>
</p>
</div>
</div>
</div>
</div>
<div
style="padding: 7.5px 0; text-align: center; background-color: #c5cae954;">
<p
style="font-size: 12px; color: #121212; opacity: 0.8; color: #3949AB;">
Powered By GeeksId</p>
</div>
</div>
<!-- <div
style="width: 320px; height: 500px; margin: 0 auto; box-shadow: 0 2px 5px rgba(0,0,0,0.2); border-radius: 15px; overflow: hidden; position: relative;">
<div style="position: absolute; bottom: 0px;">
<img src="../assets/images/Card_bg2.png"
style="width: 100%;height: 280px;" alt="image" />
@ -329,7 +371,7 @@
<h2 class="name"
style="font-size: 24px; margin: 25px 0px 20px 0px; color: #121212; text-align: center;">
Krishnendu Panja</h2>
<p style="font-size: 12px; color: #121212; display: flex; justify-content: center;"><strong style="width: 115px;">Joining Date:</strong> <span style="display: flex; justify-content: flex-start;text-align: start;">12/09/2021</span></p>
<p style="font-size: 12px; color: #121212; display: flex; justify-content: center;"><strong style="width: 76px;">Joining Date:</strong> <span style="display: flex; justify-content: flex-start;text-align: start;">12/09/2021</span></p>
<p style="font-size: 12px; color: #121212; display: flex; justify-content: center;"><strong style="width: 115px;">Emergency Contact:</strong> <span style="display: flex; justify-content: flex-start;text-align: start;">+8204256789</span></p>
<p
@ -351,7 +393,7 @@
<p style="text-align: center; color: white; margin-top: 2px; font-size: 12px; font-weight: 400;">Signature</p>
</div>
</div>
</div>
</div> -->
</div>
</div>
</div>

View File

@ -283,7 +283,7 @@
</div>
<div class="tab-content active">
<div class="flex justify-center">
<div class=""
<!-- <div class=""
style="width: 550px; height: 300px; margin: 0 auto; box-shadow: 0 2px 5px rgba(0,0,0,0.2); border-radius: 15px; overflow: hidden; position: relative;">
<div style="position: absolute; right: -15px;">
<img src="../assets/images/visitingbg-1.png"
@ -316,8 +316,8 @@
style="background-color: #005bab; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>
</span>
<span
style="line-height: 1.1; flex: 1;">https://sentientgeeks.com/</span>
<a href="https://sentientgeeks.com/"
style="line-height: 1.1; flex: 1; color: #1a1919;">https://sentientgeeks.com/</a>
</p>
<p
style="margin-bottom: 6px; display: flex; max-width: 230px; align-items: center; gap: 7px;">
@ -325,8 +325,8 @@
style="background-color: #007dc5; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;">
<svg data-v-14c8c335="" xmlns="http://www.w3.org/2000/svg" width="16" height="26" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail lucide-icon customizable"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg>
</span>
<span
style="line-height: 1.1; flex: 1; width: 190px;">krishnendu@sentientgeeks.com</span>
<a href="mailto:krishnendu@sentientgeeks.com"
style="line-height: 1.1; flex: 1; width: 190px; color: #1a1919;">krishnendu@sentientgeeks.com</a>
</p>
<p
style="margin-bottom: 6px; display: flex; max-width: 230px; align-items: center; gap: 7px;">
@ -344,22 +344,45 @@
</div>
</div>
</div>
</div>
<!-- <div class=""
</div> -->
<div
style="width: 550px; height: 300px; margin: 0 auto; box-shadow: 0 2px 5px rgba(0,0,0,0.2); border-radius: 15px; overflow: hidden; position: relative;">
<div style="position: absolute; right: -15px;">
<img src="../assets/images/visitingbg-2.png" style="width: 400px; height: 310px;"
alt="image" />
<img src="../assets/images/visitingbg-2.png"
style="width: 400px; height: 310px;" alt="image" />
</div>
<div class="content" style="padding: 30px 60px 30px 40px;">
<div class="details" style="padding: 50px 0;">
<img src="../assets/images/v-logo.png" width="150" alt="image" />
<img src="../assets/images/v-logo.png" width="150"
alt="image" />
</div>
</div>
<div class="footer" style="padding: 0px 40px 40px 40px;">
<a href="https://sentientgeeks.com" style="border-bottom: 1px solid #303F9F; padding-bottom: 2px; color: #3F51B5;">https://sentientgeeks.com</a>
<p
style="margin-bottom: 6px; display: flex; max-width: 230px; align-items: center; gap: 7px;">
<span
style="background-color: #005bab; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;">
<span
style="background-color: #007dc5; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;">
<svg data-v-14c8c335=""
xmlns="http://www.w3.org/2000/svg" width="16"
height="16" viewBox="0 0 24 24" fill="none"
stroke="#ffffff" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-mail lucide-icon customizable">
<rect width="20" height="16" x="2" y="4" rx="2">
</rect>
<path
d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7">
</path>
</svg>
</span>
</span>
<a href="mailtosales@sentientgeeks.com"
style="line-height: 1.1; flex: 1; color: #1a1919;">sales@sentientgeeks.com</a>
</p>
</div>
</div>
</div> -->
</div>
</div>
</div>