Нетленка

by pharma_nsk

HTML

<body>
<div class="block">
<div class="people">
<h1>нетленка</h1>
<p>
<a href="#"><span>Арсений Рогинский</span><br>Нобелевская премия и память о терроре</a>
</p>
<p>
<a href="#"><span>Каха Бендукидзе</span><br>"Обмена политических взглядов на комфортную жизнь не будет"</a>
</p>
<p>
<a href="#"><span>Теодор Шанин Борис Юдин</span><br>Сила самоиронии. К 80-ти летию Юрия Левады</a>
</p>
<p>
<a href="#"><span>Сергей Неклюдов</span><br>Гуманитарное знание и народная традиция</a>
</p>
<p>
<a href="#"><span>Михаил Фаворов</span><br>Вакцины, вакцинация и их роль в общественном здравоохранении</a>
</p>
</div>
<ul class="nav">
<li><a href="#">Семинары</a></li>
<li class="active"><a href="#">Спецпроекты</a></li>
  <ul>
  <li><a href="#">Экологическая повестка</a></li>
  <li><a href="#">Открытое государство</a></li>
  <li><a href="#">Русская политейя</a></li>
  <li><a href="#">Прыжок в будущее</a></li>
  <li><a href="#">Проект "Москва"</a></li>
  <li><a href="#">История: человек, институты</a></li>
  </ul>
  <li><a href="#">Документы</a></li>
  <li><a href="#">О проекте</a></li>
</ul>
<div class="partners">
<a href="#">Партнеры</a>
</div>
</div>
</body>

CSS

body {background-color:white; font-family:sans-serif; font-size:16px; }
div, ul, li, a, p, h1 {margin:0px; padding:0px;}
.block {display:block; width:280px;  margin:20px auto;}
.people h1 {text-transform:uppercase; font-size:20px; color:#338F61; font-weight:500; font-family:serif; margin-bottom:10px;}
p {margin-bottom:7px;}
.people {padding-left:15px; border-left:6px solid #338F61; }
.people a {text-decoration:none; color:#D95C23; }
.people span {color:black;}
.people a:hover {text-decoration:underline;}
.nav {list-style:square outside; color:#338F61; padding-left:14px; }
.nav>li a {display:block; padding:7px 7px; color:#338F61; text-decoration:none; text-transform:uppercase; font-size:20px;  font-weight:500; font-family:serif;}
.active a{ cursor:default;}
.nav ul {list-style:none; }
.nav ul a {display:block; padding:0px 8px; color:black; text-decoration:none; position:relative; bottom:8px;}
.nav a:hover {text-decoration:underline;}
.active a:hover {text-decoration:none;}
.partners a {display:block; padding:10px; background-color:black; color:white;  width:260px; text-transform:uppercase; font-size:20px; margin-top:10px;text-decoration:none;}
.partners a:hover {color:#338F61;}