<?php

/* @var $this yii\web\View */

$this->title = 'My Yii Application';
?>


<section class="no-mb">
  <!-- *** JUMBOTRON ***
_________________________________________________________ -->
  
  <div class="jumbotron">
    
    <div class="dark-mask"></div>
    
    <div class="container">
      <div class="row mb-small">
        <div class="col-sm-12 text-center">
          <h1>Universal is great</h1>
          <h2>Last week more than 100 companies signed up to help them in their projects.</h2>
        </div>
      </div>
      
      <div class="row">
        <div class="col-sm-6 mb-small">
          <img class="img-responsive" src="img/template-mac.png" alt="">
        </div>
        
        <div class="col-sm-6 text-center-xs">
          <p class="text-uppercase">Business. Corporate. Agency.
            <br/>Portfolio. Blog. E-commerce.
            <br/>We have covered everything.</p>
          <p>See our current packages comparison
            <br/>to choose the right one for you.</p>
          <p><a href="#packages" class="scroll-to btn btn-template-transparent-black">See packages</a>
          </p>
        
        </div>
      </div>
    </div>
  </div>
  
  <!-- *** JUMBOTRON END *** -->
</section>

<section class="bar background-white">
  <div class="container">
    <div class="col-md-12">
      <div class="heading text-center">
        <h2>Our main focus</h2>
      </div>
      
      <div class="row">
        <div class="col-md-4">
          <div class="box-simple">
            <div class="icon">
              <i class="fa fa-desktop"></i>
            </div>
            <h3>Webdesign</h3>
            <p>Fifth abundantly made Give sixth hath. Cattle creature i be don't them behold green moved fowl Moved life us beast good yielding. Have bring.</p>
          </div>
        </div>
        <div class="col-md-4">
          <div class="box-simple">
            <div class="icon">
              <i class="fa fa-print"></i>
            </div>
            <h3>Print</h3>
            <p>Advantage old had otherwise sincerity dependent additions. It in adapted natural hastily is justice. Six draw you him full not mean evil. Prepare garrets it expense windows shewing do an.</p>
          </div>
        </div>
        <div class="col-md-4">
          <div class="box-simple">
            <div class="icon">
              <i class="fa fa-globe"></i>
            </div>
            <h3>SEO and SEM</h3>
            <p>Am terminated it excellence invitation projection as. She graceful shy believed distance use nay. Lively is people so basket ladies window expect.</p>
          </div>
        </div>
      </div>
      
      <div class="row">
        <div class="col-md-4">
          <div class="box-simple">
            <div class="icon">
              <i class="fa fa-lightbulb-o"></i>
            </div>
            <h3>Consulting</h3>
            <p>Fifth abundantly made Give sixth hath. Cattle creature i be don't them behold green moved fowl Moved life us beast good yielding. Have bring.</p>
          </div>
        </div>
        <div class="col-md-4">
          <div class="box-simple">
            <div class="icon">
              <i class="fa fa-envelope-o"></i>
            </div>
            <h3>Email Marketing</h3>
            <p>Advantage old had otherwise sincerity dependent additions. It in adapted natural hastily is justice. Six draw you him full not mean evil. Prepare garrets it expense windows shewing do an.</p>
          </div>
        </div>
        <div class="col-md-4">
          <div class="box-simple">
            <div class="icon">
              <i class="fa fa-user"></i>
            </div>
            <h3>UX</h3>
            <p>Am terminated it excellence invitation projection as. She graceful shy believed distance use nay. Lively is people so basket ladies window expect.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="bar background-pentagon no-mb">
  <div class="container">
    <div class="row showcase">
      <div class="col-md-3 col-sm-6">
        <div class="item">
          <div class="icon"><i class="fa fa-align-justify"></i>
          </div>
          <h4><span class="counter">580</span><br>
            
            Websites</h4>
        </div>
      </div>
      <div class="col-md-3 col-sm-6">
        <div class="item">
          <div class="icon"><i class="fa fa-users"></i>
          </div>
          <h4><span class="counter">100</span><br>
            
            Satisfied Clients</h4>
        </div>
      </div>
      <div class="col-md-3 col-sm-6">
        <div class="item">
          <div class="icon"><i class="fa fa-copy"></i>
          </div>
          <h4><span class="counter">320</span><br>
            
            Projects</h4>
        </div>
      </div>
      <div class="col-md-3 col-sm-6">
        <div class="item">
          <div class="icon"><i class="fa fa-font"></i>
          </div>
          <h4><span class="counter">923</span><br>
            
            Magazines and Brochures</h4>
        </div>
      </div>
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /.bar -->

<section class="bar background-white no-mb">
  <div class="container" data-animate="fadeInUpBig">
    <div class="row">
      <div class="col-md-12">
        <div class="heading text-center">
          <h2>Latest works from our portfolio</h2>
        </div>
        
        <p class="lead">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies
          mi vitae est. Mauris placerat eleifend leo.</p>
        
        
        <div class="row portfolio">
          <div class="col-sm-4">
            <div class="box-image">
              <div class="image">
                <img src="/img/portfolio-1.jpg" alt="" class="img-responsive">
              </div>
              <div class="bg"></div>
              <div class="name">
                <h3><a href="portfolio-detail.html">Portfolio item</a></h3>
              </div>
              <div class="text">
                <p class="hidden-sm">Pellentesque habitant morbi tristique senectus et netus et malesuada</p>
                <p class="buttons">
                  <a href="portfolio-detail.html" class="btn btn-template-transparent-primary">View</a>
                  <a href="#" class="btn btn-template-transparent-primary">Website</a>
                </p>
              </div>
            </div>
            <!-- /.item -->
          
          </div>
          
          <div class="col-sm-4">
            <div class="box-image">
              <div class="image">
                <img src="/img/portfolio-2.jpg" alt="" class="img-responsive">
              </div>
              <div class="bg"></div>
              <div class="name">
                <h3><a href="portfolio-detail.html">Portfolio item</a></h3>
              </div>
              <div class="text">
                <p class="hidden-sm">Pellentesque habitant morbi tristique senectus et netus et malesuada</p>
                <p class="buttons">
                  <a href="portfolio-detail.html" class="btn btn-template-transparent-primary">View</a>
                  <a href="#" class="btn btn-template-transparent-primary">Website</a>
                </p>
              </div>
            </div>
            <!-- /.item -->
          
          </div>
          
          <div class="col-sm-4">
            <div class="box-image">
              <div class="image">
                <img src="/img/portfolio-3.jpg" alt="" class="img-responsive">
              </div>
              <div class="bg"></div>
              <div class="name">
                <h3><a href="portfolio-detail.html">Portfolio item</a></h3>
              </div>
              <div class="text">
                <p class="hidden-sm">Pellentesque habitant morbi tristique senectus et netus et malesuada</p>
                <p class="buttons">
                  <a href="portfolio-detail.html" class="btn btn-template-transparent-primary">View</a>
                  <a href="#" class="btn btn-template-transparent-primary">Website</a>
                </p>
              </div>
            </div>
            <!-- /.item -->
          
          </div>
        
        </div>
        
        
        <div class="see-more">
          <p>Do you want to see more?</p>
          
          <a href="portfolio-4.html" class="btn btn-template-main">See more of our work</a>
        </div>
      
      </div>
    
    </div>
  </div>
</section>

<section class="bar background-gray no-mb">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="heading text-center">
          <h2>Our clients</h2>
        </div>
        
        <ul class="owl-carousel customers">
          <li class="item">
            <img src="/img/customer-1.png" alt="" class="img-responsive">
          </li>
          <li class="item">
            <img src="/img/customer-2.png" alt="" class="img-responsive">
          </li>
          <li class="item">
            <img src="/img/customer-3.png" alt="" class="img-responsive">
          </li>
          <li class="item">
            <img src="/img/customer-4.png" alt="" class="img-responsive">
          </li>
          <li class="item">
            <img src="/img/customer-5.png" alt="" class="img-responsive">
          </li>
          <li class="item">
            <img src="/img/customer-6.png" alt="" class="img-responsive">
          </li>
        </ul>
        <!-- /.owl-carousel -->
      </div>
    
    </div>
  </div>
</section>

<!-- /.bar -->

<section class="bar background-image-fixed-2 no-mb color-white text-center">
  <div class="dark-mask"></div>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="icon icon-lg"><i class="fa fa-file-code-o"></i>
        </div>
        <h1>Do you want to see more?</h1>
        <p class="lead">We have prepared for you more than 40 different HTML pages, including 5 variations of homepage.</p>
        <p class="text-center">
          <a href="index3.html" class="btn btn-template-transparent-black btn-lg">Check other homepage</a>
        </p>
      </div>
    
    </div>
  </div>
</section>