Wikiviajes

Diferencia entre revisiones de «Usuario:Jorge Abellán/Taller 5»

Explorar historial interactivamente
Edición siguiente →
Contenido eliminado Contenido añadido
VisualWikitexto
Página creada con «<div class="container"> <h1>CSS3 accordion <span>slider</span> with Transitions and Flexbox</h1> <div class="subheader">(5 different effects)</div> <div class="link">…»
 
mSin resumen de edición
Línea 1:
<div class="container">
<h1>CSS3 accordion <span>slider</span> with Transitions and Flexbox</h1>
<div class="subheader">(5 different effects)</div>
<div class="link">
<a href="https://github.com/eisenfox/css-flex-slider" target="_blanc"><i class="fa fa-lightbulb-o" aria-hidden="true"></i> Check on Github</a>
<a href="http://100dayscode.co.uk/" title="Check Codepen Challenge" target="_blanc"><i class="fa fa-lightbulb-o" aria-hidden="true"></i> Check Codepen Challenge</a>
</div>
<div class="slider-containers">
<!--effect #1 -->
<div class="slider-container">
<h2>Effect #1</h2>
<div class="flexbox-slider flexbox-slider-1">
<div class="flexbox-slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-1.jpg" alt="Slide Image">
<div class="text-block">
<h3>Slide #1 is here</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>
</div>
<div class="flexbox-slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-2.jpg" alt="Slide Image">
<div class="text-block">
<h3>Slide #2 is here</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>
</div>
<div class="flexbox-slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-3.jpg" alt="Slide Image">
<div class="text-block">
<h3>Slide #3 is here</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>
</div>
<div class="flexbox-slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-4.jpg" alt="Slide Image">
<div class="text-block">
<h3>Slide #4 is here</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>
</div>
<div class="flexbox-slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-9.jpg" alt="Slide Image">
<div class="text-block">
<h3>Slide #5 is here</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>
</div>
</div>
</div>
<!--effect #2 -->
<div class="slider-container">
<h2>Effect #2</h2>
<div class="flexbox-slider flexbox-slider-2">
<div class="flexbox-slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-1.jpg" alt="Slide Image">
<div class="text-block">
<h3>Slide #1 is here</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>
</div>
<div class="flexbox-slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-2.jpg" alt="Slide Image">
<div class="text-block">
<h3>Slide #2 is here</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>
</div>
<div class="flexbox-slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-3.jpg" alt="Slide Image">
<div class="text-block">
<h3>Slide #3 is here</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>
</div>
<div class="flexbox-slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-4.jpg" alt="Slide Image">
<div class="text-block">
<h3>Slide #4 is here</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>
</div>
<div class="flexbox-slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-9.jpg" alt="Slide Image">
<div class="text-block">
<h3>Slide #5 is here</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>
</div>
</div>
</div>
<!--effect #3 -->
<div class="slider-container">
<h2>Effect #3</h2>
<div class="flexbox-slider flexbox-slider-3">
<div class="flexbox-slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-1.jpg" alt="Slide Image">
<div class="text-block">
<h3>Slide #1 is here</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>
</div>
<div class="flexbox-slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-2.jpg" alt="Slide Image">
<div class="text-block">
<h3>Slide #2 is here</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>
</div>
<div class="flexbox-slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-3.jpg" alt="Slide Image">
<div class="text-block">
<h3>Slide #3 is here</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>
</div>
<div class="flexbox-slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-4.jpg" alt="Slide Image">
<div class="text-block">
<h3>Slide #4 is here</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>
</div>
<div class="flexbox-slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-9.jpg" alt="Slide Image">
<div class="text-block">
<h3>Slide #5 is here</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>
</div>
</div>
</div>
<!--effect #4 -->
<div class="slider-container">
<h2>Effect #4</h2>
<div class="flexbox-slider flexbox-slider-4">
<div class="flexbox-slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-1.jpg" alt="Slide Image">
<div class="text-block">
<h3>Slide #1 is here</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>
</div>
<div class="flexbox-slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-2.jpg" alt="Slide Image">
<div class="text-block">
<h3>Slide #2 is here</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>
</div>
<div class="flexbox-slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-3.jpg" alt="Slide Image">
<div class="text-block">
<h3>Slide #3 is here</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>
</div>
<div class="flexbox-slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-4.jpg" alt="Slide Image">
<div class="text-block">
<h3>Slide #4 is here</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>
</div>
<div class="flexbox-slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-9.jpg" alt="Slide Image">
<div class="text-block">
<h3>Slide #5 is here</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>
</div>
</div>
</div>
<!--effect #5 -->
<div class="slider-container">
<h2>Effect #5</h2>
<div class="flexbox-slider flexbox-slider-5">
<div class="flexbox-slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-1.jpg" alt="Slide Image">
<div class="text-block">
<h3>Slide #1 is here</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>
</div>
<div class="flexbox-slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-2.jpg" alt="Slide Image">
<div class="text-block">
<h3>Slide #2 is here</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>
</div>
<div class="flexbox-slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-3.jpg" alt="Slide Image">
<div class="text-block">
<h3>Slide #3 is here</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>
</div>
<div class="flexbox-slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-4.jpg" alt="Slide Image">
<div class="text-block">
<h3>Slide #4 is here</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>
</div>
<div class="flexbox-slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-9.jpg" alt="Slide Image">
<div class="text-block">
<h3>Slide #5 is here</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
 
<div class="slider-containers">
<div class="slider-container">
<h2>Effect #1</h2>
<div class="flexbox-slider flexbox-slider-1">
<div class="flexbox-slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-1.jpg" alt="Slide Image">
<div class="text-block">
<h3>Slide #1 is here</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div></div></div>
<div class="flexbox-slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-2.jpg" alt="Slide Image">
<div class="text-block">
<h3>Slide #2 is here</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div></div></div>
<div class="flexbox-slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-3.jpg" alt="Slide Image">
<div class="text-block">
<h3>Slide #3 is here</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div></div></div>
<div class="flexbox-slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-4.jpg" alt="Slide Image">
<div class="text-block">
<h3>Slide #4 is here</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div></div></div>
<div class="flexbox-slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-9.jpg" alt="Slide Image">
<div class="text-block">
<h3>Slide #5 is here</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div></div></div></div></div></div>
Obtenido de «https://es.wikivoyage.org/wiki/Usuario:Jorge_Abellán/Taller_5»