Novinky
<section class="news">
<div class="news__background">
<div class="news__content --content">
<div class="news__wrapper">
<div class="news__top">
<h2 class="news__title">
<a href="#" class="news__title-link">
Novinky z firmy
</a>
</h2>
<a href="#" class="news__link">
Zobrazit všechny novniky
</a>
</div>
<div class="news__bottom --row">
<div class="news__item news-item --column --w-12 --w-s-6 --w-l-3">
<div class="news-item__wrapper --flex --flex-column">
<h3 class="news-item__title">
<a href="#" class="news-item__title-link">
Nadpis novinky
</a>
</h3>
<div class="news-item__date">
20. 1. 2023
</div>
<div class="news-item__perex">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc vulputate libero et velit interdum, ac aliquet odio mattis.
</div>
<a href="#" class="news-item__link">
Zobrazit více
<span class="news-item__arrow arrow arrow--more"></span>
</a>
</div>
</div>
<div class="news__item news-item --column --w-12 --w-s-6 --w-l-3">
<div class="news-item__wrapper --flex --flex-column">
<h3 class="news-item__title">
<a href="#" class="news-item__title-link">
Nadpis novinky
</a>
</h3>
<div class="news-item__date">
20. 1. 2023
</div>
<div class="news-item__perex">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc vulputate libero et velit interdum, ac aliquet odio mattis.
</div>
<a href="#" class="news-item__link">
Zobrazit více
<span class="news-item__arrow arrow arrow--more"></span>
</a>
</div>
</div>
<div class="news__item news-item --column --w-12 --w-s-6 --w-l-3">
<div class="news-item__wrapper --flex --flex-column">
<h3 class="news-item__title">
<a href="#" class="news-item__title-link">
Nadpis novinky
</a>
</h3>
<div class="news-item__date">
20. 1. 2023
</div>
<div class="news-item__perex">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc vulputate libero et velit interdum, ac aliquet odio mattis.
</div>
<a href="#" class="news-item__link">
Zobrazit více
<span class="news-item__arrow arrow arrow--more"></span>
</a>
</div>
</div>
<div class="news__item news-item --column --w-12 --w-s-6 --w-l-3">
<div class="news-item__wrapper --flex --flex-column">
<h3 class="news-item__title">
<a href="#" class="news-item__title-link">
Nadpis novinky
</a>
</h3>
<div class="news-item__date">
20. 1. 2023
</div>
<div class="news-item__perex">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc vulputate libero et velit interdum, ac aliquet odio mattis.
</div>
<a href="#" class="news-item__link">
Zobrazit více
<span class="news-item__arrow arrow arrow--more"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
.news{
padding-top: 1.5rem;
@include media($large){
padding-top: 3.5rem;
}
}
.news__background{
padding-top: 2rem;
padding-bottom: 2rem;
background: linear-gradient(90deg, rgba(68,177,232,1) 0%, rgba(184,57,134,1) 100%);
@include media($medium){
padding-top: 4.5rem;
padding-bottom: 4.5rem;
}
}
.news__top{
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 1rem;
}
.news__bottom{
row-gap: 1.6rem;
}
.news__title-link{
color: $color__text-light;
font-weight: 700;
font-size: 2.2rem;
@include media($large){
font-size: 2.8rem;
}
}
.news__link{
color: $color__text-light;
text-decoration: underline;
}
// news-item
.news-item__wrapper{
border-radius: 0.8rem;
background: $color__bg;
padding: 1.5rem 1.5rem 1rem 1.8rem;
overflow: hidden;
}
.news-item__title{
margin-bottom: 0.4rem;
}
.news-item__title-link{
font-weight: 700;
font-size: 1.8rem;
color: $color__primary;
@include media($large){
font-size: 2.3rem;
}
}
.news-item__date{
margin-bottom: 1.3rem;
color: $color__text-dark;
font-weight: 700;
}
.news-item__perex{
margin-bottom: 1.3rem;
}
.news-item__link{
display: flex;
align-items: center;
text-decoration: underline;
position: relative;
max-width: 9rem;
}
.news-item__link:hover .news-item__arrow,
.news-item__link:focus .news-item__arrow,
.news-item__link:active .news-item__arrow{
border-color: $color__link-h;
&:before{
background: $color__link-h;
}
}