Eclectic Media Git eclecticmedia.space / master scss / _jarallax.scss
master

Tree @master (Download .tar.gz)

_jarallax.scss @masterraw · history · blame

.jarallax {
  position: relative;
  z-index: 0;
  height: 32em;

	.row { height: 100%; margin: 0; padding: 0 }

	.col-md-6 {
		background-color: $dark-grey-transparent;
	}

	h1, p {
		position: relative;
		color: white;
	}

  @media screen and (min-width: 768px) {
    h1 {
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
    }
    .jarallax-description {
      top: 60%; left: 60%;
      transform: translate(-60%, -60%);
      position: relative;

      font-size: 1.75rem;
    }
  }
  @media screen and (max-width: 767px) {
    h1 {
      top: 20%; left: 20%;
      transform: translate(-20%, -20%);
    }
    .jarallax-description {
      top: 30%; left: 30%;
      transform: translate(-30%, -30%);
      position: relative;

      font-size: 1.75rem;
    }
  }

  p > .btn {
    width: 80%;
    padding: 1rem;
    font-size: 1.5rem;
  }
}

.jarallax > .jarallax-img {
  position: absolute;
  object-fit: cover;
  /* support for plugin https://github.com/bfred-it/object-fit-images */
  font-family: 'object-fit: cover;';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}