457ded1164
TODO Selector configuration for easier implementation
86 lines
4.0 KiB
HTML
86 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
|
|
<title>Slider - Simon Gehrig</title>
|
|
|
|
<!--ENTER THIS IN YOUR HEAD-SECTION-->
|
|
<link rel="stylesheet" href="slider.css" type="text/css">
|
|
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
|
|
<script type="application/javascript" rel="script" src="bannerslider.js"></script>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<span class="brand">Brand Name</span>
|
|
</header>
|
|
<div id="content">
|
|
<div class="bannergroup">
|
|
<div class="banneritem">
|
|
<img src="https://unsplash.it/750/500/?random">
|
|
<!--<img src="http://lorempixel.com/750/500/">-->
|
|
<a href="#">
|
|
<div class="bannertext">Fotos von unsplash.it.</div>
|
|
</a>
|
|
</div>
|
|
<div class="banneritem">
|
|
<img src="https://unsplash.it/750/501/?random">
|
|
<!--<img src="http://lorempixel.com/750/501/">-->
|
|
<a href="#">
|
|
<div class="bannertext">Dies ist ein längerer Text.</div>
|
|
</a>
|
|
</div>
|
|
<div class="banneritem">
|
|
<img src="https://unsplash.it/750/502/?random">
|
|
<!--<img src="http://lorempixel.com/750/502/">-->
|
|
<a href="#">
|
|
<div class="bannertext">Dies ist ein Text.</div>
|
|
</a>
|
|
</div>
|
|
<div class="banneritem">
|
|
<img src="https://unsplash.it/750/503/?random">
|
|
<!--<img src="http://lorempixel.com/750/503/">-->
|
|
<a href="#">
|
|
<div class="bannertext">Wort.</div>
|
|
</a>
|
|
</div>
|
|
<div class="banneritem">
|
|
<img src="https://unsplash.it/750/504/?random">
|
|
<!--<img src="http://lorempixel.com/750/503/">-->
|
|
<a href="#">
|
|
<div class="bannertext">Simon hat das geschrieben.</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<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, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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, no sea
|
|
takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
|
<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, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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, no sea
|
|
takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
|
<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, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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, no sea
|
|
takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
|
</div>
|
|
</div>
|
|
<footer>
|
|
<span>
|
|
© SIMON GEHRIG 2017
|
|
</span>
|
|
</footer>
|
|
|
|
</body>
|
|
</html> |