[html]<center>
<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">

      <ul class="sp-slider clearfix">

<li><div class="slideone">
<div class="oblojka">факультеты
<br><img src="http://funkyimg.com/i/2HPej.png"></div> </div></li>

<li><div class="slidetwo">

<div class="telo">
<div class="osnova">
<div style="height:19px; width:500px; position:relative;  margin-top: -10;"><center>✦<B>ФАКУЛЬТЕТ ОГНЯ</B>✦</center></div>
<div style="height:220px; width:240px; position:relative; margin-top: 10px; margin-left: 19px;  overflow: auto; padding-top: 5px;">
<b>талисман</b> - дракон
<br><b>девиз</b> - "пламя загорается с искры"
<br><b>цвет</b> - рубиновый
<br><b>элемент</b> - золото
<br><b>староста факультета:</b>
<br><b>старосты курсов:</b>
<br><b>декан:</b>
<br><b>способности студентов:</b>
<br>Пирокинез - управление огнем.
<br>Пиропсионез - способность изменять силу огня, его направление, а также придавать пламени любую форму (животные, предметы, очертания человека).</div>
<div style="height:225px; width:200px; position:relative;  margin-top: -220px; margin-left: 279px;  overflow: auto; padding-top: 5px;">
<img src="http://funkyimg.com/i/2HHLJ.png"></div>
<br>Студенты факультета огня славятся своими самостоятельностью и стремлением быть независимыми. Зачастую вспыльчивые и неусидчивые, они не любят долгих и нудных лекций, больше предпочитая проводить время за практическими занятиями. Обладатели живого ума и острого языка, эти маги зачастую одни из первых способны решить сложные задачи в экстремальных условиях, умело извлекая из большого потока информации нужные факты. В делах, требующих усидчивости и терпения, часто теряют интерес и могут бросить работу незаконченной, редко и с неохотой возвращаясь обратно к поставленной задаче. Эгоисты и собственники, они, тем не менее притягивают к себе своей харизмой и хорошим чувством юмора, однако, есть и те, кто, наоборот, отталкивают от себя людей излишней прямолинейностью и грубостью. Чаще всего сконцентрированы на карьере и получении материальной выгоды, нежели на семейных ценностях.
<br>Факультет огня ведет активную деятельность в спортивных мероприятиях академии, частые гости на магических дуэлях. Несмотря на свою независимость, из выпускников факультета огня, как правило, получаются хорошие члены ордена и военные, которые достаточно быстро поднимаются вверх по карьерной лестнице. Реже из них получаются люди творчества, в медицине же их почти не встречается.
<br><br><CENTER><b>Ведут негласную войну с факультетом воды, с факультетом земли остаются в нейтральных отношениях, а вот с магами воздуха часто находят общий язык.</b></center>
</div>

</div>
</div></li>

<li><div class="slidethree"><div class="telo">
<div class="osnova">
<div style="height:19px; width:500px; position:relative;  margin-top: -10;"><center>✦<B>ФАКУЛЬТЕТ ВОДЫ</B>✦</center></div>
<div style="height:220px; width:240px; position:relative; margin-top: 10px; margin-left: 19px;  overflow: auto; padding-top: 5px;">
<br><br><b>талисман</b> - русалка
<br><b>девиз</b> - "вода есть жизнь"
<br><b>цвет</b> - аквамарин
<br><b>элемент</b> - белый коралл
<br><b>староста факультета:</b>
<br><b>старосты курсов:</b>
<br><b>декан:</b>
<br><b>способности студентов:</b>
<br>Гидрокинез - контроль над водой в жидком и газообразном(на последних курсах) состоянии.</div>
<div style="height:225px; width:200px; position:relative;  margin-top: -220px; margin-left: 279px;  overflow: auto; padding-top: 5px;">
<img src="http://funkyimg.com/i/2HHLF.png"></div>
<br>СЭмоции и чувства — вот главные приоритеты студентов факультета воды. Как своя стихия – вода обходит возникшие преграды, так и водники всегда смогут найти выход, даже из, казалось бы, безвыходной ситуации. Они люди творческие: легко увлекаются новым, но и быстро остывают к старому. С учебой у них сложные отношения: если предмет их увлекает, то студенты готовы изучать его от корки до корки, зарываясь в учебники с головой. В противном же случае учатся с неохотой – «для галочки». Маги воды достаточно чувствительные натуры, при этом также отлично разбираются в душах других. Они всегда поддержат и выслушают, но и легко могут обидеться, если сказать им что-то не то.
<br>Факультет воды предпочитает проводить свободное время за творчеством, участвуя во многих фестивалях примитивных. Как правило, выпускники становятся деятелями культуры или находят свое призвание в средствах масс-медиа. В военном деле редко достигают высот, но вот в дипломатии они настоящие мастера. 
<br><br><CENTER><b>Имеют сложные, можно сказать конфликтные отношения с факультетом огня, с факультетом воздуха поддерживают неплохие приятельские отношения, а с факультетом земли вероятнее всего найдут общий язык.</b></center>
</div>
</div></li>

<li><div class="slidefour">
<div class="telo"><div class="osnova">
<div style="height:19px; width:500px; position:relative;  margin-top: -10;"><center>✦<B>ФАКУЛЬТЕТ ВОЗДУХА</B>✦</center></div>
<div style="height:220px; width:240px; position:relative; margin-top: 10px; margin-left: 19px;  overflow: auto; padding-top: 5px;">
<br><br><b>талисман</b> - сильф
<br><b>девиз</b> - "и легкий бриз может стать ураганом"
<br><b>цвет</b> - фиолетовый
<br><b>элемент</b> - серебро
<br><b>староста факультета:</b>
<br><b>старосты курсов:</b>
<br><b>декан:</b>
<br><b>способности студентов:</b>
<br>Аэрокинез - ментальный контроль над воздушными потоками, газообразными веществами.</div>
<div style="height:225px; width:200px; position:relative;  margin-top: -220px; margin-left: 279px;  overflow: auto; padding-top: 5px;">
<img src="http://funkyimg.com/i/2HHLG.png"></div>
<br>Несмотря на распространенное мнение, что маги, обладающие воздушной стихией ветреные и непостоянные натуры, студентов факультета воздуха отличает от других вовсе не это. Интеллект и возможность делать несколько дел одновременно – вот что выделяет воздушных магов среди остальных.  Способность с легкостью преодолевать кастовые и сословные границы, веселый нрав и нестандартное мышление –эти маги не так просты, как кажутся на первый взгляд. Студенты факультета воздуха не тратят много времени на домашнюю работу, при этом играючи получают хорошие отметки. Они принимают взвешенные и логичные решения, но при этом способны на неожиданные и неординарные поступки и любят экспериментировать. 
<br>Студенты факультета воздуха активно принимают участие во всех мероприятиях академии, не зависимо от их направленности. Выпускники, как правило, получают работу в ордене, либо выбирают любую другую профессию примитивных: от ученого до художника.
<br><br><CENTER><b>Сложно сходятся со студентами факультета земли, неплохо общаются с факультетом воды и в дружеских отношениях с факультетом огня. </b></center>
</div></div></div></li>

<li><div class="slidefive">
<div class="telo"><div class="osnova">
<div style="height:19px; width:500px; position:relative;  margin-top: -10;"><center>✦<B>ФАКУЛЬТЕТ ЗЕМЛИ</B>✦</center></div>
<div style="height:230px; width:250px; position:relative; margin-top: 10px; margin-left: 19px;  overflow: auto; padding-top: 5px;">
<br><b>талисман</b> - гном
<br><b>девиз</b> - "из земли мы пришли, в землю и уйдем"
<br><b>цвет</b> - зеленый
<br><b>элемент</b> - дерево
<br><b>староста факультета:</b>
<br><b>старосты курсов:</b>
<br><b>декан:</b>
<br><b>способности студентов:</b>
<br>Генерация сейсмической энергии - Позволяет генерировать в организме сейсмическую энергию, и вызывать при с её помощью страшные по силе землятресения.
<br>Контроль над растениями – возможность контролировать рост растений.</div>
<div style="height:225px; width:200px; position:relative;  margin-top: -220px; margin-left: 279px;  overflow: auto; padding-top: 5px;">
<img src="http://funkyimg.com/i/2HHLH.png"></div>
<br>Факультет земли уже много лет имеет репутацию самого надежного и спокойного факультета академии. Они ценят порядок и стабильность, а их трудолюбию могут позавидовать многие. Даже если магам земли не получается схватывать материал на лету, они добьются его понимания с помощью долгого изучения. Не ставят себе великих целей, считая, что и в обычной жизни много достойных занятий и стремлений. Студенты факультета земли стараются быть правдивыми и такого же требуют от других. Из них получаются хорошие лидеры - те, кто с самого начала взвесят все риски и последствия, продумают все, до мелочей и только потом сделают единственный - верный шаг.
<br>Факультет земли считается лучшим в зельеварении и управлении. Уже несколько десятков лет студ.совет возглавляют именно маги земли. Выпускники обычно идут в политику или медицину: и там, и там, по их мнению, они принесут больше пользы, чем в других сферах.
<br><br><CENTER><b>Не понимают и не одобряют студентов из факультета воздуха, прохладно относятся к факультету огня и неплохо сходятся с факультетом воды.</b></center>
</div></div>
</div></li>

</ul>
</div>   
</div>
</div></div>
</center>

<style type="text/css">

.sp-slideshow {  position: relative; margin: 0px auto; width: 900px; max-width: 550px; height: 650px;}

.sp-content { background: #7d7f72 url(http://i57.tinypic.com/6qi9o1.jpg) repeat scroll 0 0;position: relative;width: 100%;height: 100%;overflow: hidden;}

.sp-slideshow input {position: absolute;bottom: 15px;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: 15px;left: 50%;width: 6px;height: 6px;display: block;z-index: 1000; border-radius: 100%; background-color: #865544; border: 3px solid #865544; }

.sp-slideshow input:checked + label { background-color: #e6cda6; }

.sp-selector-1, .button-label-1 {margin-left: -72px;}
.sp-selector-2, .button-label-2 {margin-left: -54px;}
.sp-selector-3, .button-label-3 {margin-left: -36px;}
.sp-selector-4, .button-label-4 {margin-left: -18px;}
.sp-selector-5, .button-label-5 {margin-left: 0px;}
.sp-selector-6, .button-label-6 {margin-left: 18px;}

.sp-arrow {position: absolute;top: 97%;width: 28px;height: 38px; margin-top: -19px; display: none;opacity: 0.8;cursor: pointer;z-index: 1000;background: transparent url(http://i59.tinypic.com/2ahlhc.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,
.sp-selector-5:checked ~ .sp-arrow.sp-a6,
.sp-selector-6:checked ~ .sp-arrow.sp-a1,
.sp-selector-7:checked ~ .sp-arrow.sp-a8,
.sp-selector-8:checked ~ .sp-arrow.sp-a9,
.sp-selector-9:checked ~ .sp-arrow.sp-a1 {
right: 15px;
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,
.sp-selector-6:checked ~ .sp-arrow.sp-a5,
.sp-selector-7:checked ~ .sp-arrow.sp-a6,
.sp-selector-8:checked ~ .sp-arrow.sp-a7,
.sp-selector-9:checked ~ .sp-arrow.sp-a8 {
left: 15px;
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;}

input.sp-selector-1:checked ~ .sp-content {background-position: 0 0;background-color: #727b7f;}
input.sp-selector-2:checked ~ .sp-content {background-position: -100px 0;background-color: #7f7276;}
input.sp-selector-3:checked ~ .sp-content {background-position: -200px 0;background-color: #737f72;}
input.sp-selector-4:checked ~ .sp-content {background-position: -300px 0;background-color: #79727f;}
input.sp-selector-5:checked ~ .sp-content {background-position: -400px 0;background-color: #7d7f72;}
input.sp-selector-6:checked ~ .sp-content {background-position: -500px 0;background-color: #7d7f72;}

input.sp-selector-1:checked ~ .sp-content .sp-parallax-bg {background-position: 0 0;}
input.sp-selector-2:checked ~ .sp-content .sp-parallax-bg {background-position: 0 0;}
input.sp-selector-3:checked ~ .sp-content .sp-parallax-bg {background-position: 0 0;}
input.sp-selector-4:checked ~ .sp-content .sp-parallax-bg {background-position: 0 0;}
input.sp-selector-5:checked ~ .sp-content .sp-parallax-bg {background-position: 0 0;}
input.sp-selector-6:checked ~ .sp-content .sp-parallax-bg {background-position: 0 0;}

.sp-slider { position: relative;left: 0; width: 1000%;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: 100%;padding: 0 60px;float: left;text-align: center;opacity: 0.9; -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: 0px!important;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-6:checked ~ .sp-content .sp-slider {left: -500%;}
input.sp-selector-7:checked ~ .sp-content .sp-slider {left: -600%;}

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),
input.sp-selector-6:checked ~ .sp-content .sp-slider > li:nth-child(6),
input.sp-selector-7:checked ~ .sp-content .sp-slider > li:nth-child(8){opacity: 1;}

/* SLIDES */
.slideone { width: 550px; height: 650px; padding:0px; margin-left:-60px;}
.slidetwo { width: 550px; height: 650px; padding:0px; margin-left:-120px;}
.slidethree { width: 550px; height: 650px; padding:0px; margin-left:-120px;}
.slidefour { width: 550px; height: 650px; padding:0px; margin-left:-120px;}
.slidefive { width: 550px; height: 650px; padding:0px; margin-left:-120px;}
.slidesix { width: 550px; height: 650px; padding:0px; margin-left:-120px;}

/* COVER */
.covfont { text-transform: uppercase; font-family: 'EB Garamond', serif; font-size: 50px;  width: 550px; position: relative; top: 100px; line-height: 100%; color: #000000; text-shadow: 1px 1px 0px #C4C4C4, 2px 2px 0px #7B7B7B; }
.covfont2 { text-transform: uppercase; font-family: 'EB Garamond', serif; font-size: 35px; text-align:center; text-shadow: 1px 1px 0px #C4C4C4, 2px 2px 0px #7B7B7B; color: #000000; width: 550px; position: relative; top: 10px }
.picfont { height: 30px;  width: 165px; position: relative; top: 200px; left: 25px; font-family: 'Covered By Your Grace', cursive; font-size: 15px; color: #000000; text-align:center; }

/* VTOROI KOD YELLOW */
.telo {  margin:0 auto;  width:550px;  background: #242627;  position:relative;  line-height:100%; }
.telo1 {  margin:0 auto;  width:550px; position:relative;  line-height:100%;  }
.osnova {  background: #bac8c6;  position:relative; height: 650px; margin-right:15px;  padding-top:20px; padding-left:20px; padding-right:10px; font-family:Open Sans;  font-weight:500;  font-size:12px;  line-height:15px;  color:#000;  text-align:justify;}
.osnova b {  color: #13191b;  font-family:Poppins;  font-weight:600;}
.shapka {  background:url(http://funkyimg.com/i/2HP6x.png);  height:100px;  position:relative;}
.textshapki {  position:absolute;  left:0; top:50px;  width:550px;  font-family:Poppins;  font-weight:600;  font-size:9px;  letter-spacing:5px;  text-transform:uppercase;  text-align:center;  line-height:100%;  color:#fff; text-shadow: 1px 1px 0px #000, 2px 2px 0px #7B7B7B;}
.polosa {  width:200px;  height:2px;  background:#242627;  position:absolute;  top:65px; left:173px;  line-height:100%;}
.oblojka { height: 650px;  background: #90b2b3; text-transform: uppercase; font-family: Poppins; font-size: 55px;  width: 550px;   line-height: 100%; color: #242627; text-shadow: 0px 1px 1px #fff, 2px 2px 0px #691b0c; padding-top: 110px; }

</style>

[/html]

http://funkyimg.com/i/2J8s6.png