Untitled
3 years ago in HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif; background-color:#100a52}
.mySlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 400px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
</style>
</head>
<body>
<h2 style="text-align: center; color:#ffffff">YENİ EKLENENLER</h2>
<div class="slideshow-container">
<div class="mySlides fade">
<img src="https://img-s1.onedio.com/id-52d7c61f43516df043000062/rev-0/w-635/listing/f-jpg-webp/s-03af84a9fc9d710da137bb6580d7223a54d055c3.webp" style="width:100%">
<div class="text">Angels & Demons - Melekler ve Şeytanlar</div>
</div>
<div class="mySlides fade">
<img src="https://img-s2.onedio.com/id-52d7c61f43516df04300005f/rev-0/w-635/listing/f-jpg-webp/s-12fab2c313f613cde056ffa9f449ddbcfd1cae03.webp" style="width:100%">
<div class="text">Avatar</div>
</div>
<div class="mySlides fade">
<img src="https://img-s1.onedio.com/id-52d7c61f43516df04300005e/rev-0/w-635/listing/f-jpg-webp/s-77c1a7cb808a3e6904918b641f260d1e2e0db335.webp" style="width:100%">
<div class="text">Crank II: High Voltage - Tetikçi 2: Yüksek Gerilim</div>
</div>
<div class="mySlides fade">
<img src="https://img-s2.onedio.com/id-52d7c61f43516df043000063/rev-0/w-635/listing/f-jpg-webp/s-3868c2507f69fdc2034f1a979deb157b438843ff.webp" style="width:100%">
<div class="text">Daybreakers - Vampir İmparatorluğu</div>
</div>
<div class="mySlides fade">
<img src="https://img-s1.onedio.com/id-52d7c61f43516df043000064/rev-0/w-635/listing/f-jpg-webp/s-fcb30d28a94f99c78c9dbbf281a2325f051ccf98.webp" style="width:100%">
<div class="text">Disaster Movie - Acaip Bi Film</div>
</div>
</div>
<br>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
<marquee style="text-align: center; color: #ffffff" scrollamount="3" height="200" width="100%" direction="up">
Angels & Demons - Melekler ve Şeytanlar<br /><br />
Avatar<br /><br />
Crank II: High Voltage - Tetikçi 2: Yüksek Gerilim<br /><br />
Daybreakers - Vampir İmparatorluğu<br /><br />
Disaster Movie - Acaip Bi Film<br /><br />
</marquee>
</body>
</html>