<!DOCTYPE html>
<html lang="pl">
<html>
<head>
<script type="text/javascript" src="coin-slider.min.js"></script>
<link rel="stylesheet" href="coin-slider-styles.css" type="text/css" />
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<meta charset="utf-8" />
<title>Gry online rok 2000 </title>
<meta name="description" content="Gry online w roku 2000">
<meta name="keywords" content="gry,online,2000">
<meta name="author" content="Konrad Groń,Grzegorz Źrałka">
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
<style>
body
{
background-color: #222222;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c6e87c+0,9ec549+100 */
background: #c6e87c; /* Old browsers */
background: -moz-linear-gradient(top, #c6e87c 0%, #9ec549 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #c6e87c 0%,#9ec549 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #c6e87c 0%,#9ec549 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c6e87c', endColorstr='#9ec549',GradientType=0 ); /* IE6-9 */
font-size: 24px;
color: white;
width: 100%;
min-width:1440px;
}
#content
{
}
#coin-slider
{ width: 70%;
text-align: center;
float:left;
}
#lewo{
width: 14%;
margin-right: 1%;
float: left;
text-align:center;
<!-- background-color: #333333; -->
text-align: center;
height: 900px;
}
#prawo{
width: 14%;
float:left;
background-color: #333333;
height: 900px;
margin-left: 1%;
}
#menu
{
background-color: #303030;
margin-top: 20px;
color: #ffffff;
padding: 10px;
margin-bottom: 20px;
}
.option
{
float: left;
min-width: 50px;
height: 25px;
font-size: 28px;
padding: 10px;
border-right: 2px dotted #444444;
opacity: 0.8;
}
.option:hover
{
background-color: #000000;
cursor: pointer;
}
#pojemnik
{
margin-left: 26%;
}
.fifa
{
background-color:#93F600;
border-style: solid;
margin-bottom: 5px;
color:black;
border-color:#FFFFF0;
border-top-left-radius:12px 20px;
border-top-right-radius:14px 22px;
border-bottom-right-radius:16px 24px;
border-bottom-left-radius:18px 26px;
}
.fifa:hover
{
border-style: solid;
text-shadow:0 0 6px red;
margin-bottom: 5px;
background-color: #B5F822;
}
#stopka
{
font-size: 18px;
background-color: #000000;
text-align: center;
}
#logostrony
{
text-align: center;
font-size: 30px;
letter-spacing: 1px;
}
</style>
</head>
<body >
<div id="content">
<div id="logostrony">
ROK 2000
</div>
<div id="menu">
<div id="pojemnik">
<div class="option">Strona główna</div>
<div class="option">Gry Online</div>
<div class="option">Gry</div>
<div class="option">Sprzęt</div>
<div class="option">O projekcie</div>
<div style="clear:both;"></div>
</div>
</div>
<div id="lewo">
<div class="fifa" onclick="ustawslajd(2)" style="cursor:pointer;">
FIFA 2001
</div>
<div class="fifa" onclick="ustawslajd(3)" style="cursor:pointer;">
GTA 2
</div>
</div>
<div id='coin-slider'>
<a href="asd.jpg" target="_blank">
<img src='asd.jpg' >
<span>
Description for img01
</span>
</a>
<a href="imgN_url">
<img src='asd.jpg' >
<span>
Description for imgN
</span>
</a>
</div>
<div id="prawo">
</div>
<div style="clear:both;"></div>
<div id="stopka"> Lorem Ipsum dolores et </div>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({ width: 900, navigation: false, delay: 5000 });
});
</script>
</html>
A korzystam ze slaidera
http://workshop.rs/2010/04/coin-slider-image-slider-with-unique-effects/
