Appearance

Image Boxes ​

Click to preview the Image Boxes demo. View demo

Extensive documentation ​

Code:

html
<div class="tablet_width">
  <div class="row ">
    <div class="col-sm-3">
      <div class="imgbox01"><img alt="" class="img-responsive" src="/portals/13/Features-Images/imagebox01.jpg" />
        <div class="imgbox01-con">
          <div class="line"></div>
          <h3>Responsive Framework</h3>
          <p>Donec non metus enim. Proin vitae tristique lacus, Phasellus vitae metus.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="imgbox01"><img alt="" class="img-responsive" src="/portals/13/Features-Images/imagebox02.jpg" />
        <div class="imgbox01-con">
          <div class="line"></div>
          <h3>Unlimited Colors</h3>
          <p>Donec non metus enim. Proin vitae tristique lacus, Phasellus vitae metus.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="imgbox01"><img alt="" class="img-responsive" src="/portals/13/Features-Images/imagebox03.jpg" />
        <div class="imgbox01-con">
          <div class="line"></div>
          <h3>Advanced Typography</h3>
          <p>Donec non metus enim. Proin vitae tristique lacus, Phasellus vitae metus.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="imgbox01"><img alt="" class="img-responsive" src="/portals/13/Features-Images/imagebox04.jpg" />
        <div class="imgbox01-con">
          <div class="line"></div>
          <h3>Extensive documentation</h3>
          <p>Donec non metus enim. Proin vitae tristique lacus, Phasellus vitae metus.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Great Flexibility ​

Code:

html
<div class="tablet_width">
  <div class="row">
    <div class="col-sm-3">
      <div class="imgbox02"><img alt="" src="/Portals/13/Features-Images/imagebox05.jpg" />
        <div class="imgbox02-con">
          <h3>Richer Interface</h3>
          <p>Phasellus vitae metus vitae sapien pharetra vestibulum. Ut lacus mi,</p>
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="imgbox02"><img alt="" src="/Portals/13/Features-Images/imagebox06.jpg" />
        <div class="imgbox02-con">
          <h3>Easy Operation</h3>
          <p>Phasellus vitae metus vitae sapien pharetra vestibulum. Ut lacus mi,</p>
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="imgbox02"><img alt="" src="/Portals/13/Features-Images/imagebox07.jpg" />
        <div class="imgbox02-con">
          <h3>Advanced Options</h3>
          <p>Phasellus vitae metus vitae sapien pharetra vestibulum. Ut lacus mi,</p>
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="imgbox02"><img alt="" src="/Portals/13/Features-Images/imagebox08.jpg" />
        <div class="imgbox02-con">
          <h3>Great Flexibility</h3>
          <p>Phasellus vitae metus vitae sapien pharetra vestibulum. Ut lacus mi,</p>
        </div>
      </div>
    </div>
  </div>
</div>

Standard Demos ​

Code:

html
<div class="imgbox03-bg01 pt-20">
  <div class="container  pt-60 pb-60">
    <div class="row">
      <div class="col-sm-4">
        <div class="imgbox03"><img alt="" src="/Portals/13/Features-Images/imagebox09.jpg" />
          <div class="imgbox03-con">
            <h3>Site Layout</h3>
            <p>Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorp. Aenean tempor ullamcorper leo.</p>
            <div class="line"></div>
            <a class="dg-btn-2 radius-3px btn-white hover-borland" href="#">Read More</a></div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="imgbox03"><img alt="" src="/Portals/13/Features-Images/imagebox10.jpg" />
          <div class="imgbox03-con">
            <h3>Clean Code</h3>
            <p>Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorp. Aenean tempor ullamcorper leo.</p>
            <div class="line"></div>
            <a class="dg-btn-2 radius-3px btn-white hover-borland" href="#">Read More</a></div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="imgbox03"><img alt="" src="/Portals/13/Features-Images/imagebox11.jpg" />
          <div class="imgbox03-con">
            <h3>Standard Demos</h3>
            <p>Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorp. Aenean tempor ullamcorper leo.</p>
            <div class="line"></div>
            <a class="dg-btn-2 radius-3px btn-white hover-borland" href="#">Read More</a></div>
        </div>
      </div>
    </div>
  </div>
</div>

Versatile Module ​

Code:

html
<div class="row">
  <div class="col-sm-3">
    <div class="imgbox04"><img alt="" src="/Portals/13/Features-Images/imagebox12.png" />
      <div class="imgbox04-con">
        <h3>Advanced Technology</h3>
        <p>This beautiful</p>
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="imgbox04"><img alt="" src="/Portals/13/Features-Images/imagebox13.png" />
      <div class="imgbox04-con">
        <h3>Various Interfaces</h3>
        <p>This beautiful</p>
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="imgbox04"><img alt="" src="/Portals/13/Features-Images/imagebox14.png" />
      <div class="imgbox04-con">
        <h3>Simple Forms</h3>
        <p>This beautiful</p>
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="imgbox04"><img alt="" src="/Portals/13/Features-Images/imagebox15.png" />
      <div class="imgbox04-con">
        <h3>Versatile Module</h3>
        <p>This beautiful</p>
      </div>
    </div>
  </div>
</div>

Simple Forms ​

Code:

html
<div class="row">
  <div class="col-sm-4">
    <div class="imgbox05"><img alt="" src="/Portals/13/Features-Images/imagebox16.jpg" />
      <div class="imgbox05-con">
        <h3>Various Interfaces</h3>
        <p>Nullam ut tempor eros. Donec faucibus, velit et imperdiet aliquam, lacus velit luctus urna, vitae porttitor orci libero id felis. Aliquam ut arcu id dui aliquam accumsan. Aliquam lobortis odio at diam rhoncus,</p>
        <div class="line"></div>
        <a class="dg-btn-1 btn-gray hover-borland size-xl" href="#">View More</a></div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="imgbox05"><img alt="" src="/Portals/13/Features-Images/imagebox17.jpg" />
      <div class="imgbox05-con">
        <h3>Multiple Headers</h3>
        <p>Nullam ut tempor eros. Donec faucibus, velit et imperdiet aliquam, lacus velit luctus urna, vitae porttitor orci libero id felis. Aliquam ut arcu id dui aliquam accumsan. Aliquam lobortis odio at diam rhoncus,</p>
        <div class="line"></div>
        <a class="dg-btn-1 btn-gray hover-borland size-xl" href="#">View More</a></div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="imgbox05"><img alt="" src="/Portals/13/Features-Images/imagebox18.jpg" />
      <div class="imgbox05-con">
        <h3>Simple Forms</h3>
        <p>Nullam ut tempor eros. Donec faucibus, velit et imperdiet aliquam, lacus velit luctus urna, vitae porttitor orci libero id felis. Aliquam ut arcu id dui aliquam accumsan. Aliquam lobortis odio at diam rhoncus,</p>
        <div class="line"></div>
        <a class="dg-btn-1 btn-gray hover-borland size-xl" href="#">View More</a></div>
    </div>
  </div>
</div>

Great Flexibility ​

Code:

html
<div class="clearfix">
  <div class="imgbox06"><img alt="" src="/Portals/13/Features-Images/imagebox19.jpg" />
    <div class="imgbox06-con">
      <h3>Richer Interface</h3>
      <p>Nullam ut tempor eros. Donec faucibus, velit et imperdiet aliquam, lacus velit luctus urna, vitae porttitor orci libero id felis.</p>
      <a class="btn" href="#">Read more></a></div>
  </div>
  <div class="imgbox06"><img alt="" src="/Portals/13/Features-Images/imagebox20.jpg" />
    <div class="imgbox06-con">
      <h3>Easy Operation</h3>
      <p>Nullam ut tempor eros. Donec faucibus, velit et imperdiet aliquam, lacus velit luctus urna, vitae porttitor orci libero id felis.</p>
      <a class="btn" href="#">Read more></a></div>
  </div>
  <div class="imgbox06"><img alt="" src="/Portals/13/Features-Images/imagebox21.jpg" />
    <div class="imgbox06-con">
      <h3>Advanced Options</h3>
      <p>Nullam ut tempor eros. Donec faucibus, velit et imperdiet aliquam, lacus velit luctus urna, vitae porttitor orci libero id felis.</p>
      <a class="btn" href="#">Read more></a></div>
  </div>
  <div class="imgbox06"><img alt="" src="/Portals/13/Features-Images/imagebox22.jpg" />
    <div class="imgbox06-con">
      <h3>Great Flexibility</h3>
      <p>Nullam ut tempor eros. Donec faucibus, velit et imperdiet aliquam, lacus velit luctus urna, vitae porttitor orci libero id felis.</p>
      <a class="btn" href="#">Read more></a></div>
  </div>
</div>

Multiple Homepages ​

Code:

html
<div class="row">
  <div class="col-sm-4">
    <div class="imgbox07">
      <div class="imgbox07-icon color-1"><span><em class="fa fa-thumbs-o-up"></em></span> <img alt="" src="/Portals/13/Features-Images/imagebox23.jpg" /></div>
      <div class="imgbox07-con">
        <h3>Endlessly Customizable</h3>
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.</p>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="imgbox07">
      <div class="imgbox07-icon color-2"><span><em class="fa fa-heart-o"></em></span> <img alt="" src="/Portals/13/Features-Images/imagebox24.jpg" /></div>
      <div class="imgbox07-con">
        <h3>Incredible Short Codes</h3>
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.</p>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="imgbox07">
      <div class="imgbox07-icon color-3"><span><em class="fa fa-lemon-o"></em></span> <img alt="" src="/Portals/13/Features-Images/imagebox25.jpg" /></div>
      <div class="imgbox07-con">
        <h3>Multiple Homepages</h3>
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.</p>
      </div>
    </div>
  </div>
</div>

Great Flexibility ​

Code:

html
<div class="tablet_width">
  <div class="row">
    <div class="col-sm-3">
      <div class="imgbox08"><img alt="" src="/Portals/13/Features-Images/imagebox26.jpg" />
        <div class="imgbox08-con">
          <h3>Richer Interface</h3>
          <p>Etiam aliquet massa et lorem. Mauris dapibus lacuauctor risus. Aenean tempor ullamcorper leo admiation.</p>
          <a class="dg-btn-2 btn-accent btn-silver hover-borland" href="#">See More</a></div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="imgbox08"><img alt="" src="/Portals/13/Features-Images/imagebox27.jpg" />
        <div class="imgbox08-con">
          <h3>Easy Operation</h3>
          <p>Etiam aliquet massa et lorem. Mauris dapibus lacuauctor risus. Aenean tempor ullamcorper leo admiation.</p>
          <a class="dg-btn-2 btn-accent btn-silver hover-borland" href="#">See More</a></div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="imgbox08"><img alt="" src="/Portals/13/Features-Images/imagebox28.jpg" />
        <div class="imgbox08-con">
          <h3>Advanced Options</h3>
          <p>Etiam aliquet massa et lorem. Mauris dapibus lacuauctor risus. Aenean tempor ullamcorper leo admiation.</p>
          <a class="dg-btn-2 btn-accent btn-silver hover-borland" href="#">See More</a></div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="imgbox08"><img alt="" src="/Portals/13/Features-Images/imagebox29.jpg" />
        <div class="imgbox08-con">
          <h3>Great Flexibility</h3>
          <p>Etiam aliquet massa et lorem. Mauris dapibus lacuauctor risus. Aenean tempor ullamcorper leo admiation.</p>
          <a class="dg-btn-2 btn-accent btn-silver hover-borland" href="#">See More</a></div>
      </div>
    </div>
  </div>
</div>

Powerful Features ​

Code:

html
<div class="imgbox09-bg02 pt-20">
  <div class="container pt-60 pb-60">
    <div class="row">
      <div class="col-sm-4">
        <div class="imgbox09 clearfix"><img alt="" src="/Portals/13/Features-Images/imagebox30.jpg" />
          <div class="imgbox09-con">
            <h3>Advanced Technology</h3>
            <p>Praesent dapibus eleifend augue, eget sollicitudin velit malesuada eu. Aliquam blandit, diam ac venenatis feugiat sed magna.</p>
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="imgbox09 clearfix"><img alt="" src="/Portals/13/Features-Images/imagebox31.jpg" />
          <div class="imgbox09-con">
            <h3>Various Interfaces</h3>
            <p>Praesent dapibus eleifend augue, eget sollicitudin velit malesuada eu. Aliquam blandit, diam ac venenatis feugiat sed magna.</p>
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="imgbox09 clearfix"><img alt="" src="/Portals/13/Features-Images/imagebox32.jpg" />
          <div class="imgbox09-con">
            <h3>Multiple Headers</h3>
            <p>Praesent dapibus eleifend augue, eget sollicitudin velit malesuada eu. Aliquam blandit, diam ac venenatis feugiat sed magna.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-4">
        <div class="imgbox09 clearfix"><img alt="" src="/Portals/13/Features-Images/imagebox33.jpg" />
          <div class="imgbox09-con">
            <h3>Simple Forms</h3>
            <p>Praesent dapibus eleifend augue, eget sollicitudin velit malesuada eu. Aliquam blandit, diam ac venenatis feugiat sed magna.</p>
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="imgbox09 clearfix"><img alt="" src="/Portals/13/Features-Images/imagebox34.jpg" />
          <div class="imgbox09-con">
            <h3>Versatile Module</h3>
            <p>Praesent dapibus eleifend augue, eget sollicitudin velit malesuada eu. Aliquam blandit, diam ac venenatis feugiat sed magna.</p>
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="imgbox09 clearfix"><img alt="" src="/Portals/13/Features-Images/imagebox35.jpg" />
          <div class="imgbox09-con">
            <h3>Powerful Features</h3>
            <p>Praesent dapibus eleifend augue, eget sollicitudin velit malesuada eu. Aliquam blandit, diam ac venenatis feugiat sed magna.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Image Box Style 10 ​

Code:

html
<div class="row ">
  <div class="col-sm-6">
    <div class="imgbox10 clearfix">
      <div class="imgbox10-left"><img alt="" src="/Portals/13/Features-Images/imagebox36.jpg" /></div>
      <div class="imgbox10-right">
        <h2>Endlessly Customizable</h2>
        <p>Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
        <a class="dg-btn-1 btn-accent size-xl radius-3px hover-white" href="#">Look For More</a></div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="imgbox10 clearfix">
      <div class="imgbox10-left"><img alt="" src="/Portals/13/Features-Images/imagebox37.jpg" /></div>
      <div class="imgbox10-right">
        <h2>Multiple Homepages</h2>
        <p>Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
        <a class="dg-btn-1 btn-accent size-xl radius-3px hover-white" href="#">Look For More</a></div>
    </div>
  </div>
</div>
<div class="row ">
  <div class="col-sm-6">
    <div class="imgbox10 clearfix">
      <div class="imgbox10-left"><img alt="" src="/Portals/13/Features-Images/imagebox38.jpg" /></div>
      <div class="imgbox10-right">
        <h2>Endlessly Customizable</h2>
        <p>Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
        <a class="dg-btn-1 btn-accent size-xl radius-3px hover-white" href="#">Look For More</a></div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="imgbox10 clearfix">
      <div class="imgbox10-left"><img alt="" src="/Portals/13/Features-Images/imagebox39.jpg" /></div>
      <div class="imgbox10-right">
        <h2>Multiple Homepages</h2>
        <p>Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
        <a class="dg-btn-1 btn-accent size-xl radius-3px hover-white" href="#">Look For More</a></div>
    </div>
  </div>
</div>