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>
<script src="https://kit.fontawesome.com/76e9f55137.js" crossorigin="anonymous"></script>
<style>
*{
padding:0px;
margin:0px;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}
.header{
background-color: #004B7E;
color:white;
padding:5px 25px;
display:flex;
justify-content:center;
align-items:center;
gap:77px;
}#cc{
color: yellow;
font-size:20px;
text-decoration:none;
animation:blinker 1s linear infinite;
}@keyframes blinker{
50%{
opacity:0;
}
}
.header button{
background-color:white;
color:black;
padding:10px 20px;;
border-radius:20px;
}
#one{
color:blue;
animation:blinker 1s linear infinite;
}
#three{
background-image:url(https://kalasalingam.ac.in/wp-content/uploads/2023/12/unsdg_logo_updated.png);
background-position:center;
}.header p{
font-size:17px;
}
.fa-bars{
font-size:35px;
}.header:hover{
cursor:pointer;
}.header button:hover{
cursor:pointer;
background-color:#004B7E;
color:white;
}.logo{
display:flex;
justify-content:center;
align-items:center;
gap:40px;
background-color:#15151520;
padding:20px;
}.logo img{
width:330px;
}.logo a{
color:black;
text-decoration:none;
font-weight:bolder;
}#res{
animation:blinker 1s linear infinite;
}@keyframes blinker{
50%{
opacity:0;
}
}.ads{
display:flex;
width:100%;
height: 550px;
}.ads img{
width:100vw;
height:100%;
flex-shrink:0;
animation:slider 12s linear infinite;
}@keyframes slider{
0%,16%{
transform:translateX(0%);
}
20%,36%{
transform:translateX(-100%);
}40%,56%{
transform:translateX(-200%);
}60%,76%{
transform:translateX(-300%);
}80%,96%{
transform:translateX(-400%);
}100%{
transform:translateX(-500%);
}
}#fixed{
z-index:9999;
transform:rotate(270deg);
transform-origin:right bottom;
padding:15px 25px;
top:40%;
right:0;
position:fixed;
background-color:black;
color:white;
text-decoration:none;
font-weight:bolder;
}#fix{
z-index:9999;
padding:15px 25px;
bottom:2%;
right:0;
position:fixed;
border-radius:10px;
background-color:#004B7E;
color:white;
text-decoration:none;
}.section{
display:flex;
justify-content:center;
display:grid;
grid-template-columns:1fr 1fr;
}
.left{
justify-content:center;
}
.left h1{
text-align:center;
padding:30px;
font-weight:bolder;
}
.left img{
border:3px solid darkred;
animation:slider 10s linear infinite;
padding:20px;
width:200px;
flex-shrink:0;
height:300px;
}@keyframes slider{
0%,25%{
transform:translateX(0%);
}
30%,55%{
transform:translateX(-100%);
}60%,75%{
transform:translateX(-200%);
}80%,95%{
transform:translateX(-300%);
}100%{
transform:translateX(-400%);
}
}.right{
padding:17px;
width:80%;
}.right h1{
color:darkred;
padding:10px;
font-weight:bolder;
}.board h4{
color:rgba(40, 85, 232, 0.854);
}.board p{
color:gray;
}.b-box{
position:relative;
margin-top:25px;
height:300px;
overflow:hidden;
border:1px solid gray;
}
.board{
position:absolute;
animation:slide-up 6s linear infinite;
}@keyframes slide-up{
0%{
transform:translateY(100%);
}100%{
transform:translateY(-100%);
}
}.los{
color:white;
display:grid;
grid-template-columns:1fr 1fr 1fr;
height:100vh;
margin:0% 10%;
}.los a{
color:white;
text-decoration:none;
}.los a:hover{
color:black;
}.li img{
background-color:white;
padding:15px;
border-radius:10px;
}.ul1{
display:flex;
flex-direction:column;
margin:auto;
padding:30px;
gap:50px;
font-size:larger;
font-weight:bolder;
}.ul2{
display:flex;
flex-direction:column;
margin:auto;
margin-bottom:35px;
padding:30px;
gap:30px;
font-size:larger;
font-weight:bolder;
}.touch{
background-color:rgba(0, 0, 0, .52);
margin:auto;
margin-bottom:90px;
padding:7px 0px;
}.container{
padding:3%;
background-image:url("https://www.kalasalingam.ac.in/wp-content/themes/kare/assest/images/courceofferbg.jpg");
}.contact img{
width:50px;
margin-bottom:20px;
}.contact{
padding:20px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}.contact:hover{
cursor:pointer;
}.touch h2{
display:flex;
flex-direction:column;
padding:5px 40px;
}
.touch span{
font-size:larger;
}.placement{
border:1px solid;
width:70%;
background-image:url(https://www.kalasalingam.ac.in/wp-content/themes/kare/assest/images/universitybilding.jpg);
}.plus{
font-size:25px;
color: #262626;
text-shadow: 0px 3px 7px rgb(255 255 255 / 58%);
font-weight: 400;
line-height: 30px;
}.img1{
background-image:url(https://www.kalasalingam.ac.in/wp-content/themes/kare/assest/images/courceofferbg.jpg);
padding:50px;
}.img1 img{
padding: 20px;
height:700px;
}.ir{
border:1px solid;
background-image:url(https://www.kalasalingam.ac.in/wp-content/uploads/2021/11/world-images.jpg);
color:white;
}.pic img{
width:120px;
transition: transform 0.5s ease-in-out;
}.cont{
display:flex;
gap:80px;
margin-left:450px;
margin-top: 50px;
margin-bottom:30px;
}.ir h3{
font-size:35px;
padding: 30px;
margin-left:370px;
}#b1{
width:50%;
margin-left:400px;
font-size:17px;
font-weight:bolder;
}.pic:hover{
transform:scale(1.1);
}.icons{
color: blue;
}.icons:hover{
color:white;
}.footer{
border:1px solid;
color:white;
background-color:#004B7EFC;
display:flex;
justify-content:center;
padding:30px;
gap:7%;
height:100%;
}.footer a{
color:white;
padding:10px;
font-size:large;
text-decoration:none;
}.footer a:hover{
color:gold;
}.footer h4{
padding:10px;
font-size:larger;
}.cat li{
padding:20px;
}.icons a{
padding:10px;
color:white;
}.icons h4{
color:white;
padding:10px;
}.icons input{
padding:10px;
padding-right:5px;
}
</style>
</head>
<body>
<div class="header">
<a id="cc" href="https://www.kalasalingam.ac.in/chennai/">Chennai Campus</a>
<p>Admission Open 2026-27</p>
<div class="button">
<button id="one">APPLY NOW</button>
<button id="two">IQAC</button>
<button id="three">SDG</button>
<button id="four">NIRF</button>
</div>
<p>Tel.04563 289042</p>
<i class="fa-solid fa-bars"></i>
</div>
<div class="logo">
<img src="https://www.kalasalingam.ac.in/wp-content/uploads/2022/02/Logo.png" alt="">
<a href="">About Us</a>
<a href="">Admissions</a>
<a href="">Academics</a>
<a href="">Campus Life</a>
<a id="res" href="">Research</a>
<a href="">Accreditation & Ranking</a>
<a href="">Placements</a>
</div>
<div class="ads">
<img src="https://www.kalasalingam.ac.in/wp-content/uploads/2026/06/open20262.png" alt="">
<img src="https://www.kalasalingam.ac.in/wp-content/uploads/2024/10/Green-Photographic-Environment-Charity-Bio-Link-Website.png" alt="">
<img src="https://www.kalasalingam.ac.in/wp-content/uploads/2026/06/convocation39.png" alt="">
<img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/05/industry-collaboration-banner.jpg" alt="">
<img src="https://www.kalasalingam.ac.in/wp-content/uploads/2025/09/NIRF-2025-NEW-RANKING-copy-scaled.jpg" alt="">
</div>
<a id="fixed" href="">Enquire Now!</a>
<a id="fix" href="">Accessiblity</a>
<div class="section">
<div class="left">
<h1>News & Announcements</h1>
<img id="s1" src="images/shot1.png" alt="">
<img id="s2" src="images/shot2.png" alt="">
<img id="s3" src="images/shot3.png" alt="">
<img id="s4" src="images/shot4.png" alt="">
</div>
<div class="right">
<h1>Bulletin Board</h1>
<div class="b-box">
<div class="board">
<h4>39th Convocation</h4>
<p>The online form will be available from 4:30 PM on 22 June 2026.</p>
<h4>Opening of First Year Classes (2026)</h4>
<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>
<h4>NBA-DCS</h4>
<p>NBA-DCS</p>
<h4>BioInnovate 2026: Shaping the Future of Biotechnology</h4>
<p>An International Conference Organized by School of Bio, Chemical and Process Engineering Kalasalingam Academy of Research and Education and Arizona State University, USA In association with Indian Association of Applied Microbiologists (IAAM). </p>
<h4>QS World University Rankings - by Subjec</h4>
<p>KARE has been ranked 751-850 in Computer Science & Information Systems in QS World University Rankings - by Subject 2026 on 25.03.2026</p>
<h4>PDF Notification 2026</h4>
<p>PDF Notification 2026</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="los">
<div class="ul1">
<h1>List of Schools</h1>
<div class="li">
<img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/04/agricultureicn.png" alt="">
<a href="">Kalasalingam School of Agriculture & Horticulture (KSAH)</a>
</div>
<div class="li">
<img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/04/automativeicn.png" alt="">
<a href="">School of Mechanical, Aero, Auto and Civil Engineering (SMACE)</a>
</div>
<div class="li">
<img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/04/computingicn.png">
<a href="">School of Computing (SoC)</a>
</div>
<div class="li">
<img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/04/businessicn.png">
<a href="">Kalasalingam Business School (KBS)</a>
</div>
<div class="li">
<img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/04/advancescienceicn.png">
<a href="">School of Advanced Sciences (SAS)</a>
</div>
</div>
<div class="ul2">
<div class="li">
<img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/04/architectureicn.png">
<a href="">Kalasalingam School of Architecture (KSOA)<http/a>
</div>
<div class="li">
<img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/04/biochemicalicn.png">
<a href="">School of Bio, Chemical and Processing Engineering (SBCE)</a>
</div>
<div class="li">
<img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/04/artseducationicn.png">
<a href="">School of Liberal Arts and Education (SLASE)</a>
</div>
<div class="li">
<img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/04/electronicpowericn.png">
<a href="">School of Electronics, Electrical and Biomedical Technology (SEET)</a>
</div>
<div class="li">
<img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/04/researchprogrameicn.png">
<a href="">Research Programmes</a>
</div>
</div>
<div class="touch">
<h2>Any doubt?<span>Get in Touch</span></h2>
<div class="contact">
<img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/04/foldericn.png">
<a href="">Download Brochure</a>
</div>
<div class="contact">
<img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/04/telegramchaticn.png">
<a href="">Telegram Chat</a>
</div>
<div class="contact">
<img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/04/whatsupchaticn.png">
<a href="">WhatsApp Chat</a>
</div>
<div class="contact">
<img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/04/visitcampus.png">
<a href="">Visit Our Campus</a>
</div>
</div>
</div>
</div>
<div class="img1">
<img src="images/img1.png">
</div>
<div class="img2">
<img src="images/img2.png">
</div>
<div class="ir">
<h3>International Relations</h3>
<p id="b1">Kalasalingam Academy of Research and Education has academic collaboration with the following leading foreign Universities and signed Memorandum of Understanding(MoU) with them:</p>
<div class="cont">
<div class="pic">
<img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/12/Belgium-e1639220981809.png">
<p>Belgium</p>
</div>
<div class="pic">
<img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/12/Brazil-e1639221072997.png">
<p>Brazil</p>
</div>
<div class="pic">
<img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/12/United-Kingdom-e1639221138943.png">
<p>Cambridge</p>
</div>
<div class="pic">
<img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/12/China-e1639221281697.png">
<p>China</p>
</div>
</div>
<div class="cont">
<div class="pic">
<img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/12/Malaysia-e1639222371362.png">
<p>Malaysia</p>
</div>
<div class="pic">
<img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/12/Germany-e1639221729479.png">
<p>Germany</p>
</div>
<div class="pic">
<img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/12/Hungary-e1639221799816.png">
<p>Iraq</p>
</div>
<div class="pic">
<img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/11/south-coria.png">
<p>Korea</p>
</div>
</div>
<div class="cont">
<div class="pic">
<img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/12/Mexico-e1639222468499.png">
<p>Mexico</p>
</div>
<div class="pic">
<img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/12/Poland-e1639222508866.png">
<p>Poland</p>
</div>
<div class="pic">
<img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/12/Romania-e1639222557108.png">
<p>Romania</p>
</div>
<div class="pic">
<img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/12/Switzerland-e1639222736414.png">
<p>Switzerland</p>
</div>
</div>
<div class="cont">
<div class="pic">
<img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/12/Thailand-e1639223095389.png">
<p>Thailand</p>
</div>
<div class="pic">
<img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/12/USA-e1639223148577.png">
<p>USA</p>
</div>
<div class="pic">
<img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/12/Taiwan-e1639222947273.png">
<p>Taiwan</p>
</div>
<div class="pic">
<img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/12/Sri-Lanka-e1639222667698.png">
<p>Srilanka</p>
</div>
</div>
<div class="cont">
<div class="pic">
<img src="https://kalasalingam.ac.in/wp-content/uploads/2022/12/download.jpg">
<p>Indonesia</p>
</div>
</div>
</div>
<div class="img3">
<img src="images/img3.png">
</div>
<div class="img4">
<img src="images/img4.png">
</div>
<div class="img5">
<div class="kare">
<img src="images/img5.png">
</div>
</div>
<div class="footer">
<div class="cat">
<ul id="list">
<h4>International Relations</h4>
<li><a href="">Overview</a></li>
<li><a href="">Partner University</a></li>
<li><a href="">Student Exchange</a></li>
<li><a href="">Faculty Exchange</a></li>
<li><a href="">Internatonal Admissions</a></li>
<li><a href="">Study in India</a></li>
</ul>
</div>
<div class="cat">
<ul id="list">
<h4>Controller Of Examinations</h4>
<li><a href="">NAD Registration</a></li>
<li><a href="">NAD Registration (Helpline)</a></li>
<li><a href="">EMGRC</a></li>
<li><a href="">URAC</a></li>
<li><a href="">KARE e-Verification</a></li>
<li><a href="">Contact Mail: coe@klu.ac.in</a></li>
</ul>
</div>
<div class="cat">
<ul id="list">
<h4>Quick Links</h4>
<li><a href="">Faculty Login</a></li>
<li><a href="">Student Login</a></li>
<li><a href="">Parent login</a></li>
<li><a href="">Alumni Login</a></li>
<li><a href="">Hostel Login</a></li>
<li><a href="">Transport Login</a></li>
<li><a href="">RTI</a></li>
<li><a href="">Feedback</a></li>
<li><a href="">Careers</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</div>
<div class="cat">
<ul id =list>
<h4>Grievances & Redressal</h4>
<li><a href="">Anti - Ragging Commitee</a></li>
<li><a href="">Internal Complaints Committee</a></li>
<li><a href="">Woman Empowerment Cell</a></li>
<li><a href="">Complaint Form</a></li>
</ul>
<div class="icons">
<h4>Follow KARE</h4>
<a href=""><i class="fa-brands fa-facebook"></i></a>
<a href=""><i class="fa-brands fa-instagram"></i></a>
<a href=""><i class="fa-solid fa-x"></i></a>
<a href=""><i class="fa-brands fa-youtube"></i></a>
<h4>Subscribe Newsletter</h4>
<input type="text" placeholder="Enter your Email">
</div>
</div>
</div>
</body>
</html>
Output
Top comments (0)