<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scrolling Notice Box</title>
<style>
body{
font-family: Arial, sans-serif;
background:#f5f5f5;
padding:40px;
}
.notice-box{
width:350px;
height:250px;
border:2px solid #0b5ed7;
border-radius:10px;
background:#ffffff;
overflow:hidden;
margin:auto;
box-shadow:0 2px 10px rgba(0,0,0,0.1);
}
.notice-title{
background:#0b5ed7;
color:#fff;
padding:12px;
text-align:center;
font-size:18px;
font-weight:bold;
}
.notice-content{
height:200px;
overflow:hidden;
position:relative;
}
.notice-list{
position:absolute;
width:100%;
animation: scrollUp 15s linear infinite;
}
.notice-content:hover .notice-list{
animation-play-state: paused;
}
.notice-list a{
display:block;
padding:12px 15px;
color:#333;
text-decoration:none;
border-bottom:1px solid #ddd;
transition:0.3s;
}
.notice-list a:hover{
background:#f0f7ff;
color:#0b5ed7;
}
@keyframes scrollUp{
0%{
top:100%;
}
100%{
top:-100%;
}
}
</style>
</head>
<body>
<div class="notice-box">
<div class="notice-title">
Latest Notices
</div>
<div class="notice-content">
<div class="notice-list">
<a href="https://example.com/link1" target="_blank">
Online Admission Registration Started for Session 2026-27
</a>
<a href="https://example.com/link2" target="_blank">
Last Date for Application Form Submission
</a>
<a href="https://example.com/link3" target="_blank">
Scholarship Form Notification Released
</a>
<a href="https://example.com/link4" target="_blank">
UG & PG Merit List Available Now
</a>
<a href="https://example.com/link5" target="_blank">
Fee Payment Portal Open for All Students
</a>
</div>
</div>
</div>
</body>
</html>
| Course Name | Course Duration | Total Seats |
|---|
