Имена и фамилии

Код:
<center><link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'> <div style="width: 570px; background: #b992f3; background-image: url(http://s8.uploads.ru/0wngy.png); padding: 15px; color: #222; border-radius: 50px 0px 50px 0px;"> <div style="width: 530px; background-color: #f4e8fe; padding: 10px; border-radius: 50px 0px 50px 0px; box-shadow: 5px 5px; text-align: justify; font-family: bodoni; font-size: 10px; line-height: 100%; "><center> <div style="width: 530px; color: #b992f3; text-align: center; font-family: 'Great Vibes'; font-size: 65px; line-height: 25%; letter-spacing: -1px; text-shadow: 1px 1px 0px #000">Nicknames<img src="http://s7.uploads.ru/mrMfR.png" /></div> <div style="width: 430px; text-align: center; text-transform: uppercase; letter-spacing: 1px; color: #000000;">Если ваше имя Лера - в сексе просто королева. Если ваше имя Стёпа – то чуть-чуть добавим стёба. Если ваше имя Вика - значит, будет много крика. Если ваше имя Лёша – будем долго, только лёжа. Если вас зовут Алина - то никак без вазелина. Если ваше имя Миша – позовём ещё и Гришу. Если вас зовут Альбина - после секса как дубина. Если ваше имя Рафик – уходите, ну вас нафиг.</div> <div style="width: 440px; height: 5px; background-color: #f939a5; border-bottom: 2px solid #fff;"></div></center> <ul class="menu"> <ul class="menu"> <li tabindex="1"> <img src="http://s6.uploads.ru/vnCyX.png" /> <div class="content"> <div style="width: 470px; height: 340px; overflow-y: scroll;"> -A- Aedan|Айдан Adraian | Адриан Aaron|Аарон -B- -C- -D- David|Дэвид -E- -F- -G- Gerard|Джаред Gordon|Гордон -H- Harvey|Харви Hector | Гектор -I- -J- -K- -L- -M- Max|Макс Michael|Майкл Matthew | Мэттью -N- -O- Oliver|Оливер -P- -Q- -R- -S- -T- Theodore|Теодор -U- -V- -W- -X- -Y- -Z- </div> </div> </li> <li tabindex="1"> <img src="http://s6.uploads.ru/b5lIL.png" /> <div class="content"> <div style="width: 470px; height: 340px; overflow-y: scroll;"> -A- Agata|Агата Alexis|Алексис Aurelia|Аурелия Adelina | Аделина Alexandra|Алексадра -B- -C- Christina |Кристина -D- Deborah|Дебора -E- Evelin(a)| Эвелин(а) Emily|Эмили -F- Faith|Фэйт Federika|Федерика -G- -H- -I- -J- Jessica|Джессика -K- Kira| Кира Katherine|Кэтрин Kaitlyn|Кейтлин -L- -M- Margarita|Маргарита Miranda|Миранда Mary|Мэри -N- Nadine|Надин Narcissa|Нарцисса -O- -P- Patrizia|Патриция -Q- -R- -S- Stella | Стелла Stephanie|Стефани Summer | Саммер Sophie|Софи -T- Teodora|Теодора Tess|Тесс -U- -V- Vasilisa|Василиса -W- -X- -Y- -Z- </div> </div> </li> <li tabindex="1"> <img src="http://s7.uploads.ru/x2GWl.png" /> <div class="content"> <div style="width: 470px; height: 340px; overflow-y: scroll;"> -A- -B- Black|Блек Blair | Блэр Bracey|Брейси -C- Cain|Кейн Carnegie | Карнеги -D- Darmody|Дармоди Davis|Дэвис -E- Emerson|Эмерсон -F- Fry|Фрай -G- -H- Hudson|Хадсон -I- -J- -K- Kid|Кид Knight | Найт Kennedy|Кеннеди -L- Lockridge|Локридж Lockwood | Локвуд -M- MacAlister|МакАлистер McKenzie|МакКези Marquez|Маркез Marshall |Маршалл -N- Nelson|Нельсон Nowak|Новак -O- O'Donnell | О’Доннелл -P- Palmer|Палмер Parker|Паркер Phillips|Филлипс -Q- -R- Roselli|Розелли Richardson|Ричардсон -S- Sherwood|Шервуд Summers|Саммерс Specter|Спектр -T- Teller |Теллер Tegano|Тегано -U- -V- -W- Whitemore|Уайтмор Wayne|Уэйн -X- -Y- -Z- </div> </div> </li> </ul> <script> (function(){ // Добавялем кнопку закрытия каждому блоку $('.menu .content').append('x'); // Выводим окно function showContent(elem){ hideContent(); elem.find('.content').addClass('expanded'); elem.addClass('cover'); } // Сбрасываем все function hideContent(){ $('.menu .content').removeClass('expanded'); $('.menu li').removeClass('cover'); } // Когда элемент li нажат, выводим окно с его содержанием и позиционируем поверх всего $('.menu li').click(function() { showContent($(this)); }); // Содержание будет также выводиться с помощью нажатия клавиши ENTER $('.menu li').keypress(function(e) { if (e.keyCode == 13) { showContent($(this)); } }); // Когда нажат верхний правый элемент, сбрасываем все $('.menu .close').click(function(e) { e.stopPropagation(); hideContent(); }); // Также сброс происходит по нахатию клавиши ESC $(document).keyup(function(e) { if (e.keyCode == 27) { hideContent(); } }); })(); </script> <style> /* стиль общего контейнера с кнопками */ .menu{ width: 540px; /* ширина */ margin: 10px auto; padding: 15px; /* отступы */ list-style: none; counter-reset: li; background: #; /* фон */ -moz-box-shadow: 0 1px 2px rgba(0,0,0,.1) inset; /* тень вокруг контейнера */ -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1) inset; box-shadow: 0 1px 2px rgba(0,0,0,.1) inset; -moz-border-radius: 10px; /* закругление углов */ -webkit-border-radius: 10px; border-radius: 10px; } .menu:before, .menu:after { content: ""; display: table; /* отображение кнопок в виде таблицы */ } .menu:after { clear: both; } .menu { zoom:1; } /* стиль кнопки */ .menu li { position: relative; float: left; cursor: pointer; height: 400px; width: 168px; /* высота и ширина кнопки */ margin: 10px 0 0 10px; /* отступы между кнопками */ color: #fff; } .menu li:hover, .menu li:focus{ /* градиент, который появляется на кнопки при наведении курсора */ background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.2)), to(rgba(255,255,255,0))); background-image: -webkit-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0)); background-image: -moz-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0)); background-image: -ms-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0)); background-image: -o-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0)); background-image: linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0)); } /* стиль всплывающего описания */ .menu .cover{ z-index: 2; } .menu .cover:focus{ outline: 0; } .menu li::after{ content: (li); counter-increment: li; font: italic bold 10px serif, georgia; /* шрифт */ position: absolute; color: rgba(255,255,255,.1); opacity: 0; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -ms-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; } .menu li:hover::after, .menu li:focus::after{ font-size: 100px; opacity: 1; } .menu .cover::after{ z-index: -1; } .menu li:nth-child(1), .menu li:nth-child(2), .menu li:nth-child(3){ margin-top: 0; } /* цвета кнопок по порядку */ .menu li:nth-child(1), .menu li:nth-child(1) .content, .menu li:nth-child(1) .close{ background-color: #47add9; } .menu li:nth-child(2), .menu li:nth-child(2) .content, .menu li:nth-child(2) .close{ background-color: #f939a5; } .menu li:nth-child(3), .menu li:nth-child(3) .content, .menu li:nth-child(3) .close{ background-color: #b992f3; } /* стиль всплывающего контента */ .menu .content{ opacity: 0; display: none\3; overflow: hidden; font: 12px Arial, Time New Roman; /* шрифт */ position: absolute; height: 320px; width: 165px; /* Высота и ширина области текста. В идеале: height: 100%; width: 100%; , но будет работать только в FF */ -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; } .menu .expanded{ opacity: .95; display: block\3; overflow: visible; padding: 40px; height: 320px; width: 445px; /* высота и ширина области перекрытия контейнера с всплывающего описания */ } .menu li:nth-child(3n) .content{ /* 3,6,9 */ right: 0; } .menu li:nth-child(3n-1) .expanded{ /* 2,5,8 */ left: 50%; margin-left: -263px; } /* стиль названия кнопок */ .menu .title{ position: absolute; height: 100%; width: 100%; text-align: center; /* выравнивание по центру */ font: italic bold /120px 'trebuchet MS', Arial, helvetica; /* шрифт */ opacity: .2; } .menu li:hover .title{ opacity: .7; } /* стиль крестика, закрывающего всплывающее описание */ .menu .close { display: none; border: 5px solid #fff; /* обводка (граница) */ color: #fff; /* цвет */ cursor: pointer; height: 25px; width: 25px; /* высота и ширина */ font: bold 15px/30px arial, helvetica; /* шрифт */ position: absolute; text-align: center; top: -10px; right: -15px; /* расположение (двигаем крестик) */ -moz-border-radius: 40px; /* закругление границ */ -webkit-border-radius: 40px; border-radius: 40px; } .menu .cover .close{ display: block; } </style> </script> </div> <center><img src="http://funkyimg.com/i/GHNb.png" /></center>

ПО ШАБЛОНУ!
 имя (на англ)|имя (на рус)
 фамилия (на англ)|фамилия (на рус)
Акционные имена, подписанны ^{номером акции}
В том случае если вы меняете имя акционному персонажу то заполняйте
данный шаблон:
Замена имени: имя персонажа - акция 1,2,3,4
 имя (англ)|имя (рус)номер акции
 фамилия (англ)|фамилия (рус)номер акции

ATLANTIC CITY

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

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

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

Имена и фамилии

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

Поделиться12014-04-05 06:51:47

Быстрый ответ