<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Sponsor Banner</title>
<style>
:root {
--banner-height: 50000px; /* ✅ Adjust this value to control banner height (100px ≈ 10cm) */
--scroll-speed: 20s; /* ✅ Adjust speed of vertical scroll: lower = faster */
}
body {
margin: 0;
font-family: Arial, sans-serif;
}
/* 🎯 Vertical sponsor banner (fixed right-side) */
.sponsor-banner-vertical {
position: fixed;
top: 0;
right: 0;
width: 250px;
height: var(--banner-height);
background-color: #000; /* fallback background */
border-left: 3px solid #ccc;
box-shadow: -2px 0 5px rgba(0,0,0,0.1);
overflow: hidden;
z-index: 1000;
}
/* 🟠 Flashing banner header */
.sponsor-banner-vertical h3 {
text-align: center;
margin: 0;
padding: 10px;
font-size: 18px;
font-weight: bold;
color: #fff;
animation: flashBg 1s infinite; /* Flashing background */
}
@keyframes flashBg {
0% { background-color: #d91e18; }
25% { background-color: #f39c12; }
50% { background-color: #2ecc71; }
75% { background-color: #3498db; }
100% { background-color: #d91e18; }
}
/* 🔃 Vertical scroll container */
.sponsor-list-vertical {
display: flex;
flex-direction: column;
align-items: center;
animation: scrollUp var(--scroll-speed) linear infinite;
}
/* 🧾 Each sponsor entry */
.sponsor-item {
margin: 10px 0;
text-align: center;
font-size: 14px;
color: #fff;
}
.sponsor-item span {
display: block;
font-weight: bold;
color: #f1c40f;
}
@keyframes scrollUp {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(-100%);
}
}
</style>
</head>
<body>
<!-- ✅ Vertical Sponsor Banner (right-side) -->
<div class="sponsor-banner-vertical">
<h3>Our Sponsors</h3>
<div class="sponsor-list-vertical">
<!-- Sponsor Items -->
<div class="sponsor-item">
<span>John D’Souza</span>
J&D Accounting Services
</div>
<div class="sponsor-item">
<span>Maria Fernandes</span>
Fernandes Legal Ltd.
</div>
<div class="sponsor-item">
<span>Raj Patel</span>
Patel Supermart
</div>
<div class="sponsor-item">
<span>Sunil Shetty</span>
Shetty’s Transport Co.
</div>
<div class="sponsor-item">
<span>Anita D’Costa</span>
Costa Catering Group
</div>
<!-- Duplicate for smooth looping -->
<div class="sponsor-item">
<span>John D’Souza</span>
J&D Accounting Services
</div>
<div class="sponsor-item">
<span>Maria Fernandes</span>
Fernandes Legal Ltd.
</div>
<div class="sponsor-item">
<span>Raj Patel</span>
Patel Supermart
</div>
<div class="sponsor-item">
<span>Sunil Shetty</span>
Shetty’s Transport Co.
</div>
<div class="sponsor-item">
<span>Anita D’Costa</span>
Costa Catering Group
</div>
</div>
</div>
</body>
</html>
About us
Use this space to introduce yourself or your business to site visitors. Share who you are, what you do, and the purpose of this website.
