Sandbox: Unterschied zwischen den Versionen

Aus Windsurfen, Kitesurfen, Surfschulen und Surfreisen | spotnetz.de
Zur Navigation springenZur Suche springen
Zeile 1: Zeile 1:
 
<html>
 
<html>
 +
 +
<style>
 +
* {
 +
    box-sizing: content-box;
 +
    margin: 0;
 +
    padding: 0;
 +
}
 +
 +
/* um scrollen nach rechts zu unterbinden */
 +
.bildergalerie_slider {
 +
    overflow: hidden;
 +
}       
 +
 +
.bildergalerie_slider_alle_slides {
 +
    width: 600%;
 +
    height: 300px;
 +
    /* background-color: hsla(80, 61%, 50%, 0.73);*/
 +
    position: relative;   
 +
    animation: 20s slideranimation infinite;
 +
}
 +
 +
@keyframes slideranimation {
 +
    0% {
 +
        left: 0;
 +
    }
 +
 +
    15% {
 +
        left: 0;
 +
    }
 +
 +
    20% {
 +
        left: -100%;
 +
    }
 +
 +
    35% {
 +
        left: -100%;
 +
    }
 +
 +
    40% {
 +
        left: -200%;
 +
    }
 +
 +
    55% {
 +
        left: -200%;
 +
    }
 +
 +
    60% {
 +
        left: -300%;
 +
    }
 +
 +
    75% {
 +
        left: -300%;
 +
    }
 +
 +
    80% {
 +
        left: -400%;
 +
    }
 +
 +
    95% {
 +
        left: -400%;
 +
    }
 +
 +
    100% {
 +
        left: -500%;
 +
    }
 +
}       
 +
 +
.bildergalerie_slider_alle_slides figure {
 +
    position: relative;
 +
    float: left;
 +
}
 +
 +
.bildergalerie_slider_alle_slides figure img {
 +
    width: 100vw;
 +
    height: 300px;
 +
    object-fit: contain;
 +
}
 +
 +
.bildergalerie_slider_alle_slides figure:nth-child(1) img,
 +
.bildergalerie_slider_alle_slides figure:nth-child(5) img {
 +
    object-position: center;     
 +
}       
 +
 +
.bildergalerie_slider_alle_slides figure:nth-child(2) img,
 +
.bildergalerie_slider_alle_slides figure:nth-child(3) img,       
 +
.bildergalerie_slider_alle_slides figure:nth-child(4) img {
 +
    object-position: center 20%;     
 +
}       
 +
 +
figcaption {
 +
    position: absolute;
 +
    top: 200px;
 +
    left: 0;
 +
    background-color: hsla(0, 100%, 100%, 0.6);
 +
 +
    font-family: sans-serif;
 +
    font-size: 2em;
 +
    padding: .2em 1em;
 +
 +
    border-top-right-radius: .5em;
 +
    border-bottom-right-radius: .5em;   
 +
 +
    color: white;
 +
    text-shadow: 2px 2px 1px black;
 +
    text-shadow: 1px 1px 1px black;   
 +
} 
 +
</style>
 +
 +
   
 +
<!-- die einzelnen Slides -->
 +
<div class="bildergalerie_slider">
 +
    <div class="bildergalerie_slider_alle_slides">
 +
        <figure><img src="https://www.spotnetz.de/w/wp-content/uploads/2024/10/24-12-the-breakers-980x300-1.png" alt="schlafende Katzen">
 +
        </figure>
 +
        <figure><img src="https://www.spotnetz.de/w/wp-content/uploads/2024/10/24-12-atlas-essaouira-890x300-1.png" alt="gimme 5">
 +
        </figure>
 +
        <figure>
 +
            <img src="https://www.spotnetz.de/w/wp-content/uploads/2024/10/24-12-melia-gorriones-980x300-1.png" alt="ich habe gehört">
 +
        </figure>
 +
        <figure>
 +
            <img src="https://www.spotnetz.de/w/wp-content/uploads/2024/10/24-12-the-breakers-980x300-1.png" alt="ich pass da rein">
 +
        </figure>
 +
        <figure>
 +
            <img src="https://www.spotnetz.de/w/wp-content/uploads/2024/10/24-12-the-breakers-980x300-1.png" alt="wer bist du denn?">
 +
        </figure>
 +
 +
        <!-- erweiterung für Trick bei Animation -->
 +
        <figure><img src="https://www.spotnetz.de/w/wp-content/uploads/2024/10/24-12-the-breakers-980x300-1.png" alt="schlafende Katzen">
 +
        </figure>
 +
    </div>
 +
</div>
 +
 +
 +
<hr>
  
 
<div class="table-scrollable">
 
<div class="table-scrollable">

Version vom 19. Oktober 2024, 16:20 Uhr

schlafende Katzen
gimme 5
ich habe gehört
ich pass da rein
wer bist du denn?
schlafende Katzen
Nord.jpg Welle>2m
Welle-3m.jpg 		Welle
Welle.jpg 		Kabbel
Kabbelwelle.jpg 		Flach
Flachwasser.jpg 		Stehtief
Stehbereich.jpg 		Sand
Sand.jpg 		Steine
Steine.jpg 		Fels
Fels.jpg 		Rasen
Rasen.jpg 		Wertung
Bewertung.jpg 		Kommentar
Amrum Norddorf Punkt.jpg Punkt.jpg Punkt.jpg Gut.jpg
Aschau Punkt.jpg Punkt.jpg Punkt.jpg Mittel.jpg links Sperrgebiet
Brodersby Punkt.jpg Punkt.jpg Punkt.jpg Schwierig.jpg böig
Brodtener Ufer Punkt.jpg Punkt.jpg Schwierig.jpg Shorebreak
Dazendorf Punkt.jpg 0 m Punkt.jpg Schwierig.jpg Shorebreak
Fehmarn - Altenteil Punkt.jpg 10 m Punkt.jpg Punkt.jpg Schwierig.jpg Shorebreak
Fehmarn - Bojendorf Punkt.jpg 20 m Punkt.jpg Punkt.jpg Schwierig.jpg Shorebreak
Fehmarn - Gold Punkt.jpg 150 m Punkt.jpg Gut.jpg
Fehmarn - Gold II Grab Punkt.jpg Punkt.jpg 150 m Punkt.jpg Punkt.jpg Gut.jpg
Fehmarn - Gruener Brink Punkt.jpg Punkt.jpg 400 m Punkt.jpg Punkt.jpg Mittel.jpg Badezone/Mole
Fehmarn - Puettsee Punkt.jpg 100 m Punkt.jpg Punkt.jpg Gut.jpg
Fehmarn - Strukkamp Punkt.jpg Punkt.jpg 150 m Punkt.jpg Punkt.jpg Gut.jpg
Fehmarn - Westermarkelsdorf Punkt.jpg Punkt.jpg Punkt.jpg Schwierig.jpg Shorebreak
Fehmarn - Wulfener Hals Punkt.jpg ~ Punkt.jpg Gut.jpg
Foehr Utersum Punkt.jpg Punkt.jpg Mittel.jpg gezeitenabhängig
Fuesing Punkt.jpg Punkt.jpg Punkt.jpg Schwierig.jpg böig
Grossenbrode - West Punkt.jpg Punkt.jpg 150 m Punkt.jpg Punkt.jpg Gut.jpg sehr flach
Heiligenhafen Punkt.jpg Punkt.jpg Punkt.jpg Punkt.jpg Schwierig.jpg onshore/Buhnen
Heiligenhafen - Leuchtturm Punkt.jpg Punkt.jpg Punkt.jpg Punkt.jpg Mittel.jpg onshore
Heiligenhafen Graswarder Punkt.jpg Punkt.jpg Punkt.jpg Punkt.jpg Mittel.jpg onshore
Hohwacht Punkt.jpg Punkt.jpg Mittel.jpg onshore
Hohwacht Sued Punkt.jpg Punkt.jpg Punkt.jpg Gut.jpg
Laboe Punkt.jpg Punkt.jpg 650 m Punkt.jpg Gut.jpg
Lindhoeft Punkt.jpg Punkt.jpg Punkt.jpg Schwierig.jpg onshore
Meldorf - Nordseeseite Punkt.jpg 0 m - ~ Punkt.jpg Punkt.jpg Mittel.jpg gezeitenabhängig
Meldorf - Speicherkoog Suedlage Punkt.jpg ~ Punkt.jpg Punkt.jpg Mittel.jpg onshore/ Einstieg steinig/ Buhnen
Meldorf - Speicherkoog Westlage Punkt.jpg Punkt.jpg 100 m Punkt.jpg Punkt.jpg Mittel.jpg böig,schlickiger Wattboden
Niendorf Ostsee Punkt.jpg Punkt.jpg Punkt.jpg Mittel.jpg ungeordnete Welle
Oortkaten Punkt.jpg 0 m Punkt.jpg Punkt.jpg Gut.jpg
Schwedeneck Punkt.jpg Punkt.jpg 100 m Punkt.jpg Mittel.jpg onshore-Bedingungen
Sehlendorf Punkt.jpg Punkt.jpg Gut.jpg
St. Peter Ording - Hauptstrand Punkt.jpg Punkt.jpg Punkt.jpg Gut.jpg
Strande - Buelker Leuchtturm Punkt.jpg Punkt.jpg Punkt.jpg Punkt.jpg Schwierig.jpg Windabdeckung
Surendorf Punkt.jpg Punkt.jpg Punkt.jpg Mittel.jpg onshore-Bedingungen
Sylt - Brandenburger Strand Punkt.jpg Punkt.jpg Mittel.jpg Strömung/Shorebreak
Sylt - List Punkt.jpg Punkt.jpg Punkt.jpg Punkt.jpg Mittel.jpg Strömung
Wackerballig Punkt.jpg Punkt.jpg 300 m Punkt.jpg Punkt.jpg Gut.jpg
Nord.jpg Welle>2m
Welle-3m.jpg 		Welle
Welle.jpg 		Kabbel
Kabbelwelle.jpg 		Flach
Flachwasser.jpg 		Stehtief
Stehbereich.jpg 		Sand
Sand.jpg 		Steine
Steine.jpg 		Fels
Fels.jpg 		Rasen
Rasen.jpg 		Wertung
Bewertung.jpg 		Kommentar

Abgerufen von „https://www.spotnetz.de/index.php?title=Sandbox&oldid=26036“