<!DOCTYPE html> <html> <head> <title>Student Identity Card</title> <style> * { box-sizing: border-box; } body { margin: 0; padding: 0; background: #f1f2f5; font-family: Arial, Helvetica, sans-serif; } /* ID CARD */ .id-card { width: 530px; height: 320px; margin: 100px auto; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0px 5px 15px #aaa; } /* HEADER */ .header { height: 88px; background: #a92d27; color: white; padding: 12px 18px; position: relative; } .logo { width: 43px; height: 43px; background: white; color: #777; text-align: center; font-size: 7px; padding-top: 10px; float: left; margin-right: 10px; } .college { font-size: 25px; font-weight: bold; letter-spacing: 1px; padding-top: 8px; } .college-sub { font-size: 9px; font-weight: bold; } .address { position: absolute; right: 18px; top: 15px; text-align: right; font-size: 9px; line-height: 14px; } /* YELLOW TITLE */ .id-title { height: 28px; background: #e5bb3b; text-align: center; padding-top: 6px; font-size: 13px; font-weight: bold; letter-spacing: 2px; color: #222; } /* CONTENT */ .content { height: 168px; padding: 24px 18px; position: relative; } /* PHOTO */ .photo { width: 113px; height: 136px; float: left; margin-right: 18px; border: 2px solid #333; border-radius: 2px; overflow: hidden; background: #ddd; } .photo img { width: 100%; height: 100%; object-fit: cover; } /* STUDENT DETAILS */ .details { padding-top: 26px; } .name { font-size: 17px; font-weight: bold; margin-bottom: 7px; } .course { font-size: 10.5px; font-weight: bold; margin-bottom: 7px; } .college-name { font-size: 10.5px; font-weight: bold; margin-bottom: 9px; } .roll-number { font-size: 14px; font-weight: bold; } /* SIGNATURE */ .registrar { position: absolute; right: 25px; bottom: 16px; text-align: center; font-size: 9px; font-weight: bold; } .signature { width: 58px; height: 20px; margin: auto; border-bottom: 2px solid #777; transform: rotate(-8deg); } /* FOOTER */ .footer { height: 36px; background: #a92d27; color: white; padding: 11px 18px; font-size: 9px; font-weight: bold; } /* BARCODE */ .barcode { float: right; width: 55px; height: 15px; background: repeating-linear-gradient( 90deg, white 0px, white 2px, transparent 2px, transparent 4px ); } </style> </head> <body> <div class="id-card"> <!-- HEADER --> <div class="header"> <div class="logo"> GALGOTIAS<br> GCET </div> <div class="college"> GALGOTIAS </div> <div class="college-sub"> COLLEGE OF ENGINEERING & TECHNOLOGY </div> <div class="address"> 1, Knowledge Park-II, Greater Noida - 201310<br> Contact No: 0120-4513800 </div> </div> <!-- ID CARD TITLE --> <div class="id-title"> STUDENT IDENTITY CARD </div> <!-- MAIN CONTENT --> <div class="content"> <!-- STUDENT PHOTO --> <div class="photo"> <img src="student.jpg" alt="Student Photo"> </div> <!-- STUDENT INFORMATION --> <div class="details"> <div class="name"> SAHITYA KATIYAR </div> <div class="course"> B.Tech Computer Science and Engineering 2025 - 2029 </div> <div class="college-name"> Galgotias College of Engineering & Technology </div> <div class="roll-number"> 25GCEBCS073 </div> </div> <!-- REGISTRAR --> <div class="registrar"> <div class="signature"></div> Registrar </div> </div> <!-- FOOTER --> <div class="footer"> College Contact No: 0120-4513800 <div class="barcode"></div> </div> </div> </body> </html>