section{
position: fixed;
top: 0;
width: 100%;
height: 100vh;
transition-delay: 0.3s;
transition: backdrop-filter 0.5s;
animation-name: menu;
animation-duration: 1s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
.blur{
position: fixed;
backdrop-filter: blur(5px) brightness(60%);
animation-name: menu;
animation-duration: 1s;
animation-direction: reverse;
animation-fill-mode: forwards;
}
@keyframes menu {
0%{transform: translateX(0);}
100%{transform: translateX(-101%);}
}
<a class="menu-itemlanguage" href="ru.html">
<label class="menu-btn" for="menu-toggle">
RU
</label>
</a>
<br>
- это устарело 100 лет назад. background: url("data:image/svg+xml, --- --- --- ") center no-repeat;
background: url("data:image/svg+xml, --- --- --- ") center no-repeat,
url("data:image/svg+xml, --- --- --- ") center no-repeat,
url("data:image/svg+xml, --- --- --- ") center no-repeat;
<td class="table__col shop-col">
<p class="shop-col__price shop-col__price--grey">
1,2 кг х
<span>200 руб.</span>
</p>
</td>
.shop-col__price {
&--grey {
color: green;
span {
color: grey;
}
}
}
.row .row-cols-2 {
display: grid;
grid-template:
"a b"
"a c";
}
.img-responsive{ grid-area: a;}
.top-banner{ grid-area: b;}
.bottom-banner{ grid-area: b;}
@media (max-width: 700px) {
.row .row-cols-2 {
display: grid;
grid-template:
"a a"
"b c";
}
}