Hero #1

Speed up your workflow and grow sales with Cube

Build better websites. A new template inspired by the world’s best design practices.

Learn more
00:00
00:00
<section class="section-hero bg-primary text-white pb-0 mb-10">
  <div class="container foreground">
    <div class="row justify-content-center align-items-end">
      <div class="col-12">
        <div class="row justify-content-between gutter-3 gutter-lg-6">
          <div class="col-lg-7">
            <h1 class="display-2 font-weight-bold">Speed up your workflow and grow sales with Cube</h1> 
          </div>
          <div class="col-lg-4">
            <p class="mt-1 lead text-secondary">Build better websites. A new template inspired by the world’s best design practices.</p>
            <a href="" class="underline action text-white">Learn more <i class="icon-arrow-up-right"></i></a>
          </div>
        </div>
        <div class="row">
          <div class="col overflow-bottom">
            <video id="player" playsinline controls class="floating">
              <source src="/assets/video/video.mp4" type="video/mp4" />
              <source src="/assets/video/video.webm" type="video/webm" />
            </video>
          </div>
        </div>
      </div>
    </div>
  </div>
  <figure class="canvas">
    <svg width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle data-aos="fade-up" data-aos-delay="200" cx="120%" cy="-40%" r="50%" stroke="black" stroke-opacity=".2" 
      data-center-top="@r: 50%;" 
      data-top-bottom="@r: 70%;"/>
      <circle data-aos="fade-up" data-aos-delay="400" cx="85%" cy="125%" r="75%" stroke="black" stroke-opacity=".2" 
      data-center-top="@r: 75%;" 
      data-top-bottom="@r: 95%;"/>
      <circle data-aos="fade-up" data-aos-delay="600" cx="-25%" cy="125%" r="50%" stroke="black" stroke-opacity=".2" 
      data-center-top="@cx: -25%;" 
      data-top-bottom="@cx: 45%;"/>
    </svg>
  </figure>
</section>

Hero #2

slide 1 of 3
<section class="overflow-hidden slider text-white">
  <div class="carousel-wrap">
    <div class="carousel"
      data-carousel='{"loop": false, "mode": "gallery", "controlsContainer": "#controls-1", "navContainer": "#nav-1"}'>

      <div class="item">
        <div class="container foreground">
          <div class="row vh-100 align-items-center justify-content-center">
            <div class="col-lg-10 text-center">
              <span class="eyebrow mb-2 text-secondary">Unlimited flexibility</span>
              <h1 class="font-weight-bold">How To Design A Simple UI When You Have A Complex Solution</h1>
              <a href="article.html" class="btn btn-rounded btn-outline-white btn-with-icon">Read More <i class="icon-arrow-right"></i></a>
            </div>
          </div>
        </div>
        <figure class="image image-scroll image-overlay" style="background-image: url('assets/images/blog-1.jpg')" 
        data-top-top="transform: scale(1);"
        data-top-bottom="transform: scale(1.1);"></figure>
      </div>

      <div class="item">
        <div class="container foreground">
          <div class="row vh-100 align-items-center justify-content-center">
            <div class="col-lg-10 text-center">
              <span class="eyebrow mb-2 text-secondary">Unlimited flexibility</span>
              <h1 class="font-weight-bold">Ethical Considerations In UX Research: The Need For Training And Review</h1>
              <a href="article.html" class="btn btn-rounded btn-outline-white btn-with-icon">Read More <i class="icon-arrow-right"></i></a>
            </div>
          </div>
        </div>
        <figure class="image image-scroll image-overlay" style="background-image: url('assets/images/coworking-1.jpg')" 
        data-top-top="transform: scale(1);"
        data-top-bottom="transform: scale(1.2);"></figure>
      </div>

      <div class="item">
        <div class="container foreground">
          <div class="row vh-100 align-items-center justify-content-center">
            <div class="col-lg-10 text-center">
              <span class="eyebrow mb-2 text-secondary">Unlimited flexibility</span>
              <h1 class="font-weight-bold">From Design To Developer-Friendly React Code In Minutes With Anima</h1>
              <a href="article.html" class="btn btn-rounded btn-outline-white btn-with-icon">Read More <i class="icon-arrow-right"></i></a>
            </div>
          </div>
        </div>
        <figure class="image image-scroll image-overlay" style="background-image: url('assets/images/faq-1.jpg')" 
        data-top-top="transform: scale(1);"
        data-top-bottom="transform: scale(1.2);"></figure>
      </div>

    </div>


    <div class="slider-thumbs">
      <div class="container">
        <div class="row d-lg-none">
          <div class="col">
            <div id="controls-1" class="tns-controls">
              <button type="button"><i class="icon-arrow-left"></i></button>
              <button type="button"><i class="icon-arrow-right"></i></button>
            </div>
          </div>
        </div>
        <div class="row d-none d-lg-block">
          <div class="col">
            <div id="nav-1" class="carousel" data-carousel='{"gutter": 48, "nav": false, "controls": false, "loop": false, "responsive": {"0": {"items": 1}, "768": {"items": 2}, "1200": {"items": 3}}}'>

              <div class="item">
                <div class="entry">
                  <h3 class="entry-title">How To Design A Simple UI When You Have A Complex Solution</h3>
                </div>
              </div>
              <div class="item">
                <div class="entry">
                  <h3 class="entry-title">Ethical Considerations In UX Research: The Need For Training And Review</h3>
                </div>
              </div>
              <div class="item">
                <div class="entry">
                  <h3 class="entry-title">From Design To Developer-Friendly React Code In Minutes With Anima</h3>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Hero #3

Extensive Interactions

High-fidelity interactive design.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla aperiam, omnis similique

Get Started 
<section class="cover overflow-hidden bg-black text-white">
  <div class="container foreground">
    <div class="row align-items-center justify-content-left justify-content-lg-end vh-lg-100">
      <div class="col-md-8 col-lg-6 pl-lg-10">
        <span class="eyebrow text-primary mb-2">Extensive Interactions</span>
        <h1 class="display-2 font-weight-bold mb-2">High-fidelity interactive design.</h1>
        <p class="lead mb-4 text-secondary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla aperiam, omnis similique</p>
        <a href="" class="btn btn-rounded btn-with-icon btn-primary">Get Started <i class="icon-arrow-up-right"></i></a>
      </div>
    </div>
  </div>
  <div class="container-fluid background">
    <div class="row">
      <div class="col-lg-6 vh-lg-100">
        <figure class="image image-scroll" style="background-image: url('assets/images/product-1.jpg')" 
        data-top-top="transform: translateY(0%);"
        data-top-bottom="transform: translateY(20%);"></figure>
      </div>
    </div>
  </div>
</section>

Hero #4

UX and Full stack development studio

Where Design Meet Functionality.

<section class="cover text-white"
data-top-top="background-color: rgba(43,68,255,1)"
data-top-center="background-color: rgba(235,60,39,1)"
data-top-bottom="background-color: rgba(43,68,255,1)">
  <div class="container d-flex flex-column foreground">
    <div class="row align-items-center justify-content-center vh-100">
      <div class="col-lg-10 text-center">
        <span class="eyebrow text-secondary mb-2">UX and Full stack development studio</span>
        <h1 class="display-1 font-weight-bold">Where Design Meet Functionality.</h1>
      </div>
    </div>
  </div>
  <figure class="canvas">
    <svg width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle data-aos="fade-up" data-aos-delay="150" cx="125%" cy="-25%" r="35%" fill="white" fill-opacity=".05"
      data-top-top="@cy: -25%; @cx: 115%;" 
      data-top-bottom="@cy: 0%; @cx: 105%;"/>
      <circle data-aos="fade-up" data-aos-delay="300" cx="90%" cy="125%" r="75%" fill="black" fill-opacity=".1"
      data-center-top="@r: 75%;" 
      data-top-bottom="@r: 85%;"/>
      <circle data-aos="fade-up" data-aos-delay="450" cx="5%" cy="125%" r="50%" stroke="black" stroke-opacity=".2" 
      data-center-top="@r: 50%;" 
      data-center-bottom="@r: 70%;"/>
    </svg>
  </figure>
  <span class="scroll-down"></span>
</section>

Hero #5

Passion Combined With Experience.

<section class="cover overflow-hidden bg-primary text-white">
  <div class="container foreground">
    <div class="row align-items-center vh-lg-100">
      <div class="col-md-8 col-lg-6">
        <h1 class="display-2 font-weight-bold">Passion Combined With Experience.</h1>
      </div>
    </div>
  </div>
  <div class="container-fluid background" data-aos="fade-in" data-aos-delay="150">
    <div class="row justify-content-end">
      <div class="col-lg-6 vh-100 px-0">
        <div class="row gutter-2 gutter-lg-4">
          <div class="col-6" data-center-top="transform: translateY(0%);" data-top-bottom="transform: translateY(-10%);">
            <img class="mb-2 mb-lg-4 floating" src="assets/images/small-1.jpg" alt="">
            <img class="mb-2 mb-lg-4 floating" src="assets/images/small-2.jpg" alt="">
            <img class="mb-2 mb-lg-4 floating" src="assets/images/small-4.jpg" alt="">
            <img class="mb-2 mb-lg-4 floating" src="assets/images/small-5.jpg" alt="">
          </div>
          <div class="col-6" data-center-top="transform: translateY(-10%);" data-top-bottom="transform: translateY(10%);">
            <img class="mb-2 mb-lg-4 floating" src="assets/images/small-11.jpg" alt="">
            <img class="mb-2 mb-lg-4 floating" src="assets/images/small-6.jpg" alt="">
            <img class="mb-2 mb-lg-4 floating" src="assets/images/small-7.jpg" alt="">
            <img class="mb-2 mb-lg-4 floating" src="assets/images/small-8.jpg" alt="">
            <img class="mb-2 mb-lg-4 floating" src="assets/images/small-9.jpg" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>