Work2

by Anatoly Kulikov

HTML

<div class="new__post">
  <small><a href="#">Новости ИУО РАО</a></small>
  <p><a href="#">Межрегиональная научно-практическая конференция «Комплексное сопровождение инвалидов и лиц с ограниченными возможностями здоровья в рамках профессионального образования и трудоустройства»</a></p>
  <time>12.12.2018</time>
</div>
<div class="new__post">
  <small><a href="#">Новости ИУО РАО</a></small>
  <p><a href="#">Межрегиональная научно-практическая конференция «Комплексное сопровождение инвалидов и лиц с ограниченными возможностями здоровья в рамках профессионального образования и трудоустройства»</a></p>
  <time>12.12.2018</time>
</div>
<div class="new__post">
  <small><a href="#">Новости ИУО РАО</a></small>
  <p><a href="#">Межрегиональная научно-практическая конференция «Комплексное сопровождение инвалидов и лиц с ограниченными возможностями здоровья в рамках профессионального образования и трудоустройства»</a></p>
  <time>12.12.2018</time>
</div>
<div class="new__post">
  <small><a href="#">Новости ИУО РАО</a></small>
  <p><a href="#">Межрегиональная научно-практическая конференция «Комплексное сопровождение инвалидов и лиц с ограниченными возможностями здоровья в рамках профессионального образования и трудоустройства»</a></p>
  <time>12.12.2018</time>
</div>
<div class="new__post">
  <small><a href="#">Новости ИУО РАО</a></small>
  <p><a href="#">Межрегиональная научно-практическая конференция «Комплексное сопровождение инвалидов и лиц с ограниченными возможностями здоровья в рамках профессионального образования и трудоустройства»</a></p>
  <time>12.12.2018</time>
</div>
<div class="new__post">
  <small><a href="#">Новости ИУО РАО</a></small>
  <p><a href="#">Межрегиональная научно-практическая конференция «Комплексное сопровождение инвалидов и лиц с ограниченными возможностями здоровья в рамках профессионального образования и трудоустройства»</a></p>
  <time>12.12.2018</time>
</div>

SCSS

* {
  margin:0;
  border: none;
  box-sizing: border-box;
  font-size: 100%;
}

body {
  display: block;
  width: 720px;
  margin: 0 auto;
}

.new__post {
  display: block;
  width: 100%;
  padding: 10px 10px 15px;
  margin-bottom: 10px;
  border-bottom: #E0E0E0 solid 1px;
  
  small {
    display: block;
    width: 100%;
    margin-bottom: 5px;
    color: #0097A7;
  }
  p {
    display: block;
    width: 100%;
    font-size: 1.2rem;
  }
  time {
    display: block;
    width: 100%;
    margin-top: 10px;
    color: #9E9E9E;
  }
  a {
    text-decoration: none;
    color: inherit;
    transition: all linear .2s;
  }
  a:hover {
    color: #1976D2;
  }
}
.new__post:last-of-type {
  border-bottom: none;
}