HTML/CSS
JavaScript

Bottom Sheet

The design ensures visibility without disrupting user experience, making it an effective marketing tool for online promotions.

 
								<style>
								@keyframes slideUp {
								   from {
									   bottom: -70px;
								   }
								   to {
									   bottom: 0;
								   }
								}
								/* Optional hover effect */
								.promo-tab:hover {
								   
								   box-shadow: 0 -6px 20px rgba(0,0,0,0.15);
								}
								</style>
										<div style="width: 0; height: 0; overflow: hidden; padding: 0; margin: 0; border: 0;"></div>
										<!-- Promotional Tab -->
										<div style="position: fixed; bottom: -70px; left: 50%; transform: translateX(-50%); background: linear-gradient(90deg, #FF3366, #FF6B6B); padding: 15px 30px; border-radius: 12px 12px 0 0; box-shadow: 0 -4px 15px rgba(0,0,0,0.1); cursor: pointer; animation: slideUp 1s forwards 1s; z-index: 1000; transition: all 0.3s ease;">
										   <!-- Close Button -->
										   <div class="promo-tab" style="position: absolute; top: 10px; right: 10px; color: white; font-size: 18px; cursor: pointer; opacity: 0.8;">
											   ×
										   </div>
										   
										   <!-- Offer Content -->
										   <h3 style="color: white; font-size: 16px; margin: 0 0 5px 0; font-family: 'Helvetica Neue', Arial; font-weight: 600;">
											plaeto: Special Offer
										   </h3>
										   <p style="color: white; font-size: 14px; margin: 0; font-family: 'Helvetica Neue', Arial;">
											   Get 20% off on your first purchase! Use code: <span style="background: rgba(255,255,255,0.2); padding: 2px 8px; border-radius: 4px;">FIRST20</span>
										   </p>
										</div>
Note: In the console, type 'allow pasting,' and then you can paste the code below. 
 
								document.querySelector('.promo-tab').addEventListener('click', function(e) {
									if (e.target.innerHTML === '×') {
										this.style.animation = 'slideDown 1s forwards';
									}
								});