Оформление геткурс
August 26, 2022

Стилизуем блок «Актуальные события». Геткурс оформление

Делюсь готовым кодом оформления блока «Актуальные события». Самый простой способ установить код — вставить его на странице тренингов с этим блоком в Настроить вид → Стили и сохранить изменения.

CSS-код:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');  

:root {  
  --colorBlack: #343a40;
  --accentColor: #ff8d79;
  --font:"Montserrat", "Open Sans", "proxima-nova", sans-serif;  
}

/* РАСПИСАНИЕ */
.xdget-lessonSchedule {
  margin: 0 auto 20px auto;
  padding: 20px;
  max-width: 500px;
  border-radius: 15px;
  box-shadow: 0 0 10px rgb(0 0 0 / 15%);

}


.xdget-lessonSchedule .schedule-block { 
  background-color: #ffffff; 
  padding:0 0 0 0; 
}


/* Заголовок Актуальные события */
.xdget-lessonSchedule h3 { 
  margin-bottom: 20px; 
  font-family: var(--font);
  font-weight: 700;
  color: var(--colorBlack); 
} 


.xdget-lessonSchedule .schedule-block .day { 
  margin: 0 0 12px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid #dddddd;
  font-family: var(--font); 
} 

.xdget-lessonSchedule .schedule-block .day:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.xdget-lessonSchedule .schedule-block .day-label { 
  margin-bottom: 10px; 
  font-weight: 700;
  color: var(--colorBlack);
} 


.xdget-lessonSchedule .schedule-block .day .event {
  color: var(--colorBlack);
}

.xdget-lessonSchedule .schedule-block .day .record,
.xdget-lessonSchedule .schedule-block .day .event { 
  padding: 0; 
} 

.xdget-lessonSchedule .schedule-block .day .record:not(:last-child) {
    padding-bottom: 10px;
}

/* Время */
.xdget-lessonSchedule .schedule-block .day .time  { 
  padding: 4px;
  text-align: center; 
  border-radius:20px; 
  font-size: 12px;
  line-height: 1;
  padding: 4px;
  color:#ffffff; 
  background-color: var(--accentColor); 
} 

.xdget-lessonSchedule .schedule-block .day .record .event { 
  padding-left: 15px; 
} 

/* Ссылка на урок */
.xdget-lessonSchedule .schedule-block .event a { 
  color:#677294; 
} 

/* Урок сегодня ссылка*/
.xdget-lessonSchedule .schedule-block .day.today .event a {
  color:var(--accentColor);
}

Ссылки на соц. сети

Телеграм-канал: https://t.me/getcomponent

VK: https://vk.com/getcomponent

Нельзяграм: @maximilia_n