| <html> | |
| <head> | |
| <style> | |
| .slider { | |
| margin-top: 40px; /* Matches header height */ | |
| position: relative; | |
| max-width: 1400px; | |
| height: 400px; | |
| overflow: hidden; | |
| margin-left: auto; /* Centers the slider */ | |
| margin-right: auto; /* Centers the slider */ | |
| margin-bottom: auto; /* Centers the slider */ | |
| border-radius: 10px; | |
| box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); | |
| } | |
| .slides { | |
| display: flex; | |
| width: 7000px; /* 1400px * 5 slides */ | |
| animation: slide 10s infinite; | |
| } | |
| .slide{ | |
| width: 100%; | |
| border-radius: 10px; | |
| position: relative; /* Ensure text-overlay positions relative to slide */ | |
| } | |
| .slide img { | |
| width: 1400px; | |
| height: 400px; | |
| object-fit: cover; /* Ensures images fill the container without distortion */ | |
| } | |
| .text-overlay { | |
| position: absolute; | |
| bottom: 10px; | |
| left: 10px; | |
| background: rgba(0, 0, 0, 0.5); | |
| color: white; | |
| padding: 10px; | |
| border-radius: 5px; | |
| } | |
| @keyframes slide { | |
| 0%, 20% { | |
| transform: translateX(0); | |
| } | |
| 25%, 45% { | |
| transform: translateX(-1400px); | |
| } | |
| 50%, 70% { transform: translateX(-2800px); } | |
| 75%, 95% { transform: translateX(-4200px); } | |
| 100% { transform: translateX(-5600px); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <br> | |
| <div class="slider"> | |
| <div class="slides"> | |
| <div class="slide"> | |
| <img src="bimg1.jpg" alt="Banner Image 1"> | |
| <div class="text-overlay"> | |
| <h2>Banner Image 1</h2> | |
| <p>Banner image tagline 1</p> | |
| </div> | |
| </div> | |
| <div class="slide"> | |
| <img src="bimg2.jpg" alt="Banner Image 2"> | |
| <div class="text-overlay"> | |
| <h2>Banner Image 2</h2> | |
| <p>Banner image tagline 2</p> | |
| </div> | |
| </div> | |
| <div class="slide"> | |
| <img src="bimg3.jpg" alt="Banner Image 3"> | |
| <div class="text-overlay"> | |
| <h2>Banner Image 3</h2> | |
| <p>Banner image tagline 3</p> | |
| </div> | |
| </div> | |
| <div class="slide"> | |
| <img src="bimg4.jpg" alt="Banner Image 4"> | |
| <div class="text-overlay"> | |
| <h2>Banner Image 4</h2> | |
| <p>Banner image tagline 4</p> | |
| </div> | |
| </div> | |
| <div class="slide"> | |
| <img src="bimg5.jpg" alt="Banner Image 5"> | |
| <div class="text-overlay"> | |
| <h2>Banner Image 5</h2> | |
| <p>Banner image tagline 5</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
ROUGH
August 31, 2024
0
