index.html

* {
  margin: 0; /* сбрасываем внешние отступы */
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif; /* устанавливаем тип шрифта */
}
.clear {
  clear: both; /* сброс обтекания */
}
main {
  background-image: url(img/background.png); /* ставим фоновое изображение */
  background-size: cover; /* растягиваем фон по размерам блока */
  background-repeat: no-repeat; /* запрещаем картинке повторяться */
  background-position: center; /* выравниваем ее по центру каждой оси */
  min-height: 100vh; /* минимальная высота блока = высоте устройства */
  padding-top: 40px;
}
.container {
  max-width: 1100px; /* максимально возможная ширина блока 1100 пикселей */
  margin: 0 auto; /* размещаем блок по центру экрана */
}
.left-block {
  width: 630px; /* задаем ширину блока */
  float: left; /* задаем поток обтекания слева */
}
.right-block {
  width: 280px; /* задаем ширину блока */
  float: right; /* задаем поток обтекания справа */
}

/* new */

.container:after {
  content: '';
  display: block;
  clear: both;
}
.logo {
  margin-bottom: 80px;
}

.left-block-content {
  padding-left: 80px;
}
.top-img img {
  vertical-align: middle;
  margin-bottom: 12px;
}

.raiting-holder {
  width: 170px;
  margin-top: 20px;
  margin-bottom: 30px;
}
.raiting-holder:after {
  content: '';
  display: block;
  clear: both;
}
.btn {
  background: linear-gradient(90deg,#0D0F42 -2.98%,rgba(9, 14, 113, 0.73) 50%);
  border-radius: 6px;
  display: block;
  width: 40px;
  height: 40px;
  float: left;
  margin-top: 4px;
}
.btn img {
  margin: auto;
  display: block;
  width: 24px;
  height: 100%
}
.raiting-block {
  float: right;
  color: #FFFFFF;
}
.raiting-block__text {
  display: block;
}
.raiting-value img, span {
  vertical-align: middle;
}
.raiting-value img {
  transition: 0.4s;
  filter: grayscale(100%);
}
.raiting-value img:hover {
  filter: grayscale(0%);
  cursor: pointer;
}
.left-text {
  font-style: normal;
  font-weight: 400;
  font-size: 21px;
  line-height: 1.4;
  color: #FFFFFF;
}

/* right-block */

.block-title {
  color: #ffffff;
  text-align: center;
  font-size: 32px;
}
.row:after {
  content: '';
  display: block;
  clear: both;
}
.img-holder {
  position: relative;
  margin-top: 16px;
}
.img-holder:after {
  content: '';
  display: block;
  clear: both;
}
.fl {float: left;}
.fr {float: right;}
.play-btn {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  margin: 0;
  width: 40px;
  transition: 0.2s;
}
.play-btn:hover {
  width: 60px;
  cursor: pointer;
}
.avatar-logo {
  position: absolute;
  top: 20px;
  right: 40px;
}
.bot-shadow {
  position: absolute;
  width: 100%;
  height: 130px;
  bottom: 0;
  background: linear-gradient(180deg, rgba(11, 16, 26, 0) 38.02%, #0B101A 89.58%);
  border-radius: 15px;
}