Flex Slider

flex-slider.markdown

Flex Slider

A Pen by KidChronos on CodePen.

License.

script.vue

<template>
  <ul>
    <li
      v-for="(Sky, i) in Info"
      :key="Sky.id"
      :style="`background-image: url(${Sky.backgroundUrl});`"
      role="button"
      :class="active === i ? 'active' : ''"
      @click="() => (active = i)"
    >
      <h3>{{ Sky.name }}</h3>
      <div class="section-content">
        <div class="inner">
          <div class="bio">
            <h2>{{ Sky.name }}</h2>
            <p>
              {{ Sky.description }}
            </p>  
     <div class="container">
      <div class="buttons">
        <a href="https://linktr.ee/sky_multi_asset_finance" class="btn btn-2">Connect With SKY</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    </li>
  </ul>
</template>

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

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

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: 3rem;
    line-height: 3rem;
  }

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

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;

  @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%;
  }
}

.container {
  height: 100%;
  display: flex;
  align-items: left;
  justify-content: left;
}

.buttons {
  display: flex;
  flex-direction: column;
}

.btn {
  text-decoration: none;
  padding: 20px 50px;
  font-size: 1.25rem;
  position: relative;
  margin: px;
}

/* Button 1*/


.btn-2 {
  color: rgb(255, 255, 255);
}

.btn-2::after,
.btn-2::before {
  border: 3px solid rgb(255, 255, 255);
  content: "";
  position: absolute;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  left: 0;
  bottom: 0;
  z-index: -1;
  transition: transform 0.3s ease;
}

.btn-2:hover::after {
  transform: translate(-5px, -5px);
}

.btn-2:hover::before {
  transform: translate(5px, 5px);
}


.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) 900px;
      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,
      Info: [
        {
          name: "SKY MULTI-ASSET FINANCE",
          description: `SKY takes you higher, above the madness of market data overload. But we don’t just hand you the technology and leave you to figure it out alone. We are a community here to support you in your quest to maximize what little spare time you have to master the markets.`,
          Page: {},
          backgroundUrl:
            "https://assets.codepen.io/8287686/sky.png?width=4096&height=2736&format=webp"
        },
        {
          name: "TEAM",
          description: `Here at SKY we have fourteen researchers on our newsletter team and counting. We have also gathered multiple advisors in fields such as Real Estate, Cyber Security, Derivatives Trading and many more. SKY is actively accepting new members so don’t be afraid to contact us.`,
          Page: {},
          backgroundUrl:
            "https://assets.codepen.io/8287686/pexels-satty-singh-3608152.png?width=3000&height=2000&format=auto"
        },
        {
          name: "NEWSLETTER",
          description: `SKY releases newsletters three times weekly, supplemented with videos of technical analyses and more on our YouTube channel. Our team is constantly researching the latest news, trends, and data in our pursuit to help you make the most informed decisions. We welcome, and even at times advocate for, community research— so don't be shy to present your insights. If such information is determined to be of high caliber, we will promote your work and give you the credit that you rightly deserve.
`,
          Page: {},
          backgroundUrl:
            "https://i.ibb.co/MNWyXkM/pexels-david-selbert-6468238.jpg"
        },
        {
          name: "LITEPAPER",
          description: `We will soon be publishing our Litepaper which will articulate what SKY aims to achieve in both short-term and long-term timeframes. Be sure to set alerts on our Twitter account so you'll be among the first to hear the news— being early to SKY opportunities may give you major advantages.`,
          Page: {},
          backgroundUrl:
            "https://assets.codepen.io/8287686/pexels-frank-cone-2258536.png?width=3008&height=2008&format=webp"
        },
        {
          name: "TECHNOLOGY",
          description: `Our tech is groundbreaking in that we are on the frontier of bridging real-world assets onto the blockchain, thereby merging multiple asset classes into one. Many birds, one stone. Why spread yourself thin trying to master various asset classes when you can have the best of all worlds in one killer app? While our products are not yet completed, our developers are cooking up some breakthrough tech we hope you'll agree will be worth the wait.`,
          Page: {},
          backgroundUrl: "https://assets.codepen.io/8287686/pexels-bob-ward-3347244.png?width=2008&height=3008&format=webp"
        },
        {
          name: "MARKETPLACE",
          description: `While we are still a ways out from being able to deliver our products, imagine for a moment a marketplace that offers tokenized versions of real-world assets such as real estate or rare vintage wines. Imagine being able to buy fractions of those assets, all in an on-chain, trustless manner, right from your wallet. This is an idea of what we’re developing at SKY.`,
          Page: {},
          backgroundUrl: "https://assets.codepen.io/8287686/pexels-keith-lobo-4616838.png?width=1970&height=2955&format=webp"
        }
      ]
    };
  },
  methods: {
    nextSlide() {
      if (this.active <= this.Sky.length) {
        this.active = this.active += 3;
      }
    },
    prevSlide() {
      if (this.active > 0) {
        this.active = this.active + -1;
      }
    }
  }
};
</script>