Krish_panja123./GeeksId-Project-Html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ic card design

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
idproject/user/idCard.html
View File

@ -283,15 +283,15 @@
</div> </div>
<div class="tab-content active"> <div class="tab-content active">
<div class="flex justify-center"> <div class="flex justify-center">
<!-- <div class="" <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;"> 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;"> <div style="position: absolute; top: -25px;">
<img src="../assets/images/Card_bg1.png" style="width: 100%;" <img src="../assets/images/Card_bg1.png" style="width: 100%;"
alt="image" /> alt="image" />
</div> </div>
<div class="content" style="padding: 95px 30px 30px 30px;"> <div class="content" style="padding: 85px 30px 30px 30px;">
<div class="profile_image" <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" <img src="../assets/images/women.png" alt="image"
width="140px" height="140px" width="140px" height="140px"
style="border-radius: 50%;" /> style="border-radius: 50%;" />
@ -304,22 +304,64 @@
style="margin-top: 3px; text-align: center; color: #121212; font-style: normal; font-size: 14px;"> style="margin-top: 3px; text-align: center; color: #121212; font-style: normal; font-size: 14px;">
UI/UX Designer</p> UI/UX Designer</p>
</div> </div>
<div class="other_details" style="margin-top: 25px;"> <div class="other_details" style="margin-top: 20px;">
<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;"> <div
<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> style="text-align: left; padding: 10px 0px; font-size: 14px; color: #444; display: flex; gap: 12px;">
<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> <div style="width: 50%; display: flex; align-items: flex-end; flex-direction: column;">
<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
<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> 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>
</div> </div>
<div style="padding: 7.5px 0; text-align: center; background-color: #c5cae954;"> <div
<p style="font-size: 12px; color: #121212; opacity: 0.8; color: #3949AB;">Powered By GeeksId</p> 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> --> </div>
<div <!-- <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="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;"> <div style="position: absolute; bottom: 0px;">
<img src="../assets/images/Card_bg2.png" <img src="../assets/images/Card_bg2.png"
style="width: 100%;height: 280px;" alt="image" /> style="width: 100%;height: 280px;" alt="image" />
@ -329,7 +371,7 @@
<h2 class="name" <h2 class="name"
style="font-size: 24px; margin: 25px 0px 20px 0px; color: #121212; text-align: center;"> style="font-size: 24px; margin: 25px 0px 20px 0px; color: #121212; text-align: center;">
Krishnendu Panja</h2> 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 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 <p
@ -351,7 +393,7 @@
<p style="text-align: center; color: white; margin-top: 2px; font-size: 12px; font-weight: 400;">Signature</p> <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> </div>
</div> </div>
</div> </div>

47
idproject/user/visitingCard.html
View File

@ -283,7 +283,7 @@
</div> </div>
<div class="tab-content active"> <div class="tab-content active">
<div class="flex justify-center"> <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;"> 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;"> <div style="position: absolute; right: -15px;">
<img src="../assets/images/visitingbg-1.png" <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;"> 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> <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>
<span <a href="https://sentientgeeks.com/"
style="line-height: 1.1; flex: 1;">https://sentientgeeks.com/</span> style="line-height: 1.1; flex: 1; color: #1a1919;">https://sentientgeeks.com/</a>
</p> </p>
<p <p
style="margin-bottom: 6px; display: flex; max-width: 230px; align-items: center; gap: 7px;"> 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;"> 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> <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>
<span <a href="mailto:krishnendu@sentientgeeks.com"
style="line-height: 1.1; flex: 1; width: 190px;">krishnendu@sentientgeeks.com</span> style="line-height: 1.1; flex: 1; width: 190px; color: #1a1919;">krishnendu@sentientgeeks.com</a>
</p> </p>
<p <p
style="margin-bottom: 6px; display: flex; max-width: 230px; align-items: center; gap: 7px;"> style="margin-bottom: 6px; display: flex; max-width: 230px; align-items: center; gap: 7px;">
@ -344,22 +344,45 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div> -->
<!-- <div class="" <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;"> 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;"> <div style="position: absolute; right: -15px;">
<img src="../assets/images/visitingbg-2.png" style="width: 400px; height: 310px;" <img src="../assets/images/visitingbg-2.png"
alt="image" /> style="width: 400px; height: 310px;" alt="image" />
</div> </div>
<div class="content" style="padding: 30px 60px 30px 40px;"> <div class="content" style="padding: 30px 60px 30px 40px;">
<div class="details" style="padding: 50px 0;"> <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> </div>
<div class="footer" style="padding: 0px 40px 40px 40px;"> <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>
</div> </div>
</div> </div>