<ul class="news-list wrap">
<li class="news-item">
<p class="news-date">08.05.2019</p>
<p class="news-title">Новая новость</p>
<div class="news-srt">Являясь всего лишь частью общей картины, акционеры крупнейших компаний, инициированные исключительно синтетически...</div>
<a href="" class="news-more">Подробнее</a>
</li>
<li class="news-item">
<p class="news-date">08.05.2019</p>
<p class="news-title">Новая новость</p>
<div class="news-srt">Являясь всего лишь частью общей картины, акционеры крупнейших компаний, инициированные исключительно синтетически...</div>
<a href="" class="news-more">Подробнее</a>
</li>
<li class="news-item">
<p class="news-date">08.05.2019</p>
<p class="news-title">Новая новость длинное название</p>
<div class="news-srt">Являясь всего лишь частью общей картины, акционеры крупнейших компаний, инициированные исключительно синтетиdsfsdfsdfgsdgsgsgsgsgsgdsgsчески...</div>
<a href="" class="news-more">Подробнее</a>
</li>
<li class="news-item">
<p class="news-date">08.05.2019</p>
<p class="news-title">Новая новость</p>
<div class="news-srt">Являясь всего лишь частью общей картины, акционеры крупнейших компаний, инициированные исключительно синтетически...</div>
<a href="" class="news-more">Подробнее</a>
</li>
<li class="news-item">
<p class="news-date">08.05.2019</p>
<p class="news-title">Новая новость</p>
<div class="news-srt">Являясь всего лишь частью общей картины, акционеры крупнейших компаний, инициированные исключительно синтетически...</div>
<a href="" class="news-more">Подробнее</a>
</li>
</ul>
.news {
&-list {
padding: 30px 0;
list-style-type: none;
display: flex;
flex-wrap: wrap;
}
&-item {
margin: 0 15px;
width: calc(25% - 30px);
margin-bottom: 30px;
display: flex;
flex-direction: column;
}
&-date {
margin: 20px 0;
color: #7f7f7f;
}
&-title {
font-size: 24px;
text-transform: uppercase;
margin-bottom: 20px;
}
&-srt {
text-align: justify;
margin-bottom: 20px;
align-self: middle;
}
&-more {
text-transform: uppercase;
font-size: 18px;
color: #7f7f7f;
text-decoration: none;
transition: color .5s;
align-self: flex-end;
&:hover {
color: #000;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.