<!-- Start Of Hero: Type 1 Dark -->
<section class="rox rox-hero-100 dark">
  <i class="background opacity-2 fixed" style="background-image: url(./resources/backgrounds/bg_04.jpg)"></i>
  <section class="center">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-12 col-lg-4 text-center sr">
          <h6 class="font-weight-bold mb-2 font-fancy">Elegant | Stunning | Fantastic</h6>
          <h1 class="display-1 font-weight-bold sr mb-2">ROX<span class="clr-primary">&</span></h1>
          <p class="font-size-3 font-weight-normal clr-gray-light sr">An elegant Buisness, Tech, or Personal one-page template</p>
          <a class="rox-button-fancy-primary" href="#">Hey A Button</a>
        </div>
      </div>
    </div>
  </section>
</section>
<!-- End Of Hero: Type 1 Dark-->

<!-- Start Of Hero: Type 1 Light-->
<section class="rox rox-hero-100">
  <i class="background opacity-7" style="background-image: url(./resources/backgrounds/bg_07.jpg)"></i>
  <section class="center">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-12 col-lg-4 text-center sr">
          <h6 class="font-weight-bold mb-2 font-fancy">Elegant | Stunning | Fantastic</h6>
          <h1 class="display-1 font-weight-bold sr mb-2">ROX<span class="clr-primary">&</span></h1>
          <p class="font-size-3 font-weight-normal sr">An elegant Buisness, Tech, or Personal one-page template</p>
          <a class="rox-button-fancy-primary" href="#">Hey A Button</a>
        </div>
      </div>
    </div>
  </section>
</section>
<!-- End Of Hero: Type 1 Light-->

<!-- Start Of Hero: Type 2 -->
<section class="rox rox-hero-100 dark">
  <i class="background opacity-2 fixed" style="background-image: url(./resources/backgrounds/bg_05.jpg)"></i>
  <section class="center">
    <div class="container">
      <div class="row">
        <div class="col-12 col-lg-6">
          <div class="sr" data-sr-set="hero2">
            <img src="./resources/logo/logo-dark.png" alt="" class="mb-3 show-dark">
            <img src="./resources/logo/logo.png" alt="" class="mb-3 show-light">
          </div>
          <h2 class="mb-4 sr" data-sr-set="hero2">A Buisness Hero Image. The Image Is Very Work-Centric and Self Motivated</h2>
          <p class="font-weight-normal mb-4 sr" data-sr-set="hero2">The one thing we know about good websites is that ROX& makes a good website. Heres a bit more filler text to make this a paragraph. Lorem ipsum dolor sit amet.</p>
          <div class="sr" data-sr-set="hero2" data-sr-origin="left" data-sr-distance="300px" data-sr-duration="1000" data-sr-scale="0">
            <button class="rox-button-light-outlined ml-0" type="button" name="button">A Button</button>
            <button class="rox-button ml-3" type="button" name="button">A Button</button>
          </div>
        </div>
      </div>
    </div>
  </section>
</section>
<!-- End Of Hero: Type 2 -->

<!-- Start Of Hero: Type 2 Light -->
<section class="rox rox-hero-100">
  <i class="background opacity-8" style="background-image: url(./resources/backgrounds/bg_08.jpg)"></i>
  <section class="center">
    <div class="container">
      <div class="row">
        <div class="col-12 col-lg-6">
          <div class="sr" data-sr-set="hero2l" data-sr-origin="left">
            <img src="./resources/logo/logo-dark.png" alt="" class="mb-3 show-dark">
            <img src="./resources/logo/logo.png" alt="" class="mb-3 show-light">
          </div>
          <h2 class="mb-4 sr" data-sr-set="hero2l">A Buisness Hero Image. The Image Is Very Work-Centric and Self Motivated</h2>
          <p class="font-weight-normal mb-4 sr" data-sr-set="hero2l">The one thing we know about good websites is that ROX& makes a good website. Heres a bit more filler text to make this a paragraph. Lorem ipsum dolor sit amet.</p>
          <div class="sr" data-sr-set="hero2l" data-sr-origin="left" data-sr-distance="300px" data-sr-duration="1000" data-sr-scale="0">
            <button class="rox-button-outlined-dark ml-0" type="button" name="button">A Button</button>
            <button class="rox-button ml-3" type="button" name="button">A Button</button>
          </div>
        </div>
      </div>
    </div>
  </section>
</section>
<!-- End Of Hero: Type 2 Light-->

<!-- Start Of Hero: Type 3 -->
<section class="rox rox-hero-100 dark">
  <i class="background opacity-4 fixed overlay" style="background-image: url(./resources/backgrounds/bg_04.jpg)"></i>
  <section class="center">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-12 col-lg-6 order-12 order-lg-1">
          <img src="./resources/phone_white.png" alt="" class="mx-auto w-50 d-block sr" data-sr-origin="left" data-sr-scale="0" data-sr-distance="100px">
        </div>
        <div class="col-12 d-lg-none order-6 mb-5"></div>
        <div class="col-12 col-lg-4 order-1 order-lg-12">
          <img data-sr-set="hero" src="./resources/logo/logo-dark.png" class="sr mb-3" />
          <h2 data-sr-set="hero" class="mb-4 sr">The best app on the market. Use It!</h2>
          <p data-sr-set="hero" class="sr">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <button data-sr-set="hero" class="rox-button-outline sr ml-0" type="button" name="button" data-sr-origin="right" data-sr-scale="0" data-sr-duration="1000" data-sr-distance="800px">Get It Now</button>
        </div>
      </div>
    </div>
  </section>
</section>
<!-- End Of Hero: Type 3 -->

<!-- Start Of Hero: Type 3 Light -->
<section class="rox rox-hero-100">
  <i class="background opacity-6 fixed" style="background-image: url(./resources/backgrounds/bg_09.jpg)"></i>
  <section class="center">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-12 col-lg-6 order-12 order-lg-1">
          <img src="./resources/phone_black.png" alt="" class="mx-auto w-50 d-block sr" data-sr-origin="left" data-sr-scale="0" data-sr-distance="100px">
        </div>
        <div class="col-12 d-lg-none order-6 mb-5"></div>
        <div class="col-12 col-lg-4 order-1 order-lg-12">
          <img data-sr-set="herol" src="./resources/logo/logo.png" class="sr mb-3" />
          <h2 data-sr-set="herol" class="mb-4 sr">The best app on the market. Use It!</h2>
          <p data-sr-set="herol" class="sr">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <button data-sr-set="herol" class="rox-button-outline sr ml-0" type="button" name="button" data-sr-origin="right" data-sr-scale="0" data-sr-duration="1000" data-sr-distance="800px">Get It Now</button>
        </div>
      </div>
    </div>
  </section>
</section>
<!-- End Of Hero: Type 3 Light -->