Система богов

Код:
<!--HTML-->
<style>

.activ2 {float: left;}

.notebook2 {
    width: 600px;
    height: 450px;
    position: relative;
}

.notebook2 > input {
    display: none;
}

.notebook2 > div {
    position: absolute;
    box-sizing: border-box;
    top: 30px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    border-radius: 10px;
    padding: 0px 1em;
z-index: 0;
    
 background: url("http://sf.uploads.ru/cY7ov.png");
  border: 1px solid #e5e5ee;
  border-top: 0px solid #036ec0;
  border-bottom: 4px solid #036ec0;
 -webkit-box-shadow:0 1px 4px #97afc9, 0 0 30px #97afc9 inset;

    transition: all 0.5s ease 0s, z-index 0s 0.5s;
}

.notebook2 > div > *:first-child {
    display: block;
    position: absolute;
    box-sizing: border-box;
    top: -35px;
    width: 130px;
    height: 35px;

    font-family:Bebas Neue;
    font-size: 16px;

background: #a4bad2 url("");
padding: 2px;
border: 1px solid #e4e4ed;
border-top: 2px solid #dadadc;
border-bottom: 1px solid #dadadc;

    color: #fff;
    line-height: 28px;
    cursor: pointer;
    text-align: center;

    transition: all 0.5s ease 0s;
}

.notebook2 > div > *:not(:first-child) {
    opacity: 0;
    transition: all 0.5s ease 0s;
}

.notebook2 > div:nth-of-type(1) > *:first-child { left: 20px; }
.notebook2 > div:nth-of-type(2) > *:first-child { left: 157px; }
.notebook2 > div:nth-of-type(3) > *:first-child { left: 295px; }
.notebook2 > div:nth-of-type(4) > *:first-child { left: 430px; }


.notebook2 > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.notebook2 > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.notebook2 > input:nth-of-type(3):checked ~ div:nth-of-type(3),
.notebook2 > input:nth-of-type(4):checked ~ div:nth-of-type(4)
 {
    z-index: 10;

    transition: all 0.5s ease 0.5s, z-index 0s 0.5s;
}

.notebook2 > input:nth-of-type(1):checked ~ div:nth-of-type(1) > *:first-child,
.notebook2 > input:nth-of-type(2):checked ~ div:nth-of-type(2) > *:first-child,
.notebook2 > input:nth-of-type(3):checked ~ div:nth-of-type(3) > *:first-child,
.notebook2 > input:nth-of-type(4):checked ~ div:nth-of-type(4) > *:first-child
{
    color: #d3d3dd;
    transition: all 0.5s ease 0.5s;
}

.notebook2 > input:nth-of-type(1):checked ~ div:nth-of-type(1) > *:not(:first-child),
.notebook2 > input:nth-of-type(2):checked ~ div:nth-of-type(2) > *:not(:first-child),
.notebook2 > input:nth-of-type(3):checked ~ div:nth-of-type(3) > *:not(:first-child),
.notebook2 > input:nth-of-type(4):checked ~ div:nth-of-type(4) > *:not(:first-child)

 {

opacity: 3;
    transition: all 0.5s ease 0.5s;
}

.oppa {
    width: 630px;
    height: 630px;
    margin: 0 auto;
    padding: 5px;
border-radius: 40px 20px 40px 20px; 
    background: url('http://s1.uploads.ru/zunJl.png');
    background-repeat: repeat;
}




</style>

<div class="oppa">
<div style="margin-left: 10px; text-align: center; font-family: Nautilus Pompilius;  color: #ffffff;  text-shadow: 1px 1px 0px #1f1228;position: relative;letter-spacing: px; font-size: 36px;">Боги Олимпа</div>
<br>

<center><img src="http://s2.uploads.ru/wD3R6.gif"></center>
<div style=" border-radius: 40px 40px 40px 40px; background-color: rgba(220,220,220,0.3);">
<div style="margin-left: 10px; text-align: center; font-family:font=Georgia;  color: #ffffff;  text-shadow: 1px 1px 0px #1f1228;position: relative;letter-spacing: px; font-size: 12px;">
<center>Что представляет из себя наша система и почему именно Греческие Боги<br>
Поскольку мы решили сделать форум в жанре реал-лайф, нам нужна была какая-нибудь особенно интересная изюминка. Идея с Богами возникла случайно и пришлась по вкусу всем администраторам. Мы надеемся, понравится и вам =) По-крайней мере, мы собираемся сделать все для того, чтобы так и было.<br>
Итак, все просто: имеются четыре команды: <b>Зевса, Аида, Геры и Гелиоса.</b> Каждую из них возглавляет один из администраторов. <br>

<center><img src="http://s7.uploads.ru/7PaXM.png"><img src="http://se.uploads.ru/pOAiV.png"><img src="http://s4.uploads.ru/vGq2W.png"><img src="http://s3.uploads.ru/uQKeV.png"></center>
Игроки попадают в команды рандомно, это будет зависеть от того, кто из администраторов примет их анкету. Конечно же, мы будем стараться, чтобы в каждой команде игроков было поровну.<br>

У каждого игрока в профиле будет стоять иконка, обозначающая, к какой команде он принадлежит. <br>
Игроки своей активностью будут приносить команде баллы. Итоги будут подводиться каждые три недели, а результаты можно будет увидеть в таблице и в специальной теме. Победители получают почет и, конечно же, поощрения и призы.<br>
Как можно получить баллы<br>
<b>Баллы можно получить за: </b><br>
- Посты - 10 баллов за 1 пост в любом разделе.<br>
- Выполнение специальных заданий. 1 задание = 1 балл. Кроме того, если за три недели вы успеваете выполнить ряд специальных заданий в одном блоке, то получаете не только красивую плашку, но и пять дополнительных баллов для команды.<br>
Все участники команды получают деньги, а также разные интересные и полезные подарки от администрации <br>
И это все только начало, после принятия для вас будет отдельная тема где вы сможете ознакомиться с дополнительными бонусами.<br></center>

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

<br>

<center>

<div class="notebook2">
    <input type="radio" name="notebook2a" id="notebook2a_1" checked="checked">
    <input type="radio" name="notebook2a" id="notebook2a_2">
    <input type="radio" name="notebook2a" id="notebook2a_3">
    <input type="radio" name="notebook2a" id="notebook2a_4">


    <div>
        <label for="notebook2a_1">#teamzeus</label><br>
     <div class="activ2" style="margin-left: -70px; -moz-border-radius: 110px;
border-radius: 110px;height:110px;width:110px;background-image:url('http://sa.uploads.ru/8dBSy.gif');border: 6px solid #026a36;text-align: center; margin-left: 10px; position: relative;"></div>

<div class="activ2" style="-moz-border-radius: 35px; border-radius: 35px; height:40px; width:460px; margin-left: 98px; margin-top: -90px; background-color: #026a36; text-align: center;  font-family: Bebas Neue; color: #fff; font-style: italic; font-size: 35px;">
Команда Зевса</div>


    </div>



    <div>
        <label for="notebook2a_2">#teamhera</label><br>
      <div class="activ2" style="margin-left: -70px; -moz-border-radius: 110px;
border-radius: 110px;height:110px;width:110px;background-image:url('http://s3.uploads.ru/XwsqM.gif');border: 6px solid #6a4ec3;text-align: center; margin-left: 10px; position: relative;"></div>

<div class="activ2" style="-moz-border-radius: 35px; border-radius: 35px; height:40px; width:460px; margin-left: 98px; margin-top: -90px; background-color: #6a4ec3; text-align: center;  font-family: Bebas Neue; color: #fff; font-style: italic; font-size: 35px;">
Команда Геры</div>


 </div>



    <div><label for="notebook2a_3"> #teamhelios</label><br>
<div class="activ2" style="margin-left: -70px; -moz-border-radius: 110px;
border-radius: 110px;height:110px;width:110px;background-image:url('http://sg.uploads.ru/oYqFe.gif');border: 6px solid #ac8600;text-align: center; margin-left: 10px; position: relative;"></div>

<div class="activ2" style="-moz-border-radius: 35px; border-radius: 35px; height:40px; width:460px; margin-left: 98px; margin-top: -90px; background-color: #ac8600; text-align: center;  font-family: Bebas Neue; color: #fff; font-style: italic; font-size: 35px;">
Команда Гелиоса</div>

       
    </div>


    <div><label for="notebook2a_4">#teamhades</label><br>
<div class="activ2" style="margin-left: -70px; -moz-border-radius: 110px;
border-radius: 110px;height:110px;width:110px;background-image:url('http://s3.uploads.ru/opLzJ.gif');border: 6px solid #730f10;text-align: center; margin-left: 10px; position: relative;"></div>

<div class="activ2" style="-moz-border-radius: 35px; border-radius: 35px; height:40px; width:460px; margin-left: 98px; margin-top: -90px; background-color: #730f10; text-align: center;  font-family: Bebas Neue; color: #fff; font-style: italic; font-size: 35px;">
Команда Аида</div>
   


    </div>







</div></center>
Exalted

Меню навигации

Пользовательские ссылки

Информация о пользователе

Система богов

Сообщений 1 страница 1 из 1

Поделиться12016-11-24 01:14:29
