/* styles.css */
bodyy{
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.banner {
background-color: #ff0000;
color: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
text-align: center;
max-width: 400px;
width: 100%;
animation: slideIn 1s ease-out;
}
.banner-content {
display: flex;
flex-direction: column;
align-items: center;
}
.blink {
animation: blink 1s steps(2, start) infinite;
}
@keyframes blink {
to {
visibility: hidden;
}
}
.subscribe-button {
background-color: white;
color: #ff0000;
padding: 10px 20px;
border: none;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s, color 0.3s;
}
.subscribe-button:hover {
background-color: #ff0000;
color: white;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.subscriber-count {
margin-top: 10px;
font-size: 14px;
font-weight: bold;
}
// scripts.js
document.addEventListener(‘DOMContentLoaded’, function() {
const subscriberCountElement = document.getElementById(‘subscriber-count’);
// Simulating dynamic subscriber count
function updateSubscriberCount() {
// You would typically fetch this data from an API
const subscriberCount = Math.floor(Math.random() * 1000) + 1; // Placeholder for demonstration
subscriberCountElement.textContent = `Subscribers: ${subscriberCount}`;
}
updateSubscriberCount();
setInterval(updateSubscriberCount, 5000); // Update every 5 seconds
});