<div class="bannerbase">

<div class="sp-slideshow">

           

  <input id="button-1" type="radio" name="radio-set" class="sp-selector-1" checked="checked" />

  <label for="button-1" class="button-label-1"></label>

   

  <input id="button-2" type="radio" name="radio-set" class="sp-selector-2" />

  <label for="button-2" class="button-label-2"></label>

   

  <input id="button-3" type="radio" name="radio-set" class="sp-selector-3" />

  <label for="button-3" class="button-label-3"></label>

   

  <input id="button-4" type="radio" name="radio-set" class="sp-selector-4" />

  <label for="button-4" class="button-label-4"></label>

   

  <input id="button-5" type="radio" name="radio-set" class="sp-selector-5" />

  <label for="button-5" class="button-label-5"></label>

   

  <label for="button-1" class="sp-arrow sp-a1"></label>

  <label for="button-2" class="sp-arrow sp-a2"></label>

  <label for="button-3" class="sp-arrow sp-a3"></label>

  <label for="button-4" class="sp-arrow sp-a4"></label>

  <label for="button-5" class="sp-arrow sp-a5"></label>

   

  <div class="sp-content">

      <div class="sp-parallax-bg"></div>

      <ul class="sp-slider clearfix">

          <li><div style="width: 800px; height: 375px;"><div class="firstslide"><div class="links"><a href="/index.php">Index</a></div>

<div class="links"><a href="//jegvirag.gportal.hu">BELÉPÉS</a></div>

<div class="links"><a href="//jegvirag.gportal.hu">FŐOLDAL</a></div>

<div class="links"><a href="//jegvirag.gportal.hu">HTML KÓD</a></div>

<div class="links"><a href="//jegvirag.gportal.hu">DESIGN</a></div>

<div class="links"><a href="//jegvirag.gportal.hu">SEGÍTEK</a></div>

<div class="links"><a href="//jegvirag.gportal.hu">KÓDPROBA</a></div>

<div class="links"><a href="//jegvirag.gportal.hu">VENDÉGKÖNYV</a></div></div></div></li>

          <li><div style="width:800px;"><center>

<table><tr><td><div class="bannerborder" style="width:300px; margin-top:25px;margin-left:100px; padding: 15px;"><center>

Az oldal PORTÁLÉPÍTŐ mely DESIGN/SCRIPT/

HTMLkód/TUTORIAL/SEGÍTSÉG/-et tartalmaz.

2005.04.12.-től várom a segítségre szoruló gportálost.Ha bármi kérdésed lenne irhatsz az 

oldalon a VENDÉGKÖNYVBE vagy irhat e-mailt a virag-78@gportal.hu 

JégVirág

</div></center></div></td>

 

<td><div class="bannerborder" style="width:300px; margin-top:25px;margin-left:25px; padding: 15px;"><center><div class="bannercontent" style="width:270px; height:225px; padding:5px; text-align:left;"><center>szoveg

</center></div></center></div></td></tr></table></center></div></li>

          <li><div style="width: 800px; height: 375px;"><center>

<table><tr><td><div class="bannerborder" style="width:300px; margin-top:25px;margin-left:150px; padding: 15px;"><center><div class="bannercontent" style="width:270px; height:225px; padding:5px; text-align:justify"><center>szoveg</center><br></div></center></div></td>

 

<td><div class="bannerborder" style="width:300px; margin-top:25px;margin-left:25px; padding: 15px;"><center><div class="bannercontent" style="width:270px; height:225px; padding:5px; text-align:left;"><center>szoveg</center></div></center></div></td></tr></table></center></div></li>

          <li><div style="width: 800px; height: 375px;"><center>

<table><tr><td><div class="bannerborder" style="width:300px; margin-top:25px;margin-left:200px; padding: 15px;"><center><div class="bannercontent" style="width:270px; height:225px; padding:5px; text-align:justify"><center>szöveg</center><br></div></center></div></td>

 

<td><div class="bannerborder" style="width:300px; margin-top:25px;margin-left:25px; padding: 15px;"><center><div class="bannercontent" style="width:270px; height:225px; padding:5px; text-align:left;"><center>szoveg</center></div></center></div></td></tr></table></center></div></li>

          <li><div style="width: 800px; height: 375px;"><center>

<table><tr><td><div class="bannerborder" style="width:300px; margin-top:25px;margin-left:250px; padding: 15px;"><center><div class="bannercontent" style="width:270px; height:225px; padding:5px; text-align:justify"><center>szöveg</center><br></div></center></div></td>

 

<td><div class="bannerborder" style="width:300px; margin-top:25px;margin-left:25px; padding: 15px;"><center><div class="bannercontent" style="width:270px; height:225px; padding:5px; text-align:left;"><center>szöveg</center></div></center></div></td></tr></table></center></div></li>

      </ul>

  </div>     

</div>

</div>

<STYLE>

/*********************

BANNER BASE

*********************/

 

.bannerbase {width: 850px; height: 400px; background-image: url(//jegvirag.gportal.hu/portal/jegvirag/image/logo_1425659369.jpg);}

 

/*********************

BANNER BASE CODING

*********************/

 

.sp-slideshow { position: relative; margin: 0; width: 850px; height: 400px; }

.sp-content {position: relative;width: 100%;height: 100%;overflow: hidden;}

 

.sp-parallax-bg {-webkit-background-size: cover; -moz-background-size: cover;background-size: cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;}

 

.sp-slideshow input {display: none; position: absolute;bottom: 10px;left: 50%;width: 9px;height: 9px;z-index: 1001;cursor: pointer;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);opacity: 0;}

 

.sp-slideshow input + label {position: absolute;bottom: 10px;left: 50%;width: 6px;height: 6px;display: block;z-index: 1000;border: 2px solid #423a43;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;-webkit-transition: background-color linear 0.1s;-moz-transition: background-color linear 0.1s;-o-transition: background-color linear 0.1s;-ms-transition: background-color linear 0.1s;transition: background-color linear 0.1s;}

.sp-slideshow input:checked + label {background-color: #0E0B12!important;}

 

 

.sp-selector-1, .button-label-1 {margin-left: -36px;}

.sp-selector-2, .button-label-2 {margin-left: -18px;}

.sp-selector-3, .button-label-3 {margin-left: 0px;}

.sp-selector-4, .button-label-4 {margin-left: 18px;}

.sp-selector-5, .button-label-5 {margin-left: 36px;}

 

.sp-arrow {position: absolute;top: 50%;width:25px;height: 50px;margin-top: -19px;display: none;opacity: 0.8;cursor: pointer;z-index: 1000;background: transparent url(http://i59.tinypic.com/29ymejc.jpg) no-repeat;-webkit-transition: opacity linear 0.3s;-moz-transition: opacity linear 0.3s;-o-transition: opacity linear 0.3s;-ms-transition: opacity linear 0.3s;

transition: opacity linear 0.3s;}

.sp-arrow:hover{opacity: 1;}

.sp-arrow:active{margin-top: -18px;}

.sp-selector-1:checked ~ .sp-arrow.sp-a2,

.sp-selector-2:checked ~ .sp-arrow.sp-a3,

.sp-selector-3:checked ~ .sp-arrow.sp-a4,

.sp-selector-4:checked ~ .sp-arrow.sp-a5 {right: 10px;display: block;background-position: top right;}

.sp-selector-2:checked ~ .sp-arrow.sp-a1,

.sp-selector-3:checked ~ .sp-arrow.sp-a2,

.sp-selector-4:checked ~ .sp-arrow.sp-a3,

.sp-selector-5:checked ~ .sp-arrow.sp-a4 {left: 10px;display: block;background-position: top left;}

 

.sp-slideshow input:checked ~ .sp-content {-webkit-transition: background-position linear 0.6s, background-color linear 0.8s;-moz-transition: background-position linear 0.6s, background-color linear 0.8s;-o-transition: background-position linear 0.6s, background-color linear 0.8s;-ms-transition: background-position linear 0.6s, background-color linear 0.8s;transition: background-position linear 0.6s, background-color linear 0.8s;}

 

.sp-slideshow input:checked ~ .sp-content .sp-parallax-bg {-webkit-transition: background-position linear 0.7s;-moz-transition: background-position linear 0.7s;-o-transition: background-position linear 0.7s;-ms-transition: background-position linear 0.7s;transition: background-position linear 0.7s;}

 

.sp-slider { position: relative;left: 0; width: 500%;height: 100%;list-style: none; margin: 0;padding: 0;-webkit-transition: left ease-in 0.8s; -moz-transition: left ease-in 0.8s; -o-transition: left ease-in 0.8s; -ms-transition: left ease-in 0.8s;transition: left ease-in 0.8s; }

 

.sp-slider > li {

height:300;

padding: 25px;

width: 800px;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

-o-box-sizing: border-box;

-ms-box-sizing: border-box;

box-sizing: border-box;

float:left;

text-align:center;

opacity:0.4; 

-webkit-transition:opacity ease-in 0.4s 0.8s;

-moz-transition:opacity ease-in 0.4s 0.8s;

-o-transition:opacity ease-in 0.4s 0.8s;

-ms-transition:opacity ease-in 0.4s 0.8s;

transition:opacity ease-in 0.4s 0.8s; } 

 

.sp-slider > li img{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;display: block;margin: 0 auto;padding: 40px 0 50px 0;max-height: 100%;max-width: 100%;}

 

 

input.sp-selector-1:checked ~ .sp-content .sp-slider {left: 0;}

input.sp-selector-2:checked ~ .sp-content .sp-slider {left: -100%;}

input.sp-selector-3:checked ~ .sp-content .sp-slider {left: -200%;}

input.sp-selector-4:checked ~ .sp-content .sp-slider {left: -300%;}

input.sp-selector-5:checked ~ .sp-content .sp-slider {left: -400%;}

 

input.sp-selector-1:checked ~ .sp-content .sp-slider > li:first-child,

input.sp-selector-2:checked ~ .sp-content .sp-slider > li:nth-child(2),

input.sp-selector-3:checked ~ .sp-content .sp-slider > li:nth-child(3),

input.sp-selector-4:checked ~ .sp-content .sp-slider > li:nth-child(4),

input.sp-selector-5:checked ~ .sp-content .sp-slider > li:nth-child(5){ opacity: 1; }

 

 

 

/*********************

INNER BANNER

*********************/

 

.bannerborder { 

background: #FDFED6; /* Old browsers */

background: -moz-linear-gradient(top,  #FDFED6 0%, #F99198 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FDFED6), color-stop(100%,#F99198)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  #FDFED6 0%,#0b090d 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  #FDFED6 0%,#F99198 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  #FDFED6 0%,#F99198 100%); /* IE10+ */

background: linear-gradient(to bottom,  #FDFED6 0%,#F99198 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FDFED6', endColorstr='#F99198',GradientType=0 ); /* IE6-9 */

border:2px solid #808080;

padding:10px;

opacity: .98;

}

 

.bannercontent{

background: #070707;

background-image: url(//jegvirag.gportal.hu/portal/jegvirag/image/gallery/1425836927_77.jpg);

border:2px solid #808080;

font-family: 'Rokkitt', serif;

font-size: 15px;

opacity: 1;

width:270px; height:225px; padding:5px; overflow:auto; text-align:center;

}

 

.flourish{

content: url("//jegvirag.gportal.hu/portal/jegvirag/image/gallery/1425836927_77.jpg");

height: 25px; width: 55px;

}

 

</STYLE>