карусель кинопоиска

by Ksenia Polyakova

HTML

<div class="carousel">
  <a href="#" class="carousel__heading-link">
    <h2 class="carousel__heading">КиноПоиск Онлайн</h2>
  </a>
  <div class="carousel__buttons">
    <button class="carousel__button carousel__button_state_active">Популярное</button>
    <button class="carousel__button">Боевики</button>
    <button class="carousel__button">Сериалы</button>
    <button class="carousel__button">Комедии</button>
    <button class="carousel__button">Советское</button>
    <button class="carousel__button">Детям</button>
    <button class="carousel__button">Драмы</button>
  </div>
  <div class="carousel__content">
    <div class="carousel__controls">
      <div class="carousel__control carousel__control_left carousel__control_is-hidden"></div>
      <div class="carousel__control carousel__control_right"></div>
      
    </div>
    <div class="carousel__container">
    <div class="carousel__items">
      <figure class="carousel__item">
      <div class="play"></div>
      <div class="carousel__pic-box">
        <img src="https://source.unsplash.com/random/200x300" alt="" class="carousel__pic">
      </div>
      <figcaption class="carousel__caption">Популярное кино</figcaption>
    </figure>
    <figure class="carousel__item">
      <div class="play"></div>
    
      <div class="carousel__pic-box">
        <img src="https://source.unsplash.com/random/200x300" alt="" class="carousel__pic">
      </div>
      <figcaption class="carousel__caption">Популярное кино с длинным очень длинным названием</figcaption>
    </figure>
    <figure class="carousel__item">
      <div class="play"></div>
    
      <div class="carousel__pic-box">
        <img src="https://source.unsplash.com/random/200x300" alt="" class="carousel__pic">
      </div>
      <figcaption class="carousel__caption">Популярное кино</figcaption>
    </figure>
    <figure class="carousel__item">
      <div class="play"></div>
    
      <div class="carousel__pic-box">
        <img...

CSS

.carousel {
  font-family: sans-serif;
}

.carousel__heading {
  font-size: 1.5em;
}

.carousel__heading-link {
  color: #252525;
  text-decoration: none;
}

.carousel__heading-link:hover {
  color: red;
}

.carousel__buttons {}

.carousel__button {
  border: 1px solid lightgray;
  background-color: lightgray;
  padding: 5px 10px;
  border-radius: 3px;
  margin-right: 3px;
}

.carousel__button:last-child {
  margin: 0;
}

.carousel__button_state_active,
.carousel__button:hover {
  color: white;
  background-color: #252525;
}

.carousel__button:hover {
  cursor: pointer;
}

.carousel__content {
  position: relative;
}

.carousel__controls {
  position: absolute;
  z-index: 3;
  width: 700px;
  height: 0;
  top: 80px;
  box-sizing: border-box;
}

.carousel__control {
  position: absolute;
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  border-radius: 50%;
  background-color: white;
  opacity: 0.6;
  transition: opacity 0.5s linear;
}

.carousel__control:hover {
  cursor: pointer;
  opacity: 1;
}

.carousel__control_left {
  left: 10px;
}

.carousel__control_left::before {
  content:'←';
}

.carousel__control_right {
  right: 10px;
}

.carousel__control_right::before {
  content: '→';
}

.carousel__control_is-hidden {
  display: none;
}

.carousel__container {
  margin-top: 20px;
  overflow-x: hidden;
  max-width: 700px;
  min-height: 400px;
  position: relative;
}

.carousel__items {
  width: 3000px;
  padding-top: 20px;
  position: absolute;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  top: 0;
}

.carousel__item {
  font-size: 0;
  margin: 0 5px 0 0;
  display: flex;
  flex-direction: column;
  max-width: 150px;
  box-sizing: border-box;
  transition: transform 0.3s linear;
  position: relative;
}

.play {
  position: absolute;
  top: 80px;
  left: 60px;
  content: '>';
  display: block;
  width: 25px;
  height: 30px;
  background-color: white;
  border-radius: 5px 0 0...