style.scss

* {
  padding: 0;
  margin: 0;
  list-style: none;
  border: 0;
  outline: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

body {
  background: #00ff00;
}

.youtube-subscribe {
  position: fixed;
  bottom: 20px;
  left: 50%;
  background: #fff;
  width: 90%;
  transform: translate(-50%, calc(100% + 60px));
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 40px;
  border-radius: 10px;
  transition: 300ms linear all;
  &.active {
      transform: translate(-50%, -20px);
  }
  .channel-info {
    display: flex;
    align-items: center;
    img {
      height: 120px;
      border-radius: 50%;
      margin-right: 25px;
    }
    h3 {
      font-size: 46px;
      font-weight: 900;
      padding-bottom: 10px;
    }
    .subscribers {
      font-size: 25px;
      letter-spacing: 1px;
      opacity: 0.5;
    }
  }
  .channel-actions {
    .subscribe-btn {
      background: #c00;
      height: 70px;
      padding: 0 50px;
      font-size: 34px;
      color: #fff;
      border-radius: 7px;
      cursor: pointer;
      font-weight: 900;
    }
    .subscribed-btn {
      background: #0000000d;
      height: 70px;
      padding: 0 50px;
      font-size: 34px;
      color: #aaa;
      border-radius: 7px;
      cursor: pointer;
      font-weight: 900;
    }
    > div {
      display: flex;
      align-items: center;
      .icon {
        width: 75px;
        height: 60px;
        cursor: pointer;
        svg {
          fill: #909090;
        }
      }
    }
  }
}