Вывод дохода из таблицы
JavaScript
Скопируйте по кнопке ниже и вставьте в блок JavaScript на страницу виджета, в нем же указывается ссылка на таблицу
function processWebhook(data) {
var resultA = data.resultA.toLocaleString('ru-RU');
var resultB = data.resultB.toLocaleString('ru-RU');
var resultC = (data.resultC * 100).toFixed(0); // умножаем на 100 и округляем до целого числа
var resultD = (data.resultD * 100).toFixed(0); // умножаем на 100 и округляем до целого числа
var elementsGroupOne = document.querySelectorAll('.group_one');
elementsGroupOne.forEach(function(element) {
element.innerText = resultB + ' ₽';
});
var elementsGroupTwo = document.querySelectorAll('.group_two');
elementsGroupTwo.forEach(function(element) {
element.innerText = resultA + ' ₽';
});
var info3Element = document.getElementById('info3');
info3Element.innerText = resultD + '%'; // выводим значение без десятичных знаков и добавляем знак "%"
var info4Element = document.getElementById('info4');
info4Element.innerText = resultC + '%'; // выводим значение без десятичных знаков и добавляем знак "%"
var progressBarElements = document.querySelectorAll('.progress-bar.progress-bar-striped.progress-bar-animated');
progressBarElements.forEach(function(element) {
element.style.width = resultC + '%';
});
var progressBarElements = document.querySelectorAll('.progress-bar2');
progressBarElements.forEach(function(element) {
element.style.width = resultD + '%';
});
}
document.addEventListener('DOMContentLoaded', function() {
var url = 'https://script.google.com/macros/s/AKfycbxiDgfAS-Q5oy79iaNWf3bYuBADSMAzptFK3C2bxbJbNk9KRoyrB_jqj66SXizyufrW/exec';
fetch(url)
.then(response => response.json())
.then(data => processWebhook(data))
.catch(error => console.error('Ошибка при получении данных:', error));
});
Tilda Publishing
var less_id = 0, less_title = "", less_cat = "", less_des = "", less_img = "", less_stat = "", dostupen = true, with_images = true, with_cat = false, less_complited = false;
if (window.userInfo['isTeacher']==true) {
setInterval(function() {
if ($('.lesson-list.ui-sortable:not(.ui-sortable-disabled)').length>0) {
$('.xdget-lessonList form').css({'display':'block'});
$('.stylelesson').css({'display':'none'});
} else
{
$('.xdget-lessonList form').css({'display':'none'});
$('.stylelesson').css({'display':''});
}
}, 1000);
}
for (var s = 0, k = $('.xdget-lessonList').length; s < k; s++) {
if ($('.xdget-lessonList')[s].querySelectorAll('.lesson-list li').length>0) {
let lessoncount = $('.xdget-lessonList')[s].querySelectorAll('.lesson-list li');
for (var r = 0, n = lessoncount.length; r < n; r++) {
if (lessoncount[r].className.indexOf('lesson-id')>0) {
dostupen = true;
with_images = true;
with_cat = false;
less_complited = false;
if (lessoncount[r].className.indexOf('user-state-not_reached')>-1) {dostupen = false;}
if (lessoncount[r].className.indexOf('user-state-accomplished')>-1) {less_complited = true;}
less_id = lessoncount[r].className.match(/lesson-id-(.[0-9]*)/)[1];
less_title = lessoncount[r].querySelector('.title').innerHTML.trim();
less_cat = "";
if (lessoncount[r].querySelector('.title').innerHTML.split('. ')[1]!=null) {
less_cat = lessoncount[r].querySelector('.title').innerHTML.split('.')[0].trim();
less_title = lessoncount[r].querySelector('.title').innerHTML.trim();
less_title = less_title.replace(less_cat+'.', '').trim();
}
if (less_cat != "") {with_cat = true}
less_des = "";
if (!lessoncount[r].querySelector('.description')) {} else {less_des = lessoncount[r].querySelector('.description').innerHTML.trim()}
less_img = "";
if (!lessoncount[r].querySelector('.item-image')) {} else {less_img = lessoncount[r].querySelector('.item-image').style.background.match(/url\(\"(.*)\"\)/)[1]}
if (!lessoncount[r].querySelector('.user-state-label')) {} else {
less_stat = lessoncount[r].querySelector('.user-state-label').innerHTML.trim();
}
let less_stat_icon = "fa fa-flag";
if (!lessoncount[r].querySelector('.user-state-new-icon')) {} else {
if (lessoncount[r].querySelector('.user-state-new-icon').className.split('fa ')[1]!=null) {
if (lessoncount[r].querySelector('.user-state-new-icon').className.split('fa ')[1].indexOf('fa-angle-right')<0) {
less_stat_icon = "fa "+lessoncount[r].querySelector('.user-state-new-icon').className.split('fa ')[1];
}
}
}
if (lessoncount[r].className.indexOf('user-state-reached')>-1) {less_stat_icon = "hide";less_stat = " ";}
if (lessoncount[r].className.indexOf('user-state-has_mission')>-1) {less_stat = "Есть задание";}
if (lessoncount[r].className.indexOf('user-state-answered')>-1) {less_stat = "Ожидание проверки";}
if (lessoncount[r].className.indexOf('user-state-accomplished')>-1) {less_stat = "Задание принято";}
if (lessoncount[r].className.indexOf('user-state-not_reached')>-1) {less_stat_icon = "hide";}
if (less_img=='') {with_images = false}
$('.xdget-lessonList')[s].innerHTML += '<div class="stylelesson'+(dostupen ? "" : " blocked-less")+'"><div class="stylelesson-img'+(with_images ? '' : ' not-image-less')+'"><img src="'+less_img+'"></div><div class="stylelesson-text">'+'<span class="stylelesson_title">'+(with_cat ? '<div class="catless">'+less_cat+'</div>' : '')+less_title+'</span><p class="stylelesson-des">'+less_des+'</p><div class="stylelesson-stat"><span class="'+less_stat_icon+'"></span> '+less_stat+'</div><a class="stylelesson_but" '+(window.userInfo['isTeacher'] ? 'style="visibility: visible;"' : '')+' href="/teach/control/lesson/view/id/'+less_id+'"></a></div><br><div class="fon-text">'+(less_complited ? "✔" : "")+'</div></div>';
}
else {
if (lessoncount[r].className.indexOf('lesson-is-hidden')>-1) {
$('.xdget-lessonList')[s].innerHTML += '<div style="cursor: pointer;" class="stylelesson" onclick="'+lessoncount[r].getAttribute('onclick').replaceAll('"',"'")+'">'+lessoncount[r].innerHTML+'</div>';
} else {
$('.xdget-lessonList')[s].innerHTML += lessoncount[r].innerHTML;
}
}
}
}
}
$(document).ready(function(){
setTimeout(function() {
for (var s = 0, k = $('.xdget-lessonList').length; s < k; s++) {
if ($('.xdget-lessonList')[s].querySelectorAll('.lesson-list li').length>0) {
let lessoncount = $('.xdget-lessonList')[s].querySelectorAll('.lesson-list li');
for (var r = 0, n = lessoncount.length; r < n; r++) {
if (lessoncount[r].className.indexOf('lesson-id')>0) {
if (lessoncount[r].className.indexOf('lesson-list_watched')>-1) {
$('.stylelesson')[r].className = $('.stylelesson')[r].className + ' lesson-list_watched';
}
} }}}
}, 1000);
});
if (window.userInfo['isTeacher']==true) {
setInterval(function() {
if ($('.lesson-list.ui-sortable:not(.ui-sortable-disabled)').length>0) {
$('.xdget-lessonList form').css({'display':'block'});
$('.stylelesson').css({'display':'none'});
} else
{
$('.xdget-lessonList form').css({'display':'none'});
$('.stylelesson').css({'display':''});
}
}, 1000);
}
for (var s = 0, k = $('.xdget-lessonList').length; s < k; s++) {
if ($('.xdget-lessonList')[s].querySelectorAll('.lesson-list li').length>0) {
let lessoncount = $('.xdget-lessonList')[s].querySelectorAll('.lesson-list li');
for (var r = 0, n = lessoncount.length; r < n; r++) {
if (lessoncount[r].className.indexOf('lesson-id')>0) {
dostupen = true;
with_images = true;
with_cat = false;
less_complited = false;
if (lessoncount[r].className.indexOf('user-state-not_reached')>-1) {dostupen = false;}
if (lessoncount[r].className.indexOf('user-state-accomplished')>-1) {less_complited = true;}
less_id = lessoncount[r].className.match(/lesson-id-(.[0-9]*)/)[1];
less_title = lessoncount[r].querySelector('.title').innerHTML.trim();
less_cat = "";
if (lessoncount[r].querySelector('.title').innerHTML.split('. ')[1]!=null) {
less_cat = lessoncount[r].querySelector('.title').innerHTML.split('.')[0].trim();
less_title = lessoncount[r].querySelector('.title').innerHTML.trim();
less_title = less_title.replace(less_cat+'.', '').trim();
}
if (less_cat != "") {with_cat = true}
less_des = "";
if (!lessoncount[r].querySelector('.description')) {} else {less_des = lessoncount[r].querySelector('.description').innerHTML.trim()}
less_img = "";
if (!lessoncount[r].querySelector('.item-image')) {} else {less_img = lessoncount[r].querySelector('.item-image').style.background.match(/url\(\"(.*)\"\)/)[1]}
if (!lessoncount[r].querySelector('.user-state-label')) {} else {
less_stat = lessoncount[r].querySelector('.user-state-label').innerHTML.trim();
}
let less_stat_icon = "fa fa-flag";
if (!lessoncount[r].querySelector('.user-state-new-icon')) {} else {
if (lessoncount[r].querySelector('.user-state-new-icon').className.split('fa ')[1]!=null) {
if (lessoncount[r].querySelector('.user-state-new-icon').className.split('fa ')[1].indexOf('fa-angle-right')<0) {
less_stat_icon = "fa "+lessoncount[r].querySelector('.user-state-new-icon').className.split('fa ')[1];
}
}
}
if (lessoncount[r].className.indexOf('user-state-reached')>-1) {less_stat_icon = "hide";less_stat = " ";}
if (lessoncount[r].className.indexOf('user-state-has_mission')>-1) {less_stat = "Есть задание";}
if (lessoncount[r].className.indexOf('user-state-answered')>-1) {less_stat = "Ожидание проверки";}
if (lessoncount[r].className.indexOf('user-state-accomplished')>-1) {less_stat = "Задание принято";}
if (lessoncount[r].className.indexOf('user-state-not_reached')>-1) {less_stat_icon = "hide";}
if (less_img=='') {with_images = false}
$('.xdget-lessonList')[s].innerHTML += '<div class="stylelesson'+(dostupen ? "" : " blocked-less")+'"><div class="stylelesson-img'+(with_images ? '' : ' not-image-less')+'"><img src="'+less_img+'"></div><div class="stylelesson-text">'+'<span class="stylelesson_title">'+(with_cat ? '<div class="catless">'+less_cat+'</div>' : '')+less_title+'</span><p class="stylelesson-des">'+less_des+'</p><div class="stylelesson-stat"><span class="'+less_stat_icon+'"></span> '+less_stat+'</div><a class="stylelesson_but" '+(window.userInfo['isTeacher'] ? 'style="visibility: visible;"' : '')+' href="/teach/control/lesson/view/id/'+less_id+'"></a></div><br><div class="fon-text">'+(less_complited ? "✔" : "")+'</div></div>';
}
else {
if (lessoncount[r].className.indexOf('lesson-is-hidden')>-1) {
$('.xdget-lessonList')[s].innerHTML += '<div style="cursor: pointer;" class="stylelesson" onclick="'+lessoncount[r].getAttribute('onclick').replaceAll('"',"'")+'">'+lessoncount[r].innerHTML+'</div>';
} else {
$('.xdget-lessonList')[s].innerHTML += lessoncount[r].innerHTML;
}
}
}
}
}
$(document).ready(function(){
setTimeout(function() {
for (var s = 0, k = $('.xdget-lessonList').length; s < k; s++) {
if ($('.xdget-lessonList')[s].querySelectorAll('.lesson-list li').length>0) {
let lessoncount = $('.xdget-lessonList')[s].querySelectorAll('.lesson-list li');
for (var r = 0, n = lessoncount.length; r < n; r++) {
if (lessoncount[r].className.indexOf('lesson-id')>0) {
if (lessoncount[r].className.indexOf('lesson-list_watched')>-1) {
$('.stylelesson')[r].className = $('.stylelesson')[r].className + ' lesson-list_watched';
}
} }}}
}, 1000);
});
СКОПИРОВАТЬ КОД
HTML
Скопируйте по кнопке ниже и вставьте в стили на странице тренинга в настройках вида
<div class="shadow-block">
<div style="color:white;padding:20px 20px 15px 30px;border-radius:15px 15px 0 0;font-style: normal;font-weight: 700;background:black;font-family: proxima-nova, Lato, Helvetica, Arial, sans-serif;font-size: 19px; font-weight: 700; background-image: url(https://fs.getcourse.ru/fileservice/file/download/a/741430/sc/75/h/b789a1bb4ba21899d7708e7537d92766.png);">Общий банк
<img style="float: right;margin-right:14px;" width="15px"src="https://fs.getcourse.ru/fileservice/file/download/a/741430/sc/496/h/b8a6c943cfaea0ae99ca8a8c9aef6e57.png">
</div>
<div style="background:white;padding:31px;border-radius:0 0 15px 15px;padding-bottom:20px;padding-top:30px;">
<div style="color:grey;font-size:12pt;">Лямуры
<img style="float: right;margin-top:8px;" width="195px" src="https://fs.getcourse.ru/fileservice/file/download/a/741430/sc/167/h/396dbdc6d77a227f16e18875a951f8e2.png">
<p>
<b>
<div style="font-size:18pt;font-weight: 900;color:black"class="group_two">
<span id="info1"></span>
</div>
</b>
</div>
<div class="progress" style="margin-top:10px" role="progressbar" aria-label="Animated striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 61%;background:#489ff9"></div>
</div>
<div style="font-weight: 600;font-size:10pt;display:inline-block;color:#444648;padding-bottom:20px;font-family: proxima-nova, Lato, Helvetica, Arial, sans-serif;">
<span id="info">
</span>
<span style="color:#6f91b4"class="group_two">
</span>
<span style="color:#6f91b4"> / 825 000 ₽</span>
</div>
<div style="float: right;display:inline-block;color:#a3a3a3;font-size:10pt;font-family: proxima-nova, Lato, Helvetica, Arial, sans-serif;font-weight: 600;margin-top:3px;">
<span id="info4">0</span>
</div>
<div style="border: solid 0.1px whitesmoke;">
</div>
<div style="color:grey;font-size:12pt;padding-top:20px;">Творюги
<img style="float: right;margin-top:8px;" width="195px" src="https://fs.getcourse.ru/fileservice/file/download/a/741430/sc/290/h/9eec6cd908fe62c19a1750bdcf4b6500.png">
<p>
<b>
<div style="font-size:18pt;font-weight: 900;color:black" class="group_one">
</div>
</b>
</div>
<div class="progress" style="margin-top:10px;" role="progressbar" aria-label="Example with label" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar2" style="width: 42%;background:#87db5d;">
</div>
</div>
<div style="font-weight: 600;font-size:10pt;display:inline-block;color:#444648;padding-bottom:20px;font-family: proxima-nova, Lato, Helvetica, Arial, sans-serif;">
<span style="color:#6f91b4"class="group_one">
</span>
<span style="color:#6f91b4"> / 950 000 ₽</span>
</div>
<div style="float: right;display:inline-block;color:#a3a3a3;font-size:10pt;font-family: proxima-nova, Lato, Helvetica, Arial, sans-serif;font-weight: 600;margin-top:3px;">
<span id="info3">0</span>
</div>
</div>
</div>
body {
background: #273144
}
h1, h2 {
color: #fff;
font-family: 'Gilroy';
}
@font-face {
font-family: 'Gilroy';
src:
url('/pl/fileservice/file/download/a/413871/sc/39/h/b441440d84803508c5825aeb26ab356d.eot?#iefix') format('embedded-opentype'),
url('/pl/fileservice/file/download/a/413871/sc/108/h/320786a916d869501a835c3ed26cee8c.woff') format('woff'),
url('/pl/fileservice/file/download/a/413871/sc/267/h/dfa62f56295874ff6f0a6879f45ebea1.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Gilroy';
src:
url('/pl/fileservice/file/download/a/413871/sc/329/h/4cebb4039cdd5d23514a8293a64fafbe.eot?#iefix') format('embedded-opentype'),
url('/pl/fileservice/file/download/a/413871/sc/135/h/f6ba39e7447ff65f988e384c92141f85.woff') format('woff'),
url('/pl/fileservice/file/download/a/413871/sc/102/h/6b7b708308b5347098ed3edda135b592.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Gilroy';
src:
url('/pl/fileservice/file/download/a/413871/sc/219/h/7358c52e14d2aa7bcb014bc34bdd6234.eot?#iefix') format('embedded-opentype'),
url('/pl/fileservice/file/download/a/413871/sc/416/h/1eb9bb0c44ddbd1ca81b487b5be5a43d.woff') format('woff'),
url('/pl/fileservice/file/download/a/413871/sc/141/h/86c36ba0f0d54194eb71f4a732d16a94.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Gilroy';
src:
url('/pl/fileservice/file/download/a/413871/sc/281/h/2f50ff214a68e1c18adf8c0ea32b668a.eot?#iefix') format('embedded-opentype'),
url('/pl/fileservice/file/download/a/413871/sc/218/h/31428f2acb25f2b961a01f0752faaf2c.woff') format('woff'),
url('/pl/fileservice/file/download/a/413871/sc/196/h/3a51e3177b7e38ec29ef6e50109cfc24.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
:root {
--less-background-lesslist: rgba(236, 240, 241, 0);
--less-background-lessblock-border: #414556;
--less-background-lessblock1: rgb(247, 247, 247);
--less-background-lessblock2: rgb(247, 247, 247);
--less-background-lessblock-shadow: rgba(206, 206, 206, 1);
--less-background-border-image: rgb(206, 206, 206);
--less-color-but: white;
--less-background-but1: #0F8AFC;
--less-background-but2: #0F8AFC;
--less-color-but-hover: rgba(255, 255, 255, 1);
--less-background-but1-hover: rgba(45, 45, 45, 1);
--less-background-but2-hover: rgba(45, 45, 45, 1);
--less-background-razdel: rgb(255, 216, 0);
--less-color-razdel: rgba(45, 45, 45, 1);
--less-color-title: white;
--less-color-des: #ccc;
--less-color-stat: white;
--less-color-fontext: rgba(98, 98, 98, 0.11);
--less-video-watch-text: rgb(247, 247, 247);
--less-video-watch-fon: rgb(155, 155, 155);
}
.lesson-list__video-watched {
color: var(--less-video-watch-text);
background-color: var(--less-video-watch-fon);
font-family: 'Gilroy', sans-serif;
}
.stylelesson .stylelesson_but::after {
content: "ПЕРЕЙТИ К УРОКУ"; /*Название кнопки*/
font-family: 'Gilroy', sans-serif;
}
.xdget-lessonList:not(.editable) form {
display: none;
}
.xdget-lessonList {
background-color: var(--less-background-lesslist); /*Фон списка уроков. Удалите, если нужно убрать фон*/
padding: 0px 0px; /*Отступы внутри списка уроков. Поставьте 0 если нужно убрать оступы*/
}
.page-header {
margin: 10px 0 0px;
}
.stylelesson.blocked-less {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
.stylelesson.blocked-less .stylelesson_but {
visibility: hidden;
}
.stylelesson-img.not-image-less {
display: none;
}
.stylelesson {
height: auto;
display: flex;
padding: 45px 50px; /*Отступы внутри блока урока. Поставьте нули, чтобы убрать отступы*/
margin-bottom: 20px;
background-image: linear-gradient(257deg, rgba(15,138,252,0.4780287114845938) 0%, rgba(0,0,0,1) 56%)!important;
background-size: cover;
background-position: right;
border-radius: 10px; /*Скругление блока урока*/
border: 1px solid var(--less-background-lessblock-border); /*Толщина обводки для блока урока. Чтобы убрать поставьте 0px*/
}
.stylelesson .stylelesson-img {
min-width: 150px;
margin-right: 25px;
}
.stylelesson .stylelesson-img img {
width: 150px;
border: 0px solid var(--less-background-border-image); /*Толщина обводки 2px для картинки урока. Чтобы убрать поставьте 0px*/
border-radius: 10px; /*Скругление картинки урока*/
}
.stylelesson div.stylelesson-text {
padding-top: 1px;
z-index: 1;
}
.stylelesson .catless {
font-size: 20px;
font-weight: bold;
display: block;
color: var(--less-color-title);
font-family: 'Gilroy', sans-serif;
}
.stylelesson .stylelesson_title {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
display: block;
color: var(--less-color-title);
font-family: 'Gilroy', sans-serif;
}
.stylelesson .stylelesson-des {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
line-height: 18.3px;
color: var(--less-color-des);
font-family: 'Gilroy', sans-serif;
}
.stylelesson .stylelesson-stat {
margin-bottom: 10px;
color: var(--less-color-stat);
}
.stylelesson .stylelesson-stat {
margin-top: -60px;
font-size: 14px!important;
position: absolute;
right: 60px;
margin-left: 602px;
font-family: 'Gilroy', sans-serif;
}
.stylelesson .stylelesson_but, .xdget-lessonList .btn {
padding: 12px 40px;
background-image: linear-gradient(45deg, var(--less-background-but1), var(--less-background-but2));
color: var(--less-color-but);
font-weight: bold;
border: none;
border-radius: 7px;
border-color: rgb(255,255,255,0.5)!important;
position: absolute;
right: 50px;
font-size: 16px;
}
.stylelesson .stylelesson_but:hover, .xdget-lessonList .btn:hover {
background-image: linear-gradient(45deg, var(--less-background-but1-hover), var(--less-background-but2-hover));
text-decoration: none;
color: var(--less-color-but-hover);
}
.fon-text {
position: absolute;
font-size: 100px;
font-weight: bold;
color: var(--less-color-fontext);
right: 50px;
transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
z-index: 0;
}
@media (max-width: 500px) {
.stylelesson {
display: block;
padding-top: 20px !important;
}
.fon-text {
display: none;
}
.stylelesson .stylelesson-img img {
width: 100%;
}
.stylelesson div.stylelesson-text {
padding-top: 0px;
padding-left: 0px;
margin-top: 10px;
}
.stylelesson .stylelesson_but {
display: block;
text-align: center;
margin-bottom: -19px;
}
.xdget-lessonList {
margin-left: 5px;
margin-right: 5px;
}
.stylelesson .stylelesson-img {
margin-right: 0px;
}
.stylelesson-stat {
display: none;
}
}
@media (min-width: 701px) {
.stylelesson .stylelesson_but, .xdget-lessonList .btn {
margin-top: 30px !important;
}
.stylelesson div.stylelesson-text {
padding-right: 220px;
}
}
.stylelesson {
background-image: url(https://fs.getcourse.ru/fileservice/file/download/a/522698/sc/227/h/9a0ea04094025aa75a783df0f3aeb27f.png) !important;
border-radius: 15px;
}
.stylelesson-text {
display: flex;
flex-direction: column;
justify-content: center;
}
.stylelesson_but {
margin-top: -55px;
}
.stylelesson .stylelesson-stat {
margin-top: -60px;
font-size: 14px!important;
right: 0px;
margin-right: 50px;
text-align: right;
width: 215px;
}
@media (max-width: 700px) {
.stylelesson .stylelesson_but, .xdget-lessonList .btn {
right: auto !important;
}
.stylelesson .stylelesson_but {
display: initial;
position: relative;
}
.stylelesson .stylelesson-des {
margin: 0 0 30px !important;
}
.stylelesson-text a.stylelesson_but {
margin-top: -20px !important;
}
.stylelesson-stat {
margin-top: -25px !important;
right: auto !important;
width: auto !important;
margin-left: 0 !important;
}
.stylelesson-text {
justify-content: normal;
}
.stylelesson {
padding-bottom: 30px;
padding-top: 55px;
}
}
background: #273144
}
h1, h2 {
color: #fff;
font-family: 'Gilroy';
}
@font-face {
font-family: 'Gilroy';
src:
url('/pl/fileservice/file/download/a/413871/sc/39/h/b441440d84803508c5825aeb26ab356d.eot?#iefix') format('embedded-opentype'),
url('/pl/fileservice/file/download/a/413871/sc/108/h/320786a916d869501a835c3ed26cee8c.woff') format('woff'),
url('/pl/fileservice/file/download/a/413871/sc/267/h/dfa62f56295874ff6f0a6879f45ebea1.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Gilroy';
src:
url('/pl/fileservice/file/download/a/413871/sc/329/h/4cebb4039cdd5d23514a8293a64fafbe.eot?#iefix') format('embedded-opentype'),
url('/pl/fileservice/file/download/a/413871/sc/135/h/f6ba39e7447ff65f988e384c92141f85.woff') format('woff'),
url('/pl/fileservice/file/download/a/413871/sc/102/h/6b7b708308b5347098ed3edda135b592.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Gilroy';
src:
url('/pl/fileservice/file/download/a/413871/sc/219/h/7358c52e14d2aa7bcb014bc34bdd6234.eot?#iefix') format('embedded-opentype'),
url('/pl/fileservice/file/download/a/413871/sc/416/h/1eb9bb0c44ddbd1ca81b487b5be5a43d.woff') format('woff'),
url('/pl/fileservice/file/download/a/413871/sc/141/h/86c36ba0f0d54194eb71f4a732d16a94.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Gilroy';
src:
url('/pl/fileservice/file/download/a/413871/sc/281/h/2f50ff214a68e1c18adf8c0ea32b668a.eot?#iefix') format('embedded-opentype'),
url('/pl/fileservice/file/download/a/413871/sc/218/h/31428f2acb25f2b961a01f0752faaf2c.woff') format('woff'),
url('/pl/fileservice/file/download/a/413871/sc/196/h/3a51e3177b7e38ec29ef6e50109cfc24.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
:root {
--less-background-lesslist: rgba(236, 240, 241, 0);
--less-background-lessblock-border: #414556;
--less-background-lessblock1: rgb(247, 247, 247);
--less-background-lessblock2: rgb(247, 247, 247);
--less-background-lessblock-shadow: rgba(206, 206, 206, 1);
--less-background-border-image: rgb(206, 206, 206);
--less-color-but: white;
--less-background-but1: #0F8AFC;
--less-background-but2: #0F8AFC;
--less-color-but-hover: rgba(255, 255, 255, 1);
--less-background-but1-hover: rgba(45, 45, 45, 1);
--less-background-but2-hover: rgba(45, 45, 45, 1);
--less-background-razdel: rgb(255, 216, 0);
--less-color-razdel: rgba(45, 45, 45, 1);
--less-color-title: white;
--less-color-des: #ccc;
--less-color-stat: white;
--less-color-fontext: rgba(98, 98, 98, 0.11);
--less-video-watch-text: rgb(247, 247, 247);
--less-video-watch-fon: rgb(155, 155, 155);
}
.lesson-list__video-watched {
color: var(--less-video-watch-text);
background-color: var(--less-video-watch-fon);
font-family: 'Gilroy', sans-serif;
}
.stylelesson .stylelesson_but::after {
content: "ПЕРЕЙТИ К УРОКУ"; /*Название кнопки*/
font-family: 'Gilroy', sans-serif;
}
.xdget-lessonList:not(.editable) form {
display: none;
}
.xdget-lessonList {
background-color: var(--less-background-lesslist); /*Фон списка уроков. Удалите, если нужно убрать фон*/
padding: 0px 0px; /*Отступы внутри списка уроков. Поставьте 0 если нужно убрать оступы*/
}
.page-header {
margin: 10px 0 0px;
}
.stylelesson.blocked-less {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
.stylelesson.blocked-less .stylelesson_but {
visibility: hidden;
}
.stylelesson-img.not-image-less {
display: none;
}
.stylelesson {
height: auto;
display: flex;
padding: 45px 50px; /*Отступы внутри блока урока. Поставьте нули, чтобы убрать отступы*/
margin-bottom: 20px;
background-image: linear-gradient(257deg, rgba(15,138,252,0.4780287114845938) 0%, rgba(0,0,0,1) 56%)!important;
background-size: cover;
background-position: right;
border-radius: 10px; /*Скругление блока урока*/
border: 1px solid var(--less-background-lessblock-border); /*Толщина обводки для блока урока. Чтобы убрать поставьте 0px*/
}
.stylelesson .stylelesson-img {
min-width: 150px;
margin-right: 25px;
}
.stylelesson .stylelesson-img img {
width: 150px;
border: 0px solid var(--less-background-border-image); /*Толщина обводки 2px для картинки урока. Чтобы убрать поставьте 0px*/
border-radius: 10px; /*Скругление картинки урока*/
}
.stylelesson div.stylelesson-text {
padding-top: 1px;
z-index: 1;
}
.stylelesson .catless {
font-size: 20px;
font-weight: bold;
display: block;
color: var(--less-color-title);
font-family: 'Gilroy', sans-serif;
}
.stylelesson .stylelesson_title {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
display: block;
color: var(--less-color-title);
font-family: 'Gilroy', sans-serif;
}
.stylelesson .stylelesson-des {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
line-height: 18.3px;
color: var(--less-color-des);
font-family: 'Gilroy', sans-serif;
}
.stylelesson .stylelesson-stat {
margin-bottom: 10px;
color: var(--less-color-stat);
}
.stylelesson .stylelesson-stat {
margin-top: -60px;
font-size: 14px!important;
position: absolute;
right: 60px;
margin-left: 602px;
font-family: 'Gilroy', sans-serif;
}
.stylelesson .stylelesson_but, .xdget-lessonList .btn {
padding: 12px 40px;
background-image: linear-gradient(45deg, var(--less-background-but1), var(--less-background-but2));
color: var(--less-color-but);
font-weight: bold;
border: none;
border-radius: 7px;
border-color: rgb(255,255,255,0.5)!important;
position: absolute;
right: 50px;
font-size: 16px;
}
.stylelesson .stylelesson_but:hover, .xdget-lessonList .btn:hover {
background-image: linear-gradient(45deg, var(--less-background-but1-hover), var(--less-background-but2-hover));
text-decoration: none;
color: var(--less-color-but-hover);
}
.fon-text {
position: absolute;
font-size: 100px;
font-weight: bold;
color: var(--less-color-fontext);
right: 50px;
transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
z-index: 0;
}
@media (max-width: 500px) {
.stylelesson {
display: block;
padding-top: 20px !important;
}
.fon-text {
display: none;
}
.stylelesson .stylelesson-img img {
width: 100%;
}
.stylelesson div.stylelesson-text {
padding-top: 0px;
padding-left: 0px;
margin-top: 10px;
}
.stylelesson .stylelesson_but {
display: block;
text-align: center;
margin-bottom: -19px;
}
.xdget-lessonList {
margin-left: 5px;
margin-right: 5px;
}
.stylelesson .stylelesson-img {
margin-right: 0px;
}
.stylelesson-stat {
display: none;
}
}
@media (min-width: 701px) {
.stylelesson .stylelesson_but, .xdget-lessonList .btn {
margin-top: 30px !important;
}
.stylelesson div.stylelesson-text {
padding-right: 220px;
}
}
.stylelesson {
background-image: url(https://fs.getcourse.ru/fileservice/file/download/a/522698/sc/227/h/9a0ea04094025aa75a783df0f3aeb27f.png) !important;
border-radius: 15px;
}
.stylelesson-text {
display: flex;
flex-direction: column;
justify-content: center;
}
.stylelesson_but {
margin-top: -55px;
}
.stylelesson .stylelesson-stat {
margin-top: -60px;
font-size: 14px!important;
right: 0px;
margin-right: 50px;
text-align: right;
width: 215px;
}
@media (max-width: 700px) {
.stylelesson .stylelesson_but, .xdget-lessonList .btn {
right: auto !important;
}
.stylelesson .stylelesson_but {
display: initial;
position: relative;
}
.stylelesson .stylelesson-des {
margin: 0 0 30px !important;
}
.stylelesson-text a.stylelesson_but {
margin-top: -20px !important;
}
.stylelesson-stat {
margin-top: -25px !important;
right: auto !important;
width: auto !important;
margin-left: 0 !important;
}
.stylelesson-text {
justify-content: normal;
}
.stylelesson {
padding-bottom: 30px;
padding-top: 55px;
}
}
СКОПИРОВАТЬ КОД
CSS
Скопируйте по кнопке ниже и вставьте в стили HTML блока
.progress {
height: 8px;
margin-bottom: 10px;
overflow: hidden;
background-color: #f6f6f6;
border-radius: 10px;
box-shadow: inset 0 0px 0px rgba(0,0,0,.0);
}
.progress-bar, .progress-bar2 {box-shadow: inset 0px 0px 0 rgba(0,0,0,.0) !Important;}
.shadow-block {
--cal-drop-shadow: 0 7px 30px -10px rgba(150, 170, 180, 0.5);
--cal-border: none;
--cal-header-color: white;
--cal-header-background-color: rgba(0, 0, 0, 0.3);
--cal-border-radius: 15px;
box-shadow: var(--cal-drop-shadow);
}
.progress-bar2 {
float: left;
width: 0;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background-color: #337ab7;
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
}
body {
background: #273144
}
h1, h2 {
color: #fff;
font-family: 'Gilroy';
}
@font-face {
font-family: 'Gilroy';
src:
url('/pl/fileservice/file/download/a/413871/sc/39/h/b441440d84803508c5825aeb26ab356d.eot?#iefix') format('embedded-opentype'),
url('/pl/fileservice/file/download/a/413871/sc/108/h/320786a916d869501a835c3ed26cee8c.woff') format('woff'),
url('/pl/fileservice/file/download/a/413871/sc/267/h/dfa62f56295874ff6f0a6879f45ebea1.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Gilroy';
src:
url('/pl/fileservice/file/download/a/413871/sc/329/h/4cebb4039cdd5d23514a8293a64fafbe.eot?#iefix') format('embedded-opentype'),
url('/pl/fileservice/file/download/a/413871/sc/135/h/f6ba39e7447ff65f988e384c92141f85.woff') format('woff'),
url('/pl/fileservice/file/download/a/413871/sc/102/h/6b7b708308b5347098ed3edda135b592.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Gilroy';
src:
url('/pl/fileservice/file/download/a/413871/sc/219/h/7358c52e14d2aa7bcb014bc34bdd6234.eot?#iefix') format('embedded-opentype'),
url('/pl/fileservice/file/download/a/413871/sc/416/h/1eb9bb0c44ddbd1ca81b487b5be5a43d.woff') format('woff'),
url('/pl/fileservice/file/download/a/413871/sc/141/h/86c36ba0f0d54194eb71f4a732d16a94.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Gilroy';
src:
url('/pl/fileservice/file/download/a/413871/sc/281/h/2f50ff214a68e1c18adf8c0ea32b668a.eot?#iefix') format('embedded-opentype'),
url('/pl/fileservice/file/download/a/413871/sc/218/h/31428f2acb25f2b961a01f0752faaf2c.woff') format('woff'),
url('/pl/fileservice/file/download/a/413871/sc/196/h/3a51e3177b7e38ec29ef6e50109cfc24.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
:root {
--less-background-lesslist: rgba(236, 240, 241, 0);
--less-background-lessblock-border: #414556;
--less-background-lessblock1: rgb(247, 247, 247);
--less-background-lessblock2: rgb(247, 247, 247);
--less-background-lessblock-shadow: rgba(206, 206, 206, 1);
--less-background-border-image: rgb(206, 206, 206);
--less-color-but: white;
--less-background-but1: #0F8AFC;
--less-background-but2: #0F8AFC;
--less-color-but-hover: rgba(255, 255, 255, 1);
--less-background-but1-hover: rgba(45, 45, 45, 1);
--less-background-but2-hover: rgba(45, 45, 45, 1);
--less-background-razdel: rgb(255, 216, 0);
--less-color-razdel: rgba(45, 45, 45, 1);
--less-color-title: white;
--less-color-des: #ccc;
--less-color-stat: white;
--less-color-fontext: rgba(98, 98, 98, 0.11);
--less-video-watch-text: rgb(247, 247, 247);
--less-video-watch-fon: rgb(155, 155, 155);
}
.lesson-list__video-watched {
color: var(--less-video-watch-text);
background-color: var(--less-video-watch-fon);
font-family: 'Gilroy', sans-serif;
}
.stylelesson .stylelesson_but::after {
content: "ПЕРЕЙТИ К УРОКУ"; /*Название кнопки*/
font-family: 'Gilroy', sans-serif;
}
.xdget-lessonList:not(.editable) form {
display: none;
}
.xdget-lessonList {
background-color: var(--less-background-lesslist); /*Фон списка уроков. Удалите, если нужно убрать фон*/
padding: 0px 0px; /*Отступы внутри списка уроков. Поставьте 0 если нужно убрать оступы*/
}
.page-header {
margin: 10px 0 0px;
}
.stylelesson.blocked-less {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
.stylelesson.blocked-less .stylelesson_but {
visibility: hidden;
}
.stylelesson-img.not-image-less {
display: none;
}
.stylelesson {
height: auto;
display: flex;
padding: 45px 50px; /*Отступы внутри блока урока. Поставьте нули, чтобы убрать отступы*/
margin-bottom: 20px;
background-image: linear-gradient(257deg, rgba(15,138,252,0.4780287114845938) 0%, rgba(0,0,0,1) 56%)!important;
background-size: cover;
background-position: right;
border-radius: 10px; /*Скругление блока урока*/
border: 1px solid var(--less-background-lessblock-border); /*Толщина обводки для блока урока. Чтобы убрать поставьте 0px*/
}
.stylelesson .stylelesson-img {
min-width: 150px;
margin-right: 25px;
}
.stylelesson .stylelesson-img img {
width: 150px;
border: 0px solid var(--less-background-border-image); /*Толщина обводки 2px для картинки урока. Чтобы убрать поставьте 0px*/
border-radius: 10px; /*Скругление картинки урока*/
}
.stylelesson div.stylelesson-text {
padding-top: 1px;
z-index: 1;
}
.stylelesson .catless {
font-size: 20px;
font-weight: bold;
display: block;
color: var(--less-color-title);
font-family: 'Gilroy', sans-serif;
}
.stylelesson .stylelesson_title {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
display: block;
color: var(--less-color-title);
font-family: 'Gilroy', sans-serif;
}
.stylelesson .stylelesson-des {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
line-height: 18.3px;
color: var(--less-color-des);
font-family: 'Gilroy', sans-serif;
}
.stylelesson .stylelesson-stat {
margin-bottom: 10px;
color: var(--less-color-stat);
}
.stylelesson .stylelesson-stat {
margin-top: -60px;
font-size: 14px!important;
position: absolute;
right: 60px;
margin-left: 602px;
font-family: 'Gilroy', sans-serif;
}
.stylelesson .stylelesson_but, .xdget-lessonList .btn {
padding: 12px 40px;
background-image: linear-gradient(45deg, var(--less-background-but1), var(--less-background-but2));
color: var(--less-color-but);
font-weight: bold;
border: none;
border-radius: 7px;
border-color: rgb(255,255,255,0.5)!important;
position: absolute;
right: 50px;
font-size: 16px;
}
.stylelesson .stylelesson_but:hover, .xdget-lessonList .btn:hover {
background-image: linear-gradient(45deg, var(--less-background-but1-hover), var(--less-background-but2-hover));
text-decoration: none;
color: var(--less-color-but-hover);
}
.fon-text {
position: absolute;
font-size: 100px;
font-weight: bold;
color: var(--less-color-fontext);
right: 50px;
transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
z-index: 0;
}
@media (max-width: 500px) {
.stylelesson {
display: block;
padding-top: 20px !important;
}
.fon-text {
display: none;
}
.stylelesson .stylelesson-img img {
width: 100%;
}
.stylelesson div.stylelesson-text {
padding-top: 0px;
padding-left: 0px;
margin-top: 10px;
}
.stylelesson .stylelesson_but {
display: block;
text-align: center;
margin-bottom: -19px;
}
.xdget-lessonList {
margin-left: 5px;
margin-right: 5px;
}
.stylelesson .stylelesson-img {
margin-right: 0px;
}
.stylelesson-stat {
display: none;
}
}
@media (min-width: 701px) {
.stylelesson .stylelesson_but, .xdget-lessonList .btn {
margin-top: 30px !important;
}
.stylelesson div.stylelesson-text {
padding-right: 220px;
}
}
.stylelesson {
background-image: url(https://fs.getcourse.ru/fileservice/file/download/a/522698/sc/227/h/9a0ea04094025aa75a783df0f3aeb27f.png) !important;
border-radius: 15px;
}
.stylelesson-text {
display: flex;
flex-direction: column;
justify-content: center;
}
.stylelesson_but {
margin-top: -55px;
}
.stylelesson .stylelesson-stat {
margin-top: -60px;
font-size: 14px!important;
right: 0px;
margin-right: 50px;
text-align: right;
width: 215px;
}
@media (max-width: 700px) {
.stylelesson .stylelesson_but, .xdget-lessonList .btn {
right: auto !important;
}
.stylelesson .stylelesson_but {
display: initial;
position: relative;
}
.stylelesson .stylelesson-des {
margin: 0 0 30px !important;
}
.stylelesson-text a.stylelesson_but {
margin-top: -20px !important;
}
.stylelesson-stat {
margin-top: -25px !important;
right: auto !important;
width: auto !important;
margin-left: 0 !important;
}
.stylelesson-text {
justify-content: normal;
}
.stylelesson {
padding-bottom: 30px;
padding-top: 55px;
}
}
background: #273144
}
h1, h2 {
color: #fff;
font-family: 'Gilroy';
}
@font-face {
font-family: 'Gilroy';
src:
url('/pl/fileservice/file/download/a/413871/sc/39/h/b441440d84803508c5825aeb26ab356d.eot?#iefix') format('embedded-opentype'),
url('/pl/fileservice/file/download/a/413871/sc/108/h/320786a916d869501a835c3ed26cee8c.woff') format('woff'),
url('/pl/fileservice/file/download/a/413871/sc/267/h/dfa62f56295874ff6f0a6879f45ebea1.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Gilroy';
src:
url('/pl/fileservice/file/download/a/413871/sc/329/h/4cebb4039cdd5d23514a8293a64fafbe.eot?#iefix') format('embedded-opentype'),
url('/pl/fileservice/file/download/a/413871/sc/135/h/f6ba39e7447ff65f988e384c92141f85.woff') format('woff'),
url('/pl/fileservice/file/download/a/413871/sc/102/h/6b7b708308b5347098ed3edda135b592.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Gilroy';
src:
url('/pl/fileservice/file/download/a/413871/sc/219/h/7358c52e14d2aa7bcb014bc34bdd6234.eot?#iefix') format('embedded-opentype'),
url('/pl/fileservice/file/download/a/413871/sc/416/h/1eb9bb0c44ddbd1ca81b487b5be5a43d.woff') format('woff'),
url('/pl/fileservice/file/download/a/413871/sc/141/h/86c36ba0f0d54194eb71f4a732d16a94.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Gilroy';
src:
url('/pl/fileservice/file/download/a/413871/sc/281/h/2f50ff214a68e1c18adf8c0ea32b668a.eot?#iefix') format('embedded-opentype'),
url('/pl/fileservice/file/download/a/413871/sc/218/h/31428f2acb25f2b961a01f0752faaf2c.woff') format('woff'),
url('/pl/fileservice/file/download/a/413871/sc/196/h/3a51e3177b7e38ec29ef6e50109cfc24.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
:root {
--less-background-lesslist: rgba(236, 240, 241, 0);
--less-background-lessblock-border: #414556;
--less-background-lessblock1: rgb(247, 247, 247);
--less-background-lessblock2: rgb(247, 247, 247);
--less-background-lessblock-shadow: rgba(206, 206, 206, 1);
--less-background-border-image: rgb(206, 206, 206);
--less-color-but: white;
--less-background-but1: #0F8AFC;
--less-background-but2: #0F8AFC;
--less-color-but-hover: rgba(255, 255, 255, 1);
--less-background-but1-hover: rgba(45, 45, 45, 1);
--less-background-but2-hover: rgba(45, 45, 45, 1);
--less-background-razdel: rgb(255, 216, 0);
--less-color-razdel: rgba(45, 45, 45, 1);
--less-color-title: white;
--less-color-des: #ccc;
--less-color-stat: white;
--less-color-fontext: rgba(98, 98, 98, 0.11);
--less-video-watch-text: rgb(247, 247, 247);
--less-video-watch-fon: rgb(155, 155, 155);
}
.lesson-list__video-watched {
color: var(--less-video-watch-text);
background-color: var(--less-video-watch-fon);
font-family: 'Gilroy', sans-serif;
}
.stylelesson .stylelesson_but::after {
content: "ПЕРЕЙТИ К УРОКУ"; /*Название кнопки*/
font-family: 'Gilroy', sans-serif;
}
.xdget-lessonList:not(.editable) form {
display: none;
}
.xdget-lessonList {
background-color: var(--less-background-lesslist); /*Фон списка уроков. Удалите, если нужно убрать фон*/
padding: 0px 0px; /*Отступы внутри списка уроков. Поставьте 0 если нужно убрать оступы*/
}
.page-header {
margin: 10px 0 0px;
}
.stylelesson.blocked-less {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
.stylelesson.blocked-less .stylelesson_but {
visibility: hidden;
}
.stylelesson-img.not-image-less {
display: none;
}
.stylelesson {
height: auto;
display: flex;
padding: 45px 50px; /*Отступы внутри блока урока. Поставьте нули, чтобы убрать отступы*/
margin-bottom: 20px;
background-image: linear-gradient(257deg, rgba(15,138,252,0.4780287114845938) 0%, rgba(0,0,0,1) 56%)!important;
background-size: cover;
background-position: right;
border-radius: 10px; /*Скругление блока урока*/
border: 1px solid var(--less-background-lessblock-border); /*Толщина обводки для блока урока. Чтобы убрать поставьте 0px*/
}
.stylelesson .stylelesson-img {
min-width: 150px;
margin-right: 25px;
}
.stylelesson .stylelesson-img img {
width: 150px;
border: 0px solid var(--less-background-border-image); /*Толщина обводки 2px для картинки урока. Чтобы убрать поставьте 0px*/
border-radius: 10px; /*Скругление картинки урока*/
}
.stylelesson div.stylelesson-text {
padding-top: 1px;
z-index: 1;
}
.stylelesson .catless {
font-size: 20px;
font-weight: bold;
display: block;
color: var(--less-color-title);
font-family: 'Gilroy', sans-serif;
}
.stylelesson .stylelesson_title {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
display: block;
color: var(--less-color-title);
font-family: 'Gilroy', sans-serif;
}
.stylelesson .stylelesson-des {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
line-height: 18.3px;
color: var(--less-color-des);
font-family: 'Gilroy', sans-serif;
}
.stylelesson .stylelesson-stat {
margin-bottom: 10px;
color: var(--less-color-stat);
}
.stylelesson .stylelesson-stat {
margin-top: -60px;
font-size: 14px!important;
position: absolute;
right: 60px;
margin-left: 602px;
font-family: 'Gilroy', sans-serif;
}
.stylelesson .stylelesson_but, .xdget-lessonList .btn {
padding: 12px 40px;
background-image: linear-gradient(45deg, var(--less-background-but1), var(--less-background-but2));
color: var(--less-color-but);
font-weight: bold;
border: none;
border-radius: 7px;
border-color: rgb(255,255,255,0.5)!important;
position: absolute;
right: 50px;
font-size: 16px;
}
.stylelesson .stylelesson_but:hover, .xdget-lessonList .btn:hover {
background-image: linear-gradient(45deg, var(--less-background-but1-hover), var(--less-background-but2-hover));
text-decoration: none;
color: var(--less-color-but-hover);
}
.fon-text {
position: absolute;
font-size: 100px;
font-weight: bold;
color: var(--less-color-fontext);
right: 50px;
transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
z-index: 0;
}
@media (max-width: 500px) {
.stylelesson {
display: block;
padding-top: 20px !important;
}
.fon-text {
display: none;
}
.stylelesson .stylelesson-img img {
width: 100%;
}
.stylelesson div.stylelesson-text {
padding-top: 0px;
padding-left: 0px;
margin-top: 10px;
}
.stylelesson .stylelesson_but {
display: block;
text-align: center;
margin-bottom: -19px;
}
.xdget-lessonList {
margin-left: 5px;
margin-right: 5px;
}
.stylelesson .stylelesson-img {
margin-right: 0px;
}
.stylelesson-stat {
display: none;
}
}
@media (min-width: 701px) {
.stylelesson .stylelesson_but, .xdget-lessonList .btn {
margin-top: 30px !important;
}
.stylelesson div.stylelesson-text {
padding-right: 220px;
}
}
.stylelesson {
background-image: url(https://fs.getcourse.ru/fileservice/file/download/a/522698/sc/227/h/9a0ea04094025aa75a783df0f3aeb27f.png) !important;
border-radius: 15px;
}
.stylelesson-text {
display: flex;
flex-direction: column;
justify-content: center;
}
.stylelesson_but {
margin-top: -55px;
}
.stylelesson .stylelesson-stat {
margin-top: -60px;
font-size: 14px!important;
right: 0px;
margin-right: 50px;
text-align: right;
width: 215px;
}
@media (max-width: 700px) {
.stylelesson .stylelesson_but, .xdget-lessonList .btn {
right: auto !important;
}
.stylelesson .stylelesson_but {
display: initial;
position: relative;
}
.stylelesson .stylelesson-des {
margin: 0 0 30px !important;
}
.stylelesson-text a.stylelesson_but {
margin-top: -20px !important;
}
.stylelesson-stat {
margin-top: -25px !important;
right: auto !important;
width: auto !important;
margin-left: 0 !important;
}
.stylelesson-text {
justify-content: normal;
}
.stylelesson {
padding-bottom: 30px;
padding-top: 55px;
}
}
СКОПИРОВАТЬ КОД
