<style>
/*Подгоняем ширину блока под зеро-блоки для адаптивов у блока с ответами на вопросы TX16N2*/
/*Ширина блока на мобилках до 480px*/
@media screen and (max-width: 480px){
#rec384559232 .t-col { /*Тут прописываем ID блока*/
padding-left: 10px;
padding-right: 10px;
}
#rec384559232 .t-container { /*Тут прописываем ID блока*/
max-width: 320px;
}}
/*Ширина блока на мобилках от 480px до 640px*/
@media (min-width: 481px) and (max-width:640px){
#rec384559232 .t-col { /*Тут прописываем ID блока*/
padding-left: 0px;
padding-right: 0px;
}
#rec384559232 .t-container { /*Тут прописываем ID блока*/
max-width: 460px;
}}
/*Тут подгоняем шрифт под общий размер шрифта на всем сайте*/
/*Размер шрифта до 640px, телефон горизонтальный и вертиклаьный*/
@media screen and (max-width:640px){
.t668__title{
font-size: 16px !important; /*Размер заголовка*/
}
.t668__text{
font-size: 14px !important; /*Размер текста*/
}}
/*Размер шрифта от 640px до 960px*/
@media (min-width:641px) and (max-width:1200px){
.t668__title{
font-size: 18px !important; /*Размер заголовка*/
}
.t668__text{
font-size: 16px !important; /*Размер текста*/
}}
</style>
<style>
/*Добавляем анимацию скругления углов у блока TE110 при наведении, только для десктопа*/
@media screen and (min-width:1200px){
.t694__col{
transition: all .5s;
-webkit-transition: all .8s;
}
.t694__col:hover{ /*Одинаковый радиус для всех карточек*/
border-radius: 50px 200px 50px 150px !important; /*Радиус скругления у блока*/
transition: all .5s; /*Скорость анимации*/
-webkit-transition: all .8s;
}
/*Если не нужен разный радиус для каждой карточки, то блоки ниже можно удалить */
.t694__col:nth-child(0):hover{ /*Первая карточка*/
border-radius: 100px 500px 50px 50px !important; /*Радиус скругления у блока*/
transition: all .5s; /*Скорость анимации*/
-webkit-transition: all .8s;
}
.t694__col:nth-child(1):hover{ /*Вторая карточка*/
border-radius: 500px 10px 10px 10px !important; /*Радиус скругления у блока*/
transition: all .5s; /*Скорость анимации*/
-webkit-transition: all .8s;
}
.t694__col:nth-child(2):hover{ /*Третья карточка*/
border-radius: 500px 500px 50px 50px !important; /*Радиус скругления у блока*/
transition: all .5s; /*Скорость анимации*/
-webkit-transition: all .8s;
}
/*Удалять до этого комментария*/
}
</style>
<!--Lottie анимация с автоматическим проигрыванием-->
<!--Создаем в зеро-блоке html и добавляем туда этот код-->
<div id="lottie"></div>
<!--Добавляем код ниже в блок T123-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.13/lottie.min.js'></script>
<script>
/* Первая анимация*/
var svgContainer = document.getElementById('lottie'); // ID в зеро-блоке и тут должны совпадать
var animItem = bodymovin.loadAnimation({
wrapper: svgContainer,
animType: 'svg',
loop: true, // Если нужно проиграть анимацию один раз, то ставим false вместо true
path: 'https://labs.nearpod.com/bodymovin/demo/markus/walk/girl.json' // Ссылка на json файл
});
animItem.setSubframe(false); //Если false, то используется частота кадров из AE
/* Вторая анимация*/
var svgContainer = document.getElementById('lottie1'); // ID в зеро-блоке и тут должны совпадать
var animItem2 = bodymovin.loadAnimation({
wrapper: svgContainer,
animType: 'svg',
loop: true, // Если нужно проиграть анимацию один раз, то ставим false вместо true
path: 'https://labs.nearpod.com/bodymovin/demo/markus/walk/parents.json' // Ссылка на json файл
});
animItem2.setSubframe(false);
animItem.setSpeed(0.8) // Скорость проигрывания анимации
animItem2.setSpeed(0.8)
window.onresize = function(){
animItem.resize()
animItem2.resize()
}
</script>
<!--Lottie анимация с проигрыванием по скролу-->
<!--Создаем в зеро-блоке html и добавляем туда этот код-->
<lottie-player id="firstLottie" src="https://labs.nearpod.com/bodymovin/demo/markus/walk/sasquatch.json" style="width:100%; height:100%;"></lottie-player>
<!--Добавляем код ниже в блок T123-->
<script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>
<script src="https://unpkg.com/@lottiefiles/lottie-player@0.4.0/dist/lottie-player.js"></script>
<script>
//Первая анимация
LottieInteractivity.create({
mode: 'scroll',
player: '#firstLottie', //ID lottie-player в зеро-блоке и тут должны совпадать
container: "#myсontainer", //ID контейнера, где лежит lottie player
actions: [
{
visibility: [0, 0.1], // C 0 до 10% от высоты экрана анимация на паузе
type: "stop",
frames: [0]
},
{
visibility: [0.1, 1], // C 10% до 100% от высоты экрана анимация воспроизводится
type: "seek",
frames: [0, 100] // С какого по какой кадр будет проигрываться анимация
}
],
});
// Вторая анимация
LottieInteractivity.create({
mode: 'scroll',
player: '#secondLottie', //ID lottie-player в зеро-блоке и тут должны совпадать
actions: [
{
visibility: [0, 0.2], // C 0 до 10% от высоты экрана анимация на паузе
type: "stop",
frames: [0]
},
{
visibility: [0.2, 1], // C 10% до 100% от высоты экрана анимация воспроизводится
type: "seek",
frames: [0, 100] // С какого по какой кадр будет проигрываться анимация
}
],
});
</script>
<style>
/*Добавляем появление иконки при наведении на пункт меню*/
@media screen and (min-width:1200px){ /*Задаем параметры только для десктопа*/
.t450__list_item a{
display: flex;
align-items: center;
position:relative;
left: -20px;
}
.t450__list_item a:before{
content: "";
position: relative;
height: 44px; /*Высота иконки*/
width: 44px; /*Ширина иконки*/
margin-right: 15px; /*Отступ справа у иконки от текста*/
left:-30px;
display:flex;
opacity:0;
background: url(https://static.tildacdn.com/tild3230-6462-4538-a630-343761363963/MapPinLine2.svg) no-repeat; /*Ссылка на иконку*/
transition: 0.6s ease-in-out; /*Скорость появления иконки и плавность перехода*/
}
.t450__list_item a:hover:before{
opacity:1;
left: 0px;
}
.t450__list_item:last-child a {
display: flex;
}
}
</style>
<style>
/*3D эффект для карточек (пример на блоке TE215, также можно применить для любого стандартного блока, где есть подобные колонки из товаров или статей, название класса нужно вытащить через просмотр кода*/
/*Значение перспективы для родительского блока, чем больше значение, тем меньше эффект перспективы*/
#rec353765248 .t688__row{ /*Указываем ID блока где находятся карточки*/
perspective:400px;
-webkit-perspective:400px;
}
/*Размер искажения карточек в нормальном состоянии*/
#rec353765248 .t-col_4{
transform:rotateX(10deg); /*Угол поворота карточки по оси X, также можно добавить через пробел rotateY и Z*/
-webkit-transform:rotateX(10deg);
-moz-transform:rotateX(10deg);
transition:1s ease; /*Скорость анимации при возвращении в исходное положение*/
-webkit-transition:1s ease;
-moz-transition:1s ease;
}
/*Размер искажения карточек при наведении*/
#rec353765248 .t-col_4:hover{
transform:rotateX(0deg);
-webkit-transform:rotateX(0deg);
-moz-transform:rotateX(0deg);
transition:1s ease;
-webkit-transition:1s ease;
-moz-transition:1s ease;
}}
/*Если нужно, чтобы этот код применялся только на декстопной версии, то весь код выше нужно вставить между этим кодом
@media screen and (min-width:1200px){
}
*/
<style/>
<style>
/*Плавное увеличение карточки при наведении. Нужно через инспектор кода вытащить класс карточки и указать ID блока*/
#rec353797691 .t615__col{
transition:1s ease; /*Скорость анимации при возвращении в нормальное состояние*/
-webkit-transition:1s ease;
-moz-transition:1s ease;
}
#rec353797691 .t615__col:hover{
transform:scale(1.1); /*Анимация увеличения или уменьшения.Начальное значение просто 1*/
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
transition:1s ease; /*Скорость анимации при наведении*/
-webkit-transition:1s ease;
-moz-transition:1s ease;
}
</style>
<style>
/*Меняем размер отступа между карточками на декстопе. Главное чтобы общая сумма была равна 400px*/
/*Указываем ID блока, и через инспектор кода ищем класс одной карточки, нам нужен самый первый */
@media screen and (min-width:1200px){
#rec353807800 .t774__col {
max-width: 390px; /*Размер самой карточки*/
}
#rec353807800 .t774__col {
margin-left: 5px; /*Отступ слева*/
margin-right: 5px; /*Отступ справа. Сумма этих отступов будет расстоянием между карточками*/
}
}
</style>
/*Создаем зеро-блок, добавляем туда этот код html. Прописываем ссылки на изображения,
сколько изображений, столько и кадров. Можно использовать стандартные блоки,
чтобы получить ссылки на изображения, которые будут залиты на тильду, например Галерею GL03 */
<div id="myTurntable" class="turntable">
<ul>
<li data-img-src="ссылка на изображение1" class="">
<li data-img-src="ссылка на изображение2" class="">
<li data-img-src="ссылка на изображение2" class="">
</ul>
</div>
/*Добавляем блок html T123 и вставляем туда код, который ниже */
<style>
.turntable {
margin: 0px;
}
.turntable ul {
padding: 0px;
margin: 0px;
}
.turntable ul li {
list-style-type: none;
display: none;
}
.turntable ul li img {
width: 100%;
}
.turntable ul li.active {
display: block;
}
</style>
/*Добавляем еще один блок html T123 и вставляем код ниже*/
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> /*Его можно прописать в настройках сайта*/
<script>
!function e(i,t,o){function a(r,s){if(!t[r]){if(!i[r]){var c="function"==typeof require&&require;if(!s&&c)return c(r,!0);if(n)return n(r,!0);var l=new Error("Cannot find module '"+r+"'");throw l.code="MODULE_NOT_FOUND",l}var m=t[r]={exports:{}};i[r][0].call(m.exports,function(e){var t=i[r][1][e];return a(t?t:e)},m,m.exports,e,i,t,o)}return t[r].exports}for(var n="function"==typeof require&&require,r=0;r<o.length;r++)a(o[r]);return a}({1:[function(e,i,t){"use strict";!function(e){e.fn.turntable=function(i){function t(i){var t,o=i.length;t="scroll"===n.axis?e(window).height():"y"===n.axis?r.height():r.width();for(var a=t/o,c=0;c<i.length;c++)s[c]={min:a*c,max:a+a*c,index:c};n.reverse===!0&&(s.reverse(),e.each(s,function(e,i){i.index=e}))}var o=function(){var e=!1;return function(i){(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(i)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(i.substr(0,4)))&&(e=!0)}(navigator.userAgent||navigator.vendor||window.opera),e},a=e("ul",this).children(),n=e.extend({},e.fn.turntable.defaults,i),r=e(this),s=[];!function(i){a.each(function(){e(this).html('<img src="'+e(this).data("imgSrc")+'">')})}(),e("li:first-child>img",r).load(function(){e(this).parent().addClass("active"),t(a)}),e(window).resize(function(){t(a)});var c=function(i,t){e.each(i,function(){t>=this.min&&t<=this.max&&(a.removeClass("active"),a.eq(this.index).addClass("active"))})};return"scroll"===n.axis?e(window).scroll(function(){var i;i="bottom"===n.scrollStart?r.height():"top"===n.scrollStart?0:r.height()/2;var t=r.offset(),o=t.top-(e(window).scrollTop()-i);c(s,o)}):o()?r.on("touchmove",function(i){i.preventDefault();var t,o=e(this).offset(),a=i.originalEvent.touches[0]||i.originalEvent.changedTouches[0];t="y"===n.axis?a.pageY-o.top:a.pageX-o.left,c(s,t)}):r.on("mousemove",function(i){var t,o=e(this).offset();t="y"===n.axis?i.pageY-o.top:i.pageX-o.left,c(s,t)})},e.fn.turntable.defaults={axis:"x",reverse:!1,scrollStart:"middle"}}(jQuery)},{}]},{},[1]);
$('#myTurntable').turntable({
axis:'scroll',
reverse:'true',
scrollStart:'bottom' /*Откуда будет начинаться анимация, bottom, top, center*/
});
$('#myTurntable2').turntable(); /*Анимация по перемещению мышки. Тогда нужно будет поменять в самом первом коде, который вставляли в зеро-блок id, который будет указан здесь*/
</script>
/*Создаем зеро-блок, и там вставляем код ниже, сам html блок растягиваем на 100% по гриду и высоту задаем равную размеру шрифта*/
<div id="container">
<span id="text1"></span>
<span id="text2"></span>
</div>
<svg id="filters">
<defs>
<filter id="threshold">
<feColorMatrix in="SourceGraphic"
type="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 255 -140" />
</filter>
</defs>
</svg>
/*Добавляем html блок T123 и вставляем туда этот код*/
<style>
#container {
filter: url(#threshold) blur(0.6px);
width:100%;
height:100%;
margin:0 auto;
}
#text1, #text2 {
position: absolute;
width: 100%;
font-family: "Gilroy",serif; /*Семейство шрифта*/
font-weight: 700; /*Начертание*/
font-size: 140px; /*Размер текста*/
display: inline-block;
color: white; /*Цвет текста, словом, или через HEX #ffffff*/
text-align: left; /*Выравнивание текста по левому краю, центру, по правому краю*/
}
/*Если такой эффект нужен на телефоне, то нужно еще прописать дополнительный код ниже, если не нужен, то нужно удалить*/
@media screen and (max-width:640px){ /*Максимальное разрешение, до которого будет применятся данный размер текста*/
#text1, #text2 {
font-size: 40px; /*Размер текста для этого разрешения*/
}}
</style>
<script>
const elts = {
text1: document.getElementById("text1"),
text2: document.getElementById("text2")
};
const texts = [ //Сюда прописываем текст, который должен меняться
"Как",
"сделать",
"такой",
"эффект",
"с помощью",
"кода?"
];
const morphTime = 0.5; //Скорость перехода к следующему слову
const cooldownTime = 0.25;
let textIndex = texts.length - 1;
let time = new Date();
let morph = 0;
let cooldown = cooldownTime;
elts.text1.textContent = texts[textIndex % texts.length];
elts.text2.textContent = texts[(textIndex + 1) % texts.length];
function doMorph() {
morph -= cooldown;
cooldown = 0;
let fraction = morph / morphTime;
if (fraction > 1) {
cooldown = cooldownTime;
fraction = 1;
}
setMorph(fraction);
}
function setMorph(fraction) {
elts.text2.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;
elts.text2.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;
fraction = 1 - fraction;
elts.text1.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;
elts.text1.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;
elts.text1.textContent = texts[textIndex % texts.length];
elts.text2.textContent = texts[(textIndex + 1) % texts.length];
}
function doCooldown() {
morph = 0;
elts.text2.style.filter = "";
elts.text2.style.opacity = "100%";
elts.text1.style.filter = "";
elts.text1.style.opacity = "0%";
}
function animate() {
requestAnimationFrame(animate);
let newTime = new Date();
let shouldIncrementIndex = cooldown > 0;
let dt = (newTime - time) / 2000;
time = newTime;
cooldown -= dt;
if (cooldown <= 0) {
if (shouldIncrementIndex) {
textIndex++;
}
doMorph();
} else {
doCooldown();
}
}
animate();
</script>
/*Создаем зеро-блок, и там вставляем код ниже, сам html блок растягиваем на 100% по гриду и высоту задаем равную размеру шрифта*/
<div class="container">
<div class="text"></div>
</div>
/*Добавляем html блок T123 и вставляем туда этот код*/
<style>
.container{
height: 100%;
width: 100%;
}
.text{
font-family: 'Gilroy', serif; /*Семейство шрифта*/
font-weight: 300; /*Начертание шрифта*/
font-size: 80px; /*Размер шрифта*/ /*Цвет шрифта*/
color: white; /*Цвет текста*/
text-align: left; /*Выравнивание текста по правому краю, центру или левому*/
}
.dud{
color:green; /*Цвет символов*/
font-weight: 100; /*Начертание символов*/
}
/*Если такой эффект нужен на телефоне, то нужно еще прописать дополнительный код ниже, у которого убрать комментарии*/
/*
@media screen and (max-width:640px){ /*Максимальное разрешение, до которого будет применяться данный размер шрифта*/
.text{
font-size: 40px !important; /*Размер шрифта*/
}
*\
</style>
<script>
class TextScramble {
constructor(el) {
this.el = el
this.chars = '!<>-_\\/[]{}—=+*^?#________'
this.update = this.update.bind(this)
}
setText(newText) {
const oldText = this.el.innerText
const length = Math.max(oldText.length, newText.length)
const promise = new Promise((resolve) => this.resolve = resolve)
this.queue = []
for (let i = 0; i < length; i++) {
const from = oldText[i] || ''
const to = newText[i] || ''
const start = Math.floor(Math.random() * 60) //Если нужно появление медленне, то тут и снизу увеличиваем значение
const end = start + Math.floor(Math.random() * 60)
this.queue.push({ from, to, start, end })
}
cancelAnimationFrame(this.frameRequest)
this.frame = 0
this.update()
return promise
}
update() {
let output = ''
let complete = 0
for (let i = 0, n = this.queue.length; i < n; i++) {
let { from, to, start, end, char } = this.queue[i]
if (this.frame >= end) {
complete++
output += to
} else if (this.frame >= start) {
if (!char || Math.random() < 0.28) {
char = this.randomChar()
this.queue[i].char = char
}
output += `<span class="dud">${char}</span>`
} else {
output += from
}
}
this.el.innerHTML = output
if (complete === this.queue.length) {
this.resolve()
} else {
this.frameRequest = requestAnimationFrame(this.update)
this.frame++
}
}
randomChar() {
return this.chars[Math.floor(Math.random() * this.chars.length)]
}
}
const phrases = [ //Сюда пишем слова, которые будут меняться
'Как',
'сделать',
'такой текст',
'с помощью',
'кода?'
]
const el = document.querySelector('.text')
const fx = new TextScramble(el)
let counter = 0
const next = () => {
fx.setText(phrases[counter]).then(() => {
setTimeout(next, 600) //Пауза между сменой слов
})
counter = (counter + 1) % phrases.length
}
next()
</script>
<style>
/*Фильтры наложения*/
/*Создаем шейп, задаем ему класс, убираем заливку. Скругление углов происходит через код, также добавление обводки, если она нужна*/
.class1{
backdrop-filter: hue-rotate(200deg);
-webkit-backdrop-filter: hue-rotate(200deg);
-moz-backdrop-filter: hue-rotate(200deg);
border-radius: 25px;
border:1px solid gray;
}
.class2{
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
-moz-backdrop-filter: blur(10px);
border-radius: 25px;
border:1px solid #F4f4f4;
}
.class3{
backdrop-filter: brightness(40%);
-webkit-backdrop-filter: brightness(40%);
-moz-backdrop-filter: brightness(40%);
border-radius: 25px;
border:1px solid gray;
}
.class4{
backdrop-filter: contrast(10%);
-webkit-backdrop-filter: contrast(10%);
-moz-backdrop-filter: contrast(10%);
border-radius: 25px;
border:1px solid gray;
}
.class5{
backdrop-filter: grayscale(300%);
-webkit-backdrop-filter: grayscale(300%);
-moz-backdrop-filter: grayscale(300%);
border-radius: 25px;
border:1px solid gray;
}
.class6{
backdrop-filter: invert(160%);
-webkit-backdrop-filter: invert(160%);
-moz-backdrop-filter: invert(160%);
border-radius: 25px;
border:1px solid gray;
}
/*Смена эффекта при наведении*/
.class7{
backdrop-filter: sepia(200%);
-webkit-backdrop-filter: sepia(200%);
-moz-backdrop-filter: sepia(200%);
border-radius: 25px;
border:1px solid gray;
}
.class7:hover{
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
-moz-backdrop-filter: blur(10px);
border-radius: 25px;
border:1px solid #F4f4f4;
}
.class8{
backdrop-filter: saturate(200%);
-webkit-backdrop-filter: saturate(200%);
-moz-backdrop-filter: saturate(200%);
border-radius: 25px;
border:1px solid gray;
}
</style>
<style>
/*Не стандартное количество карточек в ряд, 5,6,7 и тд. для блока ST305N*/
@media screen and (min-width:1200px){ /*Задаем эти изменения только для десктопной версии сайта*/
/*Сюда вставляем ID блока и класс обертки самих товаров*/
#rec354494705 .t776__parent {
display: flex;
flex-wrap: wrap;
}
#rec354494705 .t-col_3 { /*Это класс самой карточки товара*/
max-width: 13%; /*Сколько места занимает одна карточка*/
}
</style>
<style>
/*Не стандартное количество карточек в ряд, 5,6,7 и тд. для блока ST315N*/
@media screen and (min-width:1200px){ /*Задаем эти изменения только для десктопной версии сайта*/
/*Сюда вставляем ID блока и класс обертки самих товаров*/
#rec354491914 .t786__container {
display: flex;
flex-wrap: wrap;
}
#rec354491914 .t786__col_25 { /*Это класс самой карточки товара*/
width: 16%; /*Сколько места занимает одна карточка*/
}}
</style>