diedVIPs

html knowhow

Wechseler mit Bilder und Text










Wechseler mit Bilder und Text

So sieht´s aus

HTML Knowhow

Quellcode
<html>
<head>
Hier nichts

<style type="text/css">
*, *:before, *:after {box-sizing: inherit;}
.slideshow-container:hover {animation-play-state: paused;}
.slide {animation: slide 24s ease infinite;}
.slideshow-container {width: 2500px; height: auto; transition: 1s ease;}
.slideshow {width: 620px; margin: 0 auto; overflow: hidden;}
img {width: 620px; height: auto; display: inline-block;}
.text-container {width: 620px; height: auto; display: inline-block; position: relative;}
#p {font-size: 3em; color:green; text-align: center;}

@keyframes slide {
0% { transform: translateX(0%); }
12.5% { transform: translateX(0%); }
25% { transform: translateX(-25%); }
37.5% { transform: translateX(-25%); }
50% { transform: translateX(-50%); }
62.5% { transform: translateX(-50%); }
75% { transform: translateX(-75%); }
87.5% { transform: translateX(-75%); }
99% { transform: translateX(-75%); }
100% { transform: translateX(0); } }
</style>
<head>

<body >
<section class="slideshow">
<div class="slideshow-container slide">
<img src="../Bilder/Werbung/B-HKH.jpg"/>
<div class="text-container"><p id="p">HTML Knowhow</p></div>
<img src="../Bilder/Werbung/B-MSGS.jpg"/>
<img src="../Bilder/Werbung/B-Dinner.jpg"/>
</div>
</section>
</body>

</html>






Kontakt    Datenschutz   Impressum