<template>
  <ul>
    <li
      v-for="(artist, i) in artists"
      :style="`background-image: url(${artist.backgroundUrl});`"
      role="button"
      :class="active === i ? 'active' : ''"
      @click="() => (active = i)"
    >
      <h3>{{ artist.name }}</h3>
      <div class="section-content">
        <div class="inner">
          <div class="bio">
            <h2>{{ artist.name }}</h2>
            <p>
              {{ artist.description }}
            </p>

            <a
              :href="artist.spotify.profileUrl"
              target="_top"
              class="artist-profile-link md:hidden"
            >
              <img
                src="https://svgshare.com/i/nL2.svg"
                alt="ЖБ сваи"
                width="176"
                height="64"
                loading="lazy"
              />
            </a>
          </div>
        </div>
      </div>
    </li>
  </ul>
</template>

<style lang="scss">
body {
  font-family: "Roboto Condensed", sans-serif;
  color: #fff;
  line-height: 24px;
  font-size: 16px;
}

.bio {
  display: grid;
  grid-auto-flow: row;
  grid-template-rows: min-content;
  grid-gap: 24px;
}

ul {
  display: flex;
  min-height: 750px;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style-type: none;
  width: 100%;
  min-width: 100%;
  flex-direction: column;

  @media only screen and (min-width: 1280px) {
    flex-direction: row;
  }
}

li {
  flex: 1;
  display: flex;
  align-items: stretch;
  cursor: pointer;
  transition: all 0.35s ease;
  cursor: pointer;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  overflow: hidden;

  &:before {
    content: "";
    position: absolute;
    z-index: 20;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 15, 15, 0.75);
  }

  &.active {
    flex: 6;
    cursor: default;

    &:before {
      background: linear-gradient(180deg, rgba(15, 15, 15, 0) 0%, #111111 100%);
    }
  }
}

h2 {
  font-size: 36px;
  line-height: 36px;
  font-weight: 700;
  text-transform: uppercase;

  @media only screen and (min-width: 768px) {
    font-size: 48px;
    line-height: 48px;
  }

  @media only screen and (min-width: 1280px) {
    font-size: 64px;
    line-height: 64px;
  }
}

h3 {
  font-weight: bold;
  white-space: nowrap;
  position: absolute;
  z-index: 30;
  opacity: 1;
  top: 50%;
  left: 50%;
  transition: top 0.35s, opacity 0.15s;
  transform-origin: 0 0;
  font-size: 24px;
  text-transform: uppercase;
  transform: translate(-50%, -50%) rotate(0deg);

  @media only screen and (min-width: 1280px) {
    top: 100%;
    left: 50%;
    font-size: 32px;
    transform: translate(-20px, -50%) rotate(-90deg);
  }

  .active & {
    opacity: 0;
    top: 200%;
  }
}

.section-content {
  position: relative;
  z-index: 30;
  opacity: 0;
  align-self: flex-end;
  width: 100%;
  transition: all 0.35s 0.1s ease-out;

  .active & {
    opacity: 1;
  }

  .inner {
    position: absolute;
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-column-gap: 20px;
    align-items: flex-end;
    left: 0;
    bottom: 0;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.25s ease-out;

    @media only screen and (min-width: 768px) {
      grid-auto-flow: column;
      grid-template-columns: calc(100% - 340px) 300px;
      grid-column-gap: 40px;
      padding: 40px;
    }

    @media only screen and (min-width: 1280px) {
      grid-auto-flow: column;
      grid-template-columns: 460px 200px;
      grid-column-gap: 40px;
      padding: 40px;
    }

    .active & {
      opacity: 1;
    }
  }
}

.artist-profile-link {
  pointer-events: none;

  .active & {
    pointer-events: all;
  }
}
</style>

<script>
export default {
  data() {
    return {
      active: 0,
      artists: [
        {
          name: "ЖБ СВАИ",
          description: `Компания “Эндбери” располагает собственным производством забивных железобетонных свай. Поэтому качество всех составных материалов находится под постоянным пристальным контролем. В основе каждого изделия тяжелый бетон марки М400. Сваи из этого материала сохраняют форму и целостность в течение долгих десятилетий, обладают повышенной прочностью, износостойкостью. `,
          spotify: {
            profileUrl: "https://zabivniesvai.ru/jb",
            embedUrl:
              "https://open.spotify.com/embed/artist/205i7E8fNVfojowcQSfK9m?utm_source=generator"
          },
          backgroundUrl:
            "https://st31.stpulscen.ru/images/product/309/416/239_big.jpg"
        },
        {
          name: "Винтовые сваи",
          description: `Фундамент на основе винтовых свай – одно из наилучших решений в малоэтажном строительстве. Его главное преимущество – легкость изготовления, установки, экономичность и экологичность. В дополнение к этому, он считается универсальным: его используют для строительства различных типов малоэтажных зданий и сооружений. Главное достоинство — он дает возможность вести строительство на любых, даже неровных площадках.`,
          spotify: {
            profileUrl: "https://zabivniesvai.ru/vinti",
            embedUrl:
              "https://open.spotify.com/embed/artist/0aA1GTrIMutjIh4GlPPUVN?utm_source=generator"
          },
          backgroundUrl:
            "https://static.tildacdn.com/tild6335-3164-4632-b338-363765633736/----.jpg"
        },
        {
          name: "Автопарк",
          description: `В арсенале вся необходимая техника для доставки и монтажа. Не берем устройства в аренду — вот секрет стабильно невысоких цен.`,
          spotify: {
            profileUrl: "https://zabivniesvai.ru/avtopark",
            embedUrl:
              "https://open.spotify.com/embed/artist/4OSArit7O2Jaj4mgf3YN7A?utm_source=generator"
          },
          backgroundUrl:
            "https://static.tildacdn.com/tild6166-3931-4262-b433-616366376562/DSC01936-min.JPG"
        },
        {
          name: "Производство",
          description: `Производство свай в соответствии со всеми ограничениями и возможностями участка заказчика, этажности постройки, типом грунта и почвы.`,
          spotify: {
            profileUrl: "https://zabivniesvai.ru/proizvodstvo",
            embedUrl:
              "https://open.spotify.com/embed/artist/2Ltr0s15RyvsjqWzSmiSRs?utm_source=generator"
          },
          backgroundUrl:
            "https://static.tildacdn.com/tild3665-3165-4565-b965-393634303861/---_1.jpg"
        },
        {
          name: "Команда",
          description: `Команда профессионалов объединилась в Andberi для того, чтобы направить свои силы на единую цель: дать людям поистине надежный и долговечный фундамент, который не перетянет на себя значительную часть сметы всего дома. `,
          spotify: {
            profileUrl: "https://zabivniesvai.ru/team",
            embedUrl:
              "https://open.spotify.com/embed/artist/1SFz3S9eSUTc49ysstadiO?utm_source=generator"
          },
          backgroundUrl:
            "https://static.tildacdn.com/tild6561-3162-4665-a437-356362396163/10.JPG"
        }
      ]
    };
  },
  methods: {
    nextSlide() {
      if (this.active <= this.artists.length) {
        this.active = this.active += 1;
      }
    },
    prevSlide() {
      if (this.active > 0) {
        this.active = this.active + -1;
      }
    }
  }
};
</script>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.