CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0px;
box-sizing: border-box;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
main{
height: 90vh;
grid-template-columns: 1fr 12fr;
/* border: 1px solid red; */
}
.left{
background-color: #e1e1e1;
}
.center{
border: 1px solid black;
text-align: center;
padding: 10px;
/* display: flex; */
font-size: larger;
display: flex;
justify-content: space-evenly;
background-color: #0e447e;
}
button{
background-color: white;
color: black;
padding: 5px;
border-radius: 25px;
font-size: larger;
width: 10vw;
}
a{
padding-top: 15px;
/* color: yellow; */
}
img{
width: 20vw;
padding-bottom:20px;
}
input{
background-color: none;
font-size: larger;
}
.overview{
text-align: center;
display: flex;
/* grid-template-columns: column; */
justify-content: space-evenly;
padding-top: 50px;
/* border: 1px solid red; */
font-size: larger;
font-weight: bolder;
}
.overview a {
text-decoration: none;
}
.simple-slider{
width: 100vw;
height: 700px;
margin: 20px auto;
position: relative;
overflow: hidden;
}
.simple-slider img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
animation: simpleFade 24s infinite;
padding-bottom: 0;
}
.simple-slider img:nth-child(1) {animation-delay: 0s;}
.simple-slider img:nth-child(2) {animation-delay: 3s;}
.simple-slider img:nth-child(3) {animation-delay: 6s;}
.simple-slider img:nth-child(4) {animation-delay: 9s;}
.simple-slider img:nth-child(5) {animation-delay: 12s;}
.simple-slider img:nth-child(6) {animation-delay: 15s;}
.simple-slider img:nth-child(7) {animation-delay: 18s;}
.simple-slider img:nth-child(8) {animation-delay: 21s;}
@keyframes simpleFade {
0% { opacity: 0; }
5% { opacity: 1; }
12% { opacity: 1; }
17% { opacity: 0; }
100% { opacity: 0; }
}
.image img{
width: 100vw;
height:400;
}
h1{
text-align: center;
padding-bottom: 30px;
color: #000080;
}
.welcome-text p {
padding-left: 10%;
margin: 10px;
font-size: larger;
}
.right hr{
width: 70%;
margin-left: 10.5%;
}
h2{
margin-left: 10.5%;
padding: 10px;
color: #000080;
}
table{
width: 70%;
margin-left: 10.5%;
border: 1px solid black;
margin-bottom: 20px;
border-collapse: collapse; /* Ensures crisp single-line borders */
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
p{
margin: 10px;
line-height: 24px;
}
.topheader p{
font-weight: 400;
}
footer {
background-color: #0e447e;
color: white;
padding: 40px 10% 20px 10%;
font-family: sans-serif;
}
.footer-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
margin-bottom: 30px;
}
.footer-column h4 {
font-size: 1.1rem;
margin-bottom: 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
padding-bottom: 5px;
}
.footer-column ul {
list-style: none;
padding-left: 0;
margin: 0;
}
.footer-column ul li {
margin-bottom: 8px;
font-size: 0.95rem;
}
.footer-column ul li a {
color: #e0e0e0;
text-decoration: none;
padding-top: 0;
}
.footer-column ul li a:hover {
color: #ffffff;
text-decoration: underline;
}
.newsletter-box input[type="email"] {
padding: 8px;
width: 70%;
border: none;
border-radius: 4px 0 0 4px;
outline: none;
}
.newsletter-box button {
width: auto;
padding: 8px 15px;
border: none;
background-color: #ffffff;
color: #0e447e;
border-radius: 0 4px 4px 0;
cursor: pointer;
font-size: 0.95rem;
font-weight: bold;
}
.footer-bottom {
text-align: center;
border-top: 1px solid rgba(255, 255, 255, 0.2);
padding-top: 20px;
font-size: 0.9rem;
line-height: 1.6;
color: #e0e0e0;
}
.hr1{
width: 70%;
margin-left: 10%;
}
.hr2{
width: 70%;
margin-left: 10%;
padding-top: 7%;
}
tr{
width: 80%;
}
.hr3{
width: 70%;
margin-left: 10%;
padding-bottom: 10px;
}
h3{
padding: 10px;
margin-left: 10%;
color: #000080;
}
.sub-memo {
display: block;
font-size: 0.9em;
color: #555;
margin-top: 4px;
font-style: italic;
}
.photo-instructions {
width: 70%;
margin-left: 10.5%;
border: 1px solid black;
padding: 20px;
margin-bottom: 20px;
background-color: #fafafa;
}
.photo-instructions ul {
padding-left: 25px;
margin: 10px 0;
font-size: 16px;
}
.photo-instructions li {
margin-bottom: 8px;
list-style-type: square;
}
.photo-instructions .highlight-note {
font-weight: bold;
color: #c0392b;
margin-top: 10px;
}
.submission-note {
width: 70%;
margin-left: 10.5%;
border: 1px solid #0e447e;
background-color: #ebf3fc;
padding: 15px;
margin-bottom: 30px;
}
h4{
margin-left: 10%;
padding: 10px;
color: #000080;
}
.click{
background-color: #007bff;
padding: 10px;
width: 20%;
height: 60px;
margin-left: 10%;
border-radius: 10px;
}
.click a{
color: white;
text-decoration: none;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
</style>
</head>
<body>
<main>
<div class="college">
<div class="center">
<a href="" style="color: yellow; animation: blinker 1s linear infinite; text-decoration: none;">Chennai Campus</a>
<p style="color: white;">Admission Open 2026-27</p>
<button style="color: #007bff; animation: blinker 1s linear infinite; text-decoration: none;">apply now</button>
<button>IQAC</button>
<button>SDG</button>
<button>NIRF</button>
<p style="color: white;">Tel. 04563 289042</p>
<div style="color: white;">☰</div>
</div>
<div class="left">
<div class="overview">
<img src="coll.png" alt="">
<a href="">About us</a>
<a href="">Admissions</a>
<a href="">Academics</a>
<a href="">CampusLife</a>
<a href=""style="animation: blinker 1s linear infinite;">Research</a>
<a href="">Accereditation & Ranking</a>
<a href="">Placements</a>
</div>
</div>
<div class="simple-slider">
<img src="coll6.png" alt="Slide 1">
<img src="coll7.png" alt="Slide 2">
<img src="coll8.png" alt="Slide 3">
<img src="coll9.png" alt="Slide 4">
<img src="coll2.png" alt="Slide 5">
<img src="coll10.png" alt="Slide 6">
<img src="coll11.png" alt="Slide 7">
<img src="coll12.png" alt="slider 8">
</div>
<div class="right">
<h1>Opening of First Year Classes-2026</h1>
<hr>
<div class="welcome-text">
<p>Welcome to Kalasalingam Academy of Research and Education!</p>
<p>Congratulations on your son's/daughter's/ward's admission to our University. We are proud to partner with you in shaping them into a skilled professional, a responsible citizen, and a future-ready leader.</p>
<p>At KARE, our mission is to nurture and empower students to become global leaders equipped with strong knowledge, technical expertise, and values.</p>
<p>We warmly welcome you to the commencement of classes for the first year (2026-2027). The academic session will begin with an inaugural function, scheduled to begin on 3rd August 2026.</p>
<p>We look forward to a fruitful and inspiring journey ahead with your family.</p>
</div>
<hr>
<h2>Hostel Opening Dates</h2>
<table>
<tbody>
<tr>
<th>Date(s)</th>
<th>Hostel</th>
</tr>
<tr>
<td>01.07.2026 - 03.07.2026</td>
<td>Special Rooms (Attached & AC) - Both MH & LH</td>
</tr>
<tr>
<td>From 04.07.2026</td>
<td>Both Men's Hostels (MH) & Ladies Hostels (LH) - all types of rooms</td>
</tr>
</tbody>
</table>
</div>
<div class="hr1">
<hr>
</div>
<div class="hr2">
<hr>
</div>
<h4>Transport Opening Dates</h4>
<table>
<tbody>
<tr>
<th>Date(s)</th>
<th>Instructions</th>
</tr>
<tr>
<td>25.06.2026</td>
<td>KARE First year students, use application number as username and password (in capital letters). (Note-Registration will be enabled one day after admision confirmation) Link for Registration: Click Here</td>
</tr>
</tbody>
</table>
<div class="hr3">
<hr>
</div>
<div class="click">
<a href="">Click Here to view the Fee structure, boarding point and bus time.</a>
</div>
</div>
<h3>List of documents to be submitted (For UG Students).</h3>
<table>
<thead>
<tr>
<th>S.No</th>
<th>Name of the Certificate</th>
<th>No. of Copies</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>10th mark sheet</td>
<td>Original +3 Xerox copies</td>
</tr>
<tr>
<td>2.</td>
<td>11th (TN state board) / 12th mark sheet</td>
<td>Original +3 Xerox copies</td>
</tr>
<tr>
<td>3.</td>
<td>
Intermediate Mark Statement (Andhara / Telangana State Board)
<span class="sub-memo">1. Short Memo 2. Long Memo</span>
</td>
<td>Original +3 Xerox copies</td>
</tr>
<tr>
<td>4.</td>
<td>Transfer Certificate</td>
<td>Original +1 Xerox copy</td>
</tr>
<tr>
<td>5.</td>
<td>Conduct Certificate</td>
<td>Original +1 Xerox copy</td>
</tr>
<tr>
<td>6.</td>
<td>Medical Fitness Certificate</td>
<td>Original</td>
</tr>
<tr>
<td>7.</td>
<td>Community Certificate (if BC/MBC/SC/ST)</td>
<td>1 Xerox copy</td>
</tr>
<tr>
<td>8.</td>
<td>Passport size photograph</td>
<td>4 copies</td>
</tr>
<tr>
<td>9.</td>
<td>Family photograph (Postcard size)</td>
<td>2 copies</td>
</tr>
<tr>
<td>10.</td>
<td>Aadhar Card Xerox</td>
<td>1 Xerox Copy</td>
</tr>
<tr>
<td>11.</td>
<td>Any Entrance Examination Score Card (JEE Mains / Any other)</td>
<td>1 Xerox Copy</td>
</tr>
</tbody>
</table>
<h3>List of documents to be submitted (For PG Students).</h3>
<table>
<thead>
<tr>
<th>S.No</th>
<th>Name of the Certificate</th>
<th>No. of Copies</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>10th mark sheet</td>
<td>Original +3 Xerox copies</td>
</tr>
<tr>
<td>2.</td>
<td>11th (TN state board) / 12th mark sheet</td>
<td>Original +3 Xerox copies</td>
</tr>
<tr>
<td>3.</td>
<td>
Intermediate Mark Statement (Andhara / Telangana State Board)
<span class="sub-memo">1. Short Memo 2. Long Memo</span>
</td>
<td>Original +3 Xerox copies</td>
</tr>
<tr>
<td>4.</td>
<td>UG Degree Certificate / UG Provisional Certificate</td>
<td>Original +3 Xerox copies</td>
</tr>
<tr>
<td>5.</td>
<td>UG Consolidate / Individual Semester Mark Sheet</td>
<td>Original +3 Xerox copies</td>
</tr>
<tr>
<td>6.</td>
<td>Transfer Certificate</td>
<td>Original +1 Xerox copy</td>
</tr>
<tr>
<td>7.</td>
<td>Conduct Certificate</td>
<td>Original +1 Xerox copy</td>
</tr>
<tr>
<td>8.</td>
<td>Medical Fitness Certificate</td>
<td>Original</td>
</tr>
<tr>
<td>9.</td>
<td>Community Certificate (if BC/MBC/SC/ST)</td>
<td>1 Xerox copy</td>
</tr>
<tr>
<td>10.</td>
<td>Passport size photograph</td>
<td>4 copies</td>
</tr>
<tr>
<td>11.</td>
<td>Family photograph (Postcard size)</td>
<td>2 copies</td>
</tr>
<tr>
<td>12.</td>
<td>Aadhar Card Xerox</td>
<td>1 Xerox Copy</td>
</tr>
<tr>
<td>13.</td>
<td>Any Entrance Examination Score Card (TANCET / Any other)</td>
<td>1 Xerox Copy</td>
</tr>
</tbody>
</table>
<h3>Instruction for the Softcopy of Students Photograph</h3>
<div class="photo-instructions">
<p><strong>Softcopy of Photograph:</strong> Softcopy of passport size photo must be submitted to class coordinator along with certificates. Specific Requirements:</p>
<ul>
<li><strong>Size:</strong> 2 inches x 2 inches (51 mm x 51 mm), Not to exceed 100 KB and not less than 20 KB.</li>
<li><strong>DPI:</strong> Between 200 and 300.</li>
<li><strong>Background:</strong> Plain white or off-white.</li>
<li><strong>Expression:</strong> Neutral, eyes open, and looking directly at the camera.</li>
<li><strong>Face:</strong> Full face, front view, from the top of the head to the bottom of the chin.</li>
<li><strong>Head Position:</strong> Centered within the frame.</li>
<li><strong>Lighting:</strong> Uniform, no shadows or red-eye.</li>
<li><strong>Hair:</strong> No hair obscuring the face.</li>
<li><strong>Eyeglasses:</strong> If worn, should be clear and thin-framed, with no flash reflection or obscured eyes.</li>
<li><strong>Head Coverings:</strong> Only allowed for religious reasons, with face clearly visible from bottom of chin to top of forehead.</li>
<li><strong>Recentness:</strong> Photos should be recent, preferably taken within the last six months.</li>
<li><strong>Other People/Objects:</strong> None visible in the photo.</li>
</ul>
<p class="highlight-note">⚠️ Note: No selfie photo is allowed.</p>
</div>
<div class="submission-note">
<p><strong>Note:</strong> Students can submit your documents to the Admission Office on or before the respective opening dates.</p>
</div>
<div class="image">
<img src="coll4.png" alt="">
<img src="coll13.pmg.png" alt="">
<img src="coll14.png.png" alt="">
<img src="" alt="">
</div>
<footer>
<div class="footer-container">
<div class="footer-column">
<h4>International Relations</h4>
<ul>
<li><a href="">Overview</a></li>
<li><a href="">Partner University</a></li>
<li><a href="">Students Exchange</a></li>
<li><a href="">Faculty Exchange</a></li>
<li><a href="">International Admissions</a></li>
<li><a href="">Study in India</a></li>
<li><a href="">Taiwan Education Centre</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Controller of Examinations</h4>
<ul>
<li><a href="">National Academic Depository(NAD) Registration</a></li>
<li><a href="">National Academic Depository (NAD) Registration Helpline</a></li>
<li><a href="">Important Forms</a></li>
<li><a href="">KARE e-Verification</a></li>
<li><a href="url?id=1">Contact Mail: coe@klu.ac.in</a></li>
<li><a href="">EMGRC</a></li>
<li><a href="">URAC</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Quick Links</h4>
<ul>
<li><a href="">Faculty Login</a></li>
<li><a href="">Student Login</a></li>
<li><a href="">Parent login</a></li>
<li><a href="">Hostel Login</a></li>
<li><a href="">Transport login</a></li>
<li><a href="">Alumni - Page and login</a></li>
<li><a href="">Guest house-login</a></li>
<li><a href="">Feedback</a></li>
<li><a href="">Careers</a></li>
<li><a href="">KARE Scholarship Portal</a></li>
<li><a href="">e-Resource Remote Access</a></li>
<li><a href="">RTI</a></li>
<li><a href="">Thesis Status</a></li>
<li><a href="">Viva Notification</a></li>
<li><a href="">Downloads</a></li>
<li><a href="">List of Scribes</a></li>
<li><a href="">UNSDG</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Grievances & Redressal</h4>
<ul>
<li><a href="">Anti Ragging Committee</a></li>
<li><a href="">Internal Complaints Committee</a></li>
<li><a href="">Women Empowerment Cell</a></li>
<li><a href="">Anti-Discriminations</a></li>
<li><a href="">Ombudsman</a></li>
<li><a href="">Student's Grievances & Redressal</a></li>
<li><a href="">Complaint Form</a></li>
</ul>
<h4 style="margin-top: 20px;">Follow KARE</h4>
<h4 style="margin-top: 15px;">Subscribe Newsletter</h4>
<div class="newsletter-box">
<input type="email" placeholder="Enter your E-Mail">
<button type="button">></button>
</div>
</div>
</div>
<div class="footer-bottom">
<strong>KALASALINGAM ACADEMY OF RESEARCH AND EDUCATION</strong><br>
(Deemed to be University Under Section 3 of UGC Act 1956)<br>
Anand Nagar, Krishnankoil-626126, Tamil Nadu, India.
</div>
</footer>
</main>
</body>
</html>
OUTPUT:
Top comments (0)