Enhance your web projects with a sleek top bar popup that smoothly slides down from the top of the page. Perfect for notifications, alerts, or important messages, this design ensures visibility without being intrusive. Customize the appearance and timing to fit your needs!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Friday Sales Popup</title>
<style>
/* Popup Bar Styling */
.top-bar-popup {
position: fixed;
top: -60px; /* Initially hidden */
left: 0;
width: 100%;
background: #ff4d00;
color: white;
text-align: center;
padding: 12px;
font-size: 14px;
transition: top 0.5s ease-in-out;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
box-sizing: border-box;
}/* Shop Now Button */
.shop-now {
background: white;
color: #ff4d00;
padding: 6px 12px;
margin-left: 10px;
text-decoration: none;
border-radius: 4px;
font-size: 14px;
transition: 0.3s;
}.shop-now:hover {
background: #ffd6c4;
}/* Close Button */
.close-btn {
background: none;
color: white;
font-size: 18px;
border: none;
cursor: pointer;
margin-left: auto;
padding: 0 12px;
}/* Responsive */
@media (max-width: 600px) {
.top-bar-popup {
flex-direction: column;
padding: 10px;
}
.shop-now {
margin: 8px 0;
}
}
</style>
</head>
<body onload="showPopup()"><!-- Sales Notification Bar -->
<div class="top-bar-popup" id="topBar">
<span>🎉 Friday Sales! Get up to 50% OFF –</span>
<a href="#" class="shop-now">Shop Now</a>
<button class="close-btn" onclick="closePopup()">✖</button>
</div>
<script>
function showPopup() {
document.getElementById("topBar").style.top = "0"; // Slide down
}
function closePopup() {
document.getElementById("topBar").style.top = "-60px"; // Slide up on close
}
</script>
</body>
</html>