Внешности

Код:
<center><link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'> <div style="width: 530px; background: #f939a5; background-image: url(http://s9.uploads.ru/Nt5GL.png); padding: 15px; color: #222; "> <div style="width: 500px; background-color: #ffdcf0; padding: 10px; box-shadow: 5px 5px; text-align: justify; font-family: bodoni; font-size: 10px; line-height: 100%; "><center> <div style="width: 500px; color: #ff5978; text-align: center; font-family: 'Great Vibes'; font-size: 65px; line-height: 25%; letter-spacing: -1px; text-shadow: 1px 1px 0px #000"> Appearance<img src="http://s7.uploads.ru/kRgBp.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: #477620; 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: 300px; height: 340px; overflow-y: scroll;"> -A- Alexander Skarsgård - <a href="http://atlanticity.ru/profile.php?id=338">Victor Bale</a> -B- -C- Chris Evans - <a href="http://atlanticity.ru/profile.php?id=402">Hector Marshall</a> Chris Hemsworth - <a href="http://atlanticity.ru/profile.php?id=10">Aedan Lockridge</a> Charlie Hunnam - <a href="http://atlanticity.ru/profile.php?id=217">Jackson Darmody</a> -D- David Gandy - <a href="http://atlanticity.ru/profile.php?id=332">David Emerson</a> Daniel Sharman - <a href="http://atlanticity.ru/profile.php?id=398">Aaron Specter</a> -E- -F- -G- -H- Henry Cavill - <a href="http://atlanticity.ru/profile.php?id=144">Harvey Black</a> -I- -J- Jamie Dornan - <a href="http://atlanticity.ru/profile.php?id=2">Oliver Nelson</a> Jensen Ackles - <a href="http://atlanticity.ru/profile.php?id=37">Gerard O'Donnell</a> Jack O'Connell - <a href="http://atlanticity.ru/profile.php?id=407">Gordon Kennedy</a> -K- -L- Liam Hemsworthl - <a href="http://atlanticity.ru/profile.php?id=165"> Max Palmer</a> -M- Milo Ventimiglia - <a href="http://atlanticity.ru/profile.php?id=397">Michael Summers</a> Matt Bomer - <a href="http://atlanticity.ru/profile.php?id=413">Theodore Davis</a> -N- -O- -P- Paul Wesley - <a href="http://atlanticity.ru/profile.php?id=405">Matthew Knight</a> -Q- -R- Rafael Lazzini - <a href="http://atlanticity.ru/profile.php?id=279">Adraian J. Cain</a> -S- -T- -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: 300px; height: 340px; overflow-y: scroll;"> -A- Amanda Seyfried - <a href="http://atlanticity.ru/profile.php?id=34">Alexis McKenzie</a> -B- Bianca Balti - <a href="http://atlanticity.ru/profile.php?id=14">Agata Phillips</a> Barbara Palvin - <a href="http://atlanticity.ru/profile.php?id=344">Adelina Teller</a> -C- Candice Swanepoel - <a href="http://atlanticity.ru/profile.php?id=3">Vasilisa Darmody</a> Charlize Theron - <a href="http://atlanticity.ru/profile.php?id=348">Stella Carnegie-Bradley</a> Clémence Poésy - <a href="http://atlanticity.ru/profile.php?id=376">Jeanne Biron</a> -D- Deborah Ann Woll - <a href="http://atlanticity.ru/profile.php?id=367">Faith Marquez</a> Danna Garcia - <a href=http://atlanticity.ru/profile.php?id=366>Teodora Nowak</a> -E- Emilia Clarke - <a href="http://atlanticity.ru/profile.php?id=174">Kira Parker</a> -F- -G- Gemma Arterton - <a href="http://atlanticity.ru/profile.php?id=392">Emily Summers</a> -H- Hilary Duff - <a href="http://atlanticity.ru/profile.php?id=359">Nadine Hudson</a> Heather Peace - <a href="http://atlanticity.ru/profile.php?id=375">Deborah Kid</a> -I- Irina Shayk - <a href="http://atlanticity.ru/profile.php?id=72">Margarita Roselli </a> -J- -K- Kristina Pimenova - <a href="http://atlanticity.ru/profile.php?id=287">Kaitlyn Lockridge</a> Kate Elizabeth Winslet - <a href="http://atlanticity.ru/profile.php?id=406">Federika Tegano</a> -L- Lindsay Ellingson - <a href="http://atlanticity.ru/profile.php?id=13">Aurelia Sherwood</a> Lyndsy Fonseca - <a href="http://atlanticity.ru/profile.php?id=379">Jessica Whitemore</a> Lucy Hale - <a href="http://atlanticity.ru/profile.php?id=331">Evelina Lockwood</a> -M- -N- Nina Dobrev - <a href="http://atlanticity.ru/profile.php?id=372">Narcissa Rivers</a> Nathalie Emmanuel - <a href="http://atlanticity.ru/profile.php?id=411">Mary Fry</a> -O- -P- Phoebe Tonkin - <a href="http://atlanticity.ru/profile.php?id=409">Sophie Emerson</a> -Q- -R- Rosie Huntington-Whiteley - <a href="http://atlanticity.ru/profile.php?id=404">Alexa Bracey</a> -S- Scarlett Johansson - <a href="http://atlanticity.ru/profile.php?section=essentials&id=403">Summer Blair</a> Sara Sampaio - <a href=http://atlanticity.ru/profile.php?id=354>Christina Roselli</a> -T- Teresa Palmer - <a href="http://atlanticity.ru/profile.php?id=12">Katherine MacAlister</a> Troian Bellisario - <a href="http://atlanticity.ru/profile.php?id=412">Tess Richardson</a> -U- -V- -W- -X- -Y- Yvonne Strahovski - <a href="http://atlanticity.ru/profile.php?id=352">Stephanie Nelson</a> -Z- </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: 365px; /* ширина */ 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 .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; } .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 .content{ opacity: 0; display: none\3; overflow: hidden; font: 12px Arial, Time New Roman; /* шрифт */ position: absolute; height: 220px; 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\2; overflow: visible; padding: 40px; height: 320px; width: 270px; /* высота и ширина области перекрытия контейнера с всплывающего описания */ } .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> </div> <center><img src="http://funkyimg.com/i/GHNb.png" /></center>

Оформляем строго по шаблону
вставляем в код!
Код:
 имя фамилия знаменитости (англ) - <a href="ссылка на профиль">кем занята</a>

ATLANTIC CITY

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

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

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

Внешности

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

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

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