Код:
<!--HTML--> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://forumfiles.ru/files/0019/6a/24/87764.js"></script>
<link href="http://forumfiles.ru/files/0019/ca/ed/98860.css" rel="stylesheet">


<center> 


<div class="body1">

<div class="naz1" >Внеклассная деятельность</div>
<div class="text5">


<div class="naccs">
  <div class="grid">
   <div class="gc gc--1-of-3">
    <div class="menu">
     <div class="active"><span class="light"></span><span>Спорт</span></div>
     <div><span class="light"></span><span>Наука</span></div>
     <div><span class="light"></span><span>Творчество</span></div>
 <div><span class="light"></span><span>Прочее</span></div>
    </div>
   </div>
   <div class="gc gc--2-of-3">
    <ul class="nacc">
     <li class="active">
      <div class="textknopok">
       <center><span class="zagol">Чирлидинг</span></center>
Кто же поддержит наших спортсменов, как не эти барби в коротких юбочках? И это вам не развлечение, а самый настоящий спорт. Девчонки долго тренируются, чтобы высоко взлетать и задирать ноги выше головы. Им даже удается брать призовые места на чемпионатах. Быть чирлидерами почетно, и если вы хороши собой умны и сильны в гимнастике, то вам определенно стоит попробоваться в команду.<br>
<span class="spiski">
<b>Руководитель:</b><br>
1.   - капитан, флаер<br>
2.  <a href="http://freaksaandgeeks.rusff.ru/profile.php?id=8">Hecate U. Hamilton</a> - заместитель капитана, флаер<br>
3. <a href="http://freaksaandgeeks.rusff.ru/profile.php?id=12">Nina Lestrange</a> - флаер<br>
4. <a href="http://freaksaandgeeks.rusff.ru/profile.php?id=19">monica satore</a> - флаер<br>
5. .. - поддержка флаеров<br>
6. .. - поддержка флаеров<br>
7. .. - поддержка флаеров<br>
8. <a href="http://freaksaandgeeks.rusff.ru/profile.php?id=72">Charley Stone</a> - верхняя часть пирамиды<br>
9. <a href="http://freaksaandgeeks.rusff.ru/profile.php?id=75">Joseline Carter</a> - верхняя часть пирамиды<br>
10. .. - верхняя часть пирамиды<br>
11. .. - нижняя часть пирамиды<br>
12. .. - нижняя часть пирамиды<br>
13. .. - нижняя часть пирамиды<br>
14. <a href="http://freaksaandgeeks.rusff.ru/profile.php?id=10">Amberle Barnes</a> - флаер (запас)<br>
15. .. - верхняя часть пирамиды (запас)<br>
16. .. - нижняя часть пирамиды (запас)
</span>


<br><br><hr>
<center><span class="zagol">Футбольная команда "Титаны"</span></center>
Гордость школы. Их знает каждый. Они мастерски забивают мячи в ворота противника, зарабатывают очки, собирают лавры и кубки чемпионатов. Именно им предлагают места в университетах и неплохую стипендию. Завсегдатаи вечеринок и любимцы девушек. Именно это и делает их такими популярными. Но разве вы будете думать о том, когда перед вами стоит красавец-футболист с безупречной фигурой и рельефными мышцами?<br>
<span class="spiski"><b>Руководитель:</b><br>
1. ..- капитан, квотербек(QB)<br>
2. .. - Гард (G) <br>
3. .. - Тэкл (2 игрока - (DT) и (DE)) <br>
4. <a href="http://freaksaandgeeks.rusff.ru/profile.php?id=49">Chris Rochester</a> - центр (C)<br>
5. .. - мидлбэк(MLB)<br>
6. .. - аутсайдбэк(OLB)<br>
7. .. - Корнербек(CB)<br>
8. .. - Тайт-энд(TE)<br>
9. .. - Фулбэк<br>
10. .. - Раннингбэк(RB)(2 игрока - Тэйлбек и Фуллбек)<br>
11. .. -Уайд ресивер(WR)<br>
12. .. - Сэйфти (S)
</span>
<br><br><hr>
<center><span class="zagol">Команда по плаванию "Морские котики"</span></center>
Самые настоящие люди-амфибии, чувствуют себя превосходно только в водной среде и превосходно смотрятся в плавках и купальниках. Попробуй после соревнований узнай их в одежде. Если ты силен и подготовлен, то неважно к каким слоям общества ты принадлежишь, пловцы рады тебе. Только будь готов к изнурительным тренировкам.<br>
<span class="spiski"><b>Руководитель:</b> <a href="http://freaksaandgeeks.rusff.ru/profile.php?id=12">DANE ZIMMER</a><br>
<u>Мужская сборная</u><br>
1. <a href="http://freaksaandgeeks.rusff.ru/profile.php?id=23">DEAN RUSSO</a> <br>
2. .. <br>
<u>Женская сборная</u><br>
1. .. <br>
2. .. 
</span>
<br><br><hr>
<center><span class="zagol">Секция боевых искусств "Мощный удар"</span></center>
Можешь ли ты свалить противника наповал? А эти ребята могут. Они доводят себя до совершенства в технике контактного боя. Они сильны и неуязвимы. Долгие изнурительные тренировки закалили их тело и душу. Никто не сравнится с ними. Если ты новичок, не пугайся, приходи и достигай таких же результатов.<br>
<span class="spiski"><b>Руководитель:</b><br>
1. .. <br>
2. .. 
</span>
<br><br><hr>
<center><span class="zagol">Хоккейный клуб</span></center>
Они умело скользят по льду, орудуя клюшками и раз за разом загоняя шайбу в ворота противника. Их движения заставляют зрителей замирать. Да-да, речь идёт именно о наших ребятах из команды по хоккею. Начищенные до блеска шлемы, подтянутые фигуры и огонь в глазах, ведь каждая игра для них приравнивается войне, в которой они просто обязаны выиграть. Ни одна травма, какой тяжести она бы ни была, не сможет сломить их отважный дух, и дело даже не в том, что синяки украшают мужчин. Ни для кого не секрет, что лёд для них - поле боя, а сами они настоящие воины.<br>
<span class="spiski"><b>Руководитель:</b><br>
1. <a href="http://freaksaandgeeks.rusff.ru/profile.php?id=14">JASON SCOTT</a> - Капитан и центральный нападающий<br>
2. <a href="http://freaksaandgeeks.rusff.ru/profile.php?id=28">Ronald Parker</a> - Защитник<br>
3. <a href="http://freaksaandgeeks.rusff.ru/profile.php?id=20">Christopher Lawford</a> - Вратарь<br>
</span>

      </div>
     </li>
     <li>
      <div class="textknopok">
      <center>  <span class="zagol">Научный клуб</span></center>
Знания - сила, знания - безграничные возможности и влияние, в знании вся сила и красота мира, знание - оружие, способное погубить и спасти множество людей. Для этих ребят важно знать много и в совершенстве. Именно совершенствованием своих знаний ученики школы занимаются из года в год. Они отстаивают честь своей школы на всевозможных соревнованихя, дебатах и занимают первые места.<br>
<span class="spiski"><b>Руководитель:</b><br>
1. <a href="http://freaksaandgeeks.rusff.ru/profile.php?id=61">Molly Burk</a> <br>
2. .. 
</span>
<br><br><hr>
<center><span class="zagol">Компьютерный клуб "Восемь бит"</span></center>
Их головы забиты двоичным кодом, они готовы взломать самый сложный сайт, они могут проникнуть в любой компьютер. Благо, их навыки были направлены в нужное русло и опытные руководители контролируют их работу, а они, в свою очередь, поддерживают работоспособность школьного сайта.<br>
<span class="spiski"><b>Руководитель:</b><br>
1. <a href="http://freaksaandgeeks.rusff.ru/profile.php?id=22">Hayden Danvers</a> <br>
2. <a href="http://freaksaandgeeks.rusff.ru/profile.php?id=74">Payton Pratt</a> <br> 
</span>
      </div>
     </li>
  <li>
      <div class="textknopok">
      <center>  <span class="zagol">Актерское мастерство/театр "Дневники памяти"</span></center>
Наверное каждый мечтал хотя бы раз побывать на сцене, почувствовать себя звездой, оказаться под светом софитов. Но только истинные актеры могут достойно держаться сцене. Можно ли это назвать суровым спортом? в какой-то степени да, ведь получение главной роли может быть похлеще спортивных состязаний, только в духе Голливуда.<br>
<span class="spiski"><b>Руководитель:</b><br>
1. <a href="http://freaksaandgeeks.rusff.ru/profile.php?id=6">VIRGINIA PARKER</a> - режиссер-постановщик<br>
2. <a href="http://freaksaandgeeks.rusff.ru/profile.php?id=8">HECATE U. HAMILTON</a> - актриса <br>
3. <a href="http://freaksaandgeeks.rusff.ru/profile.php?id=28">Ronald Parker</a> - техник<br>
</span>
<br><br><hr>
<center><span class="zagol">Хор/танцы</span></center>
Без этих ребят не обходится ни один вечер. Они невероятно веселые, ведь музыка и танцы следует за ними по пятам. Конечно, эти ребята не самые популярные, но разве их это волнует Они могут творить музыку, они могут петь, они могут танцевать, остальное уже неважно.<br>
<span class="spiski"><b>Руководитель:</b> <a href="http://freaksaandgeeks.rusff.ru/profile.php?id=68">Vanessa Lane</a><br>
1. <a href="http://freaksaandgeeks.rusff.ru/profile.php?id=17">Nora B. Guinness</a> <br>
2. <a href="http://freaksaandgeeks.rusff.ru/profile.php?id=39">Audrey Batler</a> - барабанщик <br>
3. <a href="http://freaksaandgeeks.rusff.ru/profile.php?id=53">DANIELLE MARSHALL</a> - танцор
</span>
<br><br><hr>
<center><span class="zagol">Газета "Olympians"</span></center>
Скандалы, сенсации, все самое свежее и невероятное выходит из маленького кабинета, в котором расположился весь состав студенческой газеты. Эти неугомонные журналисты не знают слова 'отдых'. День и ночь они придумывают статьи для нового выпуска университетской газеты. Бывает, в здании остался лишь сторож, а все гуляют на вечеринках или готовятся к занятиям, а из кабинета рядом с подсобкой слышен шум, смех и возгласы. Хотите узнать свежие новости? Читайте следующий выпуск "Olympians".<br>
<span class="spiski"><b>Руководитель:</b><br>
1. <a href="http://freaksaandgeeks.rusff.ru/profile.php?id=4">Brenda Mercer</a> - колонка "Сплетни"<br>
2. <a href="http://freaksaandgeeks.rusff.ru/profile.php?id=39">Audrey Batler</a>- колонка "Спроси"<br>
3. <a href="http://freaksaandgeeks.rusff.ru/profile.php?id=61">Molly Burk</a> - Редактор газеты <br>
4. <a href="http://freaksaandgeeks.rusff.ru/profile.php?id=67">Eva Moore</a>- фотограф в газете <br>
</span>
<br><br><hr>
<center><span class="zagol">Радио "На своей волне"</span></center>
Радио - самый малочисленный кружок во всей школе. Ребята "встречают" школьников и учителей по утрам на своих волнах и сообщают всем самые свежие новости, произошедшие за последние сутки в школе и окрестностях. И разбавляют это отличной музыкой, звучащей на перерывах между парами.<br>
<span class="spiski"><b>Руководитель:</b><br>
1. звукорежиссер - <a href="http://freaksaandgeeks.rusff.ru/profile.php?id=24">Tyler Danvers</a> <br>
2. радиоведущая - <a href="http://freaksaandgeeks.rusff.ru/profile.php?id=52">Lisabetta Murphy</a><br>
</span>
      </div>
     </li>
<li>
      <div class="textknopok">
        <center><span class="zagol">Школьный совет</span></center>
Орган власти всея школы. за исключением, разве что, директора и его замов. Учрежден администрацией школы и отвечает перед ним же. Однако те, кто состоит в совете, считают иначе. Ими движут амбиции и жажда власти. Говоря, что делают все во благо школы и его учеников, члены студенческого совета используют власть в основном для личных целей. Их любят и ненавидят, ими восхищаются и их презирают. У них безграничная власть и многие готовы душу продать, чтобы оказаться в совете. А кто откажется от такого влияния?<br>
<span class="spiski"><b>Руководитель:</b><br>
1. <a href="http://freaksaandgeeks.rusff.ru/profile.php?id=20">Christopher Lawford</a> - председатель <br>
2. .. - заместитель председателя<br>
3. <a href="http://freaksaandgeeks.rusff.ru/profile.php?id=17">Nora B. Guinness</a> - представитель культурно-массового комитета<br>
4. .. - представитель информационного комитета<br>
5. <a href="http://freaksaandgeeks.rusff.ru/profile.php?id=56">Noa Øverland</a> -представитель спортивного комитета<br>
6. .. - представитель учебного комитета<br>
7. .. - представитель социального комитета<br>
Представители комитетов - по одному с факультета:<br>
9 класс -<br>
10 класс - <br>
11 класс - <br>
12 класс - <a href="http://freaksaandgeeks.rusff.ru/profile.php?id=10">AMBERLE BARNES</a><br>
</span>
<br><br><hr>
<center><span class="zagol">Кружок дебатов "Точка зрения"</span></center>
Как спорить так, чтобы тебе поверили даже противники. Как доказать свою правоту, прибегнув лишь к словесным объяснениям? Как оставить оппонента в полной прострации, использовав его аргументы против него самого? Эти ребята знают, что значит приводить нужные аргументы. Взирая на всех с высокой стойки, они доказывают свою точку зрения, оставаясь с виду абсолютно спокойными и непоколебимыми.<br>
<span class="spiski"><b>Руководитель:</b><br>
1. .. <br>
2. .. 
</span>
      </div>
     </li>
    </ul>
   </div>
  </div>
 </div>


</br>

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


<style>
.naccs { height: 226px;}
.textknopok {height: 226px;
    width: 372px;}

.spiski {    font-size: 11px;
    font-family: arial;
    line-height: 1px;}

.zagol {   
    font-family: arial;
    font-size: 15px;
    text-align: center;text-shadow: 2px 1px 3px #fff;
    text-transform: uppercase;}
.punbb .post-content p {
    margin: 0;
    padding: 0 0 1em 0;
    line-height: 119%;}
</style>


Код:
деятельность - <a href="ССЫЛКА_НА_ПРОФИЛЬ">ИМЯ</a>