Код:
секция - <a href="ссылка на профиль">имя персонажа</a>
Код:
<!--HTML--><link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' rel='stylesheet' type='text/css'><style type='text/css'>
.somacont { position:relative; width:400px; height:600px; -webkit-box-shadow: 1px 1px 5px 0px #eee, -1px -1px 5px 0px #eee; -moz-box-shadow:1px 1px 5px 0px #eee, -1px -1px 5px 0px #eee; box-shadow:1px 1px 5px 0px#eee, -1px -1px 5px 0px #eee; }
.somablock { position:absolute; width:200px; height:300px; overflow:hidden; }
.wordcontainers { position:absolute; top:0px; left:0px; width:200px; height:290px; transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; }
.somablock:hover .wordcontainers { -ms-transform: scale(2,4); -webkit-transform: scale(2,4); transform: scale(2,4); opacity:0; transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; }
.somainfo { position:absolute; top:-300px; width:200px; height:300px; background-color:#fff; transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; }
.somablock:hover .somainfo { top:0px; transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; }
.somatitles { position:absolute; width:150px; top:130px; left:25px; color:#f1ede3; text-align:center; text-transform:uppercase; font-family:yanone kaffeesatz; font-weight:700; font-size:18px; letter-spacing:2px; line-height:18px; padding-bottom:10px; border-bottom:1px solid #f1ede3; }
.somaidk { position:absolute; width:100px; top:169px; left:50px; color:#f1ede3; text-align:center; text-transform:lowercase; font-family:garamond; font-style:italic; font-size:12px; line-height:100%; letter-spacing:1px; }
.somaimageblock { width:200px; height:60px; overflow:hidden; }
.somawordsha { width:180px; height:208px; padding:10px; overflow:auto; text-align:justify; font-size:11px; font-family:times; color:#222; line-height:100%; }
</style><center>
<div class='somacont'>
<div class='somablock' style='top:0px; left:0px; background-color:#d5b0b1;'><div class='wordcontainers'><div class='somatitles'>
ФУТБОЛЬНАЯ КОМАНДА
</div><div class='somaidk'>
</div></div><div class='somainfo'><div class='somaimageblock' style='border-bottom:3px solid #d5b0b1;'>
<img src='http://savepic.su/4719782m.png' width='200px;'>
</div><div class='somawordsha'>
<b>тренер команды:</b> <a href="http://notwerk.rusff.me/profile.php?id=33">Richard Svendsen</a><br>
<b>капитан команды:</b> <a href="http://notwerk.rusff.me/profile.php?id=41">Joshua Evans </a><br>
<b>футболисты:</b><br>
1) <a href="http://notwerk.rusff.me/profile.php?id=35">Dexter Parish</a><br>
2) <a href="http://notwerk.rusff.me/profile.php?id=29">David Rice</a><br>
3) <a href="http://notwerk.rusff.me/profile.php?id=69">Max Bishop</a><br>
4) <a href="http://notwerk.rusff.me/profile.php?id=32">Avery Bourbon</a><br>
5) <a href="http://notwerk.rusff.me/profile.php?id=77">Lloyd Blackwood</a><br>
6) <a href="http://notwerk.rusff.me/profile.php?id=98">Luke McConnell</a><br>
7) <a href="http://notwerk.rusff.me/profile.php?id=45">Carter Ford</a><br>
8) <a href="http://notwerk.rusff.me/profile.php?id=14">Frank Moore</a><br>
9) <a href="http://notwerk.rusff.me/profile.php?id=110">Eli Norton</a><br>
10) <br>
</div></div></div>
<div class='somablock' style='top:0px; left:200px; background-color:#a09ea4;'><div class='wordcontainers'><div class='somatitles'>
КОМАНДА ПО ПЛАВАНИЮ
</div><div class='somaidk'>
</div></div><div class='somainfo'><div class='somaimageblock' style='border-bottom:3px solid #a09ea4;'>
<img src='http://savepic.su/4738645m.png' width='200px;'>
</div><div class='somawordsha'>
<b>пловцы:</b><br>
1) <a href="http://notwerk.rusff.me/profile.php?id=13">Hunter Witwicky</a><br>
2) <a href="http://notwerk.rusff.me/profile.php?id=84">Daniel Diego</a><br>
3) <a href="http://notwerk.rusff.me/profile.php?id=54">Nidalee Wilson</a><br>
4) <a href="http://notwerk.rusff.me/profile.php?id=76">Ronan Freeman</a><br>
5) <a href="http://notwerk.rusff.me/profile.php?id=74">Jaimie Cobb</a><br>
6) <br>
7) <br>
8) <br>
9) <br>
10) <br>
</div></div></div>
<div class='somablock' style='top:300px; left:0px; background-color:#aecabb;'><div class='wordcontainers'><div class='somatitles'>
ГРУППА ПОДДЕРЖИ
</div><div class='somaidk'>
</div></div><div class='somainfo'><div class='somaimageblock' style='border-bottom:3px solid #aecabb;'>
<img src='http://savepic.su/4753593m.png' width='200px;'>
</div><div class='somawordsha'>
<b>капитан черлидерш:</b> <a href="http://brown.rolbb.ru/profile.php?id=10">Melissa Evans</a><br>
<b>зам капитана:</b></b><a href="http://brown.rolbb.ru/profile.php?id=15">Cassandra Van Alen</a>
<br>
<b>черлидерши:</b><br>
1) <a href="http://brown.rolbb.ru/profile.php?id=3">Astoria Rosier</a><br>
2) <br>
3) <br>
4) <br>
5) <br>
6) <br>
7) <br>
8) <br>
9) <br>
10) <br>
</div></div></div>
<div class='somablock' style='top:300px; left:200px; background-color:#a4c2bc;'><div class='wordcontainers'><div class='somatitles'>
ВЕРХОВАЯ ЕЗДА
</div><div class='somaidk'>
</div></div><div class='somainfo'><div class='somaimageblock' style='border-bottom:3px solid #a4c2bc;'>
<img src='http://savepic.su/4763833m.png' width='200px;'>
</div><div class='somawordsha'>
<b>наездники:</b><br>
1) <a href="http://notwerk.rusff.me/profile.php?id=25">Finn Cunningham</a><br>
2) <a href="http://notwerk.rusff.me/profile.php?id=105">Mary Black</a><br>
3) <a href="http://notwerk.rusff.me/profile.php?id=120">Blair Howard</a>
4) <br>
5) <br>
6) <br>
7) <br>
8) <br>
9) <br>
10) <br>
</div></div></div>
</div></center>Код:
<!--HTML--><link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' rel='stylesheet' type='text/css'><style type='text/css'>
.somacont { position:relative; width:400px; height:600px; -webkit-box-shadow: 1px 1px 5px 0px #eee, -1px -1px 5px 0px #eee; -moz-box-shadow:1px 1px 5px 0px #eee, -1px -1px 5px 0px #eee; box-shadow:1px 1px 5px 0px#eee, -1px -1px 5px 0px #eee; }
.somablock { position:absolute; width:200px; height:300px; overflow:hidden; }
.wordcontainers { position:absolute; top:0px; left:0px; width:200px; height:290px; transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; }
.somablock:hover .wordcontainers { -ms-transform: scale(2,4); -webkit-transform: scale(2,4); transform: scale(2,4); opacity:0; transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; }
.somainfo { position:absolute; top:-300px; width:200px; height:300px; background-color:#fff; transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; }
.somablock:hover .somainfo { top:0px; transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; }
.somatitles { position:absolute; width:150px; top:130px; left:25px; color:#f1ede3; text-align:center; text-transform:uppercase; font-family:yanone kaffeesatz; font-weight:700; font-size:14px; letter-spacing:2px; line-height:18px; padding-bottom:10px; border-bottom:1px solid #f1ede3; }
.somaidk { position:absolute; width:100px; top:169px; left:50px; color:#f1ede3; text-align:center; text-transform:lowercase; font-family:garamond; font-style:italic; font-size:12px; line-height:100%; letter-spacing:1px; }
.somaimageblock { width:200px; height:60px; overflow:hidden; }
.somawordsha { width:180px; height:208px; padding:10px; overflow:auto; text-align:left; font-size:11px; font-family:times; color:#222; line-height:100%; }
</style><center>
<div class='somacont'>
<div class='somablock' style='top:0px; left:0px; background-color:#d5b0b1;'><div class='wordcontainers'><div class='somatitles'>
СТУДЕНЧЕСКИЙ<br> СОВЕТ
</div><div class='somaidk'>
</div></div><div class='somainfo'><div class='somaimageblock' style='border-bottom:3px solid #d5b0b1;'>
<img src='http://savepic.su/4776121m.png' width='200px;'>
</div><div class='somawordsha'>
<b>президент студ совета: </b><a href="http://notwerk.rusff.me/profile.php?id=5">Samuela Daniels</a><br>
<b>вице президент студ совета: </b><a href="http://notwerk.rusff.me/profile.php?id=3">Kendal R. Darkblum</a><br>
<b>председатель факультета журналистики: </b><br>
<b>председатель юридического факультета: </b><a href="http://notwerk.rusff.me/profile.php?id=32">Avery Bourbon</a><br>
<b>председатель медицинского факультета: </b><a href="http://notwerk.rusff.me/profile.php?id=120">Blair Howard</a><br>
<b>председатель факультета искусств: </b> <a href="http://notwerk.rusff.me/profile.php?id=7">Emily Bourbon</a> <br>
<b>председатель факультета международных отношений: </b><br>
<b>председатель факультета бизнеса: </b><a href="http://notwerk.rusff.me/profile.php?id=86">Raven Walker</a><br>
<b>председатель гуманитарного факультета: </b><br>
<b>председатель факультета естественных наук: </b><br>
<b>председатель факультета классической филологии: </b><a href="http://notwerk.rusff.me/profile.php?id=46">Tess Ford</a><br>
</div></div></div>
<div class='somablock' style='top:0px; left:200px; background-color:#a09ea4;'><div class='wordcontainers'><div class='somatitles'>
УНИВЕРСИТЕТСКОЕ РАДИО
</div><div class='somaidk'>
</div></div><div class='somainfo'><div class='somaimageblock' style='border-bottom:3px solid #a09ea4;'>
<img src='http://savepic.su/4763221m.png' width='200px;'>
</div><div class='somawordsha'>
<b>ди-джей:</b><br>
1) <a href="http://notwerk.rusff.me/profile.php?id=64">Mavis Ray</a><br>
2) <br>
<b>радиоведущие:</b><br>
1) <a href="http://notwerk.rusff.me/profile.php?id=50">Felicia A. Stark</a><br>
2) <a href="http://notwerk.rusff.me/profile.php?id=65">Charity Osbourne</a><br>
3) <a href="http://notwerk.rusff.me/profile.php?id=36">Jason Brody</a><br>
4) <a href="http://notwerk.rusff.me/profile.php?id=54">Nidalee Wilson</a><br>
5) <a href="http://notwerk.rusff.me/profile.php?id=7">Emily Bourbon</a><br>
</div></div></div>
<div class='somablock' style='top:300px; left:0px; background-color:#aecabb;'><div class='wordcontainers'><div class='somatitles'>
УНИВЕРСИТЕТСКАЯ ГАЗЕТА
</div><div class='somaidk'>
</div></div><div class='somainfo'><div class='somaimageblock' style='border-bottom:3px solid #aecabb;'>
<img src='http://savepic.su/4759737m.png' width='200px;'>
</div><div class='somawordsha'>
<b>главный редактор:</b><br>
<b>редактор колонки новостей:</b><br>
<b>редактор модной колонки:</b><br>
<b>редактор музыкальной колонки:</b> <a href="http://notwerk.rusff.me/profile.php?id=58"> Crystall Rice</a><br>
<b>редактор спортивной колонки:</b><br>
<b>фотограф:</b> <a href="http://notwerk.rusff.me/profile.php?id=16">Sarah Parish</a><br>
<b>журналисты:</b> <a href="http://notwerk.rusff.me/profile.php?id=61">Shelley MacKenzie</a><br>
1) <a href="http://notwerk.rusff.me/profile.php?id=52">Danielle Mercer</a><br>
2) <br>
3) <br>
</div></div></div>
<div class='somablock' style='top:300px; left:200px; background-color:#a4c2bc;'><div class='wordcontainers'><div class='somatitles'>
СТРИТРЕЙСЕРЫ
</div><div class='somaidk'>
</div></div><div class='somainfo'><div class='somaimageblock' style='border-bottom:3px solid #a4c2bc;'>
<img src='http://savepic.su/4768953m.png' width='200px;'>
</div><div class='somawordsha'>
<b>гонщики:</b><br>
1) <a href="http://notwerk.rusff.me/profile.php?id=5">Samuela Daniels</a><br>
2) <a href="http://notwerk.rusff.me/profile.php?id=13">Hunter Witwicky</a><br>
3) <a href="http://notwerk.rusff.me/profile.php?id=22">Lavanda Mig</a><br>
4) <a href="http://notwerk.rusff.me/profile.php?id=27">Kennedy Bourbon</a><br>
5) <a href="http://notwerk.rusff.me/profile.php?id=41">Joshua Evans </a><br>
6) <a href="http://notwerk.rusff.me/profile.php?id=67">Matilda Mendes</a><br>
7) <a href="http://notwerk.rusff.me/profile.php?id=58"> Crystall Rice</a><br>
8) <a href="http://notwerk.rusff.me/profile.php?id=66">Colin Mercer</a><br>
9) <a href="http://notwerk.rusff.me/profile.php?id=86">Raven Walker</a><br>
10) <a href="http://notwerk.rusff.me/profile.php?id=28">Nicolas Pierce</a><br>
</div></div></div>
</div></center>Код:
<!--HTML--><link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' rel='stylesheet' type='text/css'><style type='text/css'>
.somacont { position:relative; width:400px; height:600px; -webkit-box-shadow: 1px 1px 5px 0px #eee, -1px -1px 5px 0px #eee; -moz-box-shadow:1px 1px 5px 0px #eee, -1px -1px 5px 0px #eee; box-shadow:1px 1px 5px 0px#eee, -1px -1px 5px 0px #eee; }
.somablock { position:absolute; width:200px; height:300px; overflow:hidden; }
.wordcontainers { position:absolute; top:0px; left:0px; width:200px; height:290px; transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; }
.somablock:hover .wordcontainers { -ms-transform: scale(2,4); -webkit-transform: scale(2,4); transform: scale(2,4); opacity:0; transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; }
.somainfo { position:absolute; top:-300px; width:200px; height:300px; background-color:#fff; transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; }
.somablock:hover .somainfo { top:0px; transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; }
.somatitles { position:absolute; width:150px; top:130px; left:25px; color:#f1ede3; text-align:center; text-transform:uppercase; font-family:yanone kaffeesatz; font-weight:700; font-size:14px; letter-spacing:2px; line-height:18px; padding-bottom:10px; border-bottom:1px solid #f1ede3; }
.somaidk { position:absolute; width:100px; top:169px; left:50px; color:#f1ede3; text-align:center; text-transform:lowercase; font-family:garamond; font-style:italic; font-size:12px; line-height:100%; letter-spacing:1px; }
.somaimageblock { width:200px; height:60px; overflow:hidden; }
.somawordsha { width:180px; height:208px; padding:10px; overflow:auto; text-align:justify; font-size:11px; font-family:times; color:#222; line-height:100%; }
</style><center>
<div class='somacont'>
<div class='somablock' style='top:0px; left:0px; background-color:#d5b0b1;'><div class='wordcontainers'><div class='somatitles'>
ТЕАТРАЛЬНЫЙ КРУЖОК
</div><div class='somaidk'>
</div></div><div class='somainfo'><div class='somaimageblock' style='border-bottom:3px solid #d5b0b1;'>
<img src='http://savepic.su/4758713m.png' width='200px;'>
</div><div class='somawordsha'>
<b>сценарист:</b><br>
<b>режиссер:</b> <a href="http://notwerk.rusff.me/profile.php?id=101">Mason Blackwood</a><br>
<b>костюмер:</b><br>
<b>актеры:</b><br>
1) <a href="http://notwerk.rusff.me/profile.php?id=39">Astoria Rosier</a><br>
2) <a href="http://notwerk.rusff.me/profile.php?id=60">Liam Rush</a><br>
3) <a href="http://notwerk.rusff.me/profile.php?id=36">Jason Brody</a><br>
4) <a href="http://notwerk.rusff.me/profile.php?id=15">Michelle Moore</a><br>
5) <a href="http://notwerk.rusff.me/profile.php?id=40">Cassandra Freeman</a><br>
6) <a href="http://notwerk.rusff.me/profile.php?id=126">Netty Warren</a><br>
7) <br>
8) <br>
9) <br>
10) <br>
</div></div></div>
<div class='somablock' style='top:0px; left:200px; background-color:#a09ea4;'><div class='wordcontainers'><div class='somatitles'>
ХОР
</div><div class='somaidk'>
</div></div><div class='somainfo'><div class='somaimageblock' style='border-bottom:3px solid #a09ea4;'>
<img src='http://savepic.su/4780217m.png' width='200px;'>
</div><div class='somawordsha'>
<b>руководитель хора:</b> <a href="http://notwerk.rusff.me/profile.php?id=20">Elsa Cunningham</a><br>
<b>певцы:</b><br>
1) <br>
2) <br>
3) <br>
4) <br>
5) <br>
6) <br>
7) <br>
8) <br>
9) <br>
10) <br>
</div></div></div>
<div class='somablock' style='top:300px; left:0px; background-color:#aecabb;'><div class='wordcontainers'><div class='somatitles'>
ХОРЕОГРАФИЧЕС<br>КИЙ КРУЖОК
</div><div class='somaidk'>
</div></div><div class='somainfo'><div class='somaimageblock' style='border-bottom:3px solid #aecabb;'>
<img src='http://savepic.su/4733527m.png' width='200px;'>
</div><div class='somawordsha'>
<b>хореограф:<a href="http://notwerk.rusff.me/profile.php?id=83">Raquel Fucker</a><br>
<b>танцовщицы:</b><br>
1) <a href="http://notwerk.rusff.me/profile.php?id=51">Narcissa Blackwood</a><br>
2) <a href="http://notwerk.rusff.me/profile.php?id=21">Venera Hampton</a><br>
3) <a href="http://notwerk.rusff.me/profile.php?id=27">Kennedy Bourbon</a><br>
4) <br>
5) <a href="http://notwerk.rusff.me/profile.php?id=80">Alisha Benson</a><br>
6) <br>
7) <br>
8) <br>
9) <br>
10) <br>
</div></div></div>
<div class='somablock' style='top:300px; left:200px; background-color:#a4c2bc;'><div class='wordcontainers'><div class='somatitles'>
МУЗЫКАЛЬНАЯ ГРУППА
</div><div class='somaidk'>
</div></div><div class='somainfo'><div class='somaimageblock' style='border-bottom:3px solid #a4c2bc;'>
<img src='http://savepic.su/4751545m.png' width='200px;'>
</div><div class='somawordsha'>
<b>ГРУППА 1</b><br>
<b>вокалист:</b> <a href="http://notwerk.rusff.me/profile.php?id=15">Michelle Moore</a><br>
<b>гитарист:</b> <br>
<b>бас-гитарист:</b> <a href="http://notwerk.rusff.me/profile.php?id=25">Finn Cunningham</a><br>
<b>барабанщик:</b> <a href="http://notwerk.rusff.me/profile.php?id=49">Jonathan Bailey</a><br>
<b>клавишник:</b><br>
<br>
<b>ГРУППА 2</b><br>
<b>вокалистка:</b> <a href="http://notwerk.rusff.me/profile.php?id=111">Catarina Diego</a><br>
<b>вокалист:</b><br>
<b>гитарист:</b><br>
<b>бас-гитарист+бэк вокал:</b><br>
<b>барабанщик:</b> <a href="http://notwerk.rusff.me/profile.php?id=56">Nathan Reynolds</a><br>
<b>клавишник+бэк вокал:</b><br>
<b>звукорежиссер:</b><br>
</div></div>
</div>
</div></center>
